/* Mobile UI toolbar – fixed at bottom, single row, equal-width buttons. Above all modals. */
.mobile-toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: stretch;
  gap: 0.25rem;
  padding: 0.45rem 0.35rem;
  padding-bottom: max(0.45rem, env(safe-area-inset-bottom));
  background: #0a1a1d;
  border-top: 3px solid #0a1a1d;
  z-index: 100001;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
}

/* Top toolbar – section tabs when inside Business / Loyalty / Inventory / Products */
.mobile-toolbar.mobile-toolbar-top {
  top: 0;
  bottom: auto;
  border-top: none;
  padding-top: max(0.45rem, env(safe-area-inset-top));
  padding-bottom: 0.45rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Section-specific top toolbar background (bottom bar stays teal) */
.mobile-toolbar.mobile-toolbar-top--business {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border-bottom: 3px solid #0f3d43;
}

.mobile-toolbar.mobile-toolbar-top--loyalty {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border-bottom: 3px solid #0a5a7a;
}

.mobile-toolbar.mobile-toolbar-top--inventory {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border-bottom: 3px solid #004406;
}

.mobile-toolbar.mobile-toolbar-top--products {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border-bottom: 3px solid #350352;
}

.mobile-toolbar-btn {
  flex: 1 1 0;
  min-width: 0;
  color: #fff;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 9999px;
  padding: 0.5rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: 'The Wanters DEMO', var(--font-family), serif;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  background: transparent;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.mobile-toolbar-btn:active {
  transform: scale(0.97);
}

.mobile-toolbar-btn.active {
  box-shadow: 0 0 0 2px #f7ede2;
}

/* Button colours: 1=teal, 2=light blue, 3=green, 4=purple, 5=orange, 6=red */
.mobile-toolbar-btn.tb-1 {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
}

.mobile-toolbar-btn.tb-2 {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
}

.mobile-toolbar-btn.tb-3 {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
}

.mobile-toolbar-btn.tb-4 {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
}

.mobile-toolbar-btn.tb-5 {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.mobile-toolbar-btn.tb-6 {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

/* Main content padding when toolbar is visible – push content above the bottom toolbar */
body.mobile-ui-active main.mobile-toolbar-visible {
  padding-bottom: 72px;
}

@media (min-height: 600px) {
  body.mobile-ui-active main.mobile-toolbar-visible {
    padding-bottom: max(72px, env(safe-area-inset-bottom) + 56px);
  }
}

/* Main content padding when top toolbar is visible (section page) */
body.mobile-ui-active main.mobile-toolbar-top-visible {
  padding-top: 72px;
}

@media (min-height: 600px) {
  body.mobile-ui-active main.mobile-toolbar-top-visible {
    padding-top: max(72px, env(safe-area-inset-top) + 56px);
  }
}

/* Mobile UI switch – same structure and look as theme switch; thumb positions for PC / Mobile */
.switch-thumb.pc-position.two-position {
  left: 2px;
  background: #fff3e0;
  border: 1px solid #bbb;
}

.switch-thumb.mobile-position.two-position {
  left: 46px;
  background: #424242;
  border: 1px solid #bbb;
}

/* Match theme switch responsive sizes (same as light-position / dark-position at 768px) */
@media (max-width: 768px) {
  .switch-thumb.pc-position.two-position {
    left: 2px;
  }
  .switch-thumb.mobile-position.two-position {
    left: 42px;
  }
}

/* Landing: row of theme + mobile toggle – same level, lowered together */
.landing-toggles-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 8rem;
  margin-bottom: 2rem;
}

.landing-screen .landing-toggles-row .theme-switch-container {
  margin-top: 0;
  margin-bottom: 0;
}

/* Reusable row for theme + PC/Mobile toggle (admin, customer, etc.) */
.toggles-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
/* Error Modal Styles */
.error-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 2rem;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(4px);
  }
}

.error-modal-container {
  background: linear-gradient(135deg, #f7ede2 0%, #f5f5dc 100%);
  border: 3px solid #8d6e63;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  animation: slideIn 0.4s ease-out;
  position: relative;
}

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

.error-modal-header {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border-bottom: 3px solid #0a1a1d;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

.error-icon {
  width: 40px;
  height: 40px;
  color: #ff6b6b;
  flex-shrink: 0;
}

.error-icon svg {
  width: 100%;
  height: 100%;
}

.error-modal-title {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  flex: 1;
}

.error-modal-close {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.error-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.error-modal-close svg {
  width: 24px;
  height: 24px;
}

.error-modal-content {
  padding: 2rem;
  max-height: 60vh;
  overflow-y: auto;
}

.error-summary {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid #8d6e63;
  border-radius: 12px;
}

.error-summary-title {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  text-align: center;
}

.error-summary-text {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  text-align: center;
  background: rgba(255, 107, 107, 0.1);
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid #ff6b6b;
}

.error-details {
  margin-bottom: 2rem;
}

.error-details-title {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  text-align: center;
}

.error-details-content {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #8d6e63;
  border-radius: 8px;
  padding: 1rem;
  max-height: 200px;
  overflow-y: auto;
}

.error-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(139, 110, 99, 0.2);
}

.error-detail-item:last-child {
  border-bottom: none;
}

.error-detail-label {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 0.9rem;
  font-weight: 600;
}

.error-detail-value {
  color: #3e2723;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  background: rgba(0, 0, 0, 0.05);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  word-break: break-all;
  line-height: 1.4;
}

.error-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.error-action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 700;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 160px;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.error-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.error-action-btn:active {
  transform: translateY(0);
}

.error-action-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.error-copy-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #ffffff;
  border: 2px solid #3e2723;
}

.error-copy-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #8d6e63 100%);
}

.error-refresh-btn {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: #ffffff;
  border: 2px solid #2980b9;
}

.error-refresh-btn:hover {
  background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
}

.error-home-btn {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: #ffffff;
  border: 2px solid #229954;
}

.error-home-btn:hover {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

/* Responsive Design */
@media (max-width: 768px) {
  .error-modal-overlay {
    padding: 1rem;
  }
  
  .error-modal-container {
    max-height: 90vh;
  }
  
  .error-modal-header {
    padding: 1rem 1.5rem;
  }
  
  .error-modal-title {
    font-size: 1.5rem;
  }
  
  .error-modal-content {
    padding: 1.5rem;
  }
  
  .error-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .error-action-btn {
    width: 100%;
    max-width: 250px;
  }
}

@media (max-width: 480px) {
  .error-modal-header {
    padding: 1rem;
  }
  
  .error-modal-title {
    font-size: 1.3rem;
  }
  
  .error-modal-content {
    padding: 1rem;
  }
  
  .error-summary {
    padding: 1rem;
  }
  
  .error-details-content {
    padding: 0.75rem;
  }
}

/* Scrollbar Styling */
.error-details-content::-webkit-scrollbar {
  width: 8px;
}

.error-details-content::-webkit-scrollbar-track {
  background: rgba(139, 110, 99, 0.1);
  border-radius: 4px;
}

.error-details-content::-webkit-scrollbar-thumb {
  background: #8d6e63;
  border-radius: 4px;
}

.error-details-content::-webkit-scrollbar-thumb:hover {
  background: #a1887f;
}

/* Animation for copy feedback */
.error-copy-btn.copied {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  animation: pulse 0.6s ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.add-to-home-screen {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: 90%;
  width: 400px;
}

/* Dream mode - simple approach to block patterns behind popup */
.add-to-home-screen.dream-mode {
  z-index: 9999 !important;
  isolation: isolate !important;
}

.pwa-prompt {
  background-color: #f5f5dc;
  border: 3px solid #3e2723;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease-out;
  position: relative;
  z-index: 1;
}

.pwa-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pwa-icon {
  flex-shrink: 0;
}

.pwa-icon img {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  border: 4px solid #3e2723;
  object-fit: contain;
  background-color: white;
  padding: 6px;
}

.pwa-text h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #3e2723;
  font-family: var(--font-family);
}

.pwa-text p {
  margin: 0;
  font-size: 0.9rem;
  color: #5d4037;
  line-height: 1.4;
}

.pwa-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.pwa-install-button {
  background-color: #8d6e63;
  color: white;
  border: 2px solid #3e2723;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.pwa-install-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.pwa-dismiss-button {
  background-color: transparent;
  color: #5d4037;
  border: 2px solid #5d4037;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.3s ease;
}

.pwa-dismiss-button:hover {
  background-color: #5d4037;
  color: white;
  transform: translateY(-2px);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Dark mode styles */
.add-to-home-screen.dark-mode .pwa-prompt {
  background-color: #3e2723;
  border-color: #000000;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.add-to-home-screen.dark-mode .pwa-icon img {
  border-color: #000000;
  background-color: #2a2a2a;
}

.add-to-home-screen.dark-mode .pwa-text h3 {
  color: #8d6e63;
}

.add-to-home-screen.dark-mode .pwa-text p {
  color: #a1887f;
}

.add-to-home-screen.dark-mode .pwa-install-button {
  background-color: #5d4037;
  border-color: #000000;
}

.add-to-home-screen.dark-mode .pwa-install-button:hover {
  background-color: #795548;
}

.add-to-home-screen.dark-mode .pwa-dismiss-button {
  color: #a1887f;
  border-color: #a1887f;
}

.add-to-home-screen.dark-mode .pwa-dismiss-button:hover {
  background-color: #a1887f;
  color: #3e2723;
}

/* Dream mode styles - add a solid background around the popup */
.add-to-home-screen.dream-mode .pwa-prompt {
  background: #2d1a3c !important;
  background-image: none !important;
  background-color: #2d1a3c !important;
  border-color: #000000 !important;
  box-shadow: 0 0 0 50px #0d0d0d, 0 8px 25px rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative !important;
  z-index: 10000 !important;
  isolation: isolate !important;
  opacity: 1 !important;
}

/* Ensure no dream mode effects bleed through */
.add-to-home-screen.dream-mode .pwa-prompt::before,
.add-to-home-screen.dream-mode .pwa-prompt::after {
  display: none !important;
}

.add-to-home-screen.dream-mode .pwa-icon img {
  border-color: #000000;
  background-color: #111111;
}

.add-to-home-screen.dream-mode .pwa-text h3 {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.add-to-home-screen.dream-mode .pwa-text p {
  color: #cccccc;
}

.add-to-home-screen.dream-mode .pwa-install-button {
  background-color: #8d6e63;
  color: #000000;
  border-color: #000000;
  font-weight: 900;
  text-shadow: none;
  animation: none;
}

.add-to-home-screen.dream-mode .pwa-install-button:hover {
  background-color: #a1887f;
  color: #ffffff;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4);
  animation: dreamSparkleMainMenu 1.5s ease-in-out infinite alternate;
}

.add-to-home-screen.dream-mode .pwa-dismiss-button {
  color: #cccccc;
  border-color: #cccccc;
  font-weight: 900;
}

.add-to-home-screen.dream-mode .pwa-dismiss-button:hover {
  background-color: #cccccc;
  color: #000000;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .add-to-home-screen {
    bottom: 10px;
    max-width: 95%;
  }
  
  .pwa-prompt {
    padding: 1rem;
  }
  
  .pwa-content {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  
  .pwa-actions {
    flex-direction: column;
  }
  
  .pwa-install-button,
  .pwa-dismiss-button {
    width: 100%;
  }
} 

.add-to-home-screen .pwa-prompt.center-align {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 340px;
  width: 90%;
  margin: 0 auto;
}

.pwa-title {
  font-size: 3.7rem;
  font-weight: 900;
  margin-bottom: 1rem;
  font-family: var(--font-family, 'The Wanters DEMO', sans-serif);
  letter-spacing: 0.5px;
}

.add-to-home-screen.dark-mode .pwa-title,
.add-to-home-screen.dream-mode .pwa-title {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.pwa-icon {
  margin-bottom: 1.5rem;
}

.pwa-actions.vertical {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  align-items: center;
  margin-top: 0.5rem;
}

.pwa-install-button,
.pwa-dismiss-button {
  width: 65%;
  max-width: 200px;
  margin: 0 auto;
}

 
/* ===============================================================================
                                ADMIN PANEL STYLING
=============================================================================== */

/* Main admin panel overlay */
.admin-panel-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  overflow-y: auto;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Removed background pseudo-elements since we're now using a modal overlay */

/* Background panel similar to cart page */
.admin-background-panel {
  background-color: #f5f5dc; /* Light beige background */
  background-image: 
    ,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23000000' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 112px 112px, 56px 56px;
  background-position: center, 0 0, 0 0;
  background-blend-mode: soft-light, normal, normal;
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 1200px;
  width: 95%;
  max-height: 90vh;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.admin-background-panel::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

/* Main container inside background panel */
.admin-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Admin title panel */
.admin-title-panel {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  background-color: #14545c;
  width: 100%;
  max-width: 400px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.admin-title {
  font-size: 3rem;
  font-weight: 900;
  margin: 0;
  color: #f5f5dc !important;
  text-align: center;
}

.admin-close-btn {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.admin-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.admin-close-btn-topright {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  z-index: 10;
}

.admin-close-btn-topright.admin-close-btn-inpanel {
  top: 2.5rem;
  right: 2.5rem;
  /* Slightly down and left, but still top right */
}

/* Authentication Section */
.admin-auth-section {
  text-align: center;
  width: 100%;
  max-width: 500px;
  padding: 2rem;
}

.admin-auth-section h2 {
  color: #3e2723;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  font-weight: 700;
}

.admin-auth-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.admin-input-group {
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.admin-input-group label {
  display: block;
  color: #3e2723;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.admin-input-group input {
  width: 100%;
  padding: 0.8rem;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  font-size: 1.1rem;
  text-align: center;
  transition: border-color 0.3s ease;
}

.admin-input-group input:focus {
  outline: none;
  border-color: #8d6e63;
}

.admin-login-btn {
  padding: 1rem 2rem;
  background-color: #14545c;
  color: white;
  border: 3px solid #0a1a1d;
  border-radius: 9999px;
  font-size: 1.6rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-login-btn:hover:not(:disabled) {
  background-color: #0d353a;
  color: #fff;
  border: 3px solid #06292b;
}

.admin-login-btn:disabled {
  background-color: #d7ccc8;
  cursor: not-allowed;
  transform: none;
  border: 3px solid #0a1a1d;
}

/* Error and Warning Messages */
.admin-error-message {
  background: #ffebee;
  color: #c62828;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #ef9a9a;
  text-align: center;
  font-weight: 600;
}

.admin-warning {
  background: #fff3e0;
  color: #f57c00;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #ffcc02;
  text-align: center;
  font-weight: 600;
}

.admin-lockout-message {
  background: #ffebee;
  color: #c62828;
  padding: 1.5rem;
  border-radius: 6px;
  border: 1px solid #ef9a9a;
  text-align: center;
}

.admin-lockout-message p {
  margin: 0.5rem 0;
  font-weight: 600;
}

/* Admin Content */
.admin-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.admin-action-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #d7ccc8;
  width: 100%;
  max-width: 600px;
}

/* Make Save button green by default */
.admin-save-btn {
  background-color: #27ae60;
  color: #fff;
  border: 3px solid #1e8449;
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.admin-save-btn:hover:not(:disabled) {
  background-color: #2ecc71;
  color: #fff;
  border-color: #1e8449;
}

.admin-save-btn.has-changes {
  background-color: #27ae60;
  border-color: #1e8449;
  animation: pulse 2s infinite;
}

.admin-save-btn.has-changes:hover {
  background-color: #2ecc71;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 1; }
}

.admin-save-btn:disabled {
  background-color: #bdc3c7;
  border-color: #95a5a6;
  cursor: not-allowed;
  opacity: 0.7;
}

.admin-revert-btn {
  background-color: #14545c;
  color: white;
  border: none;
  border: 3px solid #0a1a1d;
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-revert-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #0d353a;
}

.admin-revert-btn:disabled {
  background-color: #bdc3c7;
  border-color: #95a5a6;
  cursor: not-allowed;
  opacity: 0.7;
}

.admin-logout-btn {
  background-color: #e74c3c;
  color: white;
  border: none;
  border: 3px solid #c0392b;
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-logout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #c0392b;
}

.admin-update-message {
  background: #e8f5e8;
  color: #2e7d32;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #4caf50;
  text-align: center;
  font-weight: 600;
  margin-bottom: 1rem;
  width: 100%;
  max-width: 600px;
}

.admin-loading {
  background: #f5f5f5;
  color: #5d4037;
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
}

/* Admin Sections */
.admin-section {
  width: 100%;
  max-width: 1000px;
  margin: 2rem 0;
  background: #f7ede2;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.admin-section h3 {
  color: #3e2723;
  margin: 0 0 1.5rem 0;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

/* Inventory Management Styles */
.admin-inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.admin-inventory-item {
  background: #f5f5dc; /* Match main background cream */
  border: 2px solid #d7ccc8;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-inventory-header h4 {
  color: #3e2723;
  margin: 0 0 1rem 0;
  font-size: 1.4rem;
  font-weight: 700;
}

.admin-inventory-controls {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 1;
}

.admin-size-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.admin-inventory-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.admin-inventory-body {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 1rem;
}

.admin-product-image {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
  border: 3px solid #8d6e63;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.admin-size-control-with-image {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-size-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.admin-size-info label {
  font-weight: 600;
  color: #3e2723;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
  margin-bottom: 0.5rem;
}

.admin-size-control label {
  font-weight: 600;
  color: #3e2723;
  font-size: 2rem;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
}

.admin-size-control-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.admin-size-label {
  font-weight: 600;
  color: #3e2723;
  font-size: 2rem;
  font-family: 'The Wanters DEMO', serif;
  min-width: 50px;
  text-align: left;
}

.admin-quantity-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-plus-btn {
  background: #27ae60;
  color: white;
  border: 2px solid #1e8449;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.admin-minus-btn {
  background: #e74c3c;
  color: white;
  border: 2px solid #c0392b;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.admin-plus-btn:hover {
  background: #2ecc71;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.admin-minus-btn:hover {
  background: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.admin-quantity-display {
  background: white;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #3e2723;
  min-width: 3rem;
  text-align: center;
}

/* Promo Code Styles */
.admin-promo-controls {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

/* Make Create Code button mystic purple */
.admin-create-code-btn {
  background-color: #7c3aed; /* Mystic purple */
  color: #fff;
  border: 3px solid #4b2997;
  font-weight: 700;
  font-size: 1.3rem;
  padding: 1rem 2.2rem;
  border-radius: 32px;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
  transition: background 0.2s, box-shadow 0.2s;
}
.admin-create-code-btn:hover:not(:disabled) {
  background-color: #a78bfa; /* Lighter mystic purple on hover */
  color: #2d0066;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.25);
  border-color: #4b2997;
}

/* Promo code list - make responsive instead of fixed 3-column */
.admin-promo-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.admin-promo-item {
  background: #f5f5dc; /* Match main background cream */
  border: 2px solid #d7ccc8;
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-promo-title-panel {
  width: 100%;
  background: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  margin-bottom: 1rem;
  padding: 0.7rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.admin-promo-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff; /* Ensure white text in light mode */
  margin: 0;
  letter-spacing: 0.5px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  font-family: 'The Wanters DEMO', serif;
}

.admin-promo-title-edit {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff; /* Ensure white text in light mode */
  margin: 0;
  letter-spacing: 0.5px;
  text-align: center;
  width: 100%;
  outline: none;
  font-family: 'The Wanters DEMO', serif; /* Ensure font inheritance */
}

.admin-promo-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
  padding: 0 1rem;
}

.admin-promo-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.admin-promo-field-label {
  font-weight: 600;
  color: #3e2723;
  font-size: 1.4rem;
  font-family: 'The Wanters DEMO', serif;
  text-align: left;
  min-width: 70px;
  flex-shrink: 0;
}

.admin-promo-text-box {
  background: #f5f5f5;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  font-family: 'Verdana', sans-serif;
  font-weight: bold;
  color: #3e2723;
  width: 180px;
  height: 2.5rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-align: center;
}

.admin-promo-text-box:focus {
  outline: none;
  border-color: #5d4037;
  background: white;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(93, 64, 55, 0.1);
}

.admin-promo-text-box[readonly] {
  background: #e8e8e8;
  cursor: not-allowed;
  color: #666;
}
.admin-promo-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.admin-promo-code {
  font-weight: 700;
  color: #3e2723;
  font-size: 1.1rem;
}

.admin-promo-detail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.admin-promo-detail-label {
  font-weight: 700;
  color: #5d4037;
  min-width: 60px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
}

.admin-promo-detail-value {
  font-weight: 500;
  color: #3e2723;
}

.admin-promo-inline-edit {
  background: white;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-size: 0.95rem;
  color: #3e2723;
  min-width: 80px;
  text-align: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.admin-promo-inline-edit:focus {
  outline: none;
  border-color: #5d4037;
  background: #fff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(93, 64, 55, 0.1);
}

.admin-promo-effect {
  color: #5d4037;
  font-size: 0.9rem;
}

.admin-promo-value {
  font-weight: 600;
  color: #8d6e63;
}

.admin-promo-status {
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

.admin-promo-status.active {
  background: #e8f5e8;
  color: #2e7d32;
}

.admin-promo-status.inactive {
  background: #ffebee;
  color: #c62828;
}

.admin-promo-usage {
  color: #666;
  font-size: 0.9rem;
}

/* Promo code actions */
.admin-promo-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}

.admin-promo-toggle {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-promo-toggle.active {
  background-color: #27ae60;
  color: white;
}

.admin-promo-toggle.active:hover {
  background-color: #2ecc71;
}

.admin-promo-toggle.inactive {
  background-color: #e74c3c;
  color: white;
}

.admin-promo-toggle.inactive:hover {
  background-color: #c0392b;
}

.admin-promo-edit {
  padding: 0.5rem 1rem;
  background-color: #14545c;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-promo-edit:hover {
  background-color: #0d353a;
}

.admin-promo-delete {
  padding: 0.5rem 1rem;
  background-color: #c0392b;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.admin-promo-delete:hover {
  background-color: #e74c3c;
}

/* Popup overlay */
.admin-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.admin-popup {
  background-color: white;
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.admin-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #d7ccc8;
}

.admin-popup-header h3 {
  color: #3e2723;
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
}

.admin-popup-close {
  background: none;
  border: none;
  color: #3e2723;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.admin-popup-close:hover {
  background: rgba(62, 39, 35, 0.1);
}

.admin-popup-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-form-group label {
  color: #3e2723;
  font-weight: 600;
  font-size: 1.1rem;
}

.admin-form-group input,
.admin-form-group select {
  padding: 0.8rem;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.admin-form-group input:focus,
.admin-form-group select:focus {
  outline: none;
  border-color: #8d6e63;
}

.admin-popup-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 2px solid #d7ccc8;
}

.admin-popup-btn {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 9999px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-popup-save {
  background-color: #27ae60;
  color: white;
  border: 3px solid #1e8449;
}

.admin-popup-save:hover {
  background-color: #2ecc71;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.admin-popup-cancel {
  background-color: #e74c3c;
  color: white;
  border: 3px solid #c0392b;
}

.admin-popup-cancel:hover {
  background-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Dark Mode Styles */
.dark-mode .admin-background-panel {
  background-color: #222;
  background-image: 
    ,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.3'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23000000' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 112px 112px, 56px 56px;
  background-position: center, 0 0, 0 0;
  background-blend-mode: color-burn, normal, normal;
  border: 3px solid #000000;
}

.dark-mode .admin-container {
  background-color: rgba(62, 39, 35, 0.9);
  color: #fff8e1;
}

.dark-mode .admin-title-panel {
  background-color: #14545c;
  border: 3px solid #0a1a1d;
}

.dark-mode .admin-title {
  color: #f5f5dc !important;
}

.dark-mode .admin-close-btn {
  color: #8d6e63;
}

.dark-mode .admin-close-btn:hover {
  background: rgba(141, 110, 99, 0.2);
}

.dark-mode .admin-auth-section h2,
.dark-mode .admin-welcome h2 {
  color: #8d6e63;
}

.dark-mode .admin-input-group label {
  color: #8d6e63;
}

.dark-mode .admin-input-group input {
  background: #2a2a2a;
  border-color: #5d4037;
  color: #8d6e63;
}

.dark-mode .admin-input-group input:focus {
  border-color: #8d6e63;
}

.dark-mode .admin-login-btn {
  background-color: #14545c;
  border-color: #0a1a1d;
  color: #fff;
}

.dark-mode .admin-login-btn:hover:not(:disabled) {
  background-color: #0d353a;
  color: #fff;
  border: 3px solid #0a1a1d;
}

.dark-mode .admin-login-btn:disabled {
  border: 3px solid #0a1a1d;
}

.dark-mode .admin-logout-btn {
  border-color: #000000;
}

.dark-mode .admin-section {
  background: rgba(42, 42, 42, 0.9);
  border-color: #5d4037;
}

.dark-mode .admin-section h3 {
  color: #8d6e63;
}

.dark-mode .admin-inventory-item {
  background: #3e2723;
  border-color: #5d4037;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .admin-inventory-header h4 {
  color: #8d6e63;
}

.dark-mode .admin-size-control label {
  color: #8d6e63;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
}

.dark-mode .admin-size-info label {
  color: #8d6e63;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
}

.dark-mode .admin-product-image {
  border-color: #8d6e63;
}

.dark-mode .admin-size-label {
  color: #d7ccc8;
}

.dark-mode .admin-plus-btn {
  background: #27ae60;
  color: white;
  border: 2px solid #1e8449;
}

.dark-mode .admin-plus-btn:hover {
  background: #2ecc71;
}

.dark-mode .admin-minus-btn {
  background: #e74c3c;
  color: white;
  border: 2px solid #c0392b;
}

.dark-mode .admin-minus-btn:hover {
  background: #c0392b;
}

.dark-mode .admin-quantity-display {
  background: #f7ede2;
  border-color: #5d4037;
  color: #3e2723;
}

.dark-mode .admin-promo-item {
  background: #3e2723;
  border-color: #5d4037;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .admin-promo-code {
  color: #8d6e63;
}

.dark-mode .admin-promo-effect {
  color: #a1887f;
}

.dark-mode .admin-promo-detail-label {
  color: #a1887f;
}

.dark-mode .admin-promo-detail-value {
  color: #8d6e63;
}

.dark-mode .admin-promo-inline-edit {
  background: #2a2a2a;
  border: 2px solid #8d6e63;
  color: #d7ccc8;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .admin-promo-inline-edit:focus {
  border-color: #a1887f;
  background: #3e2723;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(161, 136, 127, 0.2);
}

.dark-mode .admin-promo-field-label {
  color: #d7ccc8;
}

.dark-mode .admin-promo-text-box {
  background: #f5e5c0; /* Cream brown */
  border: 2px solid #8d6e63; /* Brown border */
  color: #3e2723; /* Dark brown text */
}
.dark-mode .admin-promo-text-box:focus {
  background: #fff8e1;
  border-color: #5d4037;
  color: #3e2723;
}
.dark-mode .admin-promo-text-box[readonly] {
  background: #e8e0c8;
  color: #666;
}

.dark-mode .admin-promo-title-edit {
  color: #ffffff;
}

.dark-mode .admin-action-buttons {
  background: rgba(42, 42, 42, 0.1);
  border-color: #5d4037;
}

.dark-mode .admin-save-btn {
  border-color: #000000;
}

.dark-mode .admin-save-btn.has-changes {
  background-color: #27ae60;
  border-color: #1e8449;
}

.dark-mode .admin-revert-btn {
  border-color: #000000;
}

.dark-mode .admin-logout-btn {
  border-color: #000000;
}

.dark-mode .admin-promo-actions {
  background: none;
}

/* Dark mode promo toggle buttons - add black borders */
.dark-mode .admin-promo-toggle.active {
  background-color: #27ae60;
  color: white;
  border: 2px solid #000000; /* Black border for active button */
}

.dark-mode .admin-promo-toggle.active:hover {
  background-color: #2ecc71;
  border: 2px solid #000000; /* Maintain black border on hover */
}

.dark-mode .admin-promo-toggle.inactive {
  background-color: #e74c3c;
  color: white;
  border: 2px solid #000000; /* Black border for inactive button */
}

.dark-mode .admin-promo-toggle.inactive:hover {
  background-color: #c0392b;
  border: 2px solid #000000; /* Maintain black border on hover */
}

.dark-mode .admin-promo-delete {
  background-color: #c0392b;
  color: white;
  border: 2px solid #000000; /* Black border for delete button */
}

.dark-mode .admin-promo-delete:hover {
  background-color: #e74c3c;
  border: 2px solid #000000; /* Maintain black border on hover */
}

.dark-mode .admin-popup {
  background-color: #2a2a2a;
  border-color: #5d4037;
}

.dark-mode .admin-popup-header {
  border-color: #5d4037;
}

.dark-mode .admin-popup-header h3 {
  color: #8d6e63;
}

.dark-mode .admin-popup-close {
  color: #8d6e63;
}

.dark-mode .admin-popup-close:hover {
  background: rgba(141, 110, 99, 0.2);
}

.dark-mode .admin-form-group label {
  color: #8d6e63;
}

.dark-mode .admin-form-group input,
.dark-mode .admin-form-group select {
  background: #1a1a1a;
  border-color: #5d4037;
  color: #8d6e63;
}

.dark-mode .admin-form-group input:focus,
.dark-mode .admin-form-group select:focus {
  border-color: #8d6e63;
}

.dark-mode .admin-popup-actions {
  border-color: #5d4037;
}

.dark-mode .admin-popup-save {
  border-color: #1e8449;
}

.dark-mode .admin-popup-cancel {
  border-color: #c0392b;
}

/* Dream Mode Styles */
.dream-mode .admin-background-panel {
  background: linear-gradient(135deg, #4a148c 0%, #6a1b9a 25%, #8e24aa 50%, #9c27b0 75%, #ab47bc 100%);
  background-image: 
    ,
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.3) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%234a148c' stroke-width='1.5' stroke-opacity='0.4'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23000000' fill-opacity='0.2' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 300px 300px, 300px 300px, 112px 112px, 56px 56px;
  background-position: center, 0 0, 150px 150px, 0 0, 0 0;
  background-blend-mode: soft-light, normal, normal, normal, normal;
  border: 3px solid #4a148c;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-container {
  background-color: rgba(255, 255, 255, 0.95);
  color: #333333;
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-title-panel {
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 50%, #6a1b9a 100%);
  border: 3px solid #1a0033;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-title {
  color: #ffffff;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
}

.dream-mode .admin-close-btn {
  color: #ffffff;
}

.dream-mode .admin-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.dream-mode .admin-auth-section h2,
.dream-mode .admin-welcome h2 {
  color: #333333;
  text-shadow: none;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
}

.dream-mode .admin-input-group label {
  color: #333333;
  text-shadow: none;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
}

.dream-mode .admin-input-group input {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-input-group input:focus {
  border-color: #6a1b9a;
  box-shadow: 0 0 15px rgba(106, 27, 154, 0.4);
  background: #fff;
}

.dream-mode .admin-login-btn {
  background-color: #14545c;
  border-color: #0a1a1d;
  color: #fff;
}

.dream-mode .admin-login-btn:hover:not(:disabled) {
  background-color: #0d353a;
  color: #fff;
  border: 3px solid #0a1a1d;
}

.dream-mode .admin-login-btn:disabled {
  border: 3px solid #0a1a1d;
}

.dream-mode .admin-logout-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-logout-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-section {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-section h3 {
  color: #ffffff;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 50%, #6a1b9a 100%);
  border: 3px solid #1a0033;
  border-radius: 15px;
  padding: 1rem 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-inventory-item {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-inventory-header h4 {
  color: #ffffff;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 50%, #6a1b9a 100%);
  border: 2px solid #1a0033;
  border-radius: 12px;
  padding: 0.8rem 1.5rem;
  text-align: center;
  box-shadow: 0 3px 10px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-size-control label {
  color: #333333;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-size-info label {
  color: #333333;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-product-image {
  border: 3px solid #4a148c;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-size-label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-plus-btn {
  background: #27ae60;
  color: white;
  border: 2px solid #1e8449;
}

.dream-mode .admin-plus-btn:hover {
  background: #2ecc71;
}

.dream-mode .admin-minus-btn {
  background: #e74c3c;
  color: white;
  border: 2px solid #c0392b;
}

.dream-mode .admin-minus-btn:hover {
  background: #c0392b;
}

.dream-mode .admin-quantity-display {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
}

.dream-mode .admin-promo-item {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-promo-code {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-promo-effect {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-value {
  color: #00bcd4;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-promo-detail-label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-detail-value {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-inline-edit {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-promo-inline-edit:focus {
  border-color: #6a1b9a;
  background: #fff;
  box-shadow: 0 0 15px rgba(106, 27, 154, 0.4);
}

.dream-mode .admin-promo-field-label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-text-box {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  font-weight: bold;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-promo-text-box:focus {
  border-color: #6a1b9a;
  background: #fff;
  box-shadow: 0 0 15px rgba(106, 27, 154, 0.4);
}

.dream-mode .admin-promo-text-box[readonly] {
  background: #1a1a1a;
  color: #999;
}

.dream-mode .admin-promo-title-edit {
  color: #ffffff;
}

.dream-mode .admin-action-buttons {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-save-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-save-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-save-btn.has-changes {
  background-color: #27ae60;
  border-color: #1e8449;
  color: white;
}

.dream-mode .admin-save-btn.has-changes:hover {
  background-color: #2ecc71;
}

.dream-mode .admin-revert-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-revert-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-logout-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-logout-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-popup {
  background-color: rgba(255, 255, 255, 0.95);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-popup-header {
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 50%, #6a1b9a 100%);
  border: 3px solid #1a0033;
  border-radius: 12px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-popup-header h3 {
  color: #ffffff;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
}

.dream-mode .admin-popup-close {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.dream-mode .admin-popup-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.dream-mode .admin-form-group label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-form-group input,
.dream-mode .admin-form-group select {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-form-group input:focus,
.dream-mode .admin-form-group select:focus {
  border-color: #6a1b9a;
  box-shadow: 0 0 15px rgba(106, 27, 154, 0.4);
  background: #fff;
}

.dream-mode .admin-popup-actions {
  border-top: 2px solid #4a148c;
  margin-top: 1rem;
  padding-top: 1rem;
}

.dream-mode .admin-popup-save {
  border-color: #1e8449;
}

.dream-mode .admin-popup-cancel {
  border-color: #c0392b;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .admin-promo-list {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .admin-background-panel {
    width: 98%;
    padding: 1rem;
  }
  
  .admin-container {
    padding: 1.5rem;
  }
  
  .admin-title-panel {
    max-width: 100%;
  }
  
  .admin-title {
    font-size: 2rem;
  }
  
  .admin-inventory-grid {
    grid-template-columns: 1fr;
  }
  
  .admin-promo-list {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.5rem;
  }
  
  .admin-action-buttons {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
  
  .admin-save-btn,
  .admin-revert-btn,
  .admin-logout-btn {
    width: 200px;
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .admin-panel-page {
    padding: 0.5rem;
  }
  
  .admin-background-panel {
    padding: 0.5rem;
  }
  
  .admin-container {
    padding: 1rem;
  }
  
  .admin-title {
    font-size: 1.8rem;
  }
  
  .admin-close-btn {
    font-size: 1.5rem;
  }
} 

.admin-theme-toggle-bar {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
} 

.admin-section-title-panel {
  width: 100%;
  background: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 10px;
  margin-bottom: 2rem;
  padding: 1.2rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.admin-section-title {
  font-size: 2.6rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: 1px;
  text-align: center;
}

.admin-flavour-title-panel {
  flex: 1;
  background: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  padding: 0.7rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.admin-inventory-item h3 {
  font-size: 1.7rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.5px;
  text-align: center;
}

.dark-mode .admin-section-title-panel,
.dream-mode .admin-section-title-panel,
.dark-mode .admin-promo-title-panel,
.dream-mode .admin-promo-title-panel {
  background: #14545c;
  border: 2px solid #0a1a1d;
  color: #ffffff;
}
.dark-mode .admin-flavour-title-panel,
.dream-mode .admin-flavour-title-panel {
  background: #14545c;
  border: 2px solid #0a1a1d;
  color: #ffffff;
} 

@media (max-width: 600px) {
  .admin-promo-list {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .admin-promo-item {
    padding: 1rem;
    gap: 0.2rem;
  }
  .admin-promo-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
  }
  .admin-promo-actions {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.3rem;
  }
} 

/* Make Active and Delete buttons larger in promo actions */
.admin-promo-toggle,
.admin-promo-delete {
  padding: 0.8rem 2rem;
  font-size: 1.2rem;
  border-radius: 28px;
}

/* Ensure dark mode variants inherit the larger size */
.dark-mode .admin-promo-toggle,
.dark-mode .admin-promo-delete {
  padding: 0.8rem 2rem;
  font-size: 1.2rem;
  border-radius: 28px;
} 

/* Dark mode: Create Code button gets a black border */
.dark-mode .admin-create-code-btn {
  border: 3px solid #000;
  background-color: #7c3aed;
  color: #fff;
}
.dark-mode .admin-create-code-btn:hover:not(:disabled) {
  border: 3px solid #000;
  background-color: #a78bfa;
  color: #2d0066;
} 

/* Promo panel titles: white in light/dream, black in dark mode */
.admin-promo-title {
  color: #fff !important;
}
.dream-mode .admin-promo-title {
  color: #fff !important;
}
.dark-mode .admin-promo-title {
  color: #000 !important;
}

.admin-promo-title-edit {
  color: #fff !important;
}
.dream-mode .admin-promo-title-edit {
  color: #fff !important;
}
.dark-mode .admin-promo-title-edit {
  color: #000 !important;
} 

/* Make Revert button mystic purple like Create Code */
.admin-revert-btn {
  background-color: #7c3aed;
  color: #fff;
  border: 3px solid #4b2997;
  font-weight: 700;
  transition: background 0.2s, box-shadow 0.2s;
}
.admin-revert-btn:hover:not(:disabled) {
  background-color: #a78bfa;
  color: #2d0066;
  border-color: #4b2997;
}
.dark-mode .admin-revert-btn {
  background-color: #7c3aed;
  color: #fff;
  border: 3px solid #000;
}
.dark-mode .admin-revert-btn:hover:not(:disabled) {
  background-color: #a78bfa;
  color: #2d0066;
  border: 3px solid #000;
} 

/* Promo Code Creation Modal Styles */
.admin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-modal {
  background: #fff;
  border: 3px solid #5d4037;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  padding: 2.2rem 2rem 1.5rem 2rem;
  min-width: 320px;
  max-width: 95vw;
  width: 400px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.admin-modal-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 2.1rem;
  color: #3e2723;
  margin-bottom: 1.2rem;
  text-align: center;
  font-weight: 800;
}
.admin-modal-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}
.admin-modal-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: #3e2723;
  margin-bottom: 0.3rem;
  font-family: 'The Wanters DEMO', serif;
}
.admin-modal-input {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 2px solid #d7ccc8;
  border-radius: 7px;
  font-size: 1.1rem;
  color: #3e2723;
  background: #f5f5dc;
  font-family: 'Verdana', sans-serif;
  font-weight: 600;
  margin-bottom: 0.2rem;
  transition: border-color 0.2s;
}
.admin-modal-input:focus {
  outline: none;
  border-color: #8d6e63;
  background: #fff;
}
.admin-modal-actions {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  width: 100%;
}
.admin-modal-save-btn {
  background: #27ae60;
  color: #fff;
  border: 3px solid #1e8449;
  border-radius: 9999px;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.admin-modal-save-btn:hover {
  background: #2ecc71;
}
.admin-modal-cancel-btn {
  background: #e74c3c;
  color: #fff;
  border: 3px solid #c0392b;
  border-radius: 9999px;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.admin-modal-cancel-btn:hover {
  background: #c0392b;
}

/* Dark Mode Modal Styles */
.dark-mode .admin-modal {
  background: #2a2a2a;
  border-color: #5d4037;
}
.dark-mode .admin-modal-title {
  color: #8d6e63;
}
.dark-mode .admin-modal-label {
  color: #8d6e63;
}
.dark-mode .admin-modal-input {
  background: #f5e5c0;
  border-color: #8d6e63;
  color: #3e2723;
}
.dark-mode .admin-modal-input:focus {
  background: #fff8e1;
  border-color: #5d4037;
}
.dark-mode .admin-modal-save-btn {
  border-color: #000;
}
.dark-mode .admin-modal-cancel-btn {
  border-color: #000;
}

/* Dream Mode Modal Styles */
.dream-mode .admin-modal {
  background: #2a2a2a;
  border-color: #8a2be2;
  box-shadow: 0 10px 30px rgba(138, 43, 226, 0.3);
}
.dream-mode .admin-modal-title {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.dream-mode .admin-modal-label {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.dream-mode .admin-modal-input {
  background: #2a2a2a;
  border-color: #8a2be2;
  color: #ffffff;
}
.dream-mode .admin-modal-input:focus {
  background: #1a1a1a;
  border-color: #a855f7;
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.3);
}
.dream-mode .admin-modal-save-btn {
  border-color: #8a2be2;
  background: #8a2be2;
  color: #ffffff;
}
.dream-mode .admin-modal-save-btn:hover {
  background: #a855f7;
}
.dream-mode .admin-modal-cancel-btn {
  border-color: #8a2be2;
} 

/* Promo code usage progress bar */
.admin-promo-usage-bar-container {
  width: 90%;
  margin: 0.7rem auto 0.2rem auto;
  background: #2a2a2a;
  border-radius: 12px;
  height: 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
}
.admin-promo-usage-bar {
  height: 100%;
  border-radius: 12px 0 0 12px;
  transition: width 0.4s cubic-bezier(.4,2,.6,1);
}
.admin-promo-usage-bar.green { background: #27ae60; }
.admin-promo-usage-bar.yellow { background: #f1c40f; }
.admin-promo-usage-bar.red { background: #e74c3c; }
.admin-promo-usage-bar-label {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: 1px;
  font-family: 'The Wanters DEMO', serif;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
} 

.admin-promo-list.single-promo {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  grid-template-columns: none !important;
}
.admin-promo-list.single-promo .admin-promo-item {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}

.admin-promo-usage-bar.unlimited {
  background: #e0e0e0;
  height: 16px;
  border-radius: 8px;
  margin-bottom: 0.3rem;
  width: 100%;
  box-shadow: none;
  position: relative;
  border: none;
}
.dark-mode .admin-promo-usage-bar.unlimited {
  border: 2px solid #000;
  background: #bdbdbd;
}
.admin-promo-usage-bar-label {
  display: block;
  text-align: center;
  font-weight: 700;
  color: #3e2723;
  font-size: 1.1rem;
  margin-top: 0.2rem;
}

/* Stats Section Styles */
.admin-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

.admin-stats-panel {
  background: #f5f5f5;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-stats-panel-title {
  background: #167c7c;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  text-align: center;
  border: 1px solid #000;
}

.admin-stats-panel-title h3 {
  color: #fff;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.7rem;
  letter-spacing: 1px;
}

.admin-stats-panel-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Time Selector Buttons */
.admin-stats-time-selector {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.admin-stats-time-btn {
  background: #e0e0e0;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.admin-stats-time-btn:hover {
  background: #d0d0d0;
}

.admin-stats-time-btn.active {
  background: #2E7D5A;
  color: white;
}

/* Metrics Display */
.admin-stats-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-stats-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.admin-stats-metric-label {
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-metric-value {
  font-weight: bold;
  color: #2E7D5A;
  font-size: 1.1rem;
}

/* Table Styles */
.admin-stats-table {
  background: white;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.admin-stats-table-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  background: #2E7D5A;
  color: white;
  padding: 0.75rem;
  font-weight: bold;
  text-align: center;
}

.admin-stats-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  padding: 0.75rem;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.admin-stats-table-row:last-child {
  border-bottom: none;
}

.admin-stats-table-row:nth-child(even) {
  background: #f9f9f9;
}

/* Bar Chart Styles */
.admin-stats-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.admin-stats-bar-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.admin-stats-bar-label {
  min-width: 100px;
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-bar-container {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0.5rem;
}

.admin-stats-bar {
  height: 20px;
  border-radius: 10px;
  min-width: 20px;
  transition: width 0.3s ease;
}

.admin-stats-bar-value {
  font-weight: bold;
  color: #4B2E19;
  min-width: 30px;
}

/* Day Chart Styles */
.admin-stats-day-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-stats-day-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.admin-stats-day-item span:first-child {
  min-width: 80px;
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-day-bar {
  height: 15px;
  background: #2E7D5A;
  border-radius: 7px;
  flex: 1;
  max-width: 200px;
  transition: width 0.3s ease;
}

.admin-stats-day-item span:last-child {
  font-weight: bold;
  color: #2E7D5A;
  min-width: 30px;
}

/* Time Chart Styles */
.admin-stats-time-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-stats-time-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.admin-stats-time-item span:first-child {
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-time-item span:last-child {
  font-weight: bold;
  color: #2E7D5A;
}

/* Subsection Styles */
.admin-stats-subsection {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-stats-subsection h4 {
  margin: 0;
  color: #4B2E19;
  font-size: 1.35rem;
  font-weight: bold;
  border-bottom: 2px solid #2E7D5A;
  padding-bottom: 0.25rem;
  text-align: center;
  letter-spacing: 0.5px;
}

/* Dark Mode Styles */
.dark-mode .admin-stats-panel {
  background: #222;
  border: 3px solid #5d4037;
}

.dark-mode .admin-stats-metric {
  background: #3a3a3a;
  border-color: #555;
}

.dark-mode .admin-stats-metric-label {
  color: #e0e0e0;
}

.dark-mode .admin-stats-table {
  background: #3a3a3a;
  border-color: #555;
}

.dark-mode .admin-stats-table-row {
  border-color: #555;
  color: #e0e0e0;
}

.dark-mode .admin-stats-table-row:nth-child(even) {
  background: #333;
}

.dark-mode .admin-stats-day-item,
.dark-mode .admin-stats-time-item {
  background: #3a3a3a;
  border-color: #555;
  color: #e0e0e0;
}

.dark-mode .admin-stats-day-item span:first-child,
.dark-mode .admin-stats-time-item span:first-child {
  color: #e0e0e0;
}

.dark-mode .admin-stats-subsection h4 {
  color: #e0e0e0;
}

/* Dream Mode Styles */
.dream-mode .admin-stats-panel {
  background: #2a2a2a;
  border: 2px solid #8a2be2;
}

.dream-mode .admin-stats-panel-title {
  background: #8a2be2;
  border: 2px solid #8a2be2;
}

.dream-mode .admin-stats-metric {
  background: rgba(42, 42, 42, 0.9);
  border-color: #8a2be2;
  color: white;
}

.dream-mode .admin-stats-metric-label {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dream-mode .admin-stats-metric-value {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dream-mode .admin-stats-time-btn {
  background: rgba(42, 42, 42, 0.9);
  color: white;
  border: 1px solid #8a2be2;
}

.dream-mode .admin-stats-time-btn:hover {
  background: rgba(138, 43, 226, 0.3);
}

.dream-mode .admin-stats-time-btn.active {
  background: #8a2be2;
  border-color: #8a2be2;
}

/* Responsive Design */
@media (max-width: 768px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .admin-stats-time-selector {
    flex-direction: column;
    align-items: stretch;
  }
  
  .admin-stats-table-header,
  .admin-stats-table-row {
    grid-template-columns: 1fr 80px 80px 80px;
    font-size: 0.9rem;
  }
  
  .admin-stats-bar-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  
  .admin-stats-bar-label {
    min-width: auto;
  }
}

.admin-stats-leaderboard {
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
  margin-bottom: 1rem;
  overflow: hidden;
}
.admin-stats-leaderboard-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  background: #167c7c;
  color: white;
  font-weight: bold;
  padding: 0.75rem;
  text-align: center;
}
.admin-stats-leaderboard-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 0.75rem;
  border-bottom: 1px solid #eee;
  text-align: center;
  font-weight: 500;
  color: #4B2E19;
  background: #f9f9f9;
}
.admin-stats-leaderboard-row:nth-child(even) {
  background: #f5f5f5;
}
.admin-stats-leaderboard-row:last-child {
  border-bottom: none;
}

.dark-mode .admin-stats-leaderboard {
  background: #2a2a2a;
  border-color: #555;
}
.dark-mode .admin-stats-leaderboard-header {
  background: #167c7c;
  color: #fff;
}
.dark-mode .admin-stats-leaderboard-row {
  color: #e0e0e0;
  background: #333;
  border-color: #555;
}
.dream-mode .admin-stats-leaderboard-header {
  background: #167c7c;
  color: #fff;
}
.dream-mode .admin-stats-leaderboard {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
}
.dream-mode .admin-stats-leaderboard-row {
  color: #fff;
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}

:root {
  --cream-brown-bg: #f8f3e6;
  --cream-brown-text: #4B2E19;
  --admin-panel-bg-dark: #3a2320;
}

.dark-mode input,
.dark-mode .admin-promo-text-box,
.dark-mode .admin-modal-input,
.dark-mode .admin-stats-table,
.dark-mode .admin-stats-table-row,
.dark-mode .admin-stats-leaderboard,
.dark-mode .admin-stats-leaderboard-row {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
  border-color: #555;
}

.dark-mode .admin-stats-table-header,
.dark-mode .admin-stats-leaderboard-header {
  background: #167c7c;
  color: #fff;
}

.dark-mode .admin-stats-metric,
.dark-mode .admin-stats-panel-content input,
.dark-mode .admin-stats-panel-content .admin-promo-text-box {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
}

.dark-mode .privacy-policy-panel,
.dark-mode .privacy-policy-content,
.dark-mode .privacy-policy-box {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
}

.dark-mode .admin-stats-day-bar {
  background: #167c7c;
}

.dark-mode .admin-stats-day-item,
.dark-mode .admin-stats-time-item {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
  border: 2px solid #3a2a1a !important;
}

.dark-mode .admin-stats-panel {
  background: var(--admin-panel-bg-dark);
  border: 2.5px solid #000;
}

.dark-mode .admin-stats-subsection h4 {
  color: #f8f3e6 !important;
  text-shadow: 0 0 1px #000, 0 1px 1px #000, 1px 0 1px #000, -1px 0 1px #000;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  min-height: 100vh;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--text-color);
}

.app-header {
  background-color: #4CAF50;
  color: white;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.app-header h1 {
  margin: 0.5rem 0;
  font-size: 2.2rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.app-header nav {
  display: flex;
  gap: 2rem;
  margin-top: 0.5rem;
  width: 100%;
  justify-content: center;
}

.nav-link {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

main {
  flex: 1;
  background-color: var(--bg-color);
}

.back-button {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.back-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.dark-mode .back-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  .app-header {
    padding: 1rem;
  }
  
  .app-header h1 {
    font-size: 1.8rem;
  }
  
  main {
    padding: 1rem;
  }
}

@media (min-width: 768px) {
  .app-header h1 {
    font-size: 2.5rem;
  }

  .app-header h2 {
    font-size: 1.8rem;
  }

  .back-button {
    font-size: 1.1rem;
  }
} 
/* ===============================================================================
                                CART PAGE STYLING
=============================================================================== */

/* Main cart page container */
.cart-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 1rem;
  position: relative;
}

.cart-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.cart-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Background panel similar to contacts page */
.cart-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Main container inside background panel */
.cart-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Orders title panel */
.orders-title-panel {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 400px;
}

.orders-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

/* Navigation button */
.cart-navigation {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  width: 100%;
}

.nav-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723;
}

.nav-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
  text-decoration: none;
}

/* Cart content area */
.cart-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Empty cart state */
.empty-cart {
  text-align: center;
  padding: 3rem 2rem;
}

.empty-cart p {
  font-size: 1.5rem;
  color: #5d4037;
  margin: 0;
  font-weight: 600;
}

/* Cart loading state */
.cart-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.cart-loading p {
  font-size: 1.5rem;
  color: #5d4037;
  margin: 1rem 0 0 0;
  font-weight: 600;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e0e0e0;
  border-top: 4px solid #8d6e63;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

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

/* Cart items container */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 2rem;
}

/* Individual cart item */
.cart-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.cart-item-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
  width: 100%;
}

.cart-item-name {
  font-size: 2.5rem;
  font-weight: 900;
  color: #3e2723;
  margin-bottom: 1rem;
  text-align: center;
}

.cart-item-size-price {
  font-size: 1.7rem;
  font-weight: 900;
  color: #3e2723;
  margin-bottom: 1rem;
  text-align: center;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.size-unit {
  font-size: 0.7em; /* 30% smaller - 70% of parent font size */
  font-weight: 900;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.cart-item-size {
  font-size: 1.1rem;
  color: #5d4037;
  margin-bottom: 0.25rem;
}

.cart-item-price {
  font-size: 1.2rem;
  color: #5d4037;
  font-weight: 600;
}

/* Quantity controls */
.cart-item-quantity {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.quantity-button {
  width: 45px;
  height: 45px;
  border: 3px solid #3e2723;
  background-color: #8d6e63;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.quantity-button:hover {
  background-color: #a1887f;
  transform: scale(1.05);
}

.quantity-value {
  font-size: 1.4rem;
  font-weight: bold;
  color: #3e2723;
  min-width: 40px;
  text-align: center;
  background-color: rgba(141, 110, 99, 0.1);
  padding: 0.5rem;
  border-radius: 8px;
}

/* Subtotal and remove button */
.cart-item-subtotal {
  font-size: 1.5rem;
  font-weight: 900;
  color: #d32f2f;
  margin-bottom: 1rem;
  text-align: center;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.remove-item-button {
  padding: 0.8rem 1.5rem;
  background-color: #d32f2f;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.remove-item-button:hover {
  background-color: #f44336;
  transform: translateY(-2px);
}

/* Cart summary */
.cart-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2rem;
  border-top: 3px solid #d7ccc8;
  width: 100%;
  max-width: 400px;
}

.cart-totals {
  margin-bottom: 1.5rem;
  text-align: center;
}

.cart-total-items, 
.cart-total-price {
  font-size: 1.4rem;
  margin: 0.5rem 0;
  color: #3e2723;
  font-weight: 900;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.cart-total-price {
  font-size: 2.2rem;
  font-weight: 900;
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.checkout-button {
  padding: 1.2rem 2.5rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.checkout-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* ===============================================================================
                                DARK MODE STYLES
=============================================================================== */

.dark-mode.cart-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
}

.dark-mode.cart-page::before {
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
}

.dark-mode.cart-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .cart-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .cart-container {
  background-color: rgba(62, 39, 35, 0.9);
  border: 3px solid #000000;
}

.dark-mode .orders-title-panel {
  background-color: #8d6e63;
  border: 2px solid #000000;
}

.dark-mode .orders-title {
  color: #8d6e63;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.dark-mode .nav-button {
  background-color: #8d6e63;
  border: 3px solid #000000;
  color: #fff8e1;
}

.dark-mode .nav-button:hover {
  background-color: #a1887f;
  color: #fff8e1;
}

.dark-mode .empty-cart p {
  color: #fff8e1;
}

.dark-mode .cart-loading p {
  color: #fff8e1;
}

.dark-mode .loading-spinner {
  border: 4px solid #424242;
  border-top: 4px solid #a1887f;
}

.dark-mode .cart-item {
  background-color: #8d6e63;
  border: 3px solid #000000;
}

.dark-mode .cart-item-name {
  color: #fff8e1;
}

.dark-mode .cart-item-size-price {
  color: #000000;
  text-shadow: none;
}

.dark-mode .size-unit {
  color: #000000;
  text-shadow: none;
}

.dark-mode .cart-item-size,
.dark-mode .cart-item-price {
  color: #d7ccc8;
}

.dark-mode .quantity-button {
  background-color: #8d6e63 !important;
  border: 3px solid #000000;
}

.dark-mode .quantity-button:hover {
  background-color: #a1887f;
}

.dark-mode .quantity-value {
  color: #fff !important;
  background-color: transparent;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .cart-item-subtotal {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .remove-item-button {
  border: 3px solid #000000;
}

.dark-mode .cart-totals {
  border-top: 3px solid #666666;
}

.dark-mode .cart-total-items {
  color: #c4a690 !important;
}

.dark-mode .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .checkout-button {
  background-color: #8d6e63;
  border: 3px solid #000000;
  color: #fff8e1;
}

.dark-mode .checkout-button:hover {
  background-color: #a1887f;
}

/* ===============================================================================
                                DREAM MODE STYLES
=============================================================================== */

.dream-mode.cart-page {
  background-color: #222;
}

.dream-mode.cart-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.cart-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .cart-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .cart-container {
  background-color: rgba(26, 26, 26, 0.9);
  border: 3px solid #000000;
}

.dream-mode .orders-title-panel {
  background-color: rgba(45, 20, 60, 0.95);
  border: 2px solid #000000;
}

.dream-mode .orders-title {
  color: #ffffff;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  animation: dreamText 20s infinite linear;
}

@keyframes dreamText {
  0% {
    color: #4b0082; /* Indigo (darker purple) */
  }
  20% {
    color: #000080; /* Navy (darker blue) */
  }
  40% {
    color: #0072b1; /* Darker light blue */
  }
  60% {
    color: #2e8b57; /* Sea green (darker light green) */
  }
  80% {
    color: #006400; /* Dark green */
  }
  100% {
    color: #4b0082; /* Back to indigo for smooth loop */
  }
}

.dream-mode .nav-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .nav-button:hover {
  background-color: #a1887f;
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4);
  animation: dreamSparkle 1.5s ease-in-out infinite alternate;
}

.dream-mode .empty-cart p {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .cart-loading p {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .loading-spinner {
  border: 4px solid #333333;
  border-top: 4px solid #ff00cc;
  box-shadow: 0 0 10px rgba(255, 0, 204, 0.5);
}

.dream-mode .cart-item {
  background-color: rgba(120, 120, 120, 0.6);
  border: 3px solid #000000;
}

.dream-mode .cart-item-name {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .cart-item-size-price {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .size-unit {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .cart-item-size,
.dream-mode .cart-item-price {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .quantity-button {
  background-color: #8d6e63;
  border: 3px solid #000000;
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream-mode .quantity-button:hover {
  background-color: #a1887f;
  color: #ffffff;
  box-shadow: 
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6);
  animation: dreamSparkle 1.5s ease-in-out infinite alternate;
}

.dream-mode .quantity-value {
  color: #ffffff;
  background-color: rgba(45, 20, 60, 0.3);
  text-shadow: none;
  animation: none;
}

.dream-mode .cart-item-subtotal {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .remove-item-button {
  background-color: #d32f2f !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .remove-item-button:hover {
  background-color: #f44336 !important;
  color: #000000 !important;
  transform: translateY(-2px);
  box-shadow: 
    0 0 15px rgba(220, 20, 60, 0.8),
    0 0 25px rgba(255, 69, 0, 0.6);
}

.dream-mode .cart-totals {
  border-top: 3px solid #555555;
}

.dream-mode .cart-total-items {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .checkout-button {
  background-color: #8d6e63;
  border: 3px solid #000000 !important;
  color: #000000;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .checkout-button:hover {
  background-color: #a1887f;
  color: #ffffff;
  border: 3px solid #000000 !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 128, 0, 0.8),
    0 0 25px rgba(34, 139, 34, 0.6),
    0 0 35px rgba(46, 139, 87, 0.4);
  animation: dreamSparkle 1.5s ease-in-out infinite alternate;
}

/* Additional overrides for any remaining glow effects */
.dream-mode .cart-page .cart-item-size,
.dream-mode .cart-page .cart-item-price {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
}

.dream-mode .cart-page .cart-item-size-price,
.dream-mode .cart-page .cart-total-items {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
}

.dream-mode .cart-page .size-unit {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
}

.dream-mode .cart-page .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
}

.dark-mode .cart-page .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Dream mode remove button override - ensure red background with black text */
.dream-mode .cart-page .remove-item-button {
  background-color: #d32f2f !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
}

.dream-mode .cart-page .remove-item-button:hover {
  background-color: #f44336 !important;
  color: #000000 !important;
}

@keyframes dreamSparkle {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-2px) rotate(0deg) scale(1);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-2px) rotate(1deg) scale(1.02);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-2px) rotate(0deg) scale(1.04);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-2px) rotate(-1deg) scale(1.02);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-2px) rotate(0.5deg) scale(1.01);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-2px) rotate(0deg) scale(1);
  }
}

/* ===============================================================================
                            RESPONSIVE DESIGN
=============================================================================== */

/* Mobile First - these styles apply to screens 480px and larger */
@media (min-width: 480px) {
  .cart-item {
    max-width: 600px;
  }
  
  .orders-title {
    font-size: 2.8rem;
  }
}

/* Tablet styles - 768px and larger */
@media (min-width: 768px) {
  .cart-page {
    padding: 2rem;
  }
  
  .cart-background-panel {
    padding: 2rem;
  }
  
  .cart-container {
    padding: 3rem;
  }
  
     .cart-item {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     max-width: 900px;
     padding: 2.5rem;
   }
   
   .cart-item-details {
     flex: 1;
     align-items: flex-start;
     text-align: left;
     margin-bottom: 0;
     margin-right: 2rem;
   }
   
   .cart-item-name {
     font-size: 3rem;
   }
   
       .cart-item-size-price {
      font-size: 2.2rem;
    }
  
  .cart-item-quantity {
    margin-bottom: 0;
    margin-right: 2rem;
  }
  
  .cart-item-subtotal {
    margin-bottom: 0;
    margin-right: 1rem;
    font-size: 1.6rem;
  }
  
  .orders-title {
    font-size: 4rem;
  }
}

 /* Desktop styles - 1024px and larger */
 @media (min-width: 1024px) {
   .cart-background-panel {
     max-width: 1000px;
   }
   
   .cart-item {
     max-width: 1000px;
   }
   
   .cart-item-name {
     font-size: 3.2rem;
   }
   
       .cart-item-size-price {
      font-size: 2.4rem;
    }
   
   .orders-title {
     font-size: 3.2rem;
   }
 }

 /* Large desktop styles - 1200px and larger */
 @media (min-width: 1200px) {
   .cart-background-panel {
     max-width: 1200px;
   }
   
   .cart-item {
     max-width: 1100px;
   }
   
   .cart-item-name {
     font-size: 3.5rem;
   }
   
       .cart-item-size-price {
      font-size: 2.7rem;
    }
   
   .orders-title {
     font-size: 3.5rem;
   }
 } 
.contact-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.contact-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.contact-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.contact-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 850px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.contact-container {
  width: 100%;
  max-width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.contact-title-panel {
  font-weight: bold;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 400px;
}

.contact-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

.home-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
  margin-bottom: 2rem;
}

.home-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
}

.contact-details {
  width: 100%;
  text-align: center;
  padding: 2rem;
  margin-bottom: 2rem;
  background-color: rgba(141, 110, 99, 0.1);
  border-radius: 8px;
  border: 2px solid #d7ccc8;
}

.contact-details p {
  margin: 0.5rem 0;
  font-size: 1.2rem;
  color: #3e2723;
  line-height: 1.6;
}

.contact-details-placeholder {
  width: 100%;
  text-align: center;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 2px dashed #d7ccc8;
  border-radius: 8px;
}

.contact-details-placeholder p {
  margin: 0.5rem 0;
  font-size: 1.2rem;
  color: #5d4037;
}

.contact-actions {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
}

.privacy-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
}

.privacy-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
  text-decoration: none;
}

/* Dark mode styles */
.dark-mode.contact-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode.contact-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode.contact-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .contact-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .contact-container {
  background-color: rgba(62, 39, 35, 0.9);
  color: #fff8e1;
}

.dark-mode .contact-title {
  text-shadow: none;
}

.dark-mode .contact-title-panel {
  background-color: #3e2723;
  border: 3px solid #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark-mode .contact-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dark-mode .contact-details {
  border-color: #5d4037;
  background-color: #8d6e63;
}

.dark-mode .contact-details p {
  color: #fff8e1;
}

.dark-mode .contact-details-placeholder {
  border-color: #5d4037;
}

.dark-mode .contact-details-placeholder p {
  color: #d7ccc8;
}

/* Light mode button base styling */
.contact-page:not(.dark-mode):not(.dream-mode) .home-button,
.contact-page:not(.dark-mode):not(.dream-mode) .privacy-button {
  border: 3px solid #3e2723 !important;
  border-radius: 9999px !important; /* Ensure pill shape in light mode */
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  background-color: #8d6e63 !important;
  color: white !important;
  display: inline-block !important;
  text-decoration: none !important;
}

/* Dark mode button base styling with ultra-high specificity */
body.dark-mode .contact-page .home-button,
body.dark-mode .contact-page .privacy-button,
.dark-mode.contact-page .home-button,
.dark-mode.contact-page .privacy-button,
.dark-mode .contact-page .home-button,
.dark-mode .contact-page .privacy-button,
.dark-mode .home-button,
.dark-mode .privacy-button {
  border: 3px solid #000000 !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  text-decoration: none !important;
  font-family: 'The Wanters DEMO', serif !important;
}

/* Dark mode home button glow with ultra-high specificity */
body.dark-mode .contact-page .home-button:hover,
.dark-mode.contact-page .home-button:hover,
.dark-mode .contact-page .home-button:hover,
.dark-mode .home-button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  background-color: #a1887f !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  text-decoration: none !important;
}

/* Dark mode privacy policy button glow with ultra-high specificity */
body.dark-mode .contact-page .privacy-button:hover,
.dark-mode.contact-page .privacy-button:hover,
.dark-mode .contact-page .privacy-button:hover,
.dark-mode .privacy-button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  background-color: #a1887f !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  text-decoration: none !important;
}

@media (max-width: 768px) {
  .contact-title {
    font-size: 2.5rem;
  }
  
  .contact-background-panel {
    width: 98%;
    max-width: 600px;
  }
  
  .contact-container {
    padding: 1.5rem;
  }
  
  .contact-details {
    padding: 1.5rem;
    margin: 0 0 2rem 0;
  }
  
  .contact-details p {
    font-size: 1.1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none;
    line-height: 1.7;
  }
}

@media (max-width: 480px) {
  .contact-background-panel {
    width: 98%;
    max-width: 450px;
    padding: 1rem;
  }
  
  .contact-container {
    padding: 1.25rem;
  }
  
  .contact-details {
    padding: 1.25rem;
    margin: 0 0 2rem 0;
  }
  
  .contact-details p {
    font-size: 1rem;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none;
  }
}

@media (max-width: 360px) {
  .contact-background-panel {
    width: 99%;
    max-width: 360px;
    padding: 0.25rem;
  }
  
  .contact-container {
    padding: 0.5rem;
  }
  
  .contact-details {
    padding: 0.75rem 1rem;
    margin: 0 0 2rem 0;
    width: 100%;
    box-sizing: border-box;
  }
  
  .contact-details p {
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    hyphens: none;
    word-break: break-word;
    text-align: center;
    margin: 0.3rem 0;
  }
  
  .contact-details .email-address {
    font-size: 0.8rem;
    font-weight: 600;
    word-break: break-all;
    overflow-wrap: anywhere;
    letter-spacing: -0.8px;
    transform: scaleX(0.95);
    transform-origin: center;
  }
}

@media (max-width: 340px) {
  .contact-background-panel {
    width: 99%;
    max-width: 340px;
    padding: 0.15rem;
  }
  
  .contact-container {
    padding: 0.35rem;
  }
  
  .contact-details {
    padding: 0.5rem 0.75rem;
    margin: 0 0 2rem 0;
    width: 100%;
    box-sizing: border-box;
  }
  
  .contact-details p {
    font-size: 0.85rem;
    line-height: 1.3;
    margin: 0.25rem 0;
  }
  
  .contact-details .email-address {
    font-size: 0.75rem;
    font-weight: 600;
    word-break: break-all;
    overflow-wrap: anywhere;
    letter-spacing: -1px;
    transform: scaleX(0.9);
    transform-origin: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Dream mode styles */
.dream-mode.contact-page {
  background-color: #222;
  background-image: 
    ,
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
    linear-gradient(45deg, transparent 24%, rgba(75, 0, 130, 0.05) 25%, rgba(75, 0, 130, 0.05) 26%, transparent 27%, transparent 74%, rgba(138, 43, 226, 0.05) 75%, rgba(138, 43, 226, 0.05) 76%, transparent 77%),
    linear-gradient(-45deg, transparent 24%, rgba(102, 51, 153, 0.05) 25%, rgba(102, 51, 153, 0.05) 26%, transparent 27%, transparent 74%, rgba(60, 30, 80, 0.05) 75%, rgba(60, 30, 80, 0.05) 76%, transparent 77%);
  background-size: cover, 300px 300px, 300px 300px, 60px 60px, 60px 60px;
  background-position: center, 0 0, 150px 150px, 0 0, 30px 30px;
  background-blend-mode: color-burn;
}

.dream-mode.contact-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.contact-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .contact-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream-mode .contact-container {
  border: 3px solid #000000;
}

.dream-mode .contact-title {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  animation: none !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dream-mode .contact-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .contact-details p {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: none;
}

/* Ensure dream mode contact details have clean black text */
.dream-mode .contact-details p,
.dream-mode .contact-details span,
.dream-mode .contact-details a {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
}

/* Dream mode responsive text fixes */
@media (max-width: 768px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
}

@media (max-width: 480px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
}

@media (max-width: 360px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
  
  .dream-mode .contact-details .email-address {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
}

@media (max-width: 340px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
  
  .dream-mode .contact-details .email-address {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
}

/* Dream mode button base styling - black text when idle */
.dream-mode .home-button:not(:hover),
.dream-mode .privacy-button:not(:hover) {
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}

/* Dream mode psychedelic button hover effects - white text on hover */
.dream-mode .home-button:hover,
.dream-mode .privacy-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  animation: dreamSparkleContactLanding 1.5s ease-in-out infinite alternate !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
}

@keyframes dreamSparkleContactLanding {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
} 
/* ===============================================================================
                              CUSTOMER STATS PAGE STYLING
=============================================================================== */

/* Main stats page container - matching app's dual geometry pattern */
.customer-stats-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  background-attachment: fixed;
  padding: 1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  overflow-y: auto;
  font-family: 'The Wanters DEMO', sans-serif;
  pointer-events: auto;
  
  /* Hide scrollbar while maintaining scroll functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
.customer-stats-container::-webkit-scrollbar {
  display: none;
}

/* Dual geometry background patterns - exactly like other pages */
.customer-stats-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.customer-stats-container::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Background panel matching app structure */
.stats-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  max-height: calc(100vh - 2rem);
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  margin: 1rem auto;
  overflow: hidden;
}

/* Main container inside background panel */
.stats-main-container {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 5rem);
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  overflow-y: auto;
  
  /* Hide scrollbar while maintaining scroll functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
.stats-main-container::-webkit-scrollbar {
  display: none;
}

/* Header with title and close button */
.customer-stats-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  width: 100%;
  position: relative;
}

/* Title panel matching app style */
.stats-title-panel {
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  padding: 1rem 2rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 400px;
}

.stats-title-panel h2 {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

/* Close button */
.close-btn {
  background: #8d6e63;
  border: 3px solid #3e2723;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.close-btn:hover {
  background: #a1887f;
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Content area */
.customer-stats-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Individual stat sections */
.stats-section {
  width: 100%;
  max-width: 800px;
  background-color: rgba(255, 255, 255, 0.95);
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.stats-section h3 {
  font-size: 2rem;
  font-weight: 900;
  color: #3e2723;
  margin: 0 0 1.5rem 0;
  text-align: center;
}

/* User info and purchase stats */
.user-info, .purchase-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  background-color: rgba(245, 245, 220, 0.9);
}

.stat-label {
  font-size: 1rem;
  color: #5d4037;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 900;
  color: #3e2723;
}

/* Progress bars */
.progress-info {
  text-align: center;
}

.progress-info p {
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
  color: #3e2723;
  font-weight: 600;
}

.progress-bar {
  width: 100%;
  height: 20px;
  border: 2px solid #8d6e63;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background-color: rgba(245, 245, 220, 0.9);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #8d6e63, #5d4037);
  border-radius: 8px;
  transition: width 0.3s ease;
}

/* Flavor breakdown */
.flavor-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.flavor-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  background-color: rgba(245, 245, 220, 0.9);
}

.flavor-name {
  font-weight: 900;
  font-size: 1.1rem;
  color: #3e2723;
}

.flavor-counts {
  font-size: 1rem;
  color: #5d4037;
  font-weight: 600;
}

/* Achievements grid */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.achievement-card {
  padding: 1.5rem;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  background-color: rgba(245, 245, 220, 0.9);
  transition: all 0.3s ease;
  position: relative;
  text-align: center;
}

.achievement-card.unlocked {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #5d4037;
}

.achievement-card.locked {
  /* Removed greyed out styling - achievements should be visible */
}

.achievement-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  text-align: center;
}

.achievement-name {
  font-weight: 900;
  font-size: 1.7rem;
  color: #5d4037;
  text-align: center;
  text-shadow: none; /* No outline in light mode */
  letter-spacing: 0.01em;
  margin: 0 auto 0.2em auto;
  display: block;
  /* Light mode panel */
  background: rgba(245, 245, 220, 0.8);
  border: 2px solid #8d6e63;
  border-radius: 12px;
  padding: 0.8rem 1.2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.achievement-card.unlocked .achievement-name {
  color: #3e2723;
}

.achievement-card.locked .achievement-name {
  /* Use default achievement name color - no greying out */
}

.dark .achievement-name {
  color: #8d6e63 !important;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000 !important;
  /* Dark mode panel */
  background: rgba(62, 39, 35, 0.9);
  border: 2px solid #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dream .achievement-name {
  color: #00ffff; /* Cyan text for dream mode */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* 1px black outline around text */
  animation: none; /* Override color cycling animation */

/* Override for locked secret achievements - more specific than general rule */
.dream .hidden-achievement:not(.completed) .achievement-name,
body.dream .hidden-achievement:not(.completed) .achievement-name,
.dream-mode .hidden-achievement:not(.completed) .achievement-name {
  color: #4a7c7c !important; /* Darker inactive teal for locked secret achievements */
  text-shadow: none !important;
}
  /* Dream mode panel - match the achievements title banner */
  background: rgba(45, 20, 60, 0.95); /* Match the achievements title panel color */
  border: 2px solid #000000; /* Black border instead of purple */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Dream mode overrides for all achievement tiers to ensure cyan color */
.dream .achievement-card.unlocked[data-tier="1"] .achievement-name {
  color: #00ffff !important; /* Cyan text for dream mode - Tier 1 */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream .achievement-card.unlocked[data-tier="2"] .achievement-name {
  color: #00ffff !important; /* Cyan text for dream mode - Tier 2 */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream .achievement-card.unlocked[data-tier="3"] .achievement-name {
  color: #00ffff !important; /* Cyan text for dream mode - Tier 3 */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  background-color: #1a1a1a !important; /* Dark grey background for dream mode tier 3 */
  border: 2px solid #000000 !important; /* Black border */
}

.achievement-tier {
  font-size: 1.5rem;
}

.achievement-description {
  margin: 0.5rem 0 1rem 0;
  font-size: 1.12rem;
  color: #5d4037;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
}

.dark .achievement-description {
  color: #fff8e1;
}

.dream .achievement-description {
  color: #fff !important;
  text-shadow: none !important;
}

.achievement-progress {
  margin-top: 1rem;
}

.progress-text {
  font-size: 1rem;
  font-weight: 600;
  color: #3e2723;
  display: block;
  margin-bottom: 0.5rem;
  text-align: center;
}

.achievement-tiers-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 0.5em;
}

.achievement-tier-icon {
  font-size: 1.2em;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.achievement-tier-icon.active {
  opacity: 1;
  color: #ffd700;
  text-shadow: 0 0 4px #000;
}

/* Dark mode override for tier 3 achievement medals - use dark brown instead of gold */
.dark .achievement-tier-icon.active {
  color: #5d4037;
  text-shadow: 0 0 4px #000;
}

/* ===============================================================================
                                DARK MODE STYLES
=============================================================================== */

.customer-stats-container.dark {
  background-color: #3e2723;
  background-blend-mode: multiply;
}

.customer-stats-container.dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.customer-stats-container.dark::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark .stats-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border-color: #000000;
}

.dark .stats-main-container {
  background-color: rgba(62, 39, 35, 0.9);
  border-color: #000000;
}

.dark .stats-title-panel {
  background-color: #3e2723;
  border-color: #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark .stats-title-panel h2 {
  color: #8d6e63 !important;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000 !important;
  animation: none;
}

.dark .close-btn {
  background: #8d6e63;
  border-color: #000000;
  color: #000000;
}

.dark .close-btn:hover {
  background: #a1887f;
  color: #000000;
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.dark .stats-section {
  background-color: rgba(62, 39, 35, 0.95);
  border-color: #000000;
}

.dark .stats-section h3 {
  color: #8d6e63;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
}

.dark .stat-item {
  background-color: #8d6e63;
  border-color: #5d4037;
}

.dark .stat-label {
  color: #fff8e1;
}

.dark .stat-value {
  color: #fff8e1;
}

.dark .progress-info p {
  color: #fff8e1;
}

.dark .progress-bar {
  background-color: #8d6e63;
  border-color: #5d4037;
}

.dark .progress-fill {
  background: linear-gradient(135deg, #8d6e63, #5d4037);
}

.dark .flavor-item {
  background-color: #8d6e63;
  border-color: #5d4037;
}

.dark .flavor-name {
  color: #fff8e1;
}

.dark .flavor-counts {
  color: #fff8e1;
}

.dark .achievement-card {
  background-color: #8d6e63;
  border-color: #5d4037;
}

/* Override for secret achievements to ensure dark brown color */
.dark .achievement-card.hidden-achievement.unlocked.completed {
  background-color: #3e2723 !important; /* Dark brown matching tier 3 achievements */
  border-color: #000000 !important;
}

/* Nuclear option - force dark brown color for secret achievements with maximum specificity */
body.dark .achievement-card.hidden-achievement.unlocked.completed,
.dark-mode .achievement-card.hidden-achievement.unlocked.completed,
html.dark .achievement-card.hidden-achievement.unlocked.completed,
html body.dark .achievement-card.hidden-achievement.unlocked.completed {
  background-color: #3e2723 !important; /* FORCE dark brown matching tier 3 achievements */
  background: #3e2723 !important; /* Override any background shorthand */
  border-color: #000000 !important;
}

.dark .achievement-card.unlocked {
  background-color: rgba(62, 39, 35, 0.95);
  border-color: #000000;
}

.dark .achievement-description {
  color: #fff8e1;
}

.dark .progress-text {
  color: #fff8e1;
}

/* ===============================================================================
                                DREAM MODE STYLES
=============================================================================== */

.customer-stats-container.dream {
  background-color: #222;
  background-image: 
    ,
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%);
  background-size: cover, 300px 300px, 300px 300px;
  background-position: center, 0 0, 150px 150px;
  background-blend-mode: color-burn;
}

.customer-stats-container.dream::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.customer-stats-container.dream::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream .stats-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream .stats-main-container {
  border: 3px solid #000000;
}

.dream .stats-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream .stats-title-panel h2 {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
  animation: none;
}

.dream .close-btn {
  background: #8d6e63;
  border: 3px solid #000000;
  color: #000000;
}

.dream .close-btn:hover {
  background: #a1887f;
  color: #000000;
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.dream .stats-section {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream .stats-section h3 {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
  animation: none;
}

.dream .stat-item {
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid #000000;
}

.dream .stat-label {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .stat-value {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .progress-info p {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .progress-bar {
  background: rgba(45, 20, 60, 0.95); /* Match the achievements title panel color */
  border: 3px solid #000000;
}

.dream .progress-fill {
  background: linear-gradient(135deg, #8d6e63, #5d4037);
}

.dream .flavor-item {
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid #000000;
}

.dream .flavor-name {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .flavor-counts {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .achievement-card {
  background: rgba(255, 255, 255, 0.15);
  border: 3px solid #000000;
}

.dream .achievement-card.unlocked {
  background: rgba(255, 255, 255, 0.25);
  border: 3px solid #000000;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.dream .achievement-description {
  color: #fff;
  text-shadow: none;
}

.dream .progress-text {
  color: #ff0000; /* Red text for dream mode */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* 1px black outline around text */
  animation: none;
}

/* Dream mode overrides for tier-specific achievement progress text */
.dream .achievement-card.unlocked[data-tier="2"] .progress-text {
  color: #ff0000 !important; /* Red text for dream mode tier 2 achievements */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream .achievement-card.unlocked[data-tier="3"] .progress-text {
  color: #ff0000 !important; /* Red text for dream mode tier 3 achievements */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

/* Dream mode animations */
@keyframes dreamText {
  0% { color: #ff6b6b; }
  16.666% { color: #feca57; }
  33.333% { color: #48dbfb; }
  50% { color: #ff9ff3; }
  66.666% { color: #54a0ff; }
  83.333% { color: #5f27cd; }
  100% { color: #ff6b6b; }
}

/* ===============================================================================
                                RESPONSIVE DESIGN
=============================================================================== */

@media (max-width: 768px) {
  .stats-background-panel {
    padding: 1rem;
    margin: 0.5rem;
    width: calc(100% - 1rem);
  }
  
  .stats-main-container {
    padding: 1rem;
  }
  
  .stats-title-panel {
    padding: 0.75rem 1rem;
  }
  
  .stats-title-panel h2 {
    font-size: 2rem;
  }
  
  .achievements-grid {
    grid-template-columns: 1fr;
  }
  
  .user-info, .purchase-stats {
    grid-template-columns: 1fr;
  }
  
  .stat-item {
    padding: 1rem;
  }
  
  .close-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .stats-background-panel {
    padding: 0.75rem;
  }
  
  .stats-main-container {
    padding: 0.75rem;
  }
  
  .stats-section {
    padding: 1rem;
  }
  
  .stats-title-panel h2 {
    font-size: 1.8rem;
  }
  
  .achievement-card {
    padding: 1rem;
  }
} 

/* Level Up Popup Styles */
.level-up-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease-in-out;
}

/* Theme-appropriate background panel */
.level-up-background-panel {
  padding: 2rem;
  border-radius: 20px;
  max-width: 500px;
  width: 90%;
  position: relative;
}

/* Light mode background panel */
.level-up-background-panel.light-mode {
  background: linear-gradient(135deg, #f5f5dc, #e8e8dc);
  border: 3px solid #8d6e63;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Dark mode background panel */
.level-up-background-panel.dark-mode {
  background: #2a2a2a;
  border: 3px solid #000000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Dream mode background panel */
.level-up-background-panel.dream-mode {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 3px solid #ff00cc;
  box-shadow: 0 10px 30px rgba(255, 0, 204, 0.3);
}

/* Main container */
.level-up-main-container {
  width: 100%;
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
}

/* Light mode main container */
.level-up-main-container.light-mode {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #8d6e63;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dark mode main container */
.level-up-main-container.dark-mode {
  background: rgba(62, 39, 35, 0.9);
  border: 2px solid #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Dream mode main container */
.level-up-main-container.dream-mode {
  background: rgba(45, 20, 60, 0.9);
  border: 2px solid #ff00cc;
  box-shadow: 0 4px 12px rgba(255, 0, 204, 0.2);
}

.level-up-popup {
  border-radius: 12px;
  text-align: center;
  position: relative;
}

/* Remove old background styles since we now have the panel structure */
.level-up-popup.light-mode,
.level-up-popup.dark-mode,
.level-up-popup.dream-mode {
  background: transparent;
  border: none;
  box-shadow: none;
}

.level-up-content h2 {
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 15px;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}

.level-up-content p {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 20px;
  text-shadow: 1px 1px 0 #000;
}

/* Dark mode specific styles for level-up popup */
.level-up-title.dark-mode {
  color: #4CAF50 !important;
  font-size: 2.6rem;
  margin-bottom: 15px;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
}

.level-up-message.dark-mode {
  color: #000 !important;
  font-size: 1.2rem;
  margin-bottom: 5px;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

.level-up-level.dark-mode {
  color: #4CAF50 !important;
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
  font-family: 'The Wanters DEMO', serif;
}

.reward-section {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  padding: 20px;
  margin: 20px 0;
}

/* Dark mode reward section */
.level-up-main-container.dark-mode .reward-section {
  background: #8d6e63;
  border: 2px solid #000;
}

.reward-section h3 {
  color: #FFD700;
  font-size: 1.4rem;
  margin-bottom: 10px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.reward-text {
  color: #FFD700 !important;
  font-size: 1.3rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.reward-text.dark-mode {
  color: #4CAF50 !important;
  font-size: 1.1rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

/* Free bag rewards styling - cyan and larger */
.reward-text.dark-mode.free-bag-reward {
  color: #00ffff !important;
  font-size: 1.4rem !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

.message-text {
  color: #fff !important;
  font-size: 1rem !important;
  margin-bottom: 0 !important;
}

.message-text.dark-mode {
  color: #000 !important;
  font-size: 1.1rem !important;
  margin-bottom: 0 !important;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

/* Light mode specific styles for level-up popup */
.level-up-title.light-mode {
  color: #4CAF50 !important;
  font-size: 2.6rem;
  margin-bottom: 15px;
  text-shadow: none !important;
}

.level-up-message.light-mode {
  color: #000 !important;
  font-size: 1.2rem;
  margin-bottom: 5px;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

.level-up-level.light-mode {
  color: #4CAF50 !important;
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-shadow: none !important;
  font-family: 'The Wanters DEMO', serif;
}

.reward-text.light-mode {
  color: #4CAF50 !important;
  font-size: 1.1rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: none !important;
}

.message-text.light-mode {
  color: #000 !important;
  font-family: Verdana, sans-serif !important;
  font-size: 1.1rem !important;
  margin-bottom: 0 !important;
  text-shadow: none !important;
}

/* Dream mode specific styles for level-up popup */
.level-up-title.dream-mode {
  color: #4CAF50 !important;
  font-size: 2.6rem;
  margin-bottom: 15px;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
}

.level-up-message.dream-mode {
  color: #000 !important;
  font-size: 1.2rem;
  margin-bottom: 5px;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

.level-up-level.dream-mode {
  color: #4CAF50 !important;
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
  font-family: 'The Wanters DEMO', serif;
}

.reward-text.dream-mode {
  color: #4CAF50 !important;
  font-size: 1.1rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

.message-text.dream-mode {
  color: #000 !important;
  font-family: Verdana, sans-serif !important;
  font-size: 1.1rem !important;
  margin-bottom: 0 !important;
  text-shadow: none !important;
}

.close-popup-btn {
  background: linear-gradient(135deg, #FFD700, #FFA000);
  color: #000;
  border: 2px solid #000;
  border-radius: 25px;
  padding: 12px 30px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: none;
  margin-top: 15px;
}

.close-popup-btn:hover {
  background: linear-gradient(135deg, #FFA000, #FF8F00);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Hidden Achievement Styles */
.hidden-achievement {
  background: linear-gradient(135deg, #4a4a4a, #2e2e2e) !important;
  border: 2px solid #666 !important;
}

.hidden-achievement.completed {
  background-color: #8d6e63 !important; /* Solid color instead of gradient */
  border: 2px solid #FFD700 !important;
}

.hidden-achievement .achievement-name {
  color: #8d6e63; /* Light brown for better visibility in light mode */
}

.hidden-achievement.completed .achievement-name {
  color: #00ffff !important; /* Cyan color like locked achievements */
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000 !important;
}

.hidden-achievement .achievement-description {
  color: #999;
}

.hidden-achievement.completed .achievement-description {
  color: #fff !important;
}

/* Dark mode overrides for hidden achievements */
.dark .hidden-achievement:not(.completed) {
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a) !important;
  border: 2px solid #444 !important;
}

.dark .hidden-achievement.completed,
.dark .achievement-card.hidden-achievement.completed {
  background-color: #3e2723 !important; /* Dark brown matching tier 3 achievements */
  border: 2px solid #000000 !important;
}

.dark .hidden-achievement .achievement-name {
  color: #8d6e63 !important;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000 !important;
}

.dark .hidden-achievement.completed .achievement-name {
  color: #00ffff !important; /* Cyan color like locked achievements */
  background-color: #3e2723 !important; /* Dark brown background matching tier 3 achievements */
  border: 2px solid #000000 !important; /* Black border */
}

/* Ultra-high specificity override for secret achievements in dark mode */
body.dark .achievement-card.hidden-achievement.unlocked.completed .achievement-name,
.dark-mode .achievement-card.hidden-achievement.unlocked.completed .achievement-name,
.dark .achievement-card.hidden-achievement.unlocked.completed .achievement-name {
  color: #00ffff !important; /* Cyan color like locked achievements */
  background-color: #3e2723 !important; /* Dark brown background matching tier 3 achievements */
  border: 2px solid #000000 !important; /* Black border */
}

/* Dream mode styling for secret achievements */
.dream .hidden-achievement.completed .achievement-name {
  color: #00ffff !important; /* Cyan text matching tier 3 achievements */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  background-color: #1a1a1a !important; /* Dark grey background for dream mode secret achievements */
  border: 2px solid #000000 !important; /* Black border */
}

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

@keyframes popupSlideIn {
  from {
    transform: translateY(-50px) scale(0.8);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
} 
/* Custom Font */
@font-face {
  font-family: 'The Wanters DEMO';
  src: url('/fonts/The%20Wanters%20DEMO.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --text-muted: #666666;
  --button-bg: #e0e0e0;
  --card-bg: #ffffff;
  --image-placeholder-bg: #f5f5f5;
  --placeholder-stripe1: #f0f0f0;
  --placeholder-stripe2: #e6e6e6;
  --tag-bg: #f0f0f0;
  --nav-bg: #f5f5f5;
  --border-color: #e0e0e0;
  --font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --landing-button-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #000000;
  --text-muted: #000000;
  --button-bg: #333333;
  --card-bg: #2d2d2d;
  --image-placeholder-bg: #333333;
  --placeholder-stripe1: #2d2d2d;
  --placeholder-stripe2: #383838;
  --tag-bg: #404040;
  --nav-bg: #2a2a2a;
  --border-color: #444444;
}

/* Dream Mode - Dark Grey Theme with Subtle Patterns */
.dream-mode {
  --bg-color: #111111;
  --text-color: #00ffbb;
  --text-muted: #b347ea;
  --button-bg: #8d6e63;
  --card-bg: rgba(20, 20, 20, 0.9);
  --image-placeholder-bg: #1a1a1a;
  --placeholder-stripe1: #1a1a1a;
  --placeholder-stripe2: #2a2a2a;
  --tag-bg: #2a2a2a;
  --nav-bg: #111111;
  --border-color: #333333;
  
  /* Apply complex dark pattern background */
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(75,0,130,0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(0,0,128,0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 25%, rgba(46,139,87,0.08) 0%, transparent 40%),
    radial-gradient(circle at 25% 75%, rgba(138,43,226,0.08) 0%, transparent 40%),
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(75,0,130,0.05) 0deg 30deg,
      transparent 30deg 60deg,
      rgba(0,0,128,0.05) 60deg 90deg,
      transparent 90deg 120deg
    ),
    linear-gradient(30deg, rgba(30,30,30,0.8) 12%, transparent 12.5%, transparent 87%, rgba(30,30,30,0.8) 87.5%, rgba(30,30,30,0.8)),
    linear-gradient(150deg, rgba(25,25,25,0.7) 12%, transparent 12.5%, transparent 87%, rgba(25,25,25,0.7) 87.5%, rgba(25,25,25,0.7)),
    linear-gradient(90deg, rgba(20,20,20,0.6) 12%, transparent 12.5%, transparent 87%, rgba(20,20,20,0.6) 87.5%, rgba(20,20,20,0.6)),
    linear-gradient(60deg, rgba(35,35,35,0.4) 25%, transparent 25.5%, transparent 75%, rgba(35,35,35,0.4) 75%, rgba(35,35,35,0.4)),
    linear-gradient(120deg, rgba(28,28,28,0.5) 25%, transparent 25.5%, transparent 75%, rgba(28,28,28,0.5) 75%, rgba(28,28,28,0.5));
  background-size: 120px 120px, 100px 100px, 80px 80px, 90px 90px, 200px 200px, 40px 70px, 35px 60px, 50px 85px, 30px 50px, 45px 75px;
  background-position: 0 0, 60px 60px, 40px 40px, 45px 45px, 0 0, 0 0, 17px 30px, 25px 42px, 0 0, 22px 37px;
}

/* Dream Mode Text Animation - Modified Colors */
.dream-mode h1, 
.dream-mode h2, 
.dream-mode h3, 
.dream-mode p:not(.app-subtitle), 
.dream-mode span, 
.dream-mode a {
  animation: dreamText 20s infinite linear;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
}

@keyframes dreamText {
  0% {
    color: #4b0082; /* Indigo (darker purple) */
  }
  20% {
    color: #000080; /* Navy (darker blue) */
  }
  40% {
    color: #0072b1; /* Darker light blue */
  }
  60% {
    color: #2e8b57; /* Sea green (darker light green) */
  }
  80% {
    color: #006400; /* Dark green */
  }
  100% {
    color: #4b0082; /* Back to indigo for smooth loop */
  }
}

/* Dream Mode Button Animation */
.dream-mode button,
.dream-mode .button,
.dream-mode .nav-button,
.dream-mode .home-button,
.dream-mode .privacy-button,
.dream-mode .switch,
.dream-mode .quantity-button,
.dream-mode .remove-item-button,
.dream-mode .checkout-button,
.dream-mode .back-to-cart-button,
.dream-mode .submit-button,
.dream-mode .add-to-cart-button,
.dream-mode .view-cart-button,
.dream-mode .continue-shopping-button,
.dream-mode .back-to-products,
.dream-mode a[class*="button"] {
  animation: none !important;
  border: 3px solid #000000 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}

/* Special handling for landing buttons to maintain their specific font size */
.dream-mode .landing-button {
  animation: none !important;
  border: 3px solid #000000 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  /* Font size will be handled by LandingScreen.css specific rules */
}

.dream-mode .home-button:hover,
.dream-mode .privacy-button:hover,
.dream-mode .nav-button:hover,
.dream-mode .back-button:hover,
.dream-mode button:hover:not(.close-btn):not(.daydreamers-logout-button):not(.achievements-btn),
.dream-mode .button:hover:not(.close-btn):not(.daydreamers-logout-button):not(.achievements-btn),
.dream-mode .switch:hover,
.dream-mode .quantity-button:hover,
.dream-mode .remove-item-button:hover,
.dream-mode .checkout-button:hover,
.dream-mode .back-to-cart-button:hover,
.dream-mode .submit-button:hover,
.dream-mode .add-to-cart-button:hover,
.dream-mode .view-cart-button:hover,
.dream-mode .continue-shopping-button:hover,
.dream-mode .back-to-products:hover,
.dream-mode a[class*="button"]:hover:not(.close-btn):not(.daydreamers-logout-button):not(.achievements-btn) {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleGlobal 1.5s ease-in-out infinite alternate !important;
}

/* Landing button hover effects are handled specifically in LandingScreen.css */

/* Dream Mode Toggle Switch */
.dream-mode .slider {
  background: linear-gradient(45deg, #4b0082, #000080, #0072b1, #2e8b57, #006400);
  background-size: 400% 400%;
  animation: dreamGradient 15s infinite alternate;
}

.dream-mode .slider:before {
  background: #000;
  box-shadow: 0 0 10px #fff, 0 0 20px #fff;
}

@keyframes dreamGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes dreamSparkleGlobal {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Global touch scrolling optimization for all scrollable containers */
* {
  -webkit-overflow-scrolling: touch;
}

/* Ensure all scrollable elements have proper touch behavior */
[class*="container"],
[class*="panel"],
[class*="modal"],
[class*="overlay"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* High specificity touch scrolling for all scrollable elements - cannot be overridden */
*[style*="overflow"] {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* Specific touch scrolling for common scrollable classes */
.customer-stats-container,
.stats-main-container,
.user-menu-modal,
.free-bag-codes-panel,
.privacy-details,
.admin-background-panel,
.admin-container,
.admin-popup,
.admin-modal,
.error-stack {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* Global button font styling - applies to all buttons and button-like elements */
button, 
input[type="button"], 
input[type="submit"], 
input[type="reset"],
.button,
.btn,
.nav-button,
.home-button,
.landing-button,
.back-button,
.view-cart-button,
.continue-shopping-button,
.back-to-products,
.add-to-cart-button,
.quantity-button,
.remove-item-button,
.checkout-button,
.submit-button,
.retry-button,
.theme-toggle,
.back-to-cart-button,
a[class*="button"],
*[class*="button"] {
  font-family: var(--font-family) !important;
}

button, input, textarea, select {
  font-family: var(--font-family);
}

a {
  color: #8d6e63;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Remove underlines from buttons and navigation links on hover */
button:hover,
.nav-button:hover,
.home-button:hover,
.landing-button:hover,
.back-button:hover,
.view-cart-button:hover,
.continue-shopping-button:hover,
.back-to-products:hover {
  text-decoration: none !important;
}

/* Cart empty state - greyed out */
.view-cart-button.cart-empty,
.back-to-cart-button.cart-empty {
  opacity: 0.4;
  color: #999999 !important;
  background-color: #cccccc !important;
  cursor: default;
  pointer-events: none;
}

.view-cart-button.cart-empty:hover,
.back-to-cart-button.cart-empty:hover {
  opacity: 0.4;
  color: #999999 !important;
  background-color: #cccccc !important;
  transform: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  font-weight: normal;
}

/* Dark mode overrides to ensure black text */
.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3, 
.dark-mode h4, 
.dark-mode h5, 
.dark-mode h6,
.dark-mode p,
.dark-mode span,
.dark-mode div,
.dark-mode a,
.dark-mode button,
.dark-mode input,
.dark-mode textarea,
.dark-mode select,
.dark-mode label {
  color: #000000 !important;
}

/* Override any text-shadow in dark mode */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  text-shadow: none !important;
}

/* Apply dream mode styling to all menu pages */
.dream-mode.landing-screen,
.dream-mode.options-page,
.dream-mode.contact-page,
.dream-mode.privacy-policy-page,
.dream-mode.cart-page,
.dream-mode.order-submission,
.dream-mode.main-menu,
.dream-mode.product-detail {
  background-color: #222;

  background-size: cover;
  background-position: center;
  background-blend-mode: color-burn;
  color: var(--text-color);
  position: relative;
}

/* Dream mode container borders */
.dream-mode .options-container,
.dream-mode .contact-container,
.dream-mode .privacy-policy-container,
.dream-mode .theme-switch-container .switch-track {
  border: 3px solid #000000;
}

.dream-mode .theme-switch-container .switch-button {
  border: 2px solid #000000;
}

.dream-mode.landing-screen::before,
.dream-mode.options-page::before,
.dream-mode.contact-page::before,
.dream-mode.privacy-policy-page::before,
.dream-mode.cart-page::before,
.dream-mode.order-submission::before,
.dream-mode.main-menu::before,
.dream-mode.product-detail::before {
  background-color: rgba(34, 34, 34, 0.85);
}

/* Dream mode cart empty state */
.dream-mode .view-cart-button.cart-empty,
.dream-mode .back-to-cart-button.cart-empty {
  opacity: 0.4;
  color: #666666 !important;
  background-color: #444444 !important;
  border: 2px solid #666666 !important;
}

/* Error Boundary Styles */
.error-boundary {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--bg-color);
  padding: 2rem;
}

.error-container {
  background-color: var(--card-bg);
  border: 3px solid #f44336;
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  text-align: center;
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.2);
}

.error-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.error-title {
  color: #f44336;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1rem;
  font-family: var(--font-family);
}

.error-message {
  color: var(--text-color);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.error-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.error-actions .retry-button,
.error-actions .home-button {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.error-actions .retry-button {
  background-color: #f44336;
  color: white;
}

.error-actions .retry-button:hover {
  background-color: #d32f2f;
  transform: translateY(-2px);
}

.error-actions .home-button {
  background-color: #8d6e63;
  color: white;
}

.error-actions .home-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
}

/* Dark mode error home button glow */
.dark-mode .error-actions .home-button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.error-details {
  margin-top: 2rem;
  text-align: left;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1rem;
  background-color: #f9f9f9;
}

.error-details summary {
  cursor: pointer;
  font-weight: 600;
  color: #666;
  margin-bottom: 0.5rem;
}

.error-stack {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
  color: #333;
  background-color: #fff;
  padding: 0.5rem;
  border-radius: 4px;
  overflow-x: auto;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Dark mode error styles */
.dark-mode .error-container {
  background-color: #2a2a2a;
  border-color: #f44336;
}

.dark-mode .error-message {
  color: #ffffff;
}

.dark-mode .error-details {
  background-color: #333;
  border-color: #555;
}

.dark-mode .error-details summary {
  color: #ccc;
}

.dark-mode .error-stack {
  background-color: #444;
  color: #fff;
}

/* Dream mode error styles */
.dream-mode .error-container {
  background-color: rgba(34, 34, 34, 0.9);
  border: 2px solid #000000;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(128, 0, 128, 0.4),
    0 0 30px rgba(75, 0, 130, 0.3);
}

.dream-mode .error-title {
  color: #ff6b6b;
  text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}

.dream-mode .error-message {
  color: #ffffff;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.dream-mode .error-actions .retry-button,
.dream-mode .error-actions .home-button {
  border: 2px solid #000000;
  box-shadow: 0 0 10px rgba(128, 0, 128, 0.5);
}

.dream-mode .error-actions .retry-button:hover,
.dream-mode .error-actions .home-button:hover {
  box-shadow: 
    0 0 15px rgba(128, 0, 128, 0.7),
    0 0 25px rgba(75, 0, 130, 0.5);
}

@media (max-width: 768px) {
  .error-container {
    padding: 1.5rem;
  }
  
  .error-title {
    font-size: 1.5rem;
  }
  
  .error-message {
    font-size: 1rem;
  }
  
  .error-actions {
    flex-direction: column;
  }
  
  .error-actions .retry-button,
  .error-actions .home-button {
    width: 100%;
  }
}

.dream-mode .landing-button,
.dream-mode .home-button,
.dream-mode .nav-button,
.dream-mode .contact-button,
.dream-mode .privacy-button,
.dream-mode .view-cart-button,
.dream-mode .add-to-cart-button,
.dream-mode .quantity-button,
.dream-mode .back-button,
.dream-mode .submit-button,
.dream-mode .retry-button,
.dream-mode .options-button,
.dream-mode .cart-button,
.dream-mode .size-option,
.dream-mode .theme-toggle,
.dream-mode .continue-shopping-button,
.dream-mode .back-to-products,
.dream-mode .back-to-cart-button,
.dream-mode a[class*="button"] {
  border: 2px solid #000 !important;
}

/* Button borders for all themes */
.light-mode .submit-button,
.light-mode .remove-item-button,
.light-mode .add-to-cart-button,
.light-mode .quantity-button,
.light-mode .back-button,
.light-mode .continue-shopping-button,
.light-mode .back-to-products,
.light-mode .view-cart-button,
.light-mode .back-to-cart-button,
.light-mode .cart-button,
.light-mode .options-button,
.light-mode .size-option,
.light-mode .theme-toggle,
.light-mode .home-button,
.light-mode .landing-button,
.light-mode .nav-button,
.light-mode .checkout-button,
.light-mode a[class*="button"] {
  border: 3px solid #3e2723 !important;
}
.dark-mode .submit-button,
.dark-mode .remove-item-button,
.dark-mode .add-to-cart-button,
.dark-mode .quantity-button,
.dark-mode .back-button,
.dark-mode .continue-shopping-button,
.dark-mode .back-to-products,
.dark-mode .view-cart-button,
.dark-mode .back-to-cart-button,
.dark-mode .cart-button,
.dark-mode .options-button,
.dark-mode .size-option,
.dark-mode .theme-toggle,
.dark-mode a[class*="button"] {
  border: 2px solid #000 !important;
}
.dream-mode .submit-button,
.dream-mode .remove-item-button,
.dream-mode .add-to-cart-button,
.dream-mode .quantity-button,
.dream-mode .back-button,
.dream-mode .continue-shopping-button,
.dream-mode .back-to-products,
.dream-mode .view-cart-button,
.dream-mode .back-to-cart-button,
.dream-mode .cart-button,
.dream-mode .options-button,
.dream-mode .size-option,
.dream-mode .theme-toggle,
.dream-mode a[class*="button"] {
  border: 2px solid #000 !important;
}

.light-mode .quantity-button,
.light-mode .remove-item-button,
.light-mode .add-to-cart-button,
.light-mode .submit-button,
.light-mode .continue-shopping-button,
.light-mode .back-to-products,
.light-mode .view-cart-button,
.light-mode .back-to-cart-button,
.light-mode .cart-button,
.light-mode .options-button,
.light-mode .size-option,
.light-mode .theme-toggle,
.light-mode .home-button,
.light-mode .landing-button,
.light-mode .nav-button,
.light-mode .checkout-button,
.light-mode a[class*="button"] {
  border: 3px solid #3e2723 !important;
}
.dark-mode .quantity-button,
.dark-mode .remove-item-button,
.dark-mode .add-to-cart-button,
.dark-mode .submit-button,
.dark-mode .continue-shopping-button,
.dark-mode .back-to-products,
.dark-mode .view-cart-button,
.dark-mode .back-to-cart-button,
.dark-mode .cart-button,
.dark-mode .options-button,
.dark-mode .size-option,
.dark-mode .theme-toggle,
.dark-mode a[class*="button"] {
  border: 2px solid #000 !important;
}
.dream-mode .quantity-button,
.dream-mode .remove-item-button,
.dream-mode .add-to-cart-button,
.dream-mode .submit-button,
.dream-mode .continue-shopping-button,
.dream-mode .back-to-products,
.dream-mode .view-cart-button,
.dream-mode .back-to-cart-button,
.dream-mode .cart-button,
.dream-mode .options-button,
.dream-mode .size-option,
.dream-mode .theme-toggle,
.dream-mode a[class*="button"] {
  border: 2px solid #000 !important;
}

.dream-mode::before,
.dream-mode::after,
.dream-mode .main-menu::before,
.dream-mode .main-menu::after,
.dream-mode .landing-screen::before,
.dream-mode .landing-screen::after,
.dream-mode .product-detail::before,
.dream-mode .product-detail::after,
.dream-mode .cart-page::before,
.dream-mode .cart-page::after,
.dream-mode .order-submission::before,
.dream-mode .order-submission::after,
.dream-mode .options-page::before,
.dream-mode .options-page::after,
.dream-mode .privacy-policy-page::before,
.dream-mode .privacy-policy-page::after,
.dream-mode .contact-page::before,
.dream-mode .contact-page::after {
  animation: dreamRainbowHue 40s linear infinite;
  animation-delay: 0s;
  opacity: 0.55;
}

@keyframes dreamRainbowHue {
  0%   { filter: hue-rotate(240deg) saturate(1.2) brightness(1); }
  12.5% { filter: hue-rotate(270deg) saturate(1.2) brightness(1.05); }
  25%  { filter: hue-rotate(300deg) saturate(1.2) brightness(1.1); }
  37.5% { filter: hue-rotate(330deg) saturate(1.2) brightness(1.05); }
  50%  { filter: hue-rotate(0deg)   saturate(1.2) brightness(1); }
  62.5% { filter: hue-rotate(30deg)  saturate(1.2) brightness(1.05); }
  75%  { filter: hue-rotate(60deg)  saturate(1.2) brightness(1.1); }
  87.5% { filter: hue-rotate(90deg)  saturate(1.2) brightness(1.05); }
  100% { filter: hue-rotate(240deg) saturate(1.2) brightness(1); }
}

/* Dream Mode Home Button - match main menu style */
.dream-mode .home-button {
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.5px !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  text-shadow: none !important;
  animation: none !important;
  font-family: var(--font-family);
  transition: all 0.3s ease;
}

.dream-mode .home-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleMainMenu 1.5s ease-in-out infinite alternate !important;
} 

/* Achievements button universal style */
.achievements-btn {
  background: #228B22 !important; /* Forest green */
  color: #fff;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  border: 3px solid #3e2723;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  letter-spacing: 0.02em;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  outline: none;
  display: inline-block;
}

/* Black border in dark mode */
.dark-mode .achievements-btn {
  border: 3px solid #000 !important;
}

/* Forest green in dream mode with high specificity */
.dream-mode .achievements-btn,
body.dream-mode .achievements-btn {
  background: #228B22 !important;
  border: 3px solid #3e2723;
}

.achievements-btn:hover {
  background: #2eaf2e !important;
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.achievements-btn:active, .achievements-btn:focus {
  background: #228B22 !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transform: translateY(0);
} 

.dream-mode .achievements-btn:hover,
body.dream-mode .achievements-btn:hover {
  background: #17641a !important;
  color: #fff !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 0 18px 4px #228B22, 0 4px 16px rgba(0,0,0,0.22) !important;
  animation: none !important;
} 
.landing-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.landing-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.landing-screen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.landing-background-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #8d6e63;
  border-radius: 25px;
  padding: 3rem 2rem 2rem 2rem;
  margin: 2rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(5px);
  max-width: 600px;
  width: 90%;
}

.landing-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
  max-width: 100%;
  width: 100%;
  padding: 0;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.landing-screen .title-panel {
  background-color: rgba(245, 245, 220, 0.9);
  border: 1.5px solid #3e2723;
  border-radius: 20px;
  padding: clamp(1rem, 4vw, 2rem) clamp(1.5rem, 6vw, 3rem); /* Responsive padding */
  margin-bottom: 2rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  position: relative;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  min-width: 0; /* Allow shrinking */
}

.app-title {
  font-size: clamp(3rem, 8vw, 7rem); /* Responsive font size */
  font-weight: 1000; /* Extra bold */
  margin: 0;
  color: #3e2723; /* Dark brown text */
  animation: fadeIn 1s ease-in-out;
  line-height: 1.1;
  letter-spacing: clamp(1px, 0.5vw, 2px); /* Responsive letter spacing */
  text-align: center;
  word-break: break-word; /* Allow breaking if needed */
  max-width: 100%;
  cursor: pointer;
  transition: color 0.3s ease;
}

.app-subtitle {
  font-size: 1.5rem;
  margin-bottom: 3rem;
  color: #5d4037; /* Medium brown text */
  font-style: italic;
  animation: fadeIn 1s ease-in-out 0.3s forwards;
  opacity: 0;
}

.landing-buttons {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
  animation: fadeIn 1s ease-in-out 0.6s forwards;
  opacity: 0;
  width: 100%;
  max-width: 300px;
}

.landing-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63; /* Medium brown */
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  font-family: var(--landing-button-font);
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
}

.landing-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f; /* Lighter brown on hover */
}

/* Enhanced hover effects for all modes */
.light-mode .landing-button:hover {
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(141, 110, 99, 0.4),
    0 0 25px rgba(93, 64, 55, 0.3);
}

.dark-mode .landing-button:hover {
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(161, 136, 127, 0.5),
    0 0 25px rgba(93, 64, 55, 0.4);
}

.theme-toggle {
  position: fixed;
  bottom: 2rem;
  padding: 0.75rem 1.5rem;
  background-color: #6d4c41; /* Darker brown */
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 1rem;
  font-family: var(--font-family);
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  animation: fadeIn 1s ease-in-out 0.9s forwards;
  opacity: 0;
  z-index: 1;
}

.theme-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  background-color: #795548;
}

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

/* Dark mode specific styles */
.dark-mode .landing-screen {
  background-color: #3e2723; /* Dark brown background */
  background-blend-mode: multiply;
  background-image: 
    ,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 84 48'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23412f2a' fill-opacity='0.25'%3E%3Cpath d='M42 48c23.196 0 42-10.745 42-24S65.196 0 42 0 0 10.745 0 24s18.804 24 42 24zm0-5c19.33 0 35-8.954 35-19s-15.67-19-35-19S7 13.954 7 24s15.67 19 35 19z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 120px 120px;
  background-position: center, center;
  position: relative;
}

.dark-mode .landing-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode .landing-screen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Light mode title with no outline for clean look */
.landing-screen:not(.dark-mode):not(.dream-mode) .app-title {
  text-shadow: none; /* No outline in light mode */
}

.dark-mode.landing-screen .app-title {
  color: #8d6e63 !important; /* Match the cream brown button color */
  text-shadow: 
    -1.5px -1.5px 0 #000,
    1.5px -1.5px 0 #000,
    -1.5px 1.5px 0 #000,
    1.5px 1.5px 0 #000 !important; /* 1.5px black outline */
  cursor: pointer;
  transition: color 0.3s ease;
}

/* Dark mode title panel */
.dark-mode.landing-screen .title-panel {
  background-color: rgba(62, 39, 35, 0.9);
  border: 3px solid #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark-mode .app-subtitle {
  color: #8d6e63 !important; /* Same cream brown as the title */
}

.dark-mode .theme-toggle {
  background-color: #4e342e;
  border: 3px solid #000000;
}

.dark-mode .landing-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .landing-button {
  border: 3px solid #000000;
}

/* Dream mode styles */
.dream-mode.landing-screen {
  background-color: #222;
  background-image: 
    ,
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
    linear-gradient(45deg, transparent 24%, rgba(75, 0, 130, 0.05) 25%, rgba(75, 0, 130, 0.05) 26%, transparent 27%, transparent 74%, rgba(138, 43, 226, 0.05) 75%, rgba(138, 43, 226, 0.05) 76%, transparent 77%),
    linear-gradient(-45deg, transparent 24%, rgba(102, 51, 153, 0.05) 25%, rgba(102, 51, 153, 0.05) 26%, transparent 27%, transparent 74%, rgba(60, 30, 80, 0.05) 75%, rgba(60, 30, 80, 0.05) 76%, transparent 77%);
  background-size: cover, 300px 300px, 300px 300px, 60px 60px, 60px 60px;
  background-position: center, 0 0, 150px 150px, 0 0, 30px 30px;
  background-blend-mode: color-burn;
}

.dream-mode.landing-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.landing-screen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

/* Dream mode abstract symmetrical title panel - specific to landing screen */
.dream-mode.landing-screen .title-panel {
  background: #111111 !important;
  background-color: #111111 !important;
  background-image: none !important;
  border: 3px solid #000000;
  border-radius: 20px;
  position: relative;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(26, 26, 26, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .landing-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

/* Dream mode title with black border */
.dream-mode .app-title {
  text-shadow: 
    -1.3px -1.3px 0 #000,
    1.3px -1.3px 0 #000,
    -1.3px 1.3px 0 #000,
    1.3px 1.3px 0 #000 !important;
}

/* Dream mode subtitle with white teal color - FORCE override global dream mode text animation */
.landing-screen.dream-mode .landing-background-panel .landing-content p.app-subtitle,
.dream-mode.landing-screen .landing-background-panel .landing-content .app-subtitle,
.dream-mode .landing-screen .landing-content .app-subtitle,
.dream-mode.landing-screen .landing-content .app-subtitle,
.dream-mode .landing-background-panel .app-subtitle,
.dream-mode p.app-subtitle {
  color: #b0f0f0 !important; /* White teal color */
  animation: none !important;
  text-shadow: none !important;
  background: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Dream mode button text styling - clean bold black text */
.dream-mode .landing-button {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 900 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.5px !important;
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
}

/* Override any global dream mode text effects for landing buttons */
.dream-mode .landing-button:not(:hover) {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-size: 1.6rem !important;
}

/* Ultra-high specificity to ensure dream mode landing buttons match light/dark mode font size */
body.dream-mode .landing-screen .landing-button,
.dream-mode.landing-screen .landing-button,
.dream-mode .landing-screen .landing-button {
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}

/* Dream mode psychedelic smoke button effects */
.dream-mode .landing-button:hover,
.dream-mode .theme-toggle:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleLanding 1.5s ease-in-out infinite alternate !important;
}

.dream-mode .landing-button {
  border: 3px solid #000000;
}

.dream-mode .theme-toggle {
  border: 3px solid #000000;
}

@keyframes dreamSparkleLanding {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

/* Desktop/Large screen styles */
@media (min-width: 1024px) {
  .landing-screen {
    padding: 3rem;
  }
  
  .landing-background-panel {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    padding: 4rem 3rem 3rem 3rem;
  }
  
  .app-subtitle {
    font-size: 1.8rem;
    margin-bottom: 4rem;
  }
  
  .landing-buttons {
    max-width: 350px;
    gap: 2rem;
  }
  
  .landing-button {
    font-size: 1.8rem;
    padding: 1.2rem 2.5rem;
  }
  
  /* Ensure dream mode landing buttons match font size in desktop */
  .dream-mode .landing-button {
    font-size: 1.8rem !important;
  }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1023px) {
  .landing-background-panel {
    max-width: 650px;
    width: 85%;
    margin: 0 auto;
    padding: 3.5rem 2.5rem 2.5rem 2.5rem;
  }
  
  .app-subtitle {
    font-size: 1.6rem;
    margin-bottom: 3.5rem;
  }
  
  .landing-buttons {
    max-width: 320px;
    gap: 1.8rem;
  }
  
  .landing-button {
    font-size: 1.7rem;
    padding: 1.1rem 2.2rem;
  }
  
  /* Ensure dream mode landing buttons match font size in tablet */
  .dream-mode .landing-button {
    font-size: 1.7rem !important;
  }
}

@media (max-width: 768px) {
  .landing-background-panel {
    margin: 1rem;
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    width: 95%;
  }
  
  .app-subtitle {
    font-size: 1.2rem;
  }
  
  .landing-buttons {
    flex-direction: column;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .landing-background-panel {
    margin: 0.5rem;
    padding: 1.5rem 1rem 1rem 1rem;
    width: 98%;
  }
  
  .app-title {
    font-size: 2.8rem;
  }
  
  .title-panel {
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
  }
}

/* Landscape orientation styles - more specific selectors */
@media screen and (orientation: landscape) and (max-height: 768px) {
  .landing-screen .landing-background-panel {
    max-width: 850px !important;
    width: 90% !important;
    margin: 0.5rem auto !important;
    padding: 1.5rem 2.5rem 1rem 2.5rem !important;
  }
  
  .landing-screen .landing-content {
    margin-bottom: 1rem;
  }
  
  .landing-screen .app-title {
    font-size: 3.5rem !important;
    letter-spacing: 1px;
  }
  
  .landing-screen .title-panel {
    padding: 1rem 2rem !important;
    margin-bottom: 0.8rem !important;
  }
  
  .landing-screen .app-subtitle {
    font-size: 1.2rem !important;
    margin-bottom: 1rem !important;
  }
  
  .landing-screen .landing-buttons {
    flex-direction: row !important;
    gap: 2rem !important;
    margin-top: 0.8rem !important;
    justify-content: center;
    max-width: 500px;
  }
  
  .landing-screen .landing-button {
    font-size: 1.3rem !important;
    padding: 0.7rem 1.5rem !important;
    flex: 1;
    max-width: 180px;
  }
  
  /* Ensure dream mode landing buttons match font size in landscape */
  .dream-mode .landing-screen .landing-button {
    font-size: 1.3rem !important;
  }
}

/* Very small landscape screens (phones in landscape) */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .landing-screen .landing-background-panel {
    max-width: 750px !important;
    width: 95% !important;
    margin: 0.3rem auto !important;
    padding: 1rem 2rem 0.8rem 2rem !important;
  }
  
  .landing-screen .app-title {
    font-size: 2.8rem !important;
  }
  
  .landing-screen .title-panel {
    padding: 0.8rem 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .landing-screen .app-subtitle {
    font-size: 1rem !important;
    margin-bottom: 0.8rem !important;
  }
  
  .landing-screen .landing-buttons {
    gap: 1.5rem !important;
    margin-top: 0.5rem !important;
  }
  
  .landing-screen .landing-button {
    font-size: 1.1rem !important;
    padding: 0.6rem 1.2rem !important;
  }
  
  /* Ensure dream mode landing buttons match font size in small landscape */
  .dream-mode .landing-screen .landing-button {
    font-size: 1.1rem !important;
  }
}

/* Utility for Wanters DEMO font with 1px black outline */
.wantersdemo-outline {
  font-family: 'The Wanters DEMO', serif;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* Themed loading bar base styles */
.daydreamers-loading-bar {
  border-radius: 12px;
  height: 28px;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
}

.daydreamers-loading-bar.light {
  background: #f5f5dc;
  border: 3px solid #3e2723;
}
.daydreamers-loading-bar.dark {
  background: #3e2723;
  border: 3px solid #000;
}
.daydreamers-loading-bar.dream {
  background: linear-gradient(90deg, rgba(26, 13, 35, 0.9), rgba(45, 20, 60, 0.9));
  border: 3px solid #000;
  box-shadow: 0 0 8px rgba(45, 20, 60, 0.4);
}

.daydreamers-loading-bar-fill {
  height: 100%;
  border-radius: 12px;
  transition: width 0.5s;
}
.daydreamers-loading-bar-fill.light {
  background: #8d6e63;
}
.daydreamers-loading-bar-fill.dark {
  background: #fff8e1;
}
.daydreamers-loading-bar-fill.dream {
  background: linear-gradient(90deg, rgba(139, 110, 99, 0.9), rgba(93, 64, 55, 0.9));
} 
.main-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0;
  background-color: #f5f5dc; /* Light beige background for light mode */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  min-height: 100vh;
  position: relative;
}

.main-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.main-menu::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.products-title {
  font-size: 6rem;
  font-weight: 700;
  margin: 0;
  color: #3e2723;
  position: relative;
  z-index: 1;
  text-align: center;
  text-shadow: none; /* No outline in light mode */
  cursor: pointer;
  transition: color 0.3s ease;
}

/* NUCLEAR override: absolutely no hover/focus/active effect for products-title in any mode */
.products-title:hover,
.products-title:focus,
.products-title:active,
.light-mode .products-title:hover,
.light-mode .products-title:focus,
.light-mode .products-title:active,
.dark-mode .products-title:hover,
.dark-mode .products-title:focus,
.dark-mode .products-title:active {
  color: inherit !important;
  cursor: default !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  text-shadow: none !important;
  background: none !important;
  background-color: transparent !important;
  opacity: 1 !important;
  pointer-events: none !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Dream mode specific hover overrides - keep the animation */
.dream-mode .products-title:hover,
.dream-mode .products-title:focus,
.dream-mode .products-title:active,
.dream-mode .title-panel .products-title:hover,
.dream-mode .title-panel .products-title:focus,
.dream-mode .title-panel .products-title:active,
.dream-mode .main-menu .products-title:hover,
.dream-mode .main-menu .products-title:focus,
.dream-mode .main-menu .products-title:active {
  color: inherit !important;
  cursor: default !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  animation: dreamText 20s infinite linear !important;
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important;
  background: none !important;
  background-color: transparent !important;
  opacity: 1 !important;
  pointer-events: none !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Force solid background for title panel - MAIN MENU PAGE ONLY */
body .main-menu .title-panel,
.main-menu .title-panel,
.main-menu.light-mode .title-panel,
div.title-panel {
  background-color: #f5f5dc !important;
  background-image: none !important;
  background: #f5f5dc !important;
  border: 3px solid #3e2723 !important;
  border-radius: 20px;
  padding: 2rem 3rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 100 !important;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
}

.home-button-container {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.home-button {
  display: inline-block;
  background-color: #8d6e63;
  color: white;
  font-weight: 600;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 9999px;
  transition: all 0.3s ease;
  font-size: 1.6rem;
  font-family: var(--font-family);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
}

.home-button:hover {
  background-color: #a1887f;
  transform: translateY(-4px);
  color: white;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Light mode home button - ensure pill shape */
.main-menu:not(.dark-mode):not(.dream-mode) .home-button {
  border-radius: 9999px !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  display: inline-block !important;
  text-decoration: none !important;
  border: 3px solid #3e2723 !important;
  background-color: #8d6e63 !important;
  color: white !important;
}

.main-menu:not(.dark-mode):not(.dream-mode) .home-button:hover {
  background-color: #a1887f !important;
  color: white !important;
  text-decoration: none !important;
}

.main-content-panel {
  background-color: #8d6e63;
  border: 3px solid #3e2723;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 1200px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 2rem;
}

.product-card-container {
  cursor: pointer;
  transition: all 0.3s ease;
}

.product-card-container:hover {
  transform: translateY(-8px);
}

.product-card-background {
  background-color: rgba(255, 255, 255, 1);
  border: 3px solid #3e2723;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.product-card-container:hover .product-card-background {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  border-color: #3e2723;
  background-color: rgba(255, 255, 255, 1);
}

.product-name-panel {
  text-align: center;
  padding: 0.75rem;
  background-color: rgba(245, 245, 220, 0.9);
  border: 3px solid #3e2723;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-card-container:hover .product-name-panel {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-color: #3e2723;
  background-color: rgba(245, 245, 220, 1);
}

.product-name {
  font-size: 1.8rem;
  font-weight: 900;
  color: #3e2723;
  font-family: var(--font-family);
  display: block;
  line-height: 1.2;
}

.product-image-card {
  background-color: #5d4037;
  border: 3px solid #000000;
  border-radius: 8px;
  padding: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-card-container:hover .product-image-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-color: #000000;
}

.product-image-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  transition: transform 0.3s ease;
}

.product-card-container:hover .product-image-card img {
  transform: scale(1.05);
}

.view-cart-container {
  display: flex;
  justify-content: center;
  margin: 0;
}

.view-cart-button {
  display: inline-block;
  background-color: #5d4037;
  color: white;
  font-weight: 600;
  text-decoration: none;
  padding: 0.8rem 2rem;
  border-radius: 30px;
  transition: all 0.2s ease;
  font-size: 1.2rem;
  font-family: var(--font-family);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723;
}

.view-cart-button:hover {
  background-color: #795548;
  transform: translateY(-2px);
  color: white;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Dark mode specific styles */
.main-menu.dark-mode {
  background-color: #3e2723; /* Dark brown background */
  background-image: ,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 84 48'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23412f2a' fill-opacity='0.25'%3E%3Cpath d='M42 48c23.196 0 42-10.745 42-24S65.196 0 42 0 0 10.745 0 24s18.804 24 42 24zm0-5c19.33 0 35-8.954 35-19s-15.67-19-35-19S7 13.954 7 24s15.67 19 35 19z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 120px 120px;
  background-position: center, center;
  background-blend-mode: multiply;
  position: relative;
  min-height: 100vh;
}

.main-menu.dark-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.main-menu.dark-mode::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .products-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dark-mode .products-title:hover {
  color: #a1887f !important;
}

body .main-menu.dark-mode .title-panel,
.main-menu.dark-mode .title-panel,
.dark-mode .main-menu .title-panel,
.dark-mode div.title-panel {
  background-color: #3e2723 !important;
  background-image: none !important;
  background: #3e2723 !important;
  border: 3px solid #000000 !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  z-index: 100 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
}

.dark-mode .main-content-panel {
  background-color: #2a2a2a;
  border: 3px solid #000000;
}

.dark-mode .product-card-background {
  background-color: rgba(140, 140, 140, 1);
  border: 3px solid #000000;
}

.dark-mode .product-card-container:hover .product-card-background {
  background-color: rgba(160, 160, 160, 1);
  border-color: #000000;
}

.dark-mode .product-image-card {
  background-color: #5d4037;
  border: 3px solid #000000;
}

.dark-mode .product-name-panel {
  background-color: #8d6e63;
  border: 3px solid #000000;
}

.dark-mode .product-card-container:hover .product-image-card,
.dark-mode .product-card-container:hover .product-name-panel {
  border-color: #000000;
}

.dark-mode .product-name {
  color: #fff8e1;
}

/* Dark mode home button with ultra-high specificity - matching dream mode shape */
body.dark-mode .main-menu .home-button,
.dark-mode.main-menu .home-button,
.dark-mode .main-menu .home-button,
.dark-mode .home-button {
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  border-radius: 9999px !important;
  background-color: #8d6e63 !important;
  font-weight: 900 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.5px !important;
  padding: 1rem 2rem !important;
  max-width: none !important;
  min-width: 0 !important;
  width: auto !important;
  display: inline-block !important;
  text-align: center !important;
  text-decoration: none !important;
}

/* Dark mode home button hover with ultra-high specificity */
body.dark-mode .main-menu .home-button:hover,
.dark-mode.main-menu .home-button:hover,
.dark-mode .main-menu .home-button:hover,
.dark-mode .home-button:hover {
  color: #000000 !important;
  background-color: #a1887f !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-4px) !important;
  text-decoration: none !important;
}

.dark-mode .view-cart-button {
  border: 3px solid #000000;
}

/* Dream mode specific styles */
.main-menu.dream-mode {
  background-color: #0d0d0d;
  background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  position: relative;
  min-height: 100vh;
}

.main-menu.dream-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(13, 13, 13, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.main-menu.dream-mode::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .product-card-background {
  background-color: rgba(190, 190, 190, 1);
  border: 3px solid #000000;
}

.dream-mode .product-card-container:hover .product-card-background {
  background-color: rgba(210, 210, 210, 1);
  border-color: #000000;
}

.dream-mode .product-image-card,
.dream-mode .product-name-panel {
  border: 3px solid #000000;
}

/* Dream mode product name panel styling */
.dream-mode .product-name-panel {
  background-color: #808080 !important; /* Grey background */
}

/* Dream mode product name text styling - with color-changing animation */
.dream-mode .product-name {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Dream mode panel styling */
.dream-mode .main-content-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

body .main-menu.dream-mode .title-panel,
.main-menu.dream-mode .title-panel,
.dream-mode .main-menu .title-panel,
.dream-mode div.title-panel {
  background-color: #111111 !important;
  background-image: none !important;
  background: #111111 !important;
  border: 3px solid #000000 !important;
  border-radius: 20px;
  position: relative;
  z-index: 100 !important;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
}

/* Dream mode title with color-changing animation and black border */
.dream-mode .products-title {
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important; /* Only black border, no glow */
  cursor: default !important; /* Remove pointer cursor */
  transition: none !important; /* Remove all transitions */
}

/* Override global dream mode text glow for products title specifically */
.dream-mode .main-menu .products-title,
.dream-mode .title-panel .products-title,
.main-menu.dream-mode .products-title {
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important; /* Override global glow with only black border */
  animation: dreamText 20s infinite linear !important; /* Keep the color animation */
  cursor: default !important; /* Remove pointer cursor */
  transition: none !important; /* Remove all transitions */
}

/* Completely disable ALL hover effects for dream mode main menu title */
.dream-mode .products-title:hover,
.dream-mode .title-panel .products-title:hover,
.dream-mode .main-menu .products-title:hover {
  color: inherit !important; /* Keep the animated color exactly the same */
  cursor: default !important; /* No pointer cursor */
  transition: none !important; /* No transitions */
  transform: none !important; /* No transforms */
  filter: none !important; /* No filters */
  animation: dreamText 20s infinite linear !important; /* Keep the same animation */
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important; /* Keep the same text-shadow */
  background: none !important; /* No background changes */
  background-color: transparent !important; /* No background color */
  opacity: 1 !important; /* No opacity changes */
}

/* Dream mode button text styling - clean bold black text */
.dream-mode .home-button,
.dream-mode .view-cart-button {
  border: 3px solid #000000;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Override any global dream mode text effects for main menu buttons */
.dream-mode .home-button:not(:hover),
.dream-mode .view-cart-button:not(:hover) {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Dream mode button hover effects with white text and glow animation */
.dream-mode .home-button:hover,
.dream-mode .view-cart-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleMainMenu 1.5s ease-in-out infinite alternate !important;
}

@keyframes dreamSparkleMainMenu {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

@media (max-width: 992px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .products-title {
    font-size: 4.5rem;
  }
  
  .title-panel {
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    max-width: 90%;
  }
  
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-name {
    font-size: 1.6rem;
  }

  .product-card-background {
    padding: 1rem;
  }

  .main-content-panel {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .products-title {
    font-size: 3.5rem;
  }
  
  .title-panel {
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    max-width: 95%;
  }
  
  .products-grid {
    grid-template-columns: 1fr;
  }

  .product-name {
    font-size: 1.4rem;
  }

  .product-card-background {
    padding: 0.8rem;
  }

  .main-content-panel {
    padding: 1rem;
  }
}

/* Light mode hover/active for product name panel */
.product-card-container:hover .product-name-panel,
.product-card-container:active .product-name-panel {
  background-color: #c4a690;
  border-color: #3e2723;
}
.product-card-container:hover .product-name,
.product-card-container:active .product-name {
  color: #3e2723;
}

/* Dark mode hover/active for product name panel */
.dark-mode .product-card-container:hover .product-name-panel,
.dark-mode .product-card-container:active .product-name-panel {
  background-color: #3e2723;
  border-color: #000;
}
.dark-mode .product-card-container:hover .product-name,
.dark-mode .product-card-container:active .product-name {
  color: #8d6e63;
}

/* Dream mode hover/active for product name panel */
.dream-mode .product-card-container:hover .product-name-panel,
.dream-mode .product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #1565c0 0%, #002171 100%); /* blue to much darker blue, top to bottom */
}
.dream-mode .product-card-container:hover .product-name,
.dream-mode .product-card-container:active .product-name {
  /* No color override - keep the animation running */
}

/* Dream mode: unique highlight for each flavour (more distinct colors, black text) */
.dream-mode .flavour-barbecue.product-card-container:hover .product-name-panel,
.dream-mode .flavour-barbecue.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #1565c0 0%, #002171 100%); /* blue to much darker blue, top to bottom */
}
.dream-mode .flavour-smokey-barbecue.product-card-container:hover .product-name-panel,
.dream-mode .flavour-smokey-barbecue.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #00e676 0%, #512da8 100%); /* bright green to indigo, top to bottom */
}
.dream-mode .flavour-teriyaki.product-card-container:hover .product-name-panel,
.dream-mode .flavour-teriyaki.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #ff69b4 0%, #1a1a1a 100%); /* pink to dark grey, top to bottom */
}
.dream-mode .flavour-korean-bbq.product-card-container:hover .product-name-panel,
.dream-mode .flavour-korean-bbq.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #7c4dff 0%, #8e24aa 100%); /* purple, top to bottom */
}
.dream-mode .flavour-sweet-chilli.product-card-container:hover .product-name-panel,
.dream-mode .flavour-sweet-chilli.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #ff9800 0%, #2e7d32 100%); /* orange to dark green, top to bottom */
}
.dream-mode .flavour-exotic-spice.product-card-container:hover .product-name-panel,
.dream-mode .flavour-exotic-spice.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #00bfae 0%, #ff3d00 100%); /* teal to orange-red, top to bottom */
}
.dream-mode .flavour-hot-chilli.product-card-container:hover .product-name-panel,
.dream-mode .flavour-hot-chilli.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #d32f2f 0%, #1a1a1a 100%); /* red to dark grey, top to bottom */
}
.dream-mode .flavour-roast-lamb.product-card-container:hover .product-name-panel,
.dream-mode .flavour-roast-lamb.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #cddc39 0%, #388e3c 100%); /* lime to green, top to bottom */
}
/* Animation is already applied to .dream-mode .product-name - no override needed on hover */

/* ===============================================================================
                      DREAM MODE: DISABLE PRODUCT HOVER EFFECTS
=============================================================================== */

/* Disable card transform on hover in dream mode */
.dream-mode .product-card-container:hover {
  transform: none !important;
}

/* Disable background changes on hover in dream mode */
.dream-mode .product-card-container:hover .product-card-background {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border-color: #000000 !important;
  background-color: rgba(190, 190, 190, 1) !important;
}

/* Disable image card changes on hover in dream mode */
.dream-mode .product-card-container:hover .product-image-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  border-color: #000000 !important;
}

/* Disable image scaling on hover in dream mode */
.dream-mode .product-card-container:hover .product-image-card img {
  transform: none !important;
}

/* Dream mode color-changing text animation */
@keyframes dreamText {
  0% {
    color: #4b0082; /* Indigo (darker purple) */
  }
  20% {
    color: #000080; /* Navy (darker blue) */
  }
  40% {
    color: #0072b1; /* Darker light blue */
  }
  60% {
    color: #2e8b57; /* Sea green (darker light green) */
  }
  80% {
    color: #006400; /* Dark green */
  }
  100% {
    color: #4b0082; /* Back to indigo for smooth loop */
  }
}

/* Sold Out Product Styles */
.product-card-container.sold-out {
  position: relative;
}

.product-image-card {
  position: relative;
  overflow: hidden;
}

.sold-out-image {
  filter: brightness(0.4) saturate(0.6);
  transition: filter 0.3s ease;
}

.sold-out-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.sold-out-text {
  color: #ff0000;
  font-family: 'The Wanters DEMO', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  line-height: 1.4;
  padding: 10px;
}

/* Sold Out overlay main and subtext styling */
.sold-out-main {
  display: block;
  font-size: 2.1rem;
  font-weight: 900;
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', sans-serif !important;
  text-align: center;
  line-height: 1.1;
  margin-bottom: 0.2em;
}

.dark-mode .sold-out-main {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-family: 'The Wanters DEMO', sans-serif !important;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.light-mode .sold-out-main {
  text-shadow: none !important;
}

.sold-out-sub {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: #d32f2f;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  opacity: 0.95;
}

.dark-mode .sold-out-sub {
  color: #d32f2f !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.light-mode .sold-out-sub {
  color: #d32f2f !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.product-card-container.sold-out .product-name-panel {
  background-color: #4a3a2a !important; /* dark brown for dimming */
  opacity: 0.7;
  transition: background 0.3s, background-color 0.3s, opacity 0.3s;
}

.dark-mode .product-card-container.sold-out .product-name-panel {
  background-color: #18100a !important;
  opacity: 0.7;
}

.dream-mode .product-card-container.sold-out .product-name-panel {
  background-color: #222 !important;
  opacity: 0.7;
}

.dream-mode .sold-out-main, .dream-mode .sold-out-sub {
  color: #d32f2f !important;
  font-family: 'The Wanters DEMO', Tahoma, sans-serif !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-weight: 900;
  letter-spacing: 0.5px;
}

/* Remove all product card hover effects in dream mode */
.dream-mode .product-card-container:hover,
.dream-mode .product-card-container:focus,
.dream-mode .product-card-container:active,
.dream-mode .product-card-background:hover,
.dream-mode .product-card-background:focus,
.dream-mode .product-card-background:active {
  background: none !important;
  background-color: inherit !important;
  color: inherit !important;
  box-shadow: none !important;
  border-color: inherit !important;
  filter: none !important;
  outline: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
} 
.network-status {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: 400px;
  width: 90%;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  animation: slideDown 0.3s ease-out;
}

.network-status.online {
  background-color: rgba(76, 175, 80, 0.95);
  border: 2px solid #4CAF50;
  color: white;
}

.network-status.offline {
  background-color: rgba(244, 67, 54, 0.95);
  border: 2px solid #f44336;
  color: white;
}

.network-indicator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.status-icon {
  font-size: 1.5rem;
  min-width: 2rem;
  text-align: center;
}

.status-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.status-text {
  font-weight: 600;
  font-size: 1rem;
}

.online-text {
  color: #ffffff;
}

.offline-text {
  color: #ffffff;
}

.status-details {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.8rem;
  opacity: 0.9;
}

.last-online,
.connection-type {
  color: rgba(255, 255, 255, 0.9);
}

.retry-button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  color: white;
  transition: all 0.2s ease;
}

.retry-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.retry-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.retry-button.retrying {
  animation: spin 1s linear infinite;
}

.offline-message {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.85rem;
  line-height: 1.4;
}

.offline-message p {
  margin: 0.25rem 0;
  color: rgba(255, 255, 255, 0.9);
}

/* Dark mode adjustments */
.dark-mode.network-status.online {
  background-color: rgba(56, 142, 60, 0.95);
  border-color: #388E3C;
}

.dark-mode.network-status.offline {
  background-color: rgba(198, 40, 40, 0.95);
  border-color: #C62828;
}

/* Dream mode adjustments */
.dream-mode.network-status {
  border: 2px solid #000000;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(128, 0, 128, 0.4),
    0 0 30px rgba(75, 0, 130, 0.3);
}

.dream-mode.network-status.online {
  background: linear-gradient(135deg, 
    rgba(46, 139, 87, 0.95) 0%, 
    rgba(0, 100, 0, 0.95) 100%);
}

.dream-mode.network-status.offline {
  background: linear-gradient(135deg, 
    rgba(139, 69, 19, 0.95) 0%, 
    rgba(160, 82, 45, 0.95) 100%);
}

.dream-mode .retry-button {
  border: 1px solid #000000;
  box-shadow: 0 0 10px rgba(128, 0, 128, 0.5);
}

.dream-mode .retry-button:hover {
  box-shadow: 
    0 0 15px rgba(128, 0, 128, 0.7),
    0 0 25px rgba(75, 0, 130, 0.5);
}

/* Animations */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .network-status {
    top: 10px;
    padding: 0.75rem;
    font-size: 0.9rem;
  }
  
  .status-icon {
    font-size: 1.25rem;
    min-width: 1.5rem;
  }
  
  .retry-button {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }
  
  .status-details {
    font-size: 0.75rem;
  }
  
  .offline-message {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .network-status {
    width: 95%;
    padding: 0.5rem;
  }
  
  .network-indicator {
    gap: 0.5rem;
  }
} 
.options-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.options-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.options-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.options-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 650px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.options-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 10px;
  padding: 2rem;
  margin: 0;
  max-width: 100%;
  width: 100%;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.options-title-panel {
  font-weight: bold;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 400px;
}

.options-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

/* STANDARDIZED BUTTON STYLING - All Options buttons look identical */
.options-page .home-button,
.options-page .contact-button,
.options-page .theme-button,
.options-page .back-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  color: white !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #3e2723 !important;
  text-align: center !important;
  cursor: pointer !important;
  font-family: 'The Wanters DEMO', serif !important;
  min-width: 120px !important;
  width: auto !important;
  height: auto !important;
}

/* Home button specific spacing - consistent across all themes */
.options-page .home-button {
  margin-bottom: 2rem !important;
}

/* Ensure consistent spacing in all themes - using light mode as reference */
.options-page .options-list {
  width: 100% !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

/* Dark mode spacing override with ultra-high specificity */
body.dark-mode .options-page .options-list,
.dark-mode.options-page .options-list,
.dark-mode .options-page .options-list {
  width: 100% !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

/* Dark mode home button spacing override */
body.dark-mode .options-page .home-button,
.dark-mode.options-page .home-button,
.dark-mode .options-page .home-button {
  margin-bottom: 2rem !important;
  margin-top: 0 !important;
}

/* Dream mode spacing override with ultra-high specificity */
body.dream-mode .options-page .options-list,
.dream-mode.options-page .options-list,
.dream-mode .options-page .options-list {
  width: 100% !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

/* Dream mode home button spacing override */
body.dream-mode .options-page .home-button,
.dream-mode.options-page .home-button,
.dream-mode .options-page .home-button {
  margin-bottom: 2rem !important;
  margin-top: 0 !important;
}

/* CRITICAL FIX: Remove all individual button margins and rely only on flex gap */
/* Reset any conflicting margins on all buttons in all themes */
.options-page .home-button,
.options-page .contact-button,
.options-page .theme-button,
.options-page .back-button {
  margin: 0 !important;
}

/* Only home button gets bottom margin for spacing from title */
.options-page .home-button {
  margin-bottom: 2rem !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure Contact and Theme buttons have NO margins - rely on flex gap only */
.options-page .contact-button,
.options-page .theme-button {
  margin: 0 !important;
}

/* Ultra-high specificity for dark mode to override any global styles */
body.dark-mode .options-page .contact-button,
body.dark-mode .options-page .theme-button,
.dark-mode.options-page .contact-button,
.dark-mode.options-page .theme-button,
.dark-mode .options-page .contact-button,
.dark-mode .options-page .theme-button {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ultra-high specificity for dream mode */
body.dream-mode .options-page .contact-button,
body.dream-mode .options-page .theme-button,
.dream-mode.options-page .contact-button,
.dream-mode.options-page .theme-button,
.dream-mode .options-page .contact-button,
.dream-mode .options-page .theme-button {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Hover effects - consistent across all buttons */
.options-page .home-button:hover,
.options-page .contact-button:hover,
.options-page .theme-button:hover,
.options-page .back-button:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  background-color: #a1887f !important;
  text-decoration: none !important;
  color: white !important;
}

/* Dark mode - consistent black borders and styling with ultra-high specificity */
body.dark-mode .options-page .home-button,
body.dark-mode .options-page .contact-button,
body.dark-mode .options-page .theme-button,
body.dark-mode .options-page .back-button,
.dark-mode.options-page .home-button,
.dark-mode.options-page .contact-button,
.dark-mode.options-page .theme-button,
.dark-mode.options-page .back-button,
.dark-mode .options-page .home-button,
.dark-mode .options-page .contact-button,
.dark-mode .options-page .theme-button,
.dark-mode .options-page .back-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #000000 !important;
  text-align: center !important;
  cursor: pointer !important;
  font-family: 'The Wanters DEMO', serif !important;
  min-width: 120px !important;
  width: auto !important;
  height: auto !important;
}

body.dark-mode .options-page .home-button:hover,
body.dark-mode .options-page .contact-button:hover,
body.dark-mode .options-page .theme-button:hover,
body.dark-mode .options-page .back-button:hover,
.dark-mode.options-page .home-button:hover,
.dark-mode.options-page .contact-button:hover,
.dark-mode.options-page .theme-button:hover,
.dark-mode.options-page .back-button:hover,
.dark-mode .options-page .home-button:hover,
.dark-mode .options-page .contact-button:hover,
.dark-mode .options-page .theme-button:hover,
.dark-mode .options-page .back-button:hover {
  transform: translateY(-4px) !important;
  background-color: #a1887f !important;
  color: #000000 !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  text-decoration: none !important;
}

/* Dream mode - consistent black borders and styling with ultra-high specificity */
body.dream-mode .options-page .home-button,
body.dream-mode .options-page .contact-button,
body.dream-mode .options-page .theme-button,
body.dream-mode .options-page .back-button,
.dream-mode.options-page .home-button,
.dream-mode.options-page .contact-button,
.dream-mode.options-page .theme-button,
.dream-mode.options-page .back-button,
.dream-mode .options-page .home-button,
.dream-mode .options-page .contact-button,
.dream-mode .options-page .theme-button,
.dream-mode .options-page .back-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #000000 !important;
  text-align: center !important;
  cursor: pointer !important;
  font-family: 'The Wanters DEMO', serif !important;
  min-width: 120px !important;
  width: auto !important;
  height: auto !important;
  text-shadow: none !important;
  animation: none !important;
  letter-spacing: 0.5px !important;
}

body.dream-mode .options-page .home-button:hover,
body.dream-mode .options-page .contact-button:hover,
body.dream-mode .options-page .theme-button:hover,
body.dream-mode .options-page .back-button:hover,
.dream-mode.options-page .home-button:hover,
.dream-mode.options-page .contact-button:hover,
.dream-mode.options-page .theme-button:hover,
.dream-mode.options-page .back-button:hover,
.dream-mode .options-page .home-button:hover,
.dream-mode .options-page .contact-button:hover,
.dream-mode .options-page .theme-button:hover,
.dream-mode .options-page .back-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleOptions 1.5s ease-in-out infinite alternate !important;
  text-decoration: none !important;
}

/* Legacy theme container styles - DISABLED to prevent spacing conflicts */
.theme-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.theme-toggle-container {
  margin-top: 0 !important; /* CHANGED: was -0.5rem, now 0 to prevent spacing issues */
}

.theme-toggle-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 !important; /* ADDED: ensure no margins */
}

/* Override theme container styles in Options page specifically */
.options-page .theme-section,
.options-page .theme-toggle-container {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Ensure no theme containers affect button spacing in any theme */
.options-page .theme-section .theme-button,
.options-page .theme-toggle-container .theme-button {
  margin: 0 !important;
}

.options-list {
  width: 100% !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

.option-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #d7ccc8;
}

.option-label {
  font-size: 1.2rem;
  font-weight: 600;
  color: #5d4037;
}

/* Back button now inherits from standardized button styling above */

/* Dark mode styles */
.dark-mode .options-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode .options-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode .options-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .options-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .options-container {
  background-color: rgba(62, 39, 35, 0.9);
}

.dark-mode .options-title {
  text-shadow: none; /* No outline in dark mode */
}

.dark-mode .option-item {
  border-bottom: 1px solid #6d4c41;
}

.dark-mode .option-label {
  color: #d7ccc8;
}

/* Dark mode button borders now handled by standardized styling above */

/* Dream mode styles */
.dream-mode.options-page {
  background-color: #222;
  background-image: 
    ,
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
    linear-gradient(45deg, transparent 24%, rgba(75, 0, 130, 0.05) 25%, rgba(75, 0, 130, 0.05) 26%, transparent 27%, transparent 74%, rgba(138, 43, 226, 0.05) 75%, rgba(138, 43, 226, 0.05) 76%, transparent 77%),
    linear-gradient(-45deg, transparent 24%, rgba(102, 51, 153, 0.05) 25%, rgba(102, 51, 153, 0.05) 26%, transparent 27%, transparent 74%, rgba(60, 30, 80, 0.05) 75%, rgba(60, 30, 80, 0.05) 76%, transparent 77%);
  background-size: cover, 300px 300px, 300px 300px, 60px 60px, 60px 60px;
  background-position: center, 0 0, 150px 150px, 0 0, 30px 30px;
  background-blend-mode: color-burn;
}

.dream-mode.options-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.options-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .options-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream-mode .options-container {
  border: 3px solid #000000;
}

.dream-mode .options-title {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  animation: none !important;
}

/* Dream mode button borders now handled by standardized styling above */

/* Old button styling removed - now handled by standardized styling above */

@keyframes dreamSparkleOptions {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

/* Dream mode button text styling now handled by standardized styling above */

/* Dark mode button glow effects now handled by standardized styling above */

/* Dark mode styles */
.dark-mode .options-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode .options-title-panel {
  background-color: #3e2723;
  border: 3px solid #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark-mode .options-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dream-mode .options-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .options-title {
  /* Let the global dreamText animation handle the color changes */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* Daydreamers menu button: fixed size and shape for all themes */
.daydreamers-menu-button {
  width: 220px;
  height: 56px;
  padding: 0;
  font-size: 1.35rem;
  font-family: 'The Wanters DEMO', serif;
  border-radius: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.02em;
  margin-bottom: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  border-width: 3px;
  border-style: solid;
}

/* Daydreamers Enter Email button: slightly smaller, consistent across all themes */
.daydreamers-email-button {
  width: 160px;
  height: 44px;
  padding: 0 10px;
  font-size: 1.02rem;
  font-family: 'The Wanters DEMO', serif;
  border-radius: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.02em;
  margin-bottom: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  border-width: 3px;
  border-style: solid;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
}

/* Email button specific styles only - home buttons now handled by standardized styling above */
.daydreamers-email-button {
  font-size: 1.02rem;
}

.dark-mode .daydreamers-email-button {
  width: 170px !important;
  height: 48px !important;
}

/* Welcome panel styles - appears behind welcome section when logged in */
.welcome-panel {
  background-color: #f5f5dc; /* Light mode: solid cream color to match background */
  border: 3px solid #8d6e63;
  border-radius: 15px;
  padding: 2rem;
  margin: 1rem 0;
  width: 100%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
}

.dark-mode .welcome-panel {
  background-color: rgba(26, 26, 26, 0.9);
  border: 3px solid #444;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.dream-mode .welcome-panel {
  background: linear-gradient(135deg, 
    rgba(26, 13, 35, 0.85) 0%,
    rgba(45, 20, 60, 0.8) 50%,
    rgba(26, 13, 35, 0.85) 100%);
  border: 3px solid #000;
  box-shadow: 0 6px 20px rgba(255, 0, 204, 0.3);
  animation: dreamSparkleWelcome 3s ease-in-out infinite;
}

@keyframes dreamSparkleWelcome {
  0%, 100% { box-shadow: 0 6px 20px rgba(255, 0, 204, 0.3); }
  50% { box-shadow: 0 6px 30px rgba(255, 0, 204, 0.5), 0 0 40px rgba(255, 0, 204, 0.2); }
}

/* Dark mode welcome panel text overrides */
.dark-mode .welcome-panel .welcome-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .welcome-panel .customer-name {
  color: red !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .welcome-panel .level-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .welcome-panel .level-number {
  color: cyan !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .welcome-panel .progress-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Dream Mode - Welcome panel text overrides */
.dream-mode .welcome-panel .welcome-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream-mode .welcome-panel .customer-name {
  /* Keep the color changing animation but add black outline */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream-mode .welcome-panel .level-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream-mode .welcome-panel .level-number {
  color: #00ffff !important;
  animation: none !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream-mode .welcome-panel .progress-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Light mode welcome panel text - remove outlines from name and progress text */
.welcome-panel .customer-name {
  text-shadow: none !important;
}

.welcome-panel .progress-text {
  text-shadow: -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000 !important;
}

/* Logout button styles */
.daydreamers-logout-button {
  width: auto;
  min-width: 180px;
  min-height: 54px;
  padding: 1.1rem 2.5rem;
  font-size: 1.25rem;
  font-family: 'The Wanters DEMO', serif;
  border-radius: 18px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  border-width: 4px;
  border-style: solid;
  background: #d32f2f !important;
  color: #fff !important;
  border-color: #000 !important;
  transition: all 0.2s;
}

.daydreamers-logout-button:hover {
  background: #b71c1c !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  transform: translateY(-2px) scale(1.03);
}

/* Dream mode logout button - ensure it stays red */
.dream-mode .daydreamers-logout-button {
  background: #d32f2f !important;
  color: #fff !important;
  border-color: #000 !important;
}

.dream-mode .daydreamers-logout-button:hover {
  background: #b71c1c !important;
  color: #fff !important;
  border-color: #000 !important;
  animation: none !important;
  box-shadow: 0 0 18px 4px #d32f2f, 0 4px 16px rgba(0,0,0,0.22) !important;
}

/* Simple Loading Spinner */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid transparent;
  border-top: 4px solid #8d6e63;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

/* Theme-specific colors for spinner */
.dark-mode .loading-spinner {
  border-top-color: #f5f5dc;
}

.dream-mode .loading-spinner {
  border-top-color: #ff00cc;
}

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

/* Loading container */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 1rem 0;
  gap: 0.5rem;
}

.loading-text {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.achievements-button,
.dark-mode .achievements-button,
.dream-mode .achievements-button,
.light-mode .achievements-button {
  background: #228B22 !important;
  color: #fff !important;
  border: 3px solid #000 !important;
}

.achievements-button:hover {
  background: #17641a !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  transform: translateY(-2px) scale(1.03);
}

/* Dream mode achievements button - ensure it stays green */
.dream-mode .achievements-button:hover {
  background: #17641a !important;
  color: #fff !important;
  border: 3px solid #000 !important;
  animation: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22) !important;
}

.light-mode .achievements-button {
  border: none !important;
}

/* Ensure red glow on hover in DREAM MODE ONLY */
.dream-mode .daydreamers-logout-button:hover {
  box-shadow: 0 0 18px 4px #d32f2f, 0 4px 16px rgba(0,0,0,0.22) !important;
} 
/* ===============================================================================
                              ORDER SUBMISSION STYLING
=============================================================================== */

/* Main order submission page container */
.order-submission {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 1rem;
  position: relative;
}

.order-submission::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.order-submission::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Background panel similar to cart page */
.order-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Main container inside background panel */
.order-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Order title panel */
.order-title-panel {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 500px;
}

.order-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-decoration: none !important;
}

/* Back to cart button */
.back-to-cart-button,
.light-mode .back-to-cart-button {
  display: inline-block;
  padding: 1rem 2rem !important;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem !important;
  text-decoration: none;
  font-weight: 600 !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723;
  margin-bottom: 2rem;
}

.back-to-cart-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
  text-decoration: none;
}

/* Section styling */
.order-process-info,
.order-summary {
  width: 100%;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background-color: rgba(141, 110, 99, 0.1);
  border-radius: 8px;
  border: 2px solid #d7ccc8;
}

.section-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #3e2723;
  text-align: center;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.order-process-info p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #5d4037;
  text-align: center;
}

/* Order items styling */
.order-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.summary-item {
  display: grid;
  grid-template-columns: 1fr 0.8fr 0.5fr;
  padding: 0.5rem;
  border-bottom: 1px dashed #d7ccc8;
  align-items: center;
}

.item-name {
  font-weight: 600;
  color: #3e2723;
  text-align: left;
}

.item-details {
  color: #5d4037;
  text-align: center;
}

.item-price {
  font-weight: 600;
  color: #3e2723;
  text-align: right;
}

.order-total {
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 2px solid #d7ccc8;
  font-weight: 700;
  font-size: 1.1rem;
  color: #3e2723;
}

.total-price-value {
  color: #d32f2f; /* Red color for total price */
  font-weight: 900;
  font-size: 1.8rem !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Form styling */
.submission-form {
  width: 100%;
  margin-bottom: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #3e2723;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.form-input {
  width: 100%;
  max-width: 400px;
  padding: 0.8rem;
  border: 2px solid #d7ccc8;
  border-radius: 4px;
  font-size: 1rem;
  background-color: rgba(255, 255, 255, 0.9);
  transition: border-color 0.3s ease;
  color: #3e2723;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  text-align: center !important;
  margin: 0 auto;
}

.form-input:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.3);
}

/* Submission actions */
.submission-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.submit-button {
  padding: 1rem 2rem !important;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 8px;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.submit-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.submit-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.submission-note {
  text-align: center;
  font-size: 0.9rem;
  color: #5d4037;
  max-width: 400px;
  margin: 1rem auto 0 auto;
  width: 100%;
}

/* Success state */
.submission-success {
  text-align: center;
  padding: 2rem;
  margin-bottom: 2rem;
}

.submission-success p {
  font-size: 1.1rem;
  color: #3e2723;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.home-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 8px;
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.home-button:hover {
  background-color: #a1887f;
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* ===============================================================================
                                DARK MODE STYLING
=============================================================================== */

.dark-mode.order-submission {
  background-color: #3e2723;
}

.dark-mode.order-submission::before {
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
}

.dark-mode.order-submission::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .order-background-panel {
  background-color: rgba(26, 26, 26, 0.9);
  border-color: #000000;
}

.dark-mode .order-container {
  background-color: rgba(62, 39, 35, 0.9);
  border-color: #000000;
}

.dark-mode .order-title-panel {
  background-color: #8d6e63;
  border-color: #000000;
}

.dark-mode .order-title {
  color: #8d6e63;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}

.dark-mode .back-to-cart-button {
  background-color: #8d6e63;
  color: white;
  border-color: #000000;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
}

.dark-mode .back-to-cart-button:hover {
  background-color: #a1887f;
}

.dark-mode .order-process-info,
.dark-mode .order-summary {
  background-color: #8d6e63;
  color: #3e2723;
  border-color: #000000;
}

.dark-mode .order-process-info p,
.dark-mode .order-summary p,
.dark-mode .order-summary li {
  color: #c4a690;
}

.dark-mode .order-container input,
.dark-mode .order-container textarea {
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  border-radius: 8px;
  font-size: 1.1rem;
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
  transition: background 0.2s, color 0.2s;
  display: block;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

.dark-mode .order-container input:disabled,
.dark-mode .order-container textarea:disabled,
.dark-mode .order-container .postal-address-disabled {
  background-color: #424242 !important;
  color: #bdbdbd !important;
  border: 2px solid #000000 !important;
  opacity: 0.7;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center !important;
}

.dark-mode .order-container label {
  color: #8d6e63 !important;
  font-weight: 900;
  font-size: 1.4rem;
  text-align: center;
  display: block;
  margin-bottom: 0.4rem;
  margin-top: 1.2rem;
}

/* Old dark mode checkbox styles removed */

.dark-mode .input:focus,
.dark-mode .textarea:focus {
  outline: 2px solid #3e2723;
  background-color: #a1887f;
}

.dark-mode .section-title {
  color: #8d6e63;
}

.dark-mode .item-details {
  color: #8d6e63;
}

.dark-mode .item-name,
.dark-mode .item-price,
.dark-mode .order-total {
  color: #8d6e63;
}

.dark-mode .total-price-value {
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.8rem !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .form-group label {
  color: #8d6e63;
}

.dark-mode .form-input {
  background-color: rgba(26, 26, 26, 0.9);
  border-color: #000000;
  color: #8d6e63;
  text-align: center !important;
  max-width: 400px;
  margin: 0 auto;
}

.dark-mode .form-input:focus {
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.3);
}

.dark-mode .submit-button {
  background-color: #8d6e63;
  border-color: #000000;
  padding: 1rem 2rem !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
}

.dark-mode .submit-button:hover {
  background-color: #a1887f;
}

.dark-mode .order-submission .submission-note,
.dark-mode .submission-note,
.dark-mode .submission-note p {
  color: #c4a690 !important;
}

.dark-mode .submission-success p {
  color: #c4a690 !important;
}

.dark-mode .home-button {
  display: inline-block !important;
  background-color: #8d6e63 !important;
  color: white !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 1rem 2rem !important;
  border-radius: 9999px !important;
  transition: all 0.3s ease !important;
  font-size: 1.4rem !important;
  font-family: var(--font-family) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #3e2723 !important;
}

.dark-mode .home-button:hover {
  background-color: #a1887f !important;
  transform: translateY(-2px) !important;
  color: white !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
}

.dark-mode .order-container label {
  color: #8d6e63 !important;
  font-weight: 700;
  font-size: 1.1rem;
}

.dark-mode .order-container .postal-address-disabled {
  background-color: #424242 !important;
  color: #bdbdbd !important;
  border: 2px solid #757575 !important;
  opacity: 0.7;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center !important;
}

/* Additional old dark mode checkbox styles removed */

/* ===============================================================================
                                DREAM MODE STYLING
=============================================================================== */

.dream-mode.order-submission {
  background-color: #222;
}

.dream-mode.order-submission::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(45, 20, 60, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.order-submission::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .order-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: 18px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  position: relative;
  z-index: 1;
}

.dream-mode .order-container {
  background: #18151c;
  border-radius: 14px;
  border: 3px solid #000;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.25);
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dream-mode .order-process-info,
.dream-mode .order-summary {
  background: #fff !important;
  color: #000 !important;
  border-radius: 12px;
  border: 2px solid #8a2be2;
  box-shadow: 0 2px 12px 0 rgba(138,43,226,0.08);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.dream-mode .order-process-info .section-title,
.dream-mode .order-summary .section-title {
  color: #000 !important;
  text-shadow: none !important;
}

.dream-mode .order-process-info p,
.dream-mode .order-summary p,
.dream-mode .order-summary li,
.dream-mode .order-summary .item-name,
.dream-mode .order-summary .item-details,
.dream-mode .order-summary .item-price {
  color: #000 !important;
  text-shadow: none !important;
}

.dream-mode .order-title-panel {
  background-color: rgba(45, 20, 60, 0.95);
  border-color: #000000;
}

.dream-mode .order-title {
  animation: dreamText 20s linear infinite;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}

@keyframes dreamText {
  0% { color: #ff6b9d; }
  16.66% { color: #c44569; }
  33.33% { color: #f8b500; }
  50% { color: #3742fa; }
  66.66% { color: #2ed573; }
  83.33% { color: #ff3838; }
  100% { color: #ff6b9d; }
}

.dream-mode .back-to-cart-button {
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 600 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0px !important;
  padding: 1rem 2rem !important;
}

.dream-mode .submit-button {
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 900 !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.5px !important;
  padding: 1rem 2rem !important;
  filter: none !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  background-image: none !important;
  backdrop-filter: none !important;
}

.dream-mode .back-to-cart-button:hover,
.dream-mode .submit-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  filter: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  animation: none !important;
}

.dream-mode .section-title {
  color: white;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}

.dream-mode .submission-note {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.dream-mode .submission-success p {
  color: white !important;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}

.dream-mode .home-button {
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 600 !important;
  font-size: 1.4rem !important;
  padding: 1rem 2rem !important;
  letter-spacing: 0px !important;
}

.dream-mode .home-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleOrderSubmission 1.5s ease-in-out infinite alternate !important;
}

@keyframes dreamSparkleOrderSubmission {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

/* ===============================================================================
                                RESPONSIVE DESIGN
=============================================================================== */

@media (max-width: 768px) {
  .order-title {
    font-size: 2rem;
  }
  
  .order-container {
    padding: 1.5rem;
  }
  
  .back-to-cart-button,
  .submit-button,
  .home-button {
    font-size: 1.2rem;
    padding: 0.8rem 1.5rem;
  }
}

/* Submit effect animations */
.submit-effect-active {
  animation: submitPulse 0.6s ease-in-out;
}

.light-mode .submit-effect-active {
  animation: lightSubmitEffect 0.8s ease-in-out;
}

.dark-mode .submit-effect-active {
  animation: darkSubmitEffect 0.8s ease-in-out;
}

.dream-mode .submit-effect-active {
  animation: dreamSubmitEffect 1s ease-in-out;
}

@keyframes lightSubmitEffect {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  25% { 
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(141, 110, 99, 0.4);
  }
  50% { 
    transform: scale(1.1);
    box-shadow: 0 8px 16px rgba(93, 64, 55, 0.5);
  }
  75% { 
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(141, 110, 99, 0.4);
  }
}

@keyframes darkSubmitEffect {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  25% { 
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(141, 110, 99, 0.6);
  }
  50% { 
    transform: scale(1.1);
    box-shadow: 0 8px 16px rgba(141, 110, 99, 0.8);
  }
  75% { 
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(141, 110, 99, 0.6);
  }
}

@keyframes dreamSubmitEffect {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  20% { 
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 107, 157, 0.6);
  }
  40% { 
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.7);
  }
  60% { 
    transform: scale(1.08);
    box-shadow: 0 0 30px rgba(75, 0, 130, 0.8);
  }
  80% { 
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 107, 157, 0.6);
  }
}

.order-divider {
  width: 90%;
  margin: 1.2rem auto 1.2rem auto;
  border: none;
  border-top: 2px solid #bdbdbd;
  opacity: 0.7;
}

.form-label-large {
  font-size: 1.9rem;
  font-weight: 900;
  text-align: center;
  display: block;
  margin-bottom: 0.4rem;
  margin-top: 1.2rem;
  color: #8d6e63;
  letter-spacing: 0.01em;
}

/* Loyalty congratulations text styling */
.loyalty-congratulations.light-mode {
  text-shadow: none;
}

.loyalty-congratulations.dark-mode {
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}

.loyalty-congratulations.dream-mode {
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}

/* Removed old checkbox base styles */

/* Removed light mode checkbox styles */

/* Removed dark/dream mode checkbox styles */

/* All old checkbox styles removed */

.dream-mode .order-container input:not(:disabled),
.dream-mode .order-container textarea:not(:disabled) {
  background-color: #fff !important;
  color: #000 !important;
  border: 2.5px solid #000 !important;
  text-align: center !important;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.dream-mode .order-container input:disabled,
.dream-mode .order-container .postal-address-disabled {
  background-color: #bdbdbd !important;
  color: #757575 !important;
  border: 2.5px solid #000 !important;
  opacity: 0.7;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center !important;
}

.light-mode .order-container .postal-address-disabled {
  background-color: #f5e3c3 !important;
  color: #3e2723 !important;
  border: 2.5px solid #8d6e63 !important;
  opacity: 1;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center !important;
}

.light-mode .order-container input:not(:disabled) {
  background-color: #fff !important;
  color: #000 !important;
  border: 2.5px solid #8d6e63 !important;
  text-align: center !important;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.dream-mode .order-container label,
.dream-mode .order-container .postal-address-disabled {
  color: #fff !important;
}

/* Dream mode: Make total items black, total price red, no glow */
.dream-mode .order-summary .order-total,
.dream-mode .order-total {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Dream mode: Specifically target total items text */
.dream-mode .total-items-text {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.dream-mode .order-summary .total-price-value {
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.8rem !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Dream mode: Make submission note white, no glow */
.dream-mode .submission-note,
.dream-mode .order-submission .submission-note,
.dream-mode .submission-note p {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Dream mode: Center align text input fields */
.dream-mode .form-input {
  text-align: center !important;
}

/* Dream mode: Remove ALL glow effects from order submission text */
.dream-mode .order-submission * {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Override global dream mode rule for Enter Code button specifically */
.dream-mode .order-submission .enter-code-button,
.dream-mode.order-submission .enter-code-button {
  background-color: #8d6e63 !important;
  color: #000 !important;
  border: 2px solid #000 !important;
  min-width: 110px !important;
  padding: 0.5em 1.2em !important;
  font-size: 1rem !important;
  font-family: 'The Wanters DEMO', serif !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .order-submission .order-total,
.dream-mode .order-submission .submission-note,
.dream-mode .order-submission .submission-note p {
  text-shadow: none !important;
  filter: none !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Dream mode: Apply black outline to total price value (more specific rule) */
.dream-mode .order-submission .total-price-value {
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.8rem !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Styles for free bag code selection */
.free-bag-group, .promo-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 1.5rem;
}

.free-bag-select {
  width: 100%;
  max-width: 400px;
  padding: 0.8rem;
  border: 2px solid #d7ccc8;
  border-radius: 4px;
  font-size: 1rem;
  background-color: rgba(255, 255, 255, 0.9);
  transition: border-color 0.3s ease;
  color: #3e2723;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  text-align: center !important;
  cursor: pointer;
  margin: 0 auto;
}

.free-bag-select:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.3);
}

/* Light mode specific */
.light-mode .free-bag-group {
  color: #3e2723;
}

.light-mode .free-bag-select {
  background-color: rgba(255, 255, 255, 0.9);
  color: #3e2723;
  border: 2px solid #d7ccc8;
}

.light-mode .free-bag-select:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.3);
}

/* Dark mode specific */
.dark-mode .free-bag-group {
  color: #ffffff;
}

.dark-mode .free-bag-select {
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  max-width: 400px;
  margin: 0 auto;
}

.dark-mode .free-bag-select:focus {
  outline: none;
  border-color: #a1887f !important;
  box-shadow: 0 0 0 2px rgba(161, 136, 127, 0.3);
}

/* Dream mode specific */
.dream-mode .free-bag-group {
  color: #ffffff;
}

.dream-mode .free-bag-select {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(5px);
  max-width: 400px;
  margin: 0 auto;
}

.dream-mode .free-bag-select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

/* ===============================================================================
                          SUPER AGGRESSIVE CHECKBOX STYLING
=============================================================================== */

/* Base checkbox - completely override everything */
input[type='checkbox'].order-checkbox {
  position: relative !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  border: 2px solid #8d6e63 !important;
  margin: 0 !important;
  margin-right: 0.8rem !important;
  padding: 0 !important;
  vertical-align: middle !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  outline: none !important;
  cursor: pointer !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.1s ease !important;
}

/* Checkbox checked state */
input[type='checkbox'].order-checkbox:checked::after {
  content: '✓' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 12px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  color: #8d6e63 !important;
  font-family: Arial, sans-serif !important;
}

/* Checkbox row */
.checkbox-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1.5rem !important;
  gap: 0.3rem !important;
}

/* Label styling */
.checkbox-label {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  user-select: none !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Light mode overrides */
.light-mode input[type='checkbox'].order-checkbox {
  border-color: #8d6e63 !important;
  background: #ffffff !important;
}

.light-mode input[type='checkbox'].order-checkbox:checked::after {
  color: #8d6e63 !important;
}

.light-mode .checkbox-label {
  color: #5d4037 !important;
}

/* Dark mode overrides */
.dark-mode input[type='checkbox'].order-checkbox {
  border-color: #8d6e63 !important;
  background: #ffffff !important;
}

.dark-mode input[type='checkbox'].order-checkbox:checked::after {
  color: #8d6e63 !important;
}

.dark-mode .checkbox-label {
  color: #8d6e63 !important;
}

/* Dream mode overrides */
.dream-mode input[type='checkbox'].order-checkbox {
  border-color: #000000 !important;
  background: #ffffff !important;
}

.dream-mode input[type='checkbox'].order-checkbox:checked::after {
  color: #000000 !important;
}

.dream-mode .checkbox-label {
  color: #ffffff !important;
}

.enter-code-button {
  background-color: #4CAF50 !important;
  color: #000000 !important;
}

.enter-code-button.light-mode {
  background-color: #4CAF50 !important;
  color: #000000 !important;
  border: 2px solid #3e2723;
}
.enter-code-button.light-mode:hover {
  background-color: #45a049 !important;
}
.dark-mode .enter-code-button {
  background-color: #4CAF50 !important;
  color: #000000 !important;
  border: 2px solid #000 !important;
  min-width: 110px !important;
  padding: 0.5em 1.2em !important;
  font-size: 1rem !important;
  font-family: 'The Wanters DEMO', serif !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}
.dark-mode .enter-code-button:hover {
  background-color: #45a049 !important;
}
.dream-mode .order-submission .enter-code-button,
.dream-mode.order-submission .enter-code-button,
.dream-mode .enter-code-button {
  background-color: #4CAF50 !important;
  color: #000000 !important;
  border: 2px solid #000 !important;
  min-width: 110px !important;
  padding: 0.5em 1.2em !important;
  font-size: 1rem !important;
  font-family: 'The Wanters DEMO', serif !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
  filter: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
  animation: none !important;
}
.dream-mode .order-submission .enter-code-button:hover,
.dream-mode.order-submission .enter-code-button:hover,
.dream-mode .enter-code-button:hover {
  background-color: #45a049 !important;
  filter: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  animation: none !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
} 
.privacy-policy-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.privacy-policy-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.privacy-policy-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.privacy-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 850px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.privacy-container {
  width: 100%;
  max-width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.privacy-title-panel {
  font-weight: bold;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 400px;
  cursor: pointer;
}

.privacy-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

.home-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
  margin-bottom: 2rem;
}

.home-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
}

.privacy-details {
  width: 100%;
  text-align: center;
  padding: 2rem;
  margin-bottom: 2rem;
  background-color: rgba(141, 110, 99, 0.1);
  border-radius: 8px;
  border: 2px solid #d7ccc8;
  max-height: 60vh;
  overflow-y: auto;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.privacy-details h2 {
  font-size: 1.8rem;
  color: #3e2723;
  margin-bottom: 1rem;
  text-align: center;
}

.privacy-details h3 {
  font-size: 1.4rem;
  color: #5d4037;
  margin: 1.5rem 0 0.8rem 0;
}

.privacy-details p {
  margin: 0.8rem 0;
  font-size: 1rem;
  color: #3e2723;
  line-height: 1.6;
}

.privacy-details ul {
  margin: 0.8rem 0;
  padding-left: 1.5rem;
}

.privacy-details li {
  margin: 0.5rem 0;
  font-size: 1rem;
  color: #3e2723;
  line-height: 1.6;
}

.privacy-details a {
  color: #8d6e63;
  text-decoration: underline;
}

.privacy-details a:hover {
  color: #5d4037;
}

.app-info {
  background-color: rgba(141, 110, 99, 0.15);
  padding: 1rem;
  border-radius: 6px;
  margin: 1rem 0;
}

.app-details {
  font-size: 1rem;
  margin: 0;
}

.effective-date {
  font-style: italic;
  font-weight: 600;
  color: #5d4037;
  text-align: center;
  margin: 1rem 0 2rem 0;
}

.agreement {
  background-color: rgba(141, 110, 99, 0.2);
  padding: 1.5rem;
  border-radius: 8px;
  border: 2px solid #8d6e63;
  margin-top: 2rem;
  text-align: center;
}

.privacy-actions {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
}

.contact-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
}

.contact-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
  text-decoration: none;
}

/* Dark mode styles */
.dark-mode.privacy-policy-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode.privacy-policy-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode.privacy-policy-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .privacy-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .privacy-container {
  background-color: rgba(62, 39, 35, 0.9);
  color: #fff8e1;
  padding: 2rem 2rem 0.5rem 2rem !important; /* Further reduced bottom padding to exactly match light mode */
}

.dark-mode .privacy-title {
  color: #000000 !important;
  text-shadow: none;
}

.dark-mode .privacy-title-panel {
  background-color: #3e2723;
  border: 3px solid #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.dark-mode .privacy-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dark-mode .privacy-details {
  border-color: #5d4037;
  background-color: #8d6e63;
}

.dark-mode .privacy-details h2,
.dark-mode .privacy-details h3,
.dark-mode .privacy-details p,
.dark-mode .privacy-details li {
  color: #000000 !important;
}

.dark-mode .privacy-details a {
  color: #3e2723;
}

.dark-mode .privacy-details a:hover {
  color: #000000;
}

.dark-mode .app-info {
  background-color: rgba(93, 64, 55, 0.3);
}

.dark-mode .agreement {
  background-color: rgba(93, 64, 55, 0.4);
  border-color: #5d4037;
}

.privacy-policy-page:not(.dark-mode):not(.dream-mode) .home-button,
.privacy-policy-page:not(.dark-mode):not(.dream-mode) .contact-button {
  border: 3px solid #3e2723 !important;
  border-radius: 9999px !important; /* Ensure pill shape in light mode */
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
}

/* Extra specificity for light mode home button pill shape */
.privacy-policy-page:not(.dark-mode):not(.dream-mode) .home-button {
  border-radius: 9999px !important; /* Force pill shape specifically for home button in light mode */
  display: inline-block !important;
  text-decoration: none !important;
}

/* Dark mode button styling with ultra-high specificity */
body.dark-mode .privacy-policy-page .home-button,
body.dark-mode .privacy-policy-page .contact-button,
.dark-mode.privacy-policy-page .home-button,
.dark-mode.privacy-policy-page .contact-button,
.dark-mode .privacy-policy-page .home-button,
.dark-mode .privacy-policy-page .contact-button,
.dark-mode .home-button,
.dark-mode .contact-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #000000 !important;
  margin-bottom: 2rem !important;
  font-family: 'The Wanters DEMO', serif !important;
}

/* Dark mode button hover styling with ultra-high specificity */
body.dark-mode .privacy-policy-page .home-button:hover,
body.dark-mode .privacy-policy-page .contact-button:hover,
.dark-mode.privacy-policy-page .home-button:hover,
.dark-mode.privacy-policy-page .contact-button:hover,
.dark-mode .privacy-policy-page .home-button:hover,
.dark-mode .privacy-policy-page .contact-button:hover,
.dark-mode .home-button:hover,
.dark-mode .contact-button:hover {
  background-color: #a1887f !important;
  color: #000000 !important;
  text-decoration: none !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Dream mode styles */
.dream-mode.privacy-policy-page {
  background-color: #222;
  background-image: 
    ,
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%);
  background-size: cover, 300px 300px, 300px 300px;
  background-position: center, 0 0, 150px 150px;
  background-blend-mode: color-burn;
}

.dream-mode.privacy-policy-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.privacy-policy-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .privacy-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream-mode .privacy-container {
  background-color: rgba(26, 26, 26, 0.9);
  border: 3px solid #000000;
}

.dream-mode .privacy-title {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  animation: none !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dream-mode .privacy-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .privacy-details {
  background-color: rgba(26, 26, 26, 0.8);
  border: 2px solid #000000;
}

.dream-mode .privacy-details h2,
.dream-mode .privacy-details h3,
.dream-mode .privacy-details p,
.dream-mode .privacy-details li {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .privacy-details a {
  color: #8d6e63;
}

.dream-mode .app-info {
  background-color: rgba(26, 26, 26, 0.6);
  border: 1px solid #444;
}

.dream-mode .agreement {
  background-color: rgba(26, 26, 26, 0.7);
  border-color: #444;
}

.dream-mode .home-button:not(:hover),
.dream-mode .contact-button:not(:hover) {
  background-color: #8d6e63 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 900 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.5px !important;
  border: 3px solid #000000 !important;
}

.dream-mode .home-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparklePrivacy 1.5s ease-in-out infinite alternate !important;
  text-decoration: none !important;
}

.dream-mode .contact-button:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  animation: none !important;
  text-decoration: none !important;
}

@keyframes dreamSparklePrivacy {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .privacy-title {
    font-size: 2.5rem;
  }
  
  .privacy-background-panel {
    width: 98%;
    padding: 1rem;
  }
  
  .privacy-container {
    padding: 1.5rem;
  }
  
  .privacy-details {
    padding: 1.5rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .privacy-background-panel {
    width: 99%;
    padding: 0.75rem;
  }
  
  .privacy-container {
    padding: 1.25rem;
  }
  
  .privacy-details {
    padding: 1.25rem;
    max-height: 50vh;
  }
  
  .privacy-details h2 {
    font-size: 1.5rem;
  }
  
  .privacy-details h3 {
    font-size: 1.2rem;
  }
  
  .privacy-details p,
  .privacy-details li {
    font-size: 0.9rem;
  }
} 
.product-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.product-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.product-detail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.product-detail-title-panel {
  background: radial-gradient(circle at 50% 50%, rgba(245, 245, 220, 1) 70%, rgba(245, 245, 220, 0.92) 90%, rgba(245, 245, 220, 0.7) 100%) !important;
  border: 3px solid #3e2723;
  border-radius: 20px;
  padding: 1.5rem 3rem;
  margin-bottom: 1rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.dark-mode .product-detail-title-panel {
  background-color: #3e2723 !important;
  background-image: none !important;
}

.dream-mode .product-detail-title-panel {
  background: unset;
}

.product-detail-title {
  font-size: 3rem;
  font-weight: 900; /* Extra bold */
  margin: 0;
  color: #3e2723; /* Dark brown text */
  position: relative;
  z-index: 1;
}

.top-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 800px;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.back-to-products {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 30px;
  font-size: 1rem;
  text-decoration: none;
  font-weight: 600;
  font-family: 'Arial Black', Arial, sans-serif;
  font-stretch: condensed;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.back-to-products:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  text-decoration: none;
}

.nav-button {
  padding: 0.8rem 1.5rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 30px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  font-family: var(--font-family);
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.product-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 800px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
}

.flavor-panel {
  background-color: #f5f5dc;
  border: 3px solid #3e2723;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
}

.product-detail-name {
  font-size: 5.5rem;
  font-weight: 900;
  margin-bottom: 1.5rem;
  color: #3e2723;
  text-align: center;
  letter-spacing: 1px;
  white-space: nowrap;
  transition: color 0.3s ease;
  text-shadow: none;
}

.product-detail-name:hover {
  color: #5d4037;
}

.product-detail-image-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
  height: 300px; /* Fixed height for consistency */
  overflow: hidden;
  position: relative;
}

.product-detail-image {
  width: 300px; /* Fixed width */
  height: 300px; /* Fixed height */
  object-fit: cover; /* Maintain aspect ratio and cover the container */
  border-radius: 8px;
  border: 3px solid #8d6e63;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.product-detail-description {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: #5d4037;
  text-align: center;
  max-width: 600px;
}

.product-size-options {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  width: 100%;
}

.size-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  border: 3px solid #3e2723;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 150px;
  background-color: rgba(255, 255, 255, 0.7);
}

.size-option:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.size-option.selected {
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.size-name {
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.size-price {
  font-size: 1.8rem;
  font-weight: 900;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #ff0000;
}

.product-quantity {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}

.product-quantity label {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #3e2723;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 900;
}

.max-quantity-info {
  font-size: 1.1rem;
  color: #3e2723;
  margin: 0.5rem 0 0 0;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 900;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.quantity-button {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #8d6e63 !important;
  color: white !important;
  border: 3px solid #3e2723 !important;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: bold;
  font-family: var(--font-family);
  transition: all 0.2s ease;
  outline: none;
}

.quantity-button:hover {
  background-color: #a1887f;
}

.quantity-value {
  font-size: 2.2rem;
  font-weight: 900;
  color: #3e2723;
  min-width: 30px;
  text-align: center;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.product-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.add-to-cart-button {
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  font-family: var(--font-family);
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 200px;
}

.add-to-cart-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.view-cart-button {
  padding: 1rem 2rem;
  background-color: #5d4037;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  font-family: var(--font-family);
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 200px;
  text-align: center;
  text-decoration: none;
}

.view-cart-button:hover {
  background-color: #795548;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  color: white;
}

/* Nutritional Information Section - Separate White Box */
.nutritional-info-section {
  width: 100%;
  max-width: 800px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  margin-top: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nutritional-info-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
}

.nutritional-panel {
  width: 100%;
  max-width: 600px;
  background-color: #ffffff;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  overflow: hidden;
}

.nutritional-header {
  background-color: #f5f5f5;
  padding: 1rem;
  border-bottom: 2px solid #8d6e63;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.nutritional-header-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 120px;
}

.header-label {
  font-size: 0.9rem;
  color: #5d4037;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.header-value {
  font-size: 1.1rem;
  color: #3e2723;
  font-weight: bold;
}

.nutritional-table {
  background-color: #ffffff;
}

.nutritional-table-header {
  background-color: #8d6e63;
  color: white;
  padding: 0.75rem 1rem;
  font-weight: bold;
  font-size: 1.1rem;
  border-bottom: 1px solid #6d4c41;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
}

.nutritional-label-header {
  text-align: left;
}

.nutritional-value-header {
  text-align: center;
  font-weight: bold;
}

.nutritional-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e0e0e0;
  transition: background-color 0.2s ease;
}

.nutritional-row:hover {
  background-color: #f9f9f9;
}

.nutritional-row:last-child {
  border-bottom: none;
}

.nutritional-label {
  font-weight: 600;
  color: #3e2723;
  text-align: left;
}

.nutritional-value {
  font-weight: bold;
  color: #5d4037;
  text-align: center;
}

/* Removed border extensions for consistent table appearance
.fat-section,
.fat-subsection {
  border-left: 4px solid #8d6e63;
}
*/

.fat-subsection .nutritional-label,
.sugar-subsection .nutritional-label {
  padding-left: 1rem;
  font-style: italic;
  color: #6d4c41;
}

/* Removed border extensions for consistent table appearance
.sugar-subsection {
  border-left: 4px solid #8d6e63;
}
*/

.ingredients-section {
  background-color: #f8f5f0;
  padding: 1.5rem;
  border-top: 2px solid #8d6e63;
  text-align: center;
}

.ingredients-title {
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 1.5rem;
  text-align: center;
  padding: 1rem;
  border: 2px solid #000000;
  border-radius: 8px;
  background-color: #5d4037;
}

.allergen-info {
  font-size: 1.5rem;
  color: #3e2723;
  margin: 1.5rem 0 0 0;
  line-height: 1.4;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.allergen-info strong {
  color: #d32f2f;
  font-weight: 900;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Dark mode styles */
.dark-mode .product-detail {
  background-color: #3e2723;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 84 48'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23412f2a' fill-opacity='0.25'%3E%3Cpath d='M42 48c23.196 0 42-10.745 42-24S65.196 0 42 0 0 10.745 0 24s18.804 24 42 24zm0-5c19.33 0 35-8.954 35-19s-15.67-19-35-19S7 13.954 7 24s15.67 19 35 19z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
  background-position: center, center;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode .product-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode .product-detail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .product-detail-title-panel {
  background-color: #3e2723;
  border: 3px solid #000000;
  border-radius: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  padding: 1.5rem 3rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.dark-mode .product-detail-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  font-size: 3rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
  font-family: var(--font-family);
  cursor: pointer;
  transition: color 0.3s ease;
}

.dark-mode .product-detail-title:hover {
  color: #a1887f !important;
}

.dark-mode .product-content {
  background-color: rgba(26, 26, 26, 0.9);
  border: 3px solid #000000;
}

.dark-mode .product-detail-description {
  color: #fff8e1;
}

.dark-mode .product-detail-name {
  color: #8d6e63 !important;
  text-shadow: 
    -1.5px -1.5px 0 #000,
    1.5px -1.5px 0 #000,
    -1.5px 1.5px 0 #000,
    1.5px 1.5px 0 #000 !important;
}

.dark-mode .product-detail-name:hover {
  color: #a1887f !important;
}

.dark-mode .product-detail-image {
  border: 3px solid #000000;
}

.dark-mode .flavor-panel {
  background-color: #3e2723 !important;
  border: 3px solid #000000;
}

.dark-mode .size-option {
  background-color: rgba(62, 39, 35, 0.8);
  border: 3px solid #000000;
  color: #fff8e1;
}

.dark-mode .size-option.selected {
  background-color: #a1887f;
  border: 3px solid #000000;
}

.dark-mode .size-name {
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.dark-mode .size-price {
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: #ff0000 !important;
}

.dark-mode .product-quantity label,
.dark-mode .max-quantity-info {
  color: #ffffff !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 900 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .quantity-value {
  background-color: #8d6e63;
  color: #c4a690 !important;
  padding: 0.5rem;
  border-radius: 4px;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .nutritional-info-section {
  background-color: rgba(26, 26, 26, 0.9);
  color: #fff8e1;
  border: 3px solid #000000;
}

.dark-mode .nutritional-info-title,
.dark-mode .nutritional-label,
.dark-mode .nutritional-value {
  color: #fff8e1;
}

.dark-mode .nutritional-info-title {
  border: 2px solid #000000 !important;
}

.dark-mode .nutritional-info-item {
  background-color: rgba(141, 110, 99, 0.2);
  border-color: #5d4037;
}

.dream-mode .nutritional-info-section {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  ) !important;
  color: #000000 !important;
  border: 3px solid #000000;
}

.dream-mode .product-detail {
  background-color: #0d0d0d;
  background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  position: relative;
}

.dream-mode .product-detail-title-panel {
  background: #111111 !important;
  background-color: #111111 !important;
  background-image: none !important;
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .product-content {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  ) !important;
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .flavor-panel {
  background: #111111 !important;
  background-color: #111111 !important;
  background-image: none !important;
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .nav-button,
.dream-mode .back-to-products,
.dream-mode .add-to-cart-button,
.dream-mode .view-cart-button,
.dream-mode .quantity-button {
  border: 2px solid #000000;
}

.dream-mode .size-option {
  border: 3px solid #000000;
}

.dream-mode .size-option {
  background-color: #8d6e63 !important; /* Match add-to-cart button color */
  border: 3px solid #000000;
}

.dream-mode .size-option.selected {
  background-color: #888888 !important; /* Grey selected state instead of brown */
  border: 3px solid #000000;
  color: white !important;
}

.dream-mode .nutritional-info-item {
  background-color: #111111 !important;
  border-color: #000000;
}

.dream-mode .nutritional-panel {
  background-color: #ffffff !important;
  border: 3px solid #000000;
}

.dream-mode .nutritional-header {
  background-color: #ffffff !important;
  border-bottom: 2px solid #000000;
}

.dream-mode .nutritional-table {
  background-color: #ffffff !important;
}

.dream-mode .nutritional-table-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #000000;
}

.dream-mode .nutritional-info-title,
.dream-mode .nutritional-label,
.dream-mode .nutritional-value,
.dream-mode .header-label,
.dream-mode .header-value,
.dream-mode .nutritional-label-header,
.dream-mode .nutritional-value-header,
.dream-mode .fat-subsection .nutritional-label,
.dream-mode .sugar-subsection .nutritional-label {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .product-detail .ingredients-section,
.dream-mode .nutritional-info-section .ingredients-section {
  background-color: #ffffff !important;
  border-top: 2px solid #000000;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .product-detail .ingredients-section p,
.dream-mode .product-detail .ingredients-section span,
.dream-mode .nutritional-info-section .ingredients-section p,
.dream-mode .nutritional-info-section .ingredients-section span {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .product-detail .allergen-info,
.dream-mode .product-detail .allergen-info p,
.dream-mode .product-detail .allergen-info span,
.dream-mode .nutritional-info-section .allergen-info,
.dream-mode .nutritional-info-section .allergen-info p,
.dream-mode .nutritional-info-section .allergen-info span {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .product-detail .allergen-info strong,
.dream-mode .nutritional-info-section .allergen-info strong {
  color: #d32f2f !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dark-mode .product-detail .ingredients-section,
.dark-mode .product-detail .ingredients-section p,
.dark-mode .product-detail .ingredients-section span,
.dark-mode .nutritional-info-section .ingredients-section,
.dark-mode .nutritional-info-section .ingredients-section p,
.dark-mode .nutritional-info-section .ingredients-section span {
  color: #d7ccc8 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dark-mode .product-detail .allergen-info,
.dark-mode .product-detail .allergen-info p,
.dark-mode .product-detail .allergen-info span,
.dark-mode .nutritional-info-section .allergen-info,
.dark-mode .nutritional-info-section .allergen-info p,
.dark-mode .nutritional-info-section .allergen-info span {
  color: #d7ccc8 !important;
  text-shadow: none !important;
  animation: none !important;
}



.dream-mode .ingredients-title {
  background-color: #111111 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  border: 3px solid #000000;
}

.dark-mode .nutritional-info-title,
.dark-mode .nutritional-label,
.dark-mode .nutritional-value {
  color: #fff8e1;
}

.dark-mode .nutritional-info-section {
  background-color: rgba(26, 26, 26, 0.9);
  color: #fff8e1;
  border: 3px solid #000000;
}

.dark-mode .nutritional-panel {
  background-color: #8d6e63;
  border: 3px solid #000000;
}

.dark-mode .nutritional-header {
  background-color: #8d6e63;
  border-bottom: 2px solid #000000;
}

.dark-mode .header-label {
  color: #d7ccc8;
}

.dark-mode .header-value {
  color: #fff8e1;
}

.dark-mode .nutritional-table {
  background-color: #8d6e63;
}

.dark-mode .nutritional-table-header {
  background-color: #2a2a2a;
  color: #fff8e1;
  border-bottom: 1px solid #000000;
}

.dark-mode .nutritional-label-header,
.dark-mode .nutritional-value-header {
  color: #fff8e1;
}

.dark-mode .nutritional-label,
.dark-mode .nutritional-value {
  color: #fff8e1;
}

.dark-mode .nutritional-value {
  color: #d7ccc8;
}

.dark-mode .nutritional-row {
  border-bottom: 1px solid #666666;
}

.dark-mode .nutritional-row:hover {
  background-color: #8d6e63;
}

/* Removed border extensions for consistent table appearance
.dark-mode .fat-section,
.dark-mode .fat-subsection,
.dark-mode .sugar-subsection {
  border-left: 4px solid #000000;
}
*/

.dark-mode .fat-subsection .nutritional-label,
.dark-mode .sugar-subsection .nutritional-label {
  color: #b0b0b0;
}

.dark-mode .ingredients-section {
  background-color: #3a3a3a;
  border-top: 2px solid #000000;
}

.dark-mode .allergen-info {
  color: #fff8e1;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .allergen-info strong {
  color: #d32f2f;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .nutritional-info-item {
  background-color: rgba(141, 110, 99, 0.2);
  border-color: #5d4037;
}

.dream-mode .nutritional-info-title {
  background-color: #111111 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  border: 3px solid #000000;
}

.dream-mode .product-detail-name {
  text-shadow: 
    -1.5px -1.5px 0 #000,
    1.5px -1.5px 0 #000,
    -1.5px 1.5px 0 #000,
    1.5px 1.5px 0 #000;
}

/* Dream mode product detail title - remove glow, add clean black outline like flavor title */
.dream-mode .product-detail-title {
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important; /* Clean 1px black outline, override global glow */
  animation: dreamText 20s infinite linear !important; /* Keep the color-changing animation */
}

/* Dream mode size option text - black by default */
.dream-mode .size-name {
  color: #000000 !important;
  text-shadow: none !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.dream-mode .size-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Dream mode size option text - white on hover */
.dream-mode .size-option:hover .size-name,
.dream-mode .size-option:hover .size-price {
  color: #ffffff !important;
  text-shadow: none !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Dream mode quantity value override - cyan with 1px black outline */
.dream-mode .quantity-value {
  color: #40e0d0 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Dream mode quantity label and max info - white with black outline */
.dream-mode .product-quantity label,
.dream-mode .max-quantity-info {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 900 !important;
}

.dream-mode .product-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(13, 13, 13, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode .product-detail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dark-mode .product-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode .product-detail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Responsive scaling for product detail name */
@media (max-width: 768px) {
  .product-detail-name {
    font-size: 4rem;
    white-space: normal;
    word-wrap: break-word;
  }
  
  .product-detail-title {
    font-size: 2.5rem;
  }
  
  .product-detail-title-panel {
    padding: 1rem 2rem;
  }
}

@media (max-width: 480px) {
  .product-detail-name {
    font-size: 3rem;
    white-space: normal;
    word-wrap: break-word;
  }
  
  .product-detail-title {
    font-size: 2rem;
  }
  
  .product-detail-title-panel {
    padding: 0.8rem 1.5rem;
  }
  
  .flavor-panel {
    padding: 0.8rem;
  }
}

/* Sold Out and Stock Warning Styles */
.sold-out-info {
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', sans-serif !important;
  font-weight: bold;
  margin: 5px 0;
  text-align: center;
  font-size: 1.3rem;
}

.dark-mode .sold-out-info,
.dream-mode .sold-out-info {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.light-mode .sold-out-info {
  text-shadow: none !important;
}

.low-stock-warning {
  color: #ff6b35;
  font-weight: bold;
  font-size: 0.8rem;
}

.add-to-cart-button:disabled {
  background-color: #666 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

.quantity-button:disabled {
  background-color: #666 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

.max-quantity-num, .max-quantity-num.low-stock-max, .dark-mode .max-quantity-num, .dark-mode .max-quantity-num.low-stock-max, .dream-mode .max-quantity-num, .dream-mode .max-quantity-num.low-stock-max {
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important;
}

.max-num-light {
  color: #3e2723;
  text-shadow: none;
}

.max-num-dark {
  color: #fff;
  text-shadow:
    -0.5px -0.5px 0 #000,
    0.5px -0.5px 0 #000,
    -0.5px 0.5px 0 #000,
    0.5px 0.5px 0 #000;
}

.dark-mode .max-quantity-num {
  color: #fff !important;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important;
}

.dark-mode .max-quantity-num.low-stock-max {
  color: #d32f2f !important;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important;
}

.low-stock-max {
  color: #ff3333 !important;
}

.dream-mode .max-quantity-num {
  color: unset !important; /* Let animation set the color */
  animation: dreamText 20s infinite linear !important;
  text-shadow:
    -0.75px -0.75px 0 #000,
    0.75px -0.75px 0 #000,
    -0.75px 0.75px 0 #000,
    0.75px 0.75px 0 #000 !important;
  filter: none !important;
}

.dream-mode .max-quantity-num.low-stock-max {
  color: #d32f2f !important;
  animation: none !important;
  text-shadow:
    -0.75px -0.75px 0 #000,
    0.75px -0.75px 0 #000,
    -0.75px 0.75px 0 #000,
    0.75px 0.75px 0 #000 !important;
}

.dark-mode .sold-out-info {
  color: #d32f2f !important;
  font-family: 'The Wanters DEMO', Tahoma, sans-serif !important;
  font-size: 1.3rem;
  font-weight: 900;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important;
  letter-spacing: 0.5px;
  margin: 5px 0;
  text-align: center;
}

.light-mode .sold-out-info {
  text-shadow: none !important;
}

.light-mode .max-quantity-num {
  text-shadow: none !important;
} 
.theme-switch-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  padding: 1rem;
  position: relative;
  z-index: 1;
}

/* Lower positioning for specific pages */
.landing-screen .theme-switch-container {
  margin-top: 8rem;
  margin-bottom: 2rem;
}

.options-page .theme-switch-container,
.product-detail .theme-switch-container {
  margin-top: 4rem;
  margin-bottom: 2rem;
}

.theme-switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.switch-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.switch-labels.two-position,
.theme-switch.two-position .switch-labels {
  width: 80px;
}

.switch-labels.three-position,
.theme-switch.three-position .switch-labels {
  width: 120px;
}

.switch-label {
  font-size: 1.2rem;
  opacity: 0.4;
  transition: all 0.3s ease;
}

.switch-label.active {
  opacity: 1;
  transform: scale(1.1);
}

.switch-track {
  position: relative;
  height: 36px;
  background: #e0e0e0;
  border-radius: 18px;
  border: 2px solid #ccc;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.switch-track:hover {
  background: #d5d5d5;
  border-color: #aaa;
}

.switch-track.two-position {
  width: 80px;
}

.switch-track.three-position {
  width: 120px;
}

.switch-thumb {
  position: absolute;
  top: 2px;
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #bbb;
  transition: all 0.4s ease;
  z-index: 2;
  pointer-events: none; /* Prevent thumb from blocking clicks */
}

/* Two-position thumb positions */
.switch-thumb.light-position.two-position {
  left: 2px;
  background: #fff3e0;
}

.switch-thumb.dark-position.two-position {
  left: 46px;
  background: #424242;
}

/* Three-position thumb positions */
.switch-thumb.light-position.three-position {
  left: 2px;
  background: #fff3e0;
}

.switch-thumb.dark-position.three-position {
  left: 44px;
  background: #424242;
}

.switch-thumb.dream-position.three-position {
  left: 86px;
  background: #9c27b0;
}

/* Dark mode styles */
.dark-mode .switch-track {
  background: #2a2a2a;
  border-color: #555;
}

.dark-mode .switch-track:hover {
  background: #333;
  border-color: #666;
}

.dark-mode .switch-thumb {
  border-color: #555;
}

/* Dream mode styles */
.dream-mode .switch-track {
  background: #333;
  border: 3px solid #000000;
}

.dream-mode .switch-track:hover {
  background: #444;
}

.dream-mode .switch-thumb {
  border: 2px solid #000000;
}

.dream-mode .switch-label {
  animation: dreamText 20s infinite linear;
  text-shadow: 0 0 5px currentColor;
}

/* Responsive design */
@media (max-width: 768px) {
  .theme-switch-container {
    margin-top: 1.5rem;
    padding: 0.8rem;
  }
  
  /* Lower positioning for specific pages on mobile */
  .landing-screen .theme-switch-container {
    margin-top: 6rem;
    margin-bottom: 1.5rem;
  }
  
  .options-page .theme-switch-container,
  .product-detail .theme-switch-container {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
  }
  
  .switch-track {
    height: 32px;
  }
  
  .switch-track.two-position {
    width: 70px;
  }
  
  .switch-track.three-position {
    width: 105px;
  }
  
  .switch-thumb {
    width: 24px;
    height: 24px;
    top: 2px;
  }
  
  .switch-thumb.light-position.two-position {
    left: 2px;
  }
  
  .switch-thumb.dark-position.two-position {
    left: 42px;
  }
  
  .switch-thumb.light-position.three-position {
    left: 2px;
  }
  
  .switch-thumb.dark-position.three-position {
    left: 38px;
  }
  
  .switch-thumb.dream-position.three-position {
    left: 77px;
  }
  
  .switch-labels.two-position,
  .theme-switch.two-position .switch-labels {
    width: 70px;
  }
  
  .switch-labels.three-position,
  .theme-switch.three-position .switch-labels {
    width: 105px;
  }
} 
/* UserMenu Component Styles - Center Aligned */

.user-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.user-menu-modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  margin: 1rem;
  border: 2px solid #8d6e63;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.user-menu-modal.dark-mode {
  background: #3e2723;
  border-color: #000000;
  color: #fff8e1;
}

.user-menu-modal.dream-mode {
  background: linear-gradient(135deg, rgba(26, 13, 35, 1) 0%, rgba(45, 20, 60, 1) 25%, rgba(60, 30, 80, 1) 50%, rgba(45, 20, 60, 1) 75%, rgba(26, 13, 35, 1) 100%);
  border-color: #000000;
  color: #ffffff;
}

.user-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.user-menu-header h2 {
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: 2rem;
  color: #8d6e63;
  font-weight: 700;
  flex: 1;
  text-align: center;
}

.dark-mode .user-menu-header {
  border-bottom-color: #000000;
}

.dark-mode .user-menu-header h2 {
  color: #fff8e1;
}

.dream-mode .user-menu-header {
  border-bottom-color: #000000;
}

.dream-mode .user-menu-header h2 {
  color: #ffffff;
}

.user-menu-close {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #999;
  transition: all 0.2s ease;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.user-menu-close:hover {
  color: #d32f2f;
  transform: scale(1.1);
}

.user-menu-content {
  padding: 1.5rem;
}

.user-info-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #8d6e63;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  border: 3px solid #3e2723;
}

.dark-mode .user-avatar {
  background: #8d6e63;
  border-color: #000000;
}

.dream-mode .user-avatar {
  background: #8d6e63;
  border-color: #000000;
}

.avatar-initial {
  font-size: 3.2rem;
  font-weight: 700;
  color: white;
  font-family: 'The Wanters DEMO', serif;
}

.user-details {
  width: 100%;
  max-width: 380px;
}

.user-field-section {
  margin-bottom: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.user-field-section.flash-red {
  background-color: rgba(244, 67, 54, 0.1);
  border: 2px solid #f44336;
  border-radius: 8px;
  padding: 1rem;
  animation: flashRed 0.5s ease-in-out;
}

@keyframes flashRed {
  0% { background-color: rgba(244, 67, 54, 0.1); }
  50% { background-color: rgba(244, 67, 54, 0.3); }
  100% { background-color: rgba(244, 67, 54, 0.1); }
}

.user-field-section label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #3e2723;
  font-size: 1rem;
  text-align: center;
}

.dark-mode .user-field-section label {
  color: #fff8e1;
}

.dream-mode .user-field-section label {
  color: #ffffff;
}

.display-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: #f5f5f5;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.dark-mode .display-container {
  background: #8d6e63;
  border-color: #000000;
}

.dream-mode .display-container {
  background: rgba(26, 26, 26, 0.9);
  border-color: #000000;
}

.current-value {
  font-weight: 500;
  color: #3e2723;
  font-size: 1rem;
  text-align: center;
  word-break: break-word;
}

.dark-mode .current-value {
  color: #3e2723;
}

.dream-mode .current-value {
  color: #ffffff;
}

.readonly-value {
  background: #f5f5f5;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid #ddd;
  color: #666;
  font-style: italic;
  display: block;
  text-align: center;
  word-break: break-word;
}

.dark-mode .readonly-value {
  background: #8d6e63;
  border-color: #000000;
  color: #3e2723;
}

.dream-mode .readonly-value {
  background: rgba(26, 26, 26, 0.9);
  border-color: #000000;
  color: #ffffff;
}

.edit-button {
  background: #8d6e63;
  color: white;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
  font-weight: 600;
}

.edit-button:hover {
  background: #a1887f;
}

.dream-mode .edit-button {
  background: #ff00cc;
}

.dream-mode .edit-button:hover {
  background: #cc0099;
}

.dark-mode .edit-button {
  border: 2px solid #000000;
}

.dark-mode .hate-jerky-button {
  border: 2px solid #000000;
}

.edit-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

.field-input {
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background: white;
  color: #3e2723;
  width: 100%;
  max-width: 300px;
  text-align: center;
}

.address-input {
  text-align: left;
  resize: vertical;
  min-height: 80px;
}

.dark-mode .field-input {
  background: #8d6e63;
  border-color: #000000;
  color: #000000 !important;
}

.dream-mode .field-input {
  background: rgba(26, 26, 26, 0.9);
  border-color: #000000;
  color: #ffffff;
}

.edit-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.save-button,
.cancel-button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.save-button {
  background: #4caf50;
  color: white;
}

.save-button:hover:not(:disabled) {
  background: #45a049;
}

.save-button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.cancel-button {
  background: #f44336;
  color: white;
}

.cancel-button:hover:not(:disabled) {
  background: #da190b;
}

.user-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.dark-mode .user-stats-grid {
  border-top-color: #000000;
}

.dream-mode .user-stats-grid {
  border-top-color: #000000;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #f9f9f9;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid #eee;
}

.dark-mode .stat-item {
  background: #8d6e63;
  border-color: #000000;
}

.dream-mode .stat-item {
  background: rgba(26, 26, 26, 0.9);
  border-color: #000000;
}

.stat-item label {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.dark-mode .stat-item label {
  color: #3e2723;
}

.dream-mode .stat-item label {
  color: #ffffff;
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: #8d6e63;
  font-family: 'The Wanters DEMO', serif;
}

.dark-mode .stat-value {
  color: #3e2723;
}

.dream-mode .stat-value {
  color: #ffffff;
}

.user-menu-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #eee;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.dark-mode .user-menu-footer {
  border-top-color: #000000;
}

.dream-mode .user-menu-footer {
  border-top-color: #000000;
}

/* Delivery Preference Checkbox */
.delivery-preference-section {
  display: flex;
  justify-content: center;
  width: 100%;
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.checkbox-container:hover {
  background-color: rgba(139, 110, 99, 0.1);
}

.dark-mode .checkbox-container:hover {
  background-color: rgba(255, 248, 225, 0.1);
}

.dream-mode .checkbox-container:hover {
  background-color: rgba(255, 0, 204, 0.1);
}

.checkbox-input {
  width: 18px;
  height: 18px;
  accent-color: #8d6e63;
  cursor: pointer;
}

.dream-mode .checkbox-input {
  accent-color: #ff00cc;
}

.checkbox-label {
  font-size: 14px;
  font-weight: 500;
  color: #3e2723;
  cursor: pointer;
  user-select: none;
}

.dark-mode .checkbox-label {
  color: #fff8e1;
}

.dream-mode .checkbox-label {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.hate-jerky-button {
  background: #d32f2f;
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-family: 'The Wanters DEMO', serif;
}

.hate-jerky-button:hover {
  background: #c62828;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Delete Confirmation Modal */
.delete-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1100;
  backdrop-filter: blur(4px);
}

.delete-confirm-modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  max-width: 450px;
  width: 90%;
  margin: 1rem;
  border: 3px solid #d32f2f;
  text-align: center;
  padding: 2rem;
}

.delete-confirm-modal.dark-mode {
  background: #3e2723;
  color: #fff8e1;
}

.delete-confirm-modal.dream-mode {
  background: linear-gradient(135deg, rgba(26, 13, 35, 0.95) 0%, rgba(45, 20, 60, 0.9) 25%, rgba(60, 30, 80, 0.85) 50%, rgba(45, 20, 60, 0.9) 75%, rgba(26, 13, 35, 0.95) 100%);
  color: #ffffff;
}

.delete-confirm-modal h3 {
  margin: 0 0 1rem 0;
  font-size: 1.8rem;
  color: #d32f2f;
  font-weight: 700;
  font-family: 'The Wanters DEMO', serif;
}

.delete-confirm-modal p {
  margin: 0.5rem 0 1rem 0;
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 500;
}

.delete-confirm-modal ul {
  text-align: left;
  margin: 1rem 0;
  padding-left: 1.5rem;
  display: inline-block;
}

.delete-confirm-modal li {
  margin: 0.5rem 0;
  font-size: 1rem;
  line-height: 1.3;
}

.delete-confirm-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.confirm-delete-button,
.cancel-delete-button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s ease;
  font-family: 'The Wanters DEMO', serif;
  min-width: 150px;
}

.confirm-delete-button {
  background: #d32f2f;
  color: white;
}

.confirm-delete-button:hover {
  background: #c62828;
  transform: translateY(-2px);
}

.cancel-delete-button {
  background: #4caf50;
  color: white;
}

.cancel-delete-button:hover {
  background: #45a049;
  transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 600px) {
  .user-menu-modal {
    width: 95%;
    margin: 0.5rem;
  }
  
  .user-menu-header,
  .user-menu-content,
  .user-menu-footer {
    padding: 1rem;
  }
  
  .user-stats-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .stat-item {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  
  .user-avatar {
    width: 60px;
    height: 60px;
  }
  
  .avatar-initial {
    font-size: 1.5rem;
  }
  
  .delete-confirm-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .confirm-delete-button,
  .cancel-delete-button {
    width: 100%;
    max-width: 200px;
  }
}

@media (max-width: 400px) {
  .field-input {
    max-width: 100%;
  }
  
  .edit-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .save-button,
  .cancel-button {
    width: 100%;
  }
} 

.dream-mode .avatar-initial {
  color: #00ffff;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
} 

.dream-mode .current-value,
.dream-mode .readonly-value,
.dream-mode .stat-value,
.dream-mode .stat-item label {
  color: #ffffff !important;
  animation: none !important;
  text-shadow: none !important;
} 

.dream-mode .user-menu-close {
  background: none !important;
  border: none !important;
} 

.dream-mode .user-menu-header h2 {
  color: #ffffff !important;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000 !important;
  animation: none !important;
} 

.dream-mode .hate-jerky-button {
  background: #d32f2f !important;
  color: #000 !important;
  border: 2px solid #000 !important;
} 

/* Dream mode: Only the level number is cyan */
.dream-mode .stat-item.level .stat-value {
  color: #00ffff !important;
  animation: none !important;
  text-shadow: none !important;
} 

.dream-mode .user-menu-close:hover {
  background: none !important;
  color: #fff !important;
  box-shadow: none !important;
  border: none !important;
  transform: none !important;
}

/* Rewards Section Styles */
.rewards-section {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.rewards-title {
  font-family: 'The Wanters DEMO', serif !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: #8d6e63 !important;
  text-align: center;
  display: block;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

.dark-mode .rewards-title {
  color: #000000 !important;
}

.dream-mode .rewards-title {
  color: #ffffff !important;
}

.rewards-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  /* No scrolling - let content flow naturally */
}

/* Free Bag Codes Panel Styles */
.free-bag-codes-panel {
  background: #f5f5f5;
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 0.75rem;
  max-height: 200px;
  overflow-y: auto;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.dark-mode .free-bag-codes-panel {
  background: #8d6e63;
  border-color: #000000;
}

.dream-mode .free-bag-codes-panel {
  background: rgba(26, 26, 26, 0.9);
  border-color: #000000;
}

.free-bag-codes-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.free-bag-code-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #8d6e63 !important;
  padding: 1rem;
  border-radius: 8px;
  border: 2px solid #000000;
  transition: all 0.2s ease;
  text-align: center;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.dark-mode .free-bag-code-item {
  background: #3e2723;
  border-color: #000000;
}

.dream-mode .free-bag-code-item {
  background: rgba(45, 20, 60, 0.8);
  border-color: #000000;
}

.free-bag-code-item:hover {
  background: #5d4037;
  border-color: #000000;
}

.free-bag-code-item.applied {
  background: #4CAF50 !important;
  border-color: #2E7D32 !important;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

.free-bag-code-item.applied:hover {
  background: #388E3C !important;
  border-color: #1B5E20 !important;
}

.dark-mode .free-bag-code-item:hover {
  background: #5d4037;
  border-color: #fff8e1;
}

.dream-mode .free-bag-code-item:hover {
  background: rgba(60, 30, 80, 0.9);
  border-color: #ffffff;
}

.free-bag-code-text {
  font-weight: 500;
  color: #000000;
  font-size: 1rem;
  text-align: center;
  word-break: break-word;
  margin-bottom: 0.25rem;
}

.free-bag-code-description {
  font-weight: 500;
  color: #000000;
  font-size: 0.9rem;
  text-align: center;
  word-break: break-word;
  opacity: 0.8;
  font-style: italic;
}

.dark-mode .free-bag-code-text {
  color: #3e2723;
}

.dark-mode .free-bag-code-description {
  color: #3e2723;
}

.dream-mode .free-bag-code-text {
  color: #ffffff;
}

.dream-mode .free-bag-code-description {
  color: #ffffff;
}

/* Applied state styling for dark and dream modes */
.dark-mode .free-bag-code-item.applied {
  background: #4CAF50 !important;
  border-color: #2E7D32 !important;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

.dark-mode .free-bag-code-item.applied:hover {
  background: #388E3C !important;
  border-color: #1B5E20 !important;
}

.dream-mode .free-bag-code-item.applied {
  background: #4CAF50 !important;
  border-color: #2E7D32 !important;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

.dream-mode .free-bag-code-item.applied:hover {
  background: #388E3C !important;
  border-color: #1B5E20 !important;
}

/* Toast Notification Styles */
.toast-notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #4CAF50;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  font-weight: 600;
  font-size: 0.9rem;
  animation: toastSlideIn 0.3s ease-out;
}

.toast-notification.dark-mode {
  background: #4CAF50;
  color: white;
  border: 2px solid #2E7D32;
}

.toast-notification.dream-mode {
  background: #4CAF50;
  color: white;
  border: 2px solid #2E7D32;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(76, 175, 80, 0.2);
}

.toast-message {
  display: block;
  text-align: center;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.remove-code-button {
  background: #d32f2f;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  transition: all 0.2s ease;
  margin-left: 0.5rem;
}

.remove-code-button:hover {
  background: #b71c1c;
  transform: scale(1.1);
}

.dark-mode .remove-code-button {
  background: #d32f2f;
}

.dark-mode .remove-code-button:hover {
  background: #b71c1c;
}

.dream-mode .remove-code-button {
  background: #d32f2f;
}

.dream-mode .remove-code-button:hover {
  background: #b71c1c;
} 

/* Dream mode: force promo code description and applied indicator to black */
.dream-mode .free-bag-code-description,
.dream-mode .applied-indicator {
  color: #000 !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Light mode: cream panel and hover for promo code items */
.free-bag-code-item {
  background: #f5f5dc !important;
  border: 2px solid #8d6e63;
}

.free-bag-code-item:hover {
  background: #e0d7c3 !important;
  border-color: #5d4037 !important;
}

/* Dark mode: restore original dark brown panel and hover */
.dark-mode .free-bag-code-item {
  background: #3e2723 !important;
  border-color: #000000 !important;
}
.dark-mode .free-bag-code-item:hover {
  background: #5d4037 !important;
  border-color: #fff8e1 !important;
}

/* Dream mode: restore original dream panel and hover */
.dream-mode .free-bag-code-item {
  background: rgba(45, 20, 60, 0.8) !important;
  border-color: #000000 !important;
}
.dream-mode .free-bag-code-item:hover {
  background: rgba(60, 30, 80, 0.9) !important;
  border-color: #ffffff !important;
}

/* Applied indicator styling */
.applied-indicator {
  font-weight: bold;
  color: #388E3C;
  letter-spacing: 0.5px;
  font-size: 1.01em;
  display: inline-block;
  margin-top: 2px;
} 

/* Dark mode: match stats panel for promo code items */
.dark-mode .free-bag-code-item {
  background: #8d6e63 !important;
  border-color: #000000 !important;
}
.dark-mode .free-bag-code-item:hover {
  background: #8d6e63 !important;
  border-color: #fff8e1 !important;
} 

/* Dream mode: match stats panel for promo code items */
.dream-mode .free-bag-code-item {
  background: rgba(26, 26, 26, 0.9) !important;
  border-color: #000000 !important;
  color: #fff !important;
}
.dream-mode .free-bag-code-item * {
  color: #fff !important;
  text-shadow: none !important;
}
.dream-mode .free-bag-code-item:hover {
  background: rgba(26, 26, 26, 0.9) !important;
  border-color: #fff !important;
} 

/* Light mode: cream background and border for stats and display panels */
.stat-item,
.display-container {
  background: #f5f5dc !important;
  border: 1px solid #8d6e63 !important;
}

/* Dark mode: brown background for stats and display panels (matching rewards) */
.dark-mode .stat-item,
.dark-mode .display-container {
  background: #8d6e63 !important;
  border: 1px solid #000000 !important;
}

/* Dream mode: dark gray background for stats and display panels (matching rewards) */
.dream-mode .stat-item,
.dream-mode .display-container {
  background: rgba(26, 26, 26, 0.9) !important;
  border: 1px solid #000000 !important;
}

/* Remove hover effect for stat and display panels in light mode */
.stat-item:hover,
.display-container:hover {
  background: #f5f5dc !important;
  border: 1px solid #8d6e63 !important;
}

/* Dark mode: no hover effect for stats and display panels */
.dark-mode .stat-item:hover,
.dark-mode .display-container:hover {
  background: #8d6e63 !important;
  border: 1px solid #000000 !important;
}

/* Dream mode: no hover effect for stats and display panels */
.dream-mode .stat-item:hover,
.dream-mode .display-container:hover {
  background: rgba(26, 26, 26, 0.9) !important;
  border: 1px solid #000000 !important;
}

/* Checkout-specific rewards styling - smaller panels in rows of 2 */
.checkout-rewards-section {
  max-width: 800px !important;
  padding: 1.5rem !important;
}

.checkout-rewards-container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.75rem !important;
}

.checkout-rewards-container .customer-settings-reward-code {
  padding: 1rem !important;
  min-height: auto !important;
}

.checkout-rewards-container .customer-settings-reward-reason {
  font-size: 1.2rem !important;
  margin-bottom: 0.3rem !important;
}

.checkout-rewards-container .customer-settings-reward-code-text {
  font-size: 1.1rem !important;
  padding: 0.4rem 0.8rem !important;
}

.checkout-rewards-container .customer-settings-reward-description {
  font-size: 0.9rem !important;
  margin-top: 0.3rem !important;
}

.checkout-rewards-container .customer-settings-reward-description-text {
  font-size: 1rem !important;
}

/* Dark mode clear button styling */
.dark-mode .clear-button {
  border: 2px solid #000000 !important;
}

/* Dream mode clear button styling - make it red like dark mode */
.dream-mode .clear-button {
  border: 2px solid #000000 !important;
  background-color: #d32f2f !important;
  color: #000000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  background-image: none !important;
  background: #d32f2f !important;
}

/* Additional override for any inline styles */
.dream-mode .clear-button[style*="background"] {
  background: #d32f2f !important;
  background-color: #d32f2f !important;
  background-image: none !important;
}

/* Light mode enter code button styling - ensure white text */
.light-mode .enter-code-button {
  color: #ffffff !important;
}

/* Reward description text - The Wanters DEMO font for both checkout and customer settings */
.customer-settings-reward-description-text,
.checkout-rewards-container .customer-settings-reward-description-text {
  font-family: 'The Wanters DEMO, serif' !important;
}

/* Dream mode checkout rewards title - 1px black outline */
.dream-mode .checkout-rewards-section .customer-settings-rewards-title {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Dream mode reward reason - ensure The Wanters DEMO font */
.dream-mode .customer-settings-reward-reason {
  font-family: 'The Wanters DEMO', serif !important;
}

:root {
  /* Base Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  
  /* Green Accents */
  --color-green-100: rgba(72, 187, 120, 0.1);
  --color-green-200: rgba(72, 187, 120, 0.2);
  --color-green-300: rgba(72, 187, 120, 0.3);
  --color-green-400: #48bb78;
  --color-green-500: #38a169;
  
  /* Seasonal Colors */
  --color-spring: #a8e6cf;
  --color-summer: #ffd3b6;
  --color-autumn: #ffaaa5;
  --color-winter: #d4e7ee;
  
  /* UI Colors */
  --background-color: #0a0f0d;
  --background-color-secondary: #111815;
  --text-color: #e2e8f0;
  --text-color-secondary: #a0aec0;
  --accent-color: var(--color-green-400);
  --border-color: #2d3748;
  
  /* Typography */
  --font-decorative: 'Cinzel Decorative', serif;
  --font-body: 'Crimson Text', serif;
  
  /* Gradients */
  --gradient-green: linear-gradient(135deg, 
    var(--color-green-100) 0%,
    var(--color-green-200) 100%);
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(72, 187, 120, 0.1);
  --shadow-md: 0 4px 6px rgba(72, 187, 120, 0.15);
  --shadow-lg: 0 10px 15px rgba(72, 187, 120, 0.2);
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
} 
.add-to-home-screen {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: 90%;
  width: 400px;
}

/* Dream mode - simple approach to block patterns behind popup */
.add-to-home-screen.dream-mode {
  z-index: 9999 !important;
  isolation: isolate !important;
}

.pwa-prompt {
  background-color: #f5f5dc;
  border: 3px solid #3e2723;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease-out;
  position: relative;
  z-index: 1;
}

.pwa-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pwa-icon {
  flex-shrink: 0;
}

.pwa-icon img {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  border: 4px solid #3e2723;
  object-fit: contain;
  background-color: white;
  padding: 6px;
}

.pwa-text h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #3e2723;
  font-family: var(--font-family);
}

.pwa-text p {
  margin: 0;
  font-size: 0.9rem;
  color: #5d4037;
  line-height: 1.4;
}

.pwa-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.pwa-install-button {
  background-color: #8d6e63;
  color: white;
  border: 2px solid #3e2723;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.pwa-install-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.pwa-dismiss-button {
  background-color: transparent;
  color: #5d4037;
  border: 2px solid #5d4037;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.3s ease;
}

.pwa-dismiss-button:hover {
  background-color: #5d4037;
  color: white;
  transform: translateY(-2px);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Dark mode styles */
.add-to-home-screen.dark-mode .pwa-prompt {
  background-color: #3e2723;
  border-color: #000000;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.add-to-home-screen.dark-mode .pwa-icon img {
  border-color: #000000;
  background-color: #2a2a2a;
}

.add-to-home-screen.dark-mode .pwa-text h3 {
  color: #8d6e63;
}

.add-to-home-screen.dark-mode .pwa-text p {
  color: #a1887f;
}

.add-to-home-screen.dark-mode .pwa-install-button {
  background-color: #5d4037;
  border-color: #000000;
}

.add-to-home-screen.dark-mode .pwa-install-button:hover {
  background-color: #795548;
}

.add-to-home-screen.dark-mode .pwa-dismiss-button {
  color: #a1887f;
  border-color: #a1887f;
}

.add-to-home-screen.dark-mode .pwa-dismiss-button:hover {
  background-color: #a1887f;
  color: #3e2723;
}

/* Dream mode styles - add a solid background around the popup */
.add-to-home-screen.dream-mode .pwa-prompt {
  background: #2d1a3c !important;
  background-image: none !important;
  background-color: #2d1a3c !important;
  border-color: #000000 !important;
  box-shadow: 0 0 0 50px #0d0d0d, 0 8px 25px rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative !important;
  z-index: 10000 !important;
  isolation: isolate !important;
  opacity: 1 !important;
}

/* Ensure no dream mode effects bleed through */
.add-to-home-screen.dream-mode .pwa-prompt::before,
.add-to-home-screen.dream-mode .pwa-prompt::after {
  display: none !important;
}

.add-to-home-screen.dream-mode .pwa-icon img {
  border-color: #000000;
  background-color: #111111;
}

.add-to-home-screen.dream-mode .pwa-text h3 {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.add-to-home-screen.dream-mode .pwa-text p {
  color: #cccccc;
}

.add-to-home-screen.dream-mode .pwa-install-button {
  background-color: #8d6e63;
  color: #000000;
  border-color: #000000;
  font-weight: 900;
  text-shadow: none;
  animation: none;
}

.add-to-home-screen.dream-mode .pwa-install-button:hover {
  background-color: #a1887f;
  color: #ffffff;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4);
  animation: dreamSparkleMainMenu 1.5s ease-in-out infinite alternate;
}

.add-to-home-screen.dream-mode .pwa-dismiss-button {
  color: #cccccc;
  border-color: #cccccc;
  font-weight: 900;
}

.add-to-home-screen.dream-mode .pwa-dismiss-button:hover {
  background-color: #cccccc;
  color: #000000;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .add-to-home-screen {
    bottom: 10px;
    max-width: 95%;
  }
  
  .pwa-prompt {
    padding: 1rem;
  }
  
  .pwa-content {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  
  .pwa-actions {
    flex-direction: column;
  }
  
  .pwa-install-button,
  .pwa-dismiss-button {
    width: 100%;
  }
} 

.add-to-home-screen .pwa-prompt.center-align {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 340px;
  width: 90%;
  margin: 0 auto;
}

.pwa-title {
  font-size: 3.7rem;
  font-weight: 900;
  margin-bottom: 1rem;
  font-family: var(--font-family, 'The Wanters DEMO', sans-serif);
  letter-spacing: 0.5px;
}

.add-to-home-screen.dark-mode .pwa-title,
.add-to-home-screen.dream-mode .pwa-title {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.pwa-icon {
  margin-bottom: 1.5rem;
}

.pwa-actions.vertical {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  align-items: center;
  margin-top: 0.5rem;
}

.pwa-install-button,
.pwa-dismiss-button {
  width: 65%;
  max-width: 200px;
  margin: 0 auto;
}

 
/* ===============================================================================
                                ADMIN PANEL STYLING
=============================================================================== */

/* Main admin panel overlay */
.admin-panel-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  overflow-y: auto;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Removed background pseudo-elements since we're now using a modal overlay */

/* Background panel similar to cart page */
.admin-background-panel {
  background-color: rgba(139, 110, 99, 0.95);
  background-image: 
    linear-gradient(135deg, rgba(93, 64, 55, 0.1) 0%, rgba(139, 110, 99, 0.1) 50%, rgba(93, 64, 55, 0.1) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1' stroke-opacity='0.1'%3E%3Cpath d='M10 10L50 10L50 50L10 50z'/%3E%3Cpath d='M20 20L40 20L40 40L20 40z'/%3E%3Cpath d='M25 25L35 25L35 35L25 35z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  border: 12px solid #5d4037;
  border-radius: 25px;
  padding: 2rem;
  max-width: 1400px;
  width: 98%;
  max-height: 95vh;
  position: relative;
  z-index: 1;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.4),
    0 0 0 3px rgba(93, 64, 55, 0.3),
    0 0 30px rgba(93, 64, 55, 0.3),
    0 0 60px rgba(93, 64, 55, 0.2),
    inset 0 2px 4px rgba(255, 255, 255, 0.1);
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  
  /* Add a subtle inner glow effect */
  position: relative;
}

.admin-background-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    rgba(255, 255, 255, 0.05) 0%, 
    rgba(255, 255, 255, 0.02) 50%, 
    rgba(255, 255, 255, 0.05) 100%);
  border-radius: 25px;
  pointer-events: none;
  z-index: -1;
}

.admin-background-panel::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  pointer-events: none;
  z-index: -1;
}

.admin-background-panel::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

/* Main container inside background panel */
.admin-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  background-image: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.1) 100%);
  border: 4px solid #5d4037;
  border-radius: 15px;
  padding: 2.5rem;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(93, 64, 55, 0.2),
    inset 0 1px 3px rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Admin title panel */
.admin-title-panel {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #ffffff;
  text-align: center;
  padding: 1.5rem 2rem;
  border: 4px solid #0a1a1d;
  border-radius: 15px;
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 50%, #14545c 100%);
  width: 100%;
  max-width: 500px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.4),
    0 0 0 2px rgba(255, 255, 255, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Admin theme switch container */
.admin-theme-switch-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  padding: 1rem;
  width: 100%;
}

/* Admin back button for authentication section */
.admin-back-btn {
  display: block;
  margin: 1.5rem auto 0 auto;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 9999px;
  font-size: 1.6rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'The Wanters DEMO', serif;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-back-btn:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Dark mode admin back button */
.dark-mode .admin-back-btn {
  background-color: #8d6e63;
  color: #ffffff;
  border: 2px solid #000000;
}

.dark-mode .admin-back-btn:hover {
  background-color: #a1887f;
  color: #ffffff;
}

/* Dream mode admin back button */
.dream-mode .admin-back-btn {
  background-color: #dc2626 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
}

.dream-mode .admin-back-btn:hover {
  background-color: #b91c1c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-title {
  font-size: 3rem;
  font-weight: 900;
  margin: 0;
  color: #f5f5dc !important;
  text-align: center;
}

.admin-title-business-name {
  font-size: 1.3em;
  font-weight: 900;
}

.admin-close-btn {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.admin-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.admin-close-btn-topright {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  z-index: 10;
}

.admin-close-btn-topright.admin-close-btn-inpanel {
  top: 2.5rem;
  right: 2.5rem;
  /* Slightly down and left, but still top right */
}

/* Authentication Section */
.admin-auth-section {
  text-align: center;
  width: 100%;
  max-width: 500px;
  padding: 2rem;
}

.admin-auth-section h2 {
  color: #dc2626;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  font-weight: 700;
}

.admin-auth-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.admin-input-group {
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.admin-input-group label {
  display: block;
  color: #3e2723;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.admin-password-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.admin-input-group input {
  width: 100%;
  padding: 0.8rem;
  padding-right: 3rem;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  font-size: 1.1rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
  transition: border-color 0.3s ease;
  background-color: #a1887f;
  color: #3e2723;
}

.admin-input-group input:focus {
  outline: none;
  border-color: #8d6e63;
  background-color: #a1887f;
}

.admin-password-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-password-toggle:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.admin-password-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.eye-icon {
  font-size: 1.2rem;
  line-height: 1;
  user-select: none;
}

.eye-icon.eye-open {
  opacity: 0.8;
}

.eye-icon.eye-closed {
  opacity: 0.6;
}

.admin-login-btn {
  padding: 1rem 2rem;
  background-color: #14545c;
  color: white;
  border: 3px solid #0a1a1d;
  border-radius: 9999px;
  font-size: 1.6rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-login-btn:hover:not(:disabled) {
  background-color: #0d353a;
  color: #fff;
  border: 3px solid #06292b;
}

.admin-login-btn:disabled {
  background-color: #d7ccc8;
  cursor: not-allowed;
  transform: none;
  border: 3px solid #0a1a1d;
}

/* Error and Warning Messages */
.admin-error-message {
  background: #ffebee;
  color: #c62828;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #ef9a9a;
  text-align: center;
  font-weight: 600;
}

.admin-warning {
  background: #fff3e0;
  color: #f57c00;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #ffcc02;
  text-align: center;
  font-weight: 600;
}

.admin-mobile-notice {
  /* Light mode: cream-brown to match app palette */
  background-color: #f5e5c0;
  border: 2px solid #8d6e63;
  border-radius: 10px;
  padding: 1rem;
  margin-top: 1rem;
  color: #3e2723;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.admin-mobile-notice p {
  margin: 0;
  font-family: var(--font-family);
}

.admin-lockout-message {
  background: #ffebee;
  color: #c62828;
  padding: 1.5rem;
  border-radius: 6px;
  border: 1px solid #ef9a9a;
  text-align: center;
}

.admin-lockout-message p {
  margin: 0.5rem 0;
  font-weight: 600;
}

/* Admin Content */
.admin-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.admin-action-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  width: 100%;
  max-width: 1200px;
}

.admin-action-buttons-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: 100%;
  flex-wrap: wrap;
}

/* Customer section responsive layout */
.admin-customer-section-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: 100%;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .admin-customer-section-buttons {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  
  .admin-customer-section-buttons .admin-promo-codes-btn,
  .admin-customer-section-buttons .admin-loyalty-btn,
  .admin-customer-section-buttons .admin-customers-btn {
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
    min-width: 200px;
    width: 100%;
    max-width: 280px;
  }
}

@media (max-width: 480px) {
  .admin-customer-section-buttons .admin-promo-codes-btn,
  .admin-customer-section-buttons .admin-loyalty-btn,
  .admin-customer-section-buttons .admin-customers-btn {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    min-width: 160px;
  }
}

/* Base button styles */
.admin-save-btn,
.admin-logout-btn,
.admin-customers-btn,
.admin-loyalty-btn,
.admin-promo-codes-btn,
.admin-inventory-btn,
.admin-products-btn,
.admin-costs-profits-btn,
.admin-statistics-btn,
.admin-session-preferences-btn,
.admin-summary-btn,
.admin-cook-btn,
.admin-staff-btn,
.admin-qr-generator-btn,
.admin-button-1-btn,
.admin-button-2-btn,
.admin-management-btn {
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #000000;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  width: 220px;
  min-width: 220px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  white-space: nowrap;
}

/* Make Save button green by default */
.admin-save-btn {
  background-color: #27ae60;
  color: #fff;
  border-color: #1e8449;
}
.admin-save-btn:hover:not(:disabled) {
  background-color: #2ecc71;
  color: #fff;
  border-color: #1e8449;
}

.admin-save-btn.has-changes {
  background-color: #27ae60;
  border-color: #1e8449;
  animation: pulse 2s infinite;
}

.admin-save-btn.has-changes:hover {
  background-color: #2ecc71;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 1; }
}

.admin-save-btn:disabled {
  background-color: #bdc3c7;
  border-color: #95a5a6;
  cursor: not-allowed;
  opacity: 0.7;
}

.admin-revert-btn {
  background-color: #14545c;
  color: white;
  border: none;
  border: 3px solid #0a1a1d;
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-revert-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #0d353a;
}

.admin-revert-btn:disabled {
  background-color: #bdc3c7;
  border-color: #95a5a6;
  cursor: not-allowed;
  opacity: 0.7;
}

.admin-logout-btn {
  background-color: #e74c3c;
  color: white;
  border-color: #c0392b;
  min-width: 260px;
}
/* Customers button same size as the standard buttons */
/* Customers button - Master green for packaging */
.admin-customers-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  color: #fff;
  border: 3px solid #004d06;
  box-shadow: 0 4px 8px rgba(0, 119, 10, 0.3);
}
.admin-customers-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4);
  color: #3e2723 !important;
}

.admin-loyalty-btn {
  background-color: #8e44ad;
  color: #fff;
  border-color: #732d91;
}
.admin-loyalty-btn:hover:not(:disabled) {
  background-color: #9b59b6;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(142, 68, 173, 0.4);
}

.admin-logout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(231, 76, 60, 0.4);
  background-color: #c0392b;
  color: #3e2723 !important;
}

.admin-costs-profits-btn {
  background-color: #9333ea;
  color: white;
  border-color: #7c3aed;
}

.admin-costs-profits-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(147, 51, 234, 0.4);
  background-color: #a855f7;
}

/* Inventory button - Master blue for ingredients */
.admin-inventory-btn { 
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  color: #fff; 
  border: 3px solid #0a5d7a;
  box-shadow: 0 4px 8px rgba(16, 142, 188, 0.3);
}
.admin-inventory-btn:hover { 
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  transform: translateY(-2px); 
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
  color: #3e2723 !important;
}

/* Products button distinct color - Purple like Button 1 */
/* Products button - Master purple for appliances */
.admin-products-btn { 
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  color: #fff; 
  border: 3px solid #36034d;
  box-shadow: 0 4px 8px rgba(87, 5, 138, 0.3);
}
.admin-products-btn:hover { 
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  transform: translateY(-2px); 
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4);
  color: #3e2723 !important;
}

.admin-test-inventory-btn {
  background-color: #e74c3c;
  color: white;
  border: 2px solid #c0392b;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-test-inventory-btn:hover:not(:disabled) {
  background-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.admin-test-inventory-btn:disabled {
  background-color: #95a5a6;
  border-color: #7f8c8d;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-promo-codes-btn {
  background-color: #e67e22;
  color: white;
  border-color: #d35400;
}

.admin-promo-codes-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(230, 126, 34, 0.4);
  background-color: #d68910;
}

.admin-statistics-btn {
  background-color: #9b59b6;
  color: white;
  border-color: #8e44ad;
}

.admin-statistics-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(155, 89, 182, 0.4);
  background-color: #8e44ad;
}

.admin-session-preferences-btn {
  background-color: #059669;
  color: white;
  border-color: #047857;
}

.admin-session-preferences-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(5, 150, 105, 0.4);
  background-color: #10b981;
}

.admin-summary-btn {
  background-color: #fbbf24;
  color: #1f2937;
  border-color: #d97706;
}

.admin-summary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(251, 191, 36, 0.4);
  background-color: #f59e0b;
}

.admin-cook-btn {
  background-color: #14545c;
  color: #ffffff;
  border-color: #0a1a1d;
}

.admin-cook-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.4);
  background-color: #0d353a;
}

.admin-management-btn {
  background-color: #14545c;
  color: #ffffff;
  border-color: #0a1a1d;
}

.admin-management-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.4);
  background-color: #0d353a;
}

.admin-update-message {
  background: #e8f5e8;
  color: #2e7d32;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #4caf50;
  text-align: center;
  font-weight: 600;
  margin-bottom: 1rem;
  width: 100%;
  max-width: 600px;
}

.admin-loading {
  background: #f5f5f5;
  color: #5d4037;
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
}

/* Admin Sections */
.admin-section {
  width: 100%;
  max-width: 1000px;
  margin: 2rem 0;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #5d4037;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.admin-section h3 {
  color: #3e2723;
  margin: 0 0 1.5rem 0;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

/* Customer Management: no backing panel (match Business Management profile look) */
.customer-management-content .admin-section {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  max-width: none;
}

/* Promo Code Styles */
.admin-promo-controls {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

/* Make Create Code button mystic purple */
.admin-create-code-btn {
  background-color: #7c3aed; /* Mystic purple */
  color: #fff;
  border: 3px solid #4b2997;
  font-weight: 700;
  font-size: 1.3rem;
  padding: 1rem 2.2rem;
  border-radius: 32px;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
  transition: background 0.2s, box-shadow 0.2s;
}
.admin-create-code-btn:hover:not(:disabled) {
  background-color: #a78bfa; /* Lighter mystic purple on hover */
  color: #2d0066;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.25);
  border-color: #4b2997;
}

/* Promo code list - make responsive instead of fixed 3-column */
.admin-promo-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.admin-promo-item {
  background: #f5f5dc; /* Match main background cream */
  border: 2px solid #d7ccc8;
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-promo-title-panel {
  width: 100%;
  background: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  margin-bottom: 1rem;
  padding: 0.7rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.admin-promo-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff; /* Ensure white text in light mode */
  margin: 0;
  letter-spacing: 0.5px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  font-family: 'The Wanters DEMO', serif;
}

.admin-promo-title-edit {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff; /* Ensure white text in light mode */
  margin: 0;
  letter-spacing: 0.5px;
  text-align: center;
  width: 100%;
  outline: none;
  font-family: 'The Wanters DEMO', serif; /* Ensure font inheritance */
}

.admin-promo-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
  padding: 0 1rem;
}

.admin-promo-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.admin-promo-field-label {
  font-weight: 600;
  color: #3e2723;
  font-size: 1.4rem;
  font-family: 'The Wanters DEMO', serif;
  text-align: left;
  min-width: 70px;
  flex-shrink: 0;
}

.admin-promo-text-box {
  background: #f5f5f5;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  font-family: 'Verdana', sans-serif;
  font-weight: bold;
  color: #3e2723;
  width: 180px;
  height: 2.5rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-align: center;
}

.admin-promo-text-box:focus {
  outline: none;
  border-color: #5d4037;
  background: white;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(93, 64, 55, 0.1);
}

.admin-promo-text-box[readonly] {
  background: #e8e8e8;
  cursor: not-allowed;
  color: #666;
}
.admin-promo-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.admin-promo-code {
  font-weight: 700;
  color: #3e2723;
  font-size: 1.1rem;
}

.admin-promo-detail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.admin-promo-detail-label {
  font-weight: 700;
  color: #5d4037;
  min-width: 60px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
}

.admin-promo-detail-value {
  font-weight: 500;
  color: #3e2723;
}

.admin-promo-inline-edit {
  background: white;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-size: 0.95rem;
  color: #3e2723;
  min-width: 80px;
  text-align: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.admin-promo-inline-edit:focus {
  outline: none;
  border-color: #5d4037;
  background: #fff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(93, 64, 55, 0.1);
}

.admin-promo-effect {
  color: #5d4037;
  font-size: 0.9rem;
}

.admin-promo-value {
  font-weight: 600;
  color: #8d6e63;
}

.admin-promo-status {
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

.admin-promo-status.active {
  background: #e8f5e8;
  color: #2e7d32;
}

.admin-promo-status.inactive {
  background: #ffebee;
  color: #c62828;
}

.admin-promo-usage {
  color: #666;
  font-size: 0.9rem;
}

/* Promo code actions */
.admin-promo-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}

.admin-promo-toggle {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-promo-toggle.active {
  background-color: #27ae60;
  color: white;
}

.admin-promo-toggle.active:hover {
  background-color: #2ecc71;
}

.admin-promo-toggle.inactive {
  background-color: #e74c3c;
  color: white;
}

.admin-promo-toggle.inactive:hover {
  background-color: #c0392b;
}

.admin-promo-edit {
  padding: 0.5rem 1rem;
  background-color: #14545c;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-promo-edit:hover {
  background-color: #0d353a;
}

.admin-promo-delete {
  padding: 0.5rem 1rem;
  background-color: #c0392b;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.admin-promo-delete:hover {
  background-color: #e74c3c;
}

/* Popup overlay */
.admin-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.admin-popup {
  background-color: white;
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.admin-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #d7ccc8;
}

.admin-popup-header h3 {
  color: #3e2723;
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
}

.admin-popup-close {
  background: none;
  border: none;
  color: #3e2723;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.admin-popup-close:hover {
  background: rgba(62, 39, 35, 0.1);
}

.admin-popup-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-form-group label {
  color: #3e2723;
  font-weight: 600;
  font-size: 1.1rem;
}

.admin-form-group input,
.admin-form-group select {
  padding: 0.8rem;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
  background-color: #a1887f;
  color: #3e2723;
}

.admin-form-group input:focus,
.admin-form-group select:focus {
  outline: none;
  border-color: #8d6e63;
  background-color: #a1887f;
}

.admin-popup-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 2px solid #d7ccc8;
}

.admin-popup-btn {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 9999px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-popup-save {
  background-color: #27ae60;
  color: white;
  border: 3px solid #1e8449;
}

.admin-popup-save:hover {
  background-color: #2ecc71;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.admin-popup-cancel {
  background-color: #e74c3c;
  color: white;
  border: 3px solid #c0392b;
}

.admin-popup-cancel:hover {
  background-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Dark Mode Styles */
.dark-mode .admin-background-panel {
  background-color: rgba(26, 26, 26, 0.95);
  background-image: 
    linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(26, 26, 26, 0.3) 50%, rgba(0, 0, 0, 0.3) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1' stroke-opacity='0.15'%3E%3Cpath d='M10 10L50 10L50 50L10 50z'/%3E%3Cpath d='M20 20L40 20L40 40L20 40z'/%3E%3Cpath d='M25 25L35 25L35 35L25 35z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  border: 12px solid #3e2723;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.6),
    0 0 0 3px rgba(62, 39, 35, 0.4),
    0 0 30px rgba(62, 39, 35, 0.4),
    0 0 60px rgba(62, 39, 35, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.05);
}

.dark-mode .admin-container {
  background-color: rgba(62, 39, 35, 0.9);
  color: #fff8e1;
}

.dark-mode .admin-title-panel {
  background-color: #14545c;
  border: 3px solid #0a1a1d;
}

.dark-mode .admin-title {
  color: #f5f5dc !important;
}

.dark-mode .admin-close-btn {
  color: #8d6e63;
}

.dark-mode .admin-close-btn:hover {
  background: rgba(141, 110, 99, 0.2);
}

.dark-mode .admin-auth-section h2,
.dark-mode .admin-welcome h2 {
  color: #dc2626;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .admin-input-group label {
  color: #8d6e63;
}

.dark-mode .admin-input-group input {
  background: #a1887f;
  border-color: #5d4037;
  color: #3e2723;
}

.dark-mode .admin-input-group input:focus {
  border-color: #8d6e63;
  background: #a1887f;
}

.dark-mode .admin-password-toggle {
  color: #8d6e63;
}

.dark-mode .admin-password-toggle:hover {
  background-color: rgba(141, 110, 99, 0.2);
}

.dark-mode .eye-icon {
  color: #8d6e63;
}

.dark-mode .admin-login-btn {
  background-color: #14545c;
  border-color: #0a1a1d;
  color: #fff;
}

.dark-mode .admin-login-btn:hover:not(:disabled) {
  background-color: #0d353a;
  color: #fff;
  border: 3px solid #0a1a1d;
}

.dark-mode .admin-login-btn:disabled {
  border: 3px solid #0a1a1d;
}

.dark-mode .admin-mobile-notice {
  /* Dark mode: light brown panel */
  background-color: #8d6e63;
  border: 2px solid #000000;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.dark-mode .admin-logout-btn {
  border-color: #000000;
}

.dark-mode .admin-section {
  background: rgba(42, 42, 42, 0.9);
  border-color: #5d4037;
}

.dark-mode .admin-section h3 {
  color: #8d6e63;
}

.dark-mode .admin-inventory-item {
  background: #3e2723;
  border-color: #5d4037;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .admin-inventory-header h4 {
  color: #8d6e63;
}

.dark-mode .admin-size-control label {
  color: #8d6e63;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
}

.dark-mode .admin-size-info label {
  color: #8d6e63;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
}

.dark-mode .admin-product-image {
  border-color: #8d6e63;
}

.dark-mode .admin-size-label {
  color: #d7ccc8;
}

.dark-mode .admin-plus-btn {
  background: #27ae60;
  color: white;
  border: 2px solid #1e8449;
}

.dark-mode .admin-plus-btn:hover {
  background: #2ecc71;
}

.dark-mode .admin-minus-btn {
  background: #e74c3c;
  color: white;
  border: 2px solid #c0392b;
}

.dark-mode .admin-minus-btn:hover {
  background: #c0392b;
}

.dark-mode .admin-quantity-display {
  background: #f7ede2;
  border-color: #5d4037;
  color: #3e2723;
}

.dark-mode .admin-promo-item {
  background: #3e2723;
  border-color: #5d4037;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .admin-promo-code {
  color: #8d6e63;
}

.dark-mode .admin-promo-effect {
  color: #a1887f;
}

.dark-mode .admin-promo-detail-label {
  color: #a1887f;
}

.dark-mode .admin-promo-detail-value {
  color: #8d6e63;
}

.dark-mode .admin-promo-inline-edit {
  background: #2a2a2a;
  border: 2px solid #8d6e63;
  color: #d7ccc8;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .admin-promo-inline-edit:focus {
  border-color: #a1887f;
  background: #3e2723;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(161, 136, 127, 0.2);
}

.dark-mode .admin-promo-field-label {
  color: #d7ccc8;
}

.dark-mode .admin-promo-text-box {
  background: #f5e5c0; /* Cream brown */
  border: 2px solid #8d6e63; /* Brown border */
  color: #14545c; /* Teal color matching selling button */
}
.dark-mode .admin-promo-text-box:focus {
  background: #fff8e1;
  border-color: #5d4037;
  color: #3e2723;
}
.dark-mode .admin-promo-text-box[readonly] {
  background: #e8e0c8;
  color: #666;
}

.dark-mode .admin-promo-title-edit {
  color: #ffffff;
}

.dark-mode .admin-action-buttons {
  background: rgba(42, 42, 42, 0.1);
  border-color: #5d4037;
  border-bottom: none;
}

.dark-mode .admin-save-btn {
  border-color: #000000;
}

.dark-mode .admin-save-btn.has-changes {
  background-color: #27ae60;
  border-color: #1e8449;
}

.dark-mode .admin-revert-btn {
  border-color: #000000;
}

.dark-mode .admin-logout-btn {
  border-color: #000000;
}

.dark-mode .admin-costs-profits-btn {
  border-color: #000000;
}

.dark-mode .admin-inventory-btn {
  border-color: #000000;
}

.dark-mode .admin-test-inventory-btn {
  border-color: #000000;
}

.dark-mode .admin-promo-codes-btn {
  border-color: #000000;
}

.dark-mode .admin-statistics-btn {
  border-color: #000000;
}

.dark-mode .admin-summary-btn {
  border-color: #000000;
}

.dark-mode .admin-promo-actions {
  background: none;
}

/* Dark mode promo toggle buttons - add black borders */
.dark-mode .admin-promo-toggle.active {
  background-color: #27ae60;
  color: white;
  border: 2px solid #000000; /* Black border for active button */
}

.dark-mode .admin-promo-toggle.active:hover {
  background-color: #2ecc71;
  border: 2px solid #000000; /* Maintain black border on hover */
}

.dark-mode .admin-promo-toggle.inactive {
  background-color: #e74c3c;
  color: white;
  border: 2px solid #000000; /* Black border for inactive button */
}

.dark-mode .admin-promo-toggle.inactive:hover {
  background-color: #c0392b;
  border: 2px solid #000000; /* Maintain black border on hover */
}

.dark-mode .admin-promo-delete {
  background-color: #c0392b;
  color: white;
  border: 2px solid #000000; /* Black border for delete button */
}

.dark-mode .admin-promo-delete:hover {
  background-color: #e74c3c;
  border: 2px solid #000000; /* Maintain black border on hover */
}

.dark-mode .admin-popup {
  background-color: #2a2a2a;
  border-color: #5d4037;
}

.dark-mode .admin-popup-header {
  border-color: #5d4037;
}

.dark-mode .admin-popup-header h3 {
  color: #8d6e63;
}

.dark-mode .admin-popup-close {
  color: #8d6e63;
}

.dark-mode .admin-popup-close:hover {
  background: rgba(141, 110, 99, 0.2);
}

.dark-mode .admin-form-group label {
  color: #8d6e63;
}

.dark-mode .admin-form-group input,
.dark-mode .admin-form-group select {
  background: #a1887f;
  border-color: #5d4037;
  color: #3e2723;
}

.dark-mode .admin-form-group input:focus,
.dark-mode .admin-form-group select:focus {
  border-color: #8d6e63;
  background: #a1887f;
}

.dark-mode .admin-popup-actions {
  border-color: #5d4037;
}

.dark-mode .admin-popup-save {
  border-color: #1e8449;
}

.dark-mode .admin-popup-cancel {
  border-color: #c0392b;
}

/* Dream Mode Styles */
.dream-mode .admin-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  border-radius: 20px;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream-mode .admin-container {
  background-color: rgba(255, 255, 255, 0.95);
  color: #333333;
  border: 3px solid #000000;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.dream-mode .admin-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  border-radius: 15px;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .admin-title {
  color: #ffffff !important;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
  animation: none !important;
}

.dream-mode .admin-close-btn {
  color: #ffffff;
}

.dream-mode .admin-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.dream-mode .admin-auth-section h2,
.dream-mode .admin-welcome h2 {
  color: #dc2626;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
}

.dream-mode .admin-input-group label {
  color: #333333;
  text-shadow: none;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
}

.dream-mode .admin-input-group input {
  background: #a1887f;
  border: 2px solid #7c3aed;
  color: #3e2723;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}

.dream-mode .admin-input-group input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
  background: #a1887f;
}

.dream-mode .admin-password-toggle {
  color: #7c3aed;
}

.dream-mode .admin-password-toggle:hover {
  background-color: rgba(124, 58, 237, 0.2);
}

.dream-mode .eye-icon {
  color: #7c3aed;
}

.dream-mode .admin-login-btn {
  background-color: #14545c !important;
  border-color: #0a1a1d !important;
  color: #fff !important;
}

.dream-mode .admin-login-btn:hover:not(:disabled) {
  background-color: #0d353a !important;
  color: #fff !important;
  border: 3px solid #0a1a1d !important;
}

.dream-mode .admin-login-btn:disabled {
  border: 3px solid #0a1a1d !important;
}

.dream-mode .admin-mobile-notice {
  /* Dream mode: mystic purple gradient with crisp border */
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 100%);
  border: 2px solid #000000;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.35);
}

.dream-mode .admin-mobile-notice p {
  color: #ffffff !important;
  animation: none !important;
  text-shadow: none !important;
}

.dream-mode .admin-logout-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-logout-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-section {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-section h3 {
  color: #ffffff;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 50%, #6a1b9a 100%);
  border: 3px solid #1a0033;
  border-radius: 15px;
  padding: 1rem 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-inventory-item {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-inventory-header h4 {
  color: #ffffff;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 50%, #6a1b9a 100%);
  border: 2px solid #1a0033;
  border-radius: 12px;
  padding: 0.8rem 1.5rem;
  text-align: center;
  box-shadow: 0 3px 10px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-size-control label {
  color: #333333;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-size-info label {
  color: #333333;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-product-image {
  border: 3px solid #4a148c;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-size-label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-plus-btn {
  background: #27ae60;
  color: white;
  border: 2px solid #1e8449;
}

.dream-mode .admin-plus-btn:hover {
  background: #2ecc71;
}

.dream-mode .admin-minus-btn {
  background: #e74c3c;
  color: white;
  border: 2px solid #c0392b;
}

.dream-mode .admin-minus-btn:hover {
  background: #c0392b;
}

.dream-mode .admin-quantity-display {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
}

.dream-mode .admin-promo-item {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-promo-code {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-promo-effect {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-value {
  color: #00bcd4;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-promo-detail-label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-detail-value {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-inline-edit {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-promo-inline-edit:focus {
  border-color: #6a1b9a;
  background: #fff;
  box-shadow: 0 0 15px rgba(106, 27, 154, 0.4);
}

.dream-mode .admin-promo-field-label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-text-box {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  font-weight: bold;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-promo-text-box:focus {
  border-color: #6a1b9a;
  background: #fff;
  box-shadow: 0 0 15px rgba(106, 27, 154, 0.4);
}

.dream-mode .admin-promo-text-box[readonly] {
  background: #1a1a1a;
  color: #999;
}

.dream-mode .admin-promo-title-edit {
  color: #ffffff;
}

.dream-mode .admin-action-buttons {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #4a148c;
  border-bottom: none;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-save-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-save-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-save-btn.has-changes {
  background-color: #27ae60;
  border-color: #1e8449;
  color: white;
}

.dream-mode .admin-save-btn.has-changes:hover {
  background-color: #2ecc71;
}

.dream-mode .admin-revert-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-revert-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-logout-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-logout-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-costs-profits-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-costs-profits-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-inventory-btn {
  border-color: #000000;
}

.dream-mode .admin-test-inventory-btn {
  border-color: #000000;
}

.dream-mode .admin-promo-codes-btn {
  border-color: #000000;
}

.dream-mode .admin-statistics-btn {
  border-color: #000000;
}

.dream-mode .admin-summary-btn {
  border-color: #000000;
}

.dream-mode .admin-popup {
  background-color: rgba(255, 255, 255, 0.95);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-popup-header {
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 50%, #6a1b9a 100%);
  border: 3px solid #1a0033;
  border-radius: 12px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-popup-header h3 {
  color: #ffffff;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
}

.dream-mode .admin-popup-close {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.dream-mode .admin-popup-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.dream-mode .admin-form-group label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-form-group input,
.dream-mode .admin-form-group select {
  background: #a1887f;
  border: 2px solid #4a148c;
  color: #3e2723;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-form-group input:focus,
.dream-mode .admin-form-group select:focus {
  border-color: #6a1b9a;
  box-shadow: 0 0 15px rgba(106, 27, 154, 0.4);
  background: #a1887f;
}

.dream-mode .admin-popup-actions {
  border-top: 2px solid #4a148c;
  margin-top: 1rem;
  padding-top: 1rem;
}

.dream-mode .admin-popup-save {
  border-color: #1e8449;
}

.dream-mode .admin-popup-cancel {
  border-color: #c0392b;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .admin-promo-list {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  /* Mobile: single scroll root – .admin-panel-page scrolls; inner containers do not trap scroll */
  .admin-background-panel,
  .admin-container {
    overflow-y: visible !important;
    max-height: none !important;
    -webkit-overflow-scrolling: unset;
  }
  .admin-panel-page {
    touch-action: pan-y;
  }
}

/* Clickable Admin Title for Cache Refresh */
.clickable-title {
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.clickable-title:hover {
  transform: scale(1.02);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.clickable-title:active {
  transform: scale(0.98);
}

/* Light mode hover effects */
.light-mode .clickable-title:hover {
  color: #8d6e63;
  text-shadow: 0 2px 8px rgba(141, 110, 99, 0.4);
}

/* Dark mode hover effects */
.dark-mode .clickable-title:hover {
  color: #a1887f;
  text-shadow: 0 2px 8px rgba(161, 136, 127, 0.6);
}

/* Dream mode hover effects */
.dream-mode .clickable-title:hover {
  color: #00ffbb;
  text-shadow: 0 2px 8px rgba(0, 255, 187, 0.6);
  animation: dreamText 2s ease-in-out infinite;
}

/* Mobile responsive adjustments for clickable title */
@media (max-width: 768px) {
  .clickable-title:hover {
    transform: none;
    text-shadow: none;
  }
  
  .clickable-title:active {
    transform: scale(0.95);
  }
}

/* Medium screens - 2 rows of buttons */
@media (max-width: 1024px) and (min-width: 769px) {
  .admin-action-buttons-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  
  .admin-save-btn,
  .admin-revert-btn,
  .admin-customers-btn,
  .admin-costs-profits-btn,
  .admin-inventory-btn,
  .admin-products-btn,
  .admin-promo-codes-btn,
  .admin-statistics-btn,
  .admin-session-preferences-btn,
  .admin-summary-btn,
  .admin-cook-btn,
  .admin-staff-btn,
  .admin-button-1-btn,
  .admin-button-2-btn {
    width: 180px;
    min-width: auto;
  }
}

/* Small tablets - 3 rows of buttons */
@media (max-width: 768px) and (min-width: 481px) {
  .admin-background-panel {
    width: 98%;
    padding: 1rem;
  }
  
  .admin-container {
    padding: 1.5rem;
  }
  
  .admin-title-panel {
    max-width: 100%;
  }
  
  .admin-title {
    font-size: 2rem;
  }
  
  .admin-inventory-grid {
    grid-template-columns: 1fr;
  }
  
  .admin-promo-list {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.5rem;
  }
  
  .admin-action-buttons {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
  
  .admin-action-buttons-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    width: 100%;
  }
  
  .admin-save-btn,
  .admin-revert-btn,
  .admin-customers-btn,
  .admin-costs-profits-btn,
  .admin-inventory-btn,
  .admin-products-btn,
  .admin-promo-codes-btn,
  .admin-statistics-btn,
  .admin-session-preferences-btn,
  .admin-summary-btn,
  .admin-cook-btn,
  .admin-staff-btn,
  .admin-button-1-btn,
  .admin-button-2-btn {
    width: 160px;
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .admin-panel-page {
    padding: 0.5rem;
  }
  
  .admin-background-panel {
    padding: 0.5rem;
  }
  
  .admin-container {
    padding: 1rem;
  }
  
  .admin-title {
    font-size: 1.8rem;
  }
  
  .admin-close-btn {
    font-size: 1.5rem;
  }
  
  .admin-action-buttons-row {
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
    width: 100%;
  }
  
  .admin-save-btn,
  .admin-revert-btn,
  .admin-customers-btn,
  .admin-costs-profits-btn,
  .admin-inventory-btn,
  .admin-products-btn,
  .admin-promo-codes-btn,
  .admin-statistics-btn,
  .admin-summary-btn,
  .admin-cook-btn,
  .admin-staff-btn,
  .admin-button-1-btn,
  .admin-button-2-btn,
  .admin-site-map-btn-new,
  .admin-back-button,
  .logout-button {
    width: 180px !important;
    min-width: auto !important;
    max-width: 180px !important;
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
  }
}

/* Narrow screens - make buttons narrower to override inline styles */
@media (max-width: 600px) {
  .admin-staff-btn,
  .admin-customers-btn,
  .admin-inventory-btn,
  .admin-products-btn,
  .admin-loyalty-btn,
  .admin-promo-codes-btn,
  .admin-costs-profits-btn,
  .admin-statistics-btn,
  .admin-session-preferences-btn,
  .admin-summary-btn,
  .admin-cook-btn,
  .admin-qr-generator-btn,
  .admin-button-1-btn,
  .admin-button-2-btn,
  .admin-management-btn,
  .admin-site-map-btn-new,
  .admin-back-button,
  .logout-button {
    width: 160px !important;
    min-width: auto !important;
    max-width: 160px !important;
  }
}

/* Very narrow screens - make buttons even narrower */
@media (max-width: 400px) {
  .admin-staff-btn,
  .admin-customers-btn,
  .admin-inventory-btn,
  .admin-products-btn,
  .admin-loyalty-btn,
  .admin-promo-codes-btn,
  .admin-costs-profits-btn,
  .admin-statistics-btn,
  .admin-session-preferences-btn,
  .admin-summary-btn,
  .admin-cook-btn,
  .admin-qr-generator-btn,
  .admin-button-1-btn,
  .admin-button-2-btn,
  .admin-management-btn,
  .admin-site-map-btn-new,
  .admin-back-button,
  .logout-button {
    width: 140px !important;
    min-width: auto !important;
    max-width: 140px !important;
  }
}

/* Admin Management Page Styles */
.admin-tab-navigation {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.admin-tab-btn {
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #000000;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  outline: none;
  background-color: #6b7280;
  color: #fff;
  border-color: #374151;
}

.admin-tab-btn:hover {
  background-color: #818b9b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.admin-tab-btn.active {
  background-color: #14545c;
  border-color: #0a1a1d;
  color: #ffffff;
}

.admin-tab-btn.active:hover {
  background-color: #0d353a;
}

.admin-management-content {
  margin-top: 2rem;
}

.admin-placeholder-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 1rem;
}

.admin-placeholder-item {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid #d7ccc8;
  border-radius: 12px;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.admin-placeholder-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #8d6e63;
}

.admin-placeholder-item h3 {
  color: #3e2723;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: 'The Wanters DEMO', serif;
}

.admin-placeholder-item p {
  color: #5d4037;
  font-size: 1rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.admin-placeholder-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-placeholder-features li {
  color: #5d4037;
  font-size: 0.95rem;
  padding: 0.3rem 0;
  position: relative;
  padding-left: 1.5rem;
}

.admin-placeholder-features li::before {
  content: "•";
  color: #8d6e63;
  font-weight: bold;
  position: absolute;
  left: 0;
  font-size: 1.2rem;
}

/* Dark mode styles for admin management */
.dark-mode .admin-tab-btn {
  background-color: #374151;
  border-color: #1f2937;
  color: #d1d5db;
}

.dark-mode .admin-tab-btn:hover {
  background-color: #4b5563;
}

.dark-mode .admin-tab-btn.active {
  background-color: #14545c;
  border-color: #0a1a1d;
  color: #ffffff;
}

.dark-mode .admin-placeholder-item {
  background: rgba(0, 0, 0, 0.3);
  border-color: #5d4037;
}

.dark-mode .admin-placeholder-item:hover {
  border-color: #8d6e63;
}

.dark-mode .admin-placeholder-item h3 {
  color: #d1d5db;
}

.dark-mode .admin-placeholder-item p,
.dark-mode .admin-placeholder-features li {
  color: #9ca3af;
}

.dark-mode .admin-placeholder-features li::before {
  color: #8d6e63;
}

/* Admin Session Management Section */
.admin-session-management-section {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: rgba(245, 245, 220, 0.6);
  border: 3px solid #8d6e63;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.admin-section-subtitle {
  font-size: 1.4rem;
  font-weight: 600;
  color: #3e2723;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
  letter-spacing: 0.5px;
}

.admin-session-preferences-container {
  margin-top: 1rem;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.8);
  border: 2px solid #5d4037;
  border-radius: 12px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Dark Mode Support for Session Management */
.dark-mode .admin-session-management-section {
  background-color: rgba(26, 26, 26, 0.8);
  border-color: #8d6e63;
}

.dark-mode .admin-section-subtitle {
  color: #fff8e1;
}

.dark-mode .admin-session-preferences-container {
  background-color: rgba(62, 39, 35, 0.9);
  border-color: #5d4037;
}

/* Dream Mode Support for Session Management */
.dream-mode .admin-session-management-section {
  background-color: rgba(45, 20, 60, 0.4);
  border-color: #000000;
}

.dream-mode .admin-section-subtitle {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.dream-mode .admin-session-preferences-container {
  background-color: rgba(26, 26, 26, 0.8);
  border-color: #000000;
}

/* Dream mode styles for admin management */
.dream-mode .admin-tab-btn {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-color: #4a148c;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(124, 58, 237, 0.3);
}

.dream-mode .admin-tab-btn:hover {
  background: linear-gradient(135deg, #6a1b9a, #9333ea);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(124, 58, 237, 0.4);
}

.dream-mode .admin-tab-btn.active {
  background: linear-gradient(135deg, #14545c, #0d353a);
  border-color: #0a1a1d;
  color: #ffffff;
}

.dream-mode .admin-placeholder-item {
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid #7c3aed;
  box-shadow: 0 4px 8px rgba(124, 58, 237, 0.2);
}

.dream-mode .admin-placeholder-item:hover {
  border-color: #a855f7;
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3);
}

.dream-mode .admin-placeholder-item h3 {
  color: #1f2937;
  text-shadow: 0 2px 4px rgba(124, 58, 237, 0.3);
}

.dream-mode .admin-placeholder-item p,
.dream-mode .admin-placeholder-features li {
  color: #374151;
}

.dream-mode .admin-placeholder-features li::before {
  color: #7c3aed;
}

/* Responsive styles for admin management */
@media (max-width: 768px) {
  .admin-tab-navigation {
    flex-direction: column;
    align-items: center;
  }
  
  .admin-tab-btn {
    min-width: 250px;
    width: 100%;
    max-width: 300px;
  }
  
  .admin-placeholder-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .admin-placeholder-item {
    padding: 1.2rem;
  }
}

@media (max-width: 480px) {
  .admin-tab-btn {
    min-width: 200px;
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
  }
  
  .admin-placeholder-item {
    padding: 1rem;
  }
  
  .admin-placeholder-item h3 {
    font-size: 1.2rem;
  }
}

@media (max-width: 360px) {
  .admin-action-buttons-row {
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
    width: 100%;
  }
  
  .admin-save-btn,
  .admin-revert-btn,
  .admin-customers-btn,
  .admin-costs-profits-btn,
  .admin-inventory-btn,
  .admin-products-btn,
  .admin-promo-codes-btn,
  .admin-statistics-btn,
  .admin-summary-btn,
  .admin-cook-btn,
  .admin-staff-btn,
  .admin-button-1-btn,
  .admin-button-2-btn {
    width: 160px;
    min-width: auto;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }
}

.admin-theme-toggle-bar {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
} 

.admin-section-title-panel {
  width: 100%;
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 50%, #14545c 100%);
  border: 4px solid #0a1a1d;
  border-radius: 15px;
  margin-bottom: 1rem;
  padding: 1.5rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(255, 255, 255, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
  position: relative;
}
.admin-section-title {
  font-size: 2.8rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: 1.5px;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.admin-flavour-title-panel {
  flex: 1;
  background: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  padding: 0.7rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.admin-inventory-item h3 {
  font-size: 1.7rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.5px;
  text-align: center;
}

.dark-mode .admin-section-title-panel,
.dream-mode .admin-section-title-panel,
.dark-mode .admin-promo-title-panel,
.dream-mode .admin-promo-title-panel {
  background: #14545c;
  border: 2px solid #0a1a1d;
  color: #ffffff;
}
.dark-mode .admin-flavour-title-panel,
.dream-mode .admin-flavour-title-panel {
  background: #14545c;
  border: 2px solid #0a1a1d;
  color: #ffffff;
} 

@media (max-width: 600px) {
  .admin-promo-list {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .admin-promo-item {
    padding: 1rem;
    gap: 0.2rem;
  }
  .admin-promo-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
  }
  .admin-promo-actions {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.3rem;
  }
} 

/* Make Active and Delete buttons larger in promo actions */
.admin-promo-toggle,
.admin-promo-delete {
  padding: 0.8rem 2rem;
  font-size: 1.2rem;
  border-radius: 28px;
}

/* Ensure dark mode variants inherit the larger size */
.dark-mode .admin-promo-toggle,
.dark-mode .admin-promo-delete {
  padding: 0.8rem 2rem;
  font-size: 1.2rem;
  border-radius: 28px;
} 

/* Dark mode: Create Code button gets a black border */
.dark-mode .admin-create-code-btn {
  border: 3px solid #000;
  background-color: #7c3aed;
  color: #fff;
}
.dark-mode .admin-create-code-btn:hover:not(:disabled) {
  border: 3px solid #000;
  background-color: #a78bfa;
  color: #2d0066;
} 

/* Promo panel titles: white in light/dream, black in dark mode */
.admin-promo-title {
  color: #fff !important;
}
.dream-mode .admin-promo-title {
  color: #fff !important;
}
.dark-mode .admin-promo-title {
  color: #000 !important;
}

.admin-promo-title-edit {
  color: #fff !important;
}
.dream-mode .admin-promo-title-edit {
  color: #fff !important;
}
.dark-mode .admin-promo-title-edit {
  color: #000 !important;
} 

/* Make Revert button mystic purple like Create Code */
.admin-revert-btn {
  background-color: #7c3aed;
  color: #fff;
  border: 3px solid #4b2997;
  font-weight: 700;
  transition: background 0.2s, box-shadow 0.2s;
}
.admin-revert-btn:hover:not(:disabled) {
  background-color: #a78bfa;
  color: #2d0066;
  border-color: #4b2997;
}
.dark-mode .admin-revert-btn {
  background-color: #7c3aed;
  color: #fff;
  border: 3px solid #000;
}
.dark-mode .admin-revert-btn:hover:not(:disabled) {
  background-color: #a78bfa;
  color: #2d0066;
  border: 3px solid #000;
} 

/* Promo Code Creation Modal Styles */
.admin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-modal {
  background: #fff;
  border: 3px solid #5d4037;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  padding: 2.2rem 2rem 1.5rem 2rem;
  min-width: 320px;
  max-width: 95vw;
  width: 400px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.admin-modal-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 2.1rem;
  color: #3e2723;
  margin-bottom: 1.2rem;
  text-align: center;
  font-weight: 800;
}
.admin-modal-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}
.admin-modal-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: #3e2723;
  margin-bottom: 0.3rem;
  font-family: 'The Wanters DEMO', serif;
}
.admin-modal-input {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 2px solid #d7ccc8;
  border-radius: 7px;
  font-size: 1.1rem;
  color: #3e2723;
  background: #f5f5dc;
  font-family: 'Verdana', sans-serif;
  font-weight: 600;
  margin-bottom: 0.2rem;
  transition: border-color 0.2s;
}
.admin-modal-input:focus {
  outline: none;
  border-color: #8d6e63;
  background: #fff;
}
.admin-modal-actions {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  width: 100%;
}
.admin-modal-save-btn {
  background: #27ae60;
  color: #fff;
  border: 3px solid #1e8449;
  border-radius: 9999px;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.admin-modal-save-btn:hover {
  background: #2ecc71;
}
.admin-modal-cancel-btn {
  background: #e74c3c;
  color: #fff;
  border: 3px solid #c0392b;
  border-radius: 9999px;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.admin-modal-cancel-btn:hover {
  background: #c0392b;
}

/* Dark Mode Modal Styles */
.dark-mode .admin-modal {
  background: #2a2a2a;
  border-color: #5d4037;
}
.dark-mode .admin-modal-title {
  color: #8d6e63;
}
.dark-mode .admin-modal-label {
  color: #8d6e63;
}
.dark-mode .admin-modal-input {
  background: #f5e5c0;
  border-color: #8d6e63;
  color: #3e2723;
}
.dark-mode .admin-modal-input:focus {
  background: #fff8e1;
  border-color: #5d4037;
}
.dark-mode .admin-modal-save-btn {
  border-color: #000;
}
.dark-mode .admin-modal-cancel-btn {
  border-color: #000;
}

/* Dream Mode Modal Styles */
.dream-mode .admin-modal {
  background: #2a2a2a;
  border-color: #8a2be2;
  box-shadow: 0 10px 30px rgba(138, 43, 226, 0.3);
}
.dream-mode .admin-modal-title {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.dream-mode .admin-modal-label {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.dream-mode .admin-modal-input {
  background: #2a2a2a;
  border-color: #8a2be2;
  color: #ffffff;
}
.dream-mode .admin-modal-input:focus {
  background: #1a1a1a;
  border-color: #a855f7;
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.3);
}
.dream-mode .admin-modal-save-btn {
  border-color: #8a2be2;
  background: #8a2be2;
  color: #ffffff;
}
.dream-mode .admin-modal-save-btn:hover {
  background: #a855f7;
}
.dream-mode .admin-modal-cancel-btn {
  border-color: #8a2be2;
} 

/* Promo code usage progress bar */
.admin-promo-usage-bar-container {
  width: 90%;
  margin: 0.7rem auto 0.2rem auto;
  background: #2a2a2a;
  border-radius: 12px;
  height: 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
}
.admin-promo-usage-bar {
  height: 100%;
  border-radius: 12px 0 0 12px;
  transition: width 0.4s cubic-bezier(.4,2,.6,1);
}
.admin-promo-usage-bar.green { background: #27ae60; }
.admin-promo-usage-bar.yellow { background: #f1c40f; }
.admin-promo-usage-bar.red { background: #e74c3c; }
.admin-promo-usage-bar-label {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: 1px;
  font-family: 'The Wanters DEMO', serif;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
} 

.admin-promo-list.single-promo {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  grid-template-columns: none !important;
}
.admin-promo-list.single-promo .admin-promo-item {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}

.admin-promo-usage-bar.unlimited {
  background: #e0e0e0;
  height: 16px;
  border-radius: 8px;
  margin-bottom: 0.3rem;
  width: 100%;
  box-shadow: none;
  position: relative;
  border: none;
}
.dark-mode .admin-promo-usage-bar.unlimited {
  border: 2px solid #000;
  background: #bdbdbd;
}
.admin-promo-usage-bar-label {
  display: block;
  text-align: center;
  font-weight: 700;
  color: #3e2723;
  font-size: 1.1rem;
  margin-top: 0.2rem;
}

/* Stats Section Styles */
.admin-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

.admin-stats-panel {
  background: #f5f5f5;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-stats-panel-title {
  background: #167c7c;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  text-align: center;
  border: 1px solid #000;
}

.admin-stats-panel-title h3 {
  color: #fff;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.7rem;
  letter-spacing: 1px;
}

.admin-stats-panel-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Time Selector Buttons */
.admin-stats-time-selector {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.admin-stats-time-btn {
  background: #e0e0e0;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.admin-stats-time-btn:hover {
  background: #d0d0d0;
}

.admin-stats-time-btn.active {
  background: #2E7D5A;
  color: white;
}

/* Metrics Display */
.admin-stats-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-stats-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.admin-stats-metric-label {
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-metric-value {
  font-weight: bold;
  color: #2E7D5A;
  font-size: 1.1rem;
}

/* Table Styles */
.admin-stats-table {
  background: white;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.admin-stats-table-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  background: #2E7D5A;
  color: white;
  padding: 0.75rem;
  font-weight: bold;
  text-align: center;
}

.admin-stats-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  padding: 0.75rem;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.admin-stats-table-row:last-child {
  border-bottom: none;
}

.admin-stats-table-row:nth-child(even) {
  background: #f9f9f9;
}

/* Bar Chart Styles */
.admin-stats-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.admin-stats-bar-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.admin-stats-bar-label {
  min-width: 100px;
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-bar-container {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0.5rem;
}

.admin-stats-bar {
  height: 20px;
  border-radius: 10px;
  min-width: 20px;
  transition: width 0.3s ease;
}

.admin-stats-bar-value {
  font-weight: bold;
  color: #4B2E19;
  min-width: 30px;
}

/* Day Chart Styles */
.admin-stats-day-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-stats-day-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.admin-stats-day-item span:first-child {
  min-width: 80px;
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-day-bar {
  height: 15px;
  background: #2E7D5A;
  border-radius: 7px;
  flex: 1;
  max-width: 200px;
  transition: width 0.3s ease;
}

.admin-stats-day-item span:last-child {
  font-weight: bold;
  color: #2E7D5A;
  min-width: 30px;
}

/* Time Chart Styles */
.admin-stats-time-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-stats-time-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.admin-stats-time-item span:first-child {
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-time-item span:last-child {
  font-weight: bold;
  color: #2E7D5A;
}

/* Subsection Styles */
.admin-stats-subsection {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-stats-subsection h4 {
  margin: 0;
  color: #4B2E19;
  font-size: 1.35rem;
  font-weight: bold;
  border-bottom: 2px solid #2E7D5A;
  padding-bottom: 0.25rem;
  text-align: center;
  letter-spacing: 0.5px;
}

/* Dark Mode Styles */
.dark-mode .admin-stats-panel {
  background: #222;
  border: 3px solid #5d4037;
}

.dark-mode .admin-stats-metric {
  background: #3a3a3a;
  border-color: #555;
}

.dark-mode .admin-stats-metric-label {
  color: #e0e0e0;
}

.dark-mode .admin-stats-table {
  background: #3a3a3a;
  border-color: #555;
}

.dark-mode .admin-stats-table-row {
  border-color: #555;
  color: #e0e0e0;
}

.dark-mode .admin-stats-table-row:nth-child(even) {
  background: #333;
}

.dark-mode .admin-stats-day-item,
.dark-mode .admin-stats-time-item {
  background: #3a3a3a;
  border-color: #555;
  color: #e0e0e0;
}

.dark-mode .admin-stats-day-item span:first-child,
.dark-mode .admin-stats-time-item span:first-child {
  color: #e0e0e0;
}

.dark-mode .admin-stats-subsection h4 {
  color: #e0e0e0;
}

/* Dream Mode Styles */
.dream-mode .admin-stats-panel {
  background: #2a2a2a;
  border: 2px solid #8a2be2;
}

.dream-mode .admin-stats-panel-title {
  background: #8a2be2;
  border: 2px solid #8a2be2;
}

.dream-mode .admin-stats-metric {
  background: rgba(42, 42, 42, 0.9);
  border-color: #8a2be2;
  color: white;
}

.dream-mode .admin-stats-metric-label {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dream-mode .admin-stats-metric-value {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dream-mode .admin-stats-time-btn {
  background: rgba(42, 42, 42, 0.9);
  color: white;
  border: 1px solid #8a2be2;
}

.dream-mode .admin-stats-time-btn:hover {
  background: rgba(138, 43, 226, 0.3);
}

.dream-mode .admin-stats-time-btn.active {
  background: #8a2be2;
  border-color: #8a2be2;
}

/* Responsive Design */
@media (max-width: 768px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .admin-stats-time-selector {
    flex-direction: column;
    align-items: stretch;
  }
  
  .admin-stats-table-header,
  .admin-stats-table-row {
    grid-template-columns: 1fr 80px 80px 80px;
    font-size: 0.9rem;
  }
  
  .admin-stats-bar-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  
  .admin-stats-bar-label {
    min-width: auto;
  }
}

.admin-stats-leaderboard {
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
  margin-bottom: 1rem;
  overflow: hidden;
}
.admin-stats-leaderboard-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  background: #167c7c;
  color: white;
  font-weight: bold;
  padding: 0.75rem;
  text-align: center;
}
.admin-stats-leaderboard-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 0.75rem;
  border-bottom: 1px solid #eee;
  text-align: center;
  font-weight: 500;
  color: #4B2E19;
  background: #f9f9f9;
}
.admin-stats-leaderboard-row:nth-child(even) {
  background: #f5f5f5;
}
.admin-stats-leaderboard-row:last-child {
  border-bottom: none;
}

.dark-mode .admin-stats-leaderboard {
  background: #2a2a2a;
  border-color: #555;
}
.dark-mode .admin-stats-leaderboard-header {
  background: #167c7c;
  color: #fff;
}
.dark-mode .admin-stats-leaderboard-row {
  color: #e0e0e0;
  background: #333;
  border-color: #555;
}
.dream-mode .admin-stats-leaderboard-header {
  background: #167c7c;
  color: #fff;
}
.dream-mode .admin-stats-leaderboard {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
}
.dream-mode .admin-stats-leaderboard-row {
  color: #fff;
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}

:root {
  --cream-brown-bg: #f8f3e6;
  --cream-brown-text: #4B2E19;
  --admin-panel-bg-dark: #3a2320;
}

.dark-mode input,
.dark-mode .admin-promo-text-box,
.dark-mode .admin-modal-input,
.dark-mode .admin-stats-table,
.dark-mode .admin-stats-table-row,
.dark-mode .admin-stats-leaderboard,
.dark-mode .admin-stats-leaderboard-row {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
  border-color: #555;
}

.dark-mode .admin-stats-table-header,
.dark-mode .admin-stats-leaderboard-header {
  background: #167c7c;
  color: #fff;
}

.dark-mode .admin-stats-metric,
.dark-mode .admin-stats-panel-content input,
.dark-mode .admin-stats-panel-content .admin-promo-text-box {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
}

.dark-mode .privacy-policy-panel,
.dark-mode .privacy-policy-content,
.dark-mode .privacy-policy-box {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
}

.dark-mode .admin-stats-day-bar {
  background: #167c7c;
}

.dark-mode .admin-stats-day-item,
.dark-mode .admin-stats-time-item {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
  border: 2px solid #3a2a1a !important;
}

.dark-mode .admin-stats-panel {
  background: var(--admin-panel-bg-dark);
  border: 2.5px solid #000;
}

.dark-mode .admin-stats-subsection h4 {
  color: #f8f3e6 !important;
  text-shadow: 0 0 1px #000, 0 1px 1px #000, 1px 0 1px #000, -1px 0 1px #000;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  min-height: 100vh;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--text-color);
}

.app-header {
  background-color: #4CAF50;
  color: white;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.app-header h1 {
  margin: 0.5rem 0;
  font-size: 2.2rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.app-header nav {
  display: flex;
  gap: 2rem;
  margin-top: 0.5rem;
  width: 100%;
  justify-content: center;
}

.nav-link {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

main {
  flex: 1;
  background-color: var(--bg-color);
}

.back-button {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.back-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.dark-mode .back-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  .app-header {
    padding: 1rem;
  }
  
  .app-header h1 {
    font-size: 1.8rem;
  }
  
  main {
    padding: 1rem;
  }
}

@media (min-width: 768px) {
  .app-header h1 {
    font-size: 2.5rem;
  }

  .app-header h2 {
    font-size: 1.8rem;
  }

  .back-button {
    font-size: 1.1rem;
  }
} 
/* ===============================================================================
                                CART PAGE STYLING
=============================================================================== */

/* Main cart page container */
.cart-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 1rem;
  position: relative;
}

.cart-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.cart-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Background panel similar to contacts page */
.cart-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Main container inside background panel */
.cart-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Orders title panel */
.orders-title-panel {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 400px;
}

.orders-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

/* Navigation button */
.cart-navigation {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  width: 100%;
}

.nav-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723;
}

.nav-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
  text-decoration: none;
}

/* Cart content area */
.cart-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Empty cart state */
.empty-cart {
  text-align: center;
  padding: 3rem 2rem;
}

.empty-cart p {
  font-size: 1.5rem;
  color: #5d4037;
  margin: 0;
  font-weight: 600;
}

/* Cart loading state */
.cart-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.cart-loading p {
  font-size: 1.5rem;
  color: #5d4037;
  margin: 1rem 0 0 0;
  font-weight: 600;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e0e0e0;
  border-top: 4px solid #8d6e63;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

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

/* Typing animation cursor effect for search inputs */
.ingredients-selection-search-input:not(:focus)::placeholder {
  animation: typing-cursor 1s infinite;
}

@keyframes typing-cursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

/* Cart items container */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 2rem;
}

/* Individual cart item */
.cart-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.cart-item-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
  width: 100%;
}

.cart-item-name {
  font-size: 2.5rem;
  font-weight: 900;
  color: #3e2723;
  margin-bottom: 1rem;
  text-align: center;
}

.cart-item-size-price {
  font-size: 1.7rem;
  font-weight: 900;
  color: #3e2723;
  margin-bottom: 1rem;
  text-align: center;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.size-unit {
  font-size: 0.7em; /* 30% smaller - 70% of parent font size */
  font-weight: 900;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.cart-item-size {
  font-size: 1.1rem;
  color: #5d4037;
  margin-bottom: 0.25rem;
}

.cart-item-price {
  font-size: 1.2rem;
  color: #5d4037;
  font-weight: 600;
}

/* Quantity controls */
.cart-item-quantity {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.quantity-button {
  width: 45px;
  height: 45px;
  border: 3px solid #3e2723;
  background-color: #8d6e63;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.quantity-button:hover {
  background-color: #a1887f;
  transform: scale(1.05);
}

.quantity-value {
  font-size: 1.4rem;
  font-weight: bold;
  color: #3e2723;
  min-width: 40px;
  text-align: center;
  background-color: rgba(141, 110, 99, 0.1);
  padding: 0.5rem;
  border-radius: 8px;
}

/* Subtotal and remove button */
.cart-item-subtotal {
  font-size: 1.5rem;
  font-weight: 900;
  color: #d32f2f;
  margin-bottom: 1rem;
  text-align: center;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.remove-item-button {
  padding: 0.8rem 1.5rem;
  background-color: #d32f2f;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.remove-item-button:hover {
  background-color: #f44336;
  transform: translateY(-2px);
}

/* Cart summary */
.cart-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2rem;
  border-top: 3px solid #d7ccc8;
  width: 100%;
  max-width: 400px;
}

.cart-totals {
  margin-bottom: 1.5rem;
  text-align: center;
}

.cart-total-items, 
.cart-total-price {
  font-size: 1.4rem;
  margin: 0.5rem 0;
  color: #3e2723;
  font-weight: 900;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.cart-total-price {
  font-size: 2.2rem;
  font-weight: 900;
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.checkout-button {
  padding: 1.2rem 2.5rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.checkout-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* ===============================================================================
                                DARK MODE STYLES
=============================================================================== */

.dark-mode.cart-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
}

.dark-mode.cart-page::before {
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
}

.dark-mode.cart-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .cart-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .cart-container {
  background-color: rgba(62, 39, 35, 0.9);
  border: 3px solid #000000;
}

.dark-mode .orders-title-panel {
  background-color: #8d6e63;
  border: 2px solid #000000;
}

.dark-mode .orders-title {
  color: #8d6e63;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.dark-mode .nav-button {
  background-color: #8d6e63;
  border: 3px solid #000000;
  color: #fff8e1;
}

.dark-mode .nav-button:hover {
  background-color: #a1887f;
  color: #fff8e1;
}

.dark-mode .empty-cart p {
  color: #fff8e1;
}

.dark-mode .cart-loading p {
  color: #fff8e1;
}

.dark-mode .loading-spinner {
  border: 4px solid #424242;
  border-top: 4px solid #a1887f;
}

.dark-mode .cart-item {
  background-color: #8d6e63;
  border: 3px solid #000000;
}

.dark-mode .cart-item-name {
  color: #fff8e1;
}

.dark-mode .cart-item-size-price {
  color: #000000;
  text-shadow: none;
}

.dark-mode .size-unit {
  color: #000000;
  text-shadow: none;
}

.dark-mode .cart-item-size,
.dark-mode .cart-item-price {
  color: #d7ccc8;
}

.dark-mode .quantity-button:hover {
  background-color: #a1887f;
}

.dark-mode .quantity-value {
  color: #fff !important;
  background-color: transparent;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .cart-item-subtotal {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .remove-item-button {
  border: 3px solid #000000;
}

.dark-mode .cart-totals {
  border-top: 3px solid #666666;
}

.dark-mode .cart-total-items {
  color: #c4a690 !important;
}

.dark-mode .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .checkout-button {
  background-color: #8d6e63;
  border: 3px solid #000000;
  color: #fff8e1;
}

.dark-mode .checkout-button:hover {
  background-color: #a1887f;
}

/* ===============================================================================
                                DREAM MODE STYLES
=============================================================================== */

.dream-mode.cart-page {
  background-color: #222;
}

.dream-mode.cart-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.cart-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .cart-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .cart-container {
  background-color: rgba(26, 26, 26, 0.9);
  border: 3px solid #000000;
}

.dream-mode .orders-title-panel {
  background-color: rgba(45, 20, 60, 0.95);
  border: 2px solid #000000;
}

.dream-mode .orders-title {
  color: #ffffff;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  animation: dreamText 20s infinite linear;
}

@keyframes dreamText {
  0% {
    color: #4b0082; /* Indigo (darker purple) */
  }
  20% {
    color: #000080; /* Navy (darker blue) */
  }
  40% {
    color: #0072b1; /* Darker light blue */
  }
  60% {
    color: #2e8b57; /* Sea green (darker light green) */
  }
  80% {
    color: #006400; /* Dark green */
  }
  100% {
    color: #4b0082; /* Back to indigo for smooth loop */
  }
}

.dream-mode .nav-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .nav-button:hover {
  background-color: #a1887f;
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4);
  animation: dreamSparkle 1.5s ease-in-out infinite alternate;
}

.dream-mode .empty-cart p {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .cart-loading p {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .loading-spinner {
  border: 4px solid #333333;
  border-top: 4px solid #ff00cc;
  box-shadow: 0 0 10px rgba(255, 0, 204, 0.5);
}

.dream-mode .cart-item {
  background-color: rgba(120, 120, 120, 0.6);
  border: 3px solid #000000;
}

.dream-mode .cart-item-name {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .cart-item-size-price {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .size-unit {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .cart-item-size,
.dream-mode .cart-item-price {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .quantity-button {
  background-color: #8d6e63;
  border: 3px solid #000000;
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream-mode .quantity-button:hover {
  background-color: #a1887f;
  color: #ffffff;
  box-shadow: 
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6);
  animation: dreamSparkle 1.5s ease-in-out infinite alternate;
}

.dream-mode .quantity-value {
  color: #ffffff;
  background-color: rgba(45, 20, 60, 0.3);
  text-shadow: none;
  animation: none;
}

.dream-mode .cart-item-subtotal {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .remove-item-button {
  background-color: #d32f2f !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .remove-item-button:hover {
  background-color: #f44336 !important;
  color: #000000 !important;
  transform: translateY(-2px);
  box-shadow: 
    0 0 15px rgba(220, 20, 60, 0.8),
    0 0 25px rgba(255, 69, 0, 0.6);
}

.dream-mode .cart-totals {
  border-top: 3px solid #555555;
}

.dream-mode .cart-total-items {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .checkout-button {
  background-color: #8d6e63;
  border: 3px solid #000000 !important;
  color: #000000;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .checkout-button:hover {
  background-color: #a1887f;
  color: #ffffff;
  border: 3px solid #000000 !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 128, 0, 0.8),
    0 0 25px rgba(34, 139, 34, 0.6),
    0 0 35px rgba(46, 139, 87, 0.4);
  animation: dreamSparkle 1.5s ease-in-out infinite alternate;
}

/* Additional overrides for any remaining glow effects */
.dream-mode .cart-page .cart-item-size,
.dream-mode .cart-page .cart-item-price {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
}

.dream-mode .cart-page .cart-item-size-price,
.dream-mode .cart-page .cart-total-items {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
}

.dream-mode .cart-page .size-unit {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
}

.dream-mode .cart-page .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
}

.dark-mode .cart-page .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Dream mode remove button override - ensure red background with black text */
.dream-mode .cart-page .remove-item-button {
  background-color: #d32f2f !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
}

.dream-mode .cart-page .remove-item-button:hover {
  background-color: #f44336 !important;
  color: #000000 !important;
}

@keyframes dreamSparkle {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-2px) rotate(0deg) scale(1);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-2px) rotate(1deg) scale(1.02);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-2px) rotate(0deg) scale(1.04);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-2px) rotate(-1deg) scale(1.02);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-2px) rotate(0.5deg) scale(1.01);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-2px) rotate(0deg) scale(1);
  }
}

/* ===============================================================================
                            RESPONSIVE DESIGN
=============================================================================== */

/* Mobile First - these styles apply to screens 480px and larger */
@media (min-width: 480px) {
  .cart-item {
    max-width: 600px;
  }
  
  .orders-title {
    font-size: 2.8rem;
  }
}

/* Tablet styles - 768px and larger */
@media (min-width: 768px) {
  .cart-page {
    padding: 2rem;
  }
  
  .cart-background-panel {
    padding: 2rem;
  }
  
  .cart-container {
    padding: 3rem;
  }
  
     .cart-item {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     max-width: 900px;
     padding: 2.5rem;
   }
   
   .cart-item-details {
     flex: 1;
     align-items: flex-start;
     text-align: left;
     margin-bottom: 0;
     margin-right: 2rem;
   }
   
   .cart-item-name {
     font-size: 3rem;
   }
   
       .cart-item-size-price {
      font-size: 2.2rem;
    }
  
  .cart-item-quantity {
    margin-bottom: 0;
    margin-right: 2rem;
  }
  
  .cart-item-subtotal {
    margin-bottom: 0;
    margin-right: 1rem;
    font-size: 1.6rem;
  }
  
  .orders-title {
    font-size: 4rem;
  }
}

 /* Desktop styles - 1024px and larger */
 @media (min-width: 1024px) {
   .cart-background-panel {
     max-width: 1000px;
   }
   
   .cart-item {
     max-width: 1000px;
   }
   
   .cart-item-name {
     font-size: 3.2rem;
   }
   
       .cart-item-size-price {
      font-size: 2.4rem;
    }
   
   .orders-title {
     font-size: 3.2rem;
   }
 }

 /* Large desktop styles - 1200px and larger */
 @media (min-width: 1200px) {
   .cart-background-panel {
     max-width: 1200px;
   }
   
   .cart-item {
     max-width: 1100px;
   }
   
   .cart-item-name {
     font-size: 3.5rem;
   }
   
       .cart-item-size-price {
      font-size: 2.7rem;
    }
   
   .orders-title {
     font-size: 3.5rem;
   }
 } 
.contact-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.contact-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.contact-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.contact-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 850px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.contact-container {
  width: 100%;
  max-width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.contact-title-panel {
  font-weight: bold;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 400px;
}

.contact-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

.home-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
  margin-bottom: 2rem;
}

.home-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
}

.contact-details {
  width: 100%;
  text-align: center;
  padding: 2rem;
  margin-bottom: 2rem;
  background-color: rgba(141, 110, 99, 0.1);
  border-radius: 8px;
  border: 2px solid #d7ccc8;
}

.contact-details p {
  margin: 0.5rem 0;
  font-size: 1.2rem;
  color: #3e2723;
  line-height: 1.6;
}

.contact-details-placeholder {
  width: 100%;
  text-align: center;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 2px dashed #d7ccc8;
  border-radius: 8px;
}

.contact-details-placeholder p {
  margin: 0.5rem 0;
  font-size: 1.2rem;
  color: #5d4037;
}

.contact-actions {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
}

.privacy-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
}

.privacy-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
  text-decoration: none;
}

/* Dark mode styles */
.dark-mode.contact-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode.contact-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode.contact-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .contact-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .contact-container {
  background-color: rgba(62, 39, 35, 0.9);
  color: #fff8e1;
}

.dark-mode .contact-title {
  text-shadow: none;
}

.dark-mode .contact-title-panel {
  background-color: #3e2723;
  border: 3px solid #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark-mode .contact-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dark-mode .contact-details {
  border-color: #5d4037;
  background-color: #8d6e63;
}

.dark-mode .contact-details p {
  color: #fff8e1;
}

.dark-mode .contact-details-placeholder {
  border-color: #5d4037;
}

.dark-mode .contact-details-placeholder p {
  color: #d7ccc8;
}

/* Light mode button base styling */
.contact-page:not(.dark-mode):not(.dream-mode) .home-button,
.contact-page:not(.dark-mode):not(.dream-mode) .privacy-button {
  border: 3px solid #3e2723 !important;
  border-radius: 9999px !important; /* Ensure pill shape in light mode */
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  background-color: #8d6e63 !important;
  color: white !important;
  display: inline-block !important;
  text-decoration: none !important;
}

/* Dark mode button base styling with ultra-high specificity */
body.dark-mode .contact-page .home-button,
body.dark-mode .contact-page .privacy-button,
.dark-mode.contact-page .home-button,
.dark-mode.contact-page .privacy-button,
.dark-mode .contact-page .home-button,
.dark-mode .contact-page .privacy-button,
.dark-mode .home-button,
.dark-mode .privacy-button {
  border: 3px solid #000000 !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  text-decoration: none !important;
  font-family: 'The Wanters DEMO', serif !important;
}

/* Dark mode home button glow with ultra-high specificity */
body.dark-mode .contact-page .home-button:hover,
.dark-mode.contact-page .home-button:hover,
.dark-mode .contact-page .home-button:hover,
.dark-mode .home-button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  background-color: #a1887f !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  text-decoration: none !important;
}

/* Dark mode privacy policy button glow with ultra-high specificity */
body.dark-mode .contact-page .privacy-button:hover,
.dark-mode.contact-page .privacy-button:hover,
.dark-mode .contact-page .privacy-button:hover,
.dark-mode .privacy-button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  background-color: #a1887f !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  text-decoration: none !important;
}

@media (max-width: 768px) {
  .contact-title {
    font-size: 2.5rem;
  }
  
  .contact-background-panel {
    width: 98%;
    max-width: 600px;
  }
  
  .contact-container {
    padding: 1.5rem;
  }
  
  .contact-details {
    padding: 1.5rem;
    margin: 0 0 2rem 0;
  }
  
  .contact-details p {
    font-size: 1.1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none;
    line-height: 1.7;
  }
}

@media (max-width: 480px) {
  .contact-background-panel {
    width: 98%;
    max-width: 450px;
    padding: 1rem;
  }
  
  .contact-container {
    padding: 1.25rem;
  }
  
  .contact-details {
    padding: 1.25rem;
    margin: 0 0 2rem 0;
  }
  
  .contact-details p {
    font-size: 1rem;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none;
  }
}

@media (max-width: 360px) {
  .contact-background-panel {
    width: 99%;
    max-width: 360px;
    padding: 0.25rem;
  }
  
  .contact-container {
    padding: 0.5rem;
  }
  
  .contact-details {
    padding: 0.75rem;
    margin: 0 0 2rem 0;
    width: 100%;
    box-sizing: border-box;
  }
  
  .contact-details p {
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    hyphens: none;
    word-break: break-word;
    text-align: center;
    margin: 0.3rem 0;
  }
  
  .contact-details .email-address {
    font-size: 0.8rem;
    font-weight: 600;
    word-break: break-all;
    overflow-wrap: anywhere;
    letter-spacing: -0.8px;
    transform: scaleX(0.95);
    transform-origin: center;
  }
}

@media (max-width: 340px) {
  .contact-background-panel {
    width: 99%;
    max-width: 340px;
    padding: 0.15rem;
  }
  
  .contact-container {
    padding: 0.35rem;
  }
  
  .contact-details {
    padding: 0.5rem 0.75rem;
    margin: 0 0 2rem 0;
    width: 100%;
    box-sizing: border-box;
  }
  
  .contact-details p {
    font-size: 0.85rem;
    line-height: 1.3;
    margin: 0.25rem 0;
  }
  
  .contact-details .email-address {
    font-size: 0.75rem;
    font-weight: 600;
    word-break: break-all;
    overflow-wrap: anywhere;
    letter-spacing: -1px;
    transform: scaleX(0.9);
    transform-origin: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Dream mode styles */
.dream-mode.contact-page {
  background-color: #222;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
    linear-gradient(45deg, transparent 24%, rgba(75, 0, 130, 0.05) 25%, rgba(75, 0, 130, 0.05) 26%, transparent 27%, transparent 74%, rgba(138, 43, 226, 0.05) 75%, rgba(138, 43, 226, 0.05) 76%, transparent 77%),
    linear-gradient(-45deg, transparent 24%, rgba(102, 51, 153, 0.05) 25%, rgba(102, 51, 153, 0.05) 26%, transparent 27%, transparent 74%, rgba(60, 30, 80, 0.05) 75%, rgba(60, 30, 80, 0.05) 76%, transparent 77%);
  background-size: cover, 300px 300px, 300px 300px, 60px 60px, 60px 60px;
  background-position: center, 0 0, 150px 150px, 0 0, 30px 30px;
  background-blend-mode: color-burn;
}

.dream-mode.contact-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.contact-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .contact-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream-mode .contact-container {
  border: 3px solid #000000;
}

.dream-mode .contact-title {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  animation: none !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dream-mode .contact-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .contact-details p {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: none;
}

/* Ensure dream mode contact details have clean black text */
.dream-mode .contact-details p,
.dream-mode .contact-details span,
.dream-mode .contact-details a {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
}

/* Dream mode responsive text fixes */
@media (max-width: 768px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
}

@media (max-width: 480px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
}

@media (max-width: 360px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
  
  .dream-mode .contact-details .email-address {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
}

@media (max-width: 340px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
  
  .dream-mode .contact-details .email-address {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
}

/* Dream mode button base styling - black text when idle */
.dream-mode .home-button:not(:hover),
.dream-mode .privacy-button:not(:hover) {
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}

/* Dream mode psychedelic button hover effects - white text on hover */
.dream-mode .home-button:hover,
.dream-mode .privacy-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  animation: dreamSparkleContactLanding 1.5s ease-in-out infinite alternate !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
}

@keyframes dreamSparkleContactLanding {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
} 
/* ===============================================================================
                              CUSTOMER STATS PAGE STYLING
=============================================================================== */

/* Main stats page container - matching app's dual geometry pattern */
.customer-stats-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  background-attachment: fixed;
  padding: 1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  overflow-y: auto;
  font-family: 'The Wanters DEMO', sans-serif;
  pointer-events: auto;
  
  /* Hide scrollbar while maintaining scroll functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
.customer-stats-container::-webkit-scrollbar {
  display: none;
}

/* Dual geometry background patterns - exactly like other pages */
.customer-stats-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.customer-stats-container::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Background panel matching app structure */
.stats-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  max-height: calc(100vh - 2rem);
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  margin: 1rem auto;
  overflow: hidden;
}

/* Main container inside background panel */
.stats-main-container {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 5rem);
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  overflow-y: auto;
  
  /* Hide scrollbar while maintaining scroll functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
.stats-main-container::-webkit-scrollbar {
  display: none;
}

/* Header with title and close button */
.customer-stats-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  width: 100%;
  position: relative;
}

/* Title panel matching app style */
.stats-title-panel {
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  padding: 1rem 2rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 400px;
}

.stats-title-panel h2 {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

/* Close button */
.close-btn {
  background: #8d6e63;
  border: 3px solid #3e2723;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.close-btn:hover {
  background: #a1887f;
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Content area */
.customer-stats-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Individual stat sections */
.stats-section {
  width: 100%;
  max-width: 800px;
  background-color: rgba(255, 255, 255, 0.95);
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.stats-section h3 {
  font-size: 2rem;
  font-weight: 900;
  color: #3e2723;
  margin: 0 0 1.5rem 0;
  text-align: center;
}

/* User info and purchase stats */
.user-info, .purchase-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  background-color: rgba(245, 245, 220, 0.9);
}

.stat-label {
  font-size: 1rem;
  color: #5d4037;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 900;
  color: #3e2723;
}

/* Progress bars */
.progress-info {
  text-align: center;
}

.progress-info p {
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
  color: #3e2723;
  font-weight: 600;
}

.progress-bar {
  width: 100%;
  height: 20px;
  border: 2px solid #8d6e63;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background-color: rgba(245, 245, 220, 0.9);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #8d6e63, #5d4037);
  border-radius: 8px;
  transition: width 0.3s ease;
}

/* Flavor breakdown */
.flavor-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.flavor-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  background-color: rgba(245, 245, 220, 0.9);
}

.flavor-name {
  font-weight: 900;
  font-size: 1.1rem;
  color: #3e2723;
}

.flavor-counts {
  font-size: 1rem;
  color: #5d4037;
  font-weight: 600;
}

/* Achievements grid */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.achievement-card {
  padding: 1.5rem;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  background-color: rgba(245, 245, 220, 0.9);
  transition: all 0.3s ease;
  position: relative;
  text-align: center;
}

.achievement-card.unlocked {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #5d4037;
}



.achievement-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  text-align: center;
}

.achievement-name {
  font-weight: 900;
  font-size: 1.7rem;
  color: #5d4037;
  text-align: center;
  text-shadow: none; /* No outline in light mode */
  letter-spacing: 0.01em;
  margin: 0 auto 0.2em auto;
  display: block;
  /* Light mode panel */
  background: rgba(245, 245, 220, 0.8);
  border: 2px solid #8d6e63;
  border-radius: 12px;
  padding: 0.8rem 1.2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.achievement-card.unlocked .achievement-name {
  color: #3e2723;
}



.dark .achievement-name {
  color: #8d6e63 !important;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000 !important;
  /* Dark mode panel */
  background: rgba(62, 39, 35, 0.9);
  border: 2px solid #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dream .achievement-name {
  color: #00ffff; /* Cyan text for dream mode */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* 1px black outline around text */
  animation: none; /* Override color cycling animation */

/* Override for locked secret achievements - more specific than general rule */
.dream .hidden-achievement:not(.completed) .achievement-name,
body.dream .hidden-achievement:not(.completed) .achievement-name,
.dream-mode .hidden-achievement:not(.completed) .achievement-name {
  color: #4a7c7c !important; /* Darker inactive teal for locked secret achievements */
  text-shadow: none !important;
}
  /* Dream mode panel - match the achievements title banner */
  background: rgba(45, 20, 60, 0.95); /* Match the achievements title panel color */
  border: 2px solid #000000; /* Black border instead of purple */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Dream mode overrides for all achievement tiers to ensure cyan color */
.dream .achievement-card.unlocked[data-tier="1"] .achievement-name {
  color: #00ffff !important; /* Cyan text for dream mode - Tier 1 */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream .achievement-card.unlocked[data-tier="2"] .achievement-name {
  color: #00ffff !important; /* Cyan text for dream mode - Tier 2 */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream .achievement-card.unlocked[data-tier="3"] .achievement-name {
  color: #00ffff !important; /* Cyan text for dream mode - Tier 3 */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  background-color: #1a1a1a !important; /* Dark grey background for dream mode tier 3 */
  border: 2px solid #000000 !important; /* Black border */
}

.achievement-tier {
  font-size: 1.5rem;
}

.achievement-description {
  margin: 0.5rem 0 1rem 0;
  font-size: 1.12rem;
  color: #5d4037;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
}

.dark .achievement-description {
  color: #fff8e1;
}

.dream .achievement-description {
  color: #fff !important;
  text-shadow: none !important;
}

.achievement-progress {
  margin-top: 1rem;
}

.progress-text {
  font-size: 1rem;
  font-weight: 600;
  color: #3e2723;
  display: block;
  margin-bottom: 0.5rem;
  text-align: center;
}

.achievement-tiers-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 0.5em;
}

.achievement-tier-icon {
  font-size: 1.2em;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.achievement-tier-icon.active {
  opacity: 1;
  color: #ffd700;
  text-shadow: 0 0 4px #000;
}

/* Dark mode override for tier 3 achievement medals - use dark brown instead of gold */
.dark .achievement-tier-icon.active {
  color: #5d4037;
  text-shadow: 0 0 4px #000;
}

/* ===============================================================================
                                DARK MODE STYLES
=============================================================================== */

.customer-stats-container.dark {
  background-color: #3e2723;
  background-blend-mode: multiply;
}

.customer-stats-container.dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.customer-stats-container.dark::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark .stats-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border-color: #000000;
}

.dark .stats-main-container {
  background-color: rgba(62, 39, 35, 0.9);
  border-color: #000000;
}

.dark .stats-title-panel {
  background-color: #3e2723;
  border-color: #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark .stats-title-panel h2 {
  color: #8d6e63 !important;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000 !important;
  animation: none;
}

.dark .close-btn {
  background: #8d6e63;
  border-color: #000000;
  color: #000000;
}

.dark .close-btn:hover {
  background: #a1887f;
  color: #000000;
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.dark .stats-section {
  background-color: rgba(62, 39, 35, 0.95);
  border-color: #000000;
}

.dark .stats-section h3 {
  color: #8d6e63;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
}

.dark .stat-item {
  background-color: #8d6e63;
  border-color: #5d4037;
}

.dark .stat-label {
  color: #fff8e1;
}

.dark .stat-value {
  color: #fff8e1;
}

.dark .progress-info p {
  color: #fff8e1;
}

.dark .progress-bar {
  background-color: #8d6e63;
  border-color: #5d4037;
}

.dark .progress-fill {
  background: linear-gradient(135deg, #8d6e63, #5d4037);
}

.dark .flavor-item {
  background-color: #8d6e63;
  border-color: #5d4037;
}

.dark .flavor-name {
  color: #fff8e1;
}

.dark .flavor-counts {
  color: #fff8e1;
}

.dark .achievement-card {
  background-color: #8d6e63;
  border-color: #5d4037;
}

/* Override for secret achievements to ensure dark brown color */
.dark .achievement-card.hidden-achievement.unlocked.completed {
  background-color: #3e2723 !important; /* Dark brown matching tier 3 achievements */
  border-color: #000000 !important;
}

/* Nuclear option - force dark brown color for secret achievements with maximum specificity */
body.dark .achievement-card.hidden-achievement.unlocked.completed,
.dark-mode .achievement-card.hidden-achievement.unlocked.completed,
html.dark .achievement-card.hidden-achievement.unlocked.completed,
html body.dark .achievement-card.hidden-achievement.unlocked.completed {
  background-color: #3e2723 !important; /* FORCE dark brown matching tier 3 achievements */
  background: #3e2723 !important; /* Override any background shorthand */
  border-color: #000000 !important;
}

.dark .achievement-card.unlocked {
  background-color: rgba(62, 39, 35, 0.95);
  border-color: #000000;
}

.dark .achievement-description {
  color: #fff8e1;
}

.dark .progress-text {
  color: #fff8e1;
}

/* ===============================================================================
                                DREAM MODE STYLES
=============================================================================== */

.customer-stats-container.dream {
  background-color: #222;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%);
  background-size: cover, 300px 300px, 300px 300px;
  background-position: center, 0 0, 150px 150px;
  background-blend-mode: color-burn;
}

.customer-stats-container.dream::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.customer-stats-container.dream::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream .stats-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream .stats-main-container {
  border: 3px solid #000000;
}

.dream .stats-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream .stats-title-panel h2 {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
  animation: none;
}

.dream .close-btn {
  background: #8d6e63;
  border: 3px solid #000000;
  color: #000000;
}

.dream .close-btn:hover {
  background: #a1887f;
  color: #000000;
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.dream .stats-section {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream .stats-section h3 {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
  animation: none;
}

.dream .stat-item {
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid #000000;
}

.dream .stat-label {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .stat-value {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .progress-info p {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .progress-bar {
  background: rgba(45, 20, 60, 0.95); /* Match the achievements title panel color */
  border: 3px solid #000000;
}

.dream .progress-fill {
  background: linear-gradient(135deg, #8d6e63, #5d4037);
}

.dream .flavor-item {
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid #000000;
}

.dream .flavor-name {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .flavor-counts {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .achievement-card {
  background: rgba(255, 255, 255, 0.15);
  border: 3px solid #000000;
}

.dream .achievement-card.unlocked {
  background: rgba(255, 255, 255, 0.25);
  border: 3px solid #000000;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.dream .achievement-description {
  color: #fff;
  text-shadow: none;
}

.dream .progress-text {
  color: #ff0000; /* Red text for dream mode */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* 1px black outline around text */
  animation: none;
}

/* Dream mode overrides for tier-specific achievement progress text */
.dream .achievement-card.unlocked[data-tier="2"] .progress-text {
  color: #ff0000 !important; /* Red text for dream mode tier 2 achievements */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream .achievement-card.unlocked[data-tier="3"] .progress-text {
  color: #ff0000 !important; /* Red text for dream mode tier 3 achievements */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

/* Dream mode animations */
@keyframes dreamText {
  0% { color: #ff6b6b; }
  16.666% { color: #feca57; }
  33.333% { color: #48dbfb; }
  50% { color: #ff9ff3; }
  66.666% { color: #54a0ff; }
  83.333% { color: #5f27cd; }
  100% { color: #ff6b6b; }
}

/* ===============================================================================
                                RESPONSIVE DESIGN
=============================================================================== */

@media (max-width: 768px) {
  .stats-background-panel {
    padding: 1rem;
    margin: 0.5rem;
    width: calc(100% - 1rem);
  }
  
  .stats-main-container {
    padding: 1rem;
  }
  
  .stats-title-panel {
    padding: 0.75rem 1rem;
  }
  
  .stats-title-panel h2 {
    font-size: 2rem;
  }
  
  .achievements-grid {
    grid-template-columns: 1fr;
  }
  
  .user-info, .purchase-stats {
    grid-template-columns: 1fr;
  }
  
  .stat-item {
    padding: 1rem;
  }
  
  .close-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .stats-background-panel {
    padding: 0.75rem;
  }
  
  .stats-main-container {
    padding: 0.75rem;
  }
  
  .stats-section {
    padding: 1rem;
  }
  
  .stats-title-panel h2 {
    font-size: 1.8rem;
  }
  
  .achievement-card {
    padding: 1rem;
  }
} 

/* Level Up Popup Styles */
.level-up-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease-in-out;
}

/* Theme-appropriate background panel */
.level-up-background-panel {
  padding: 2rem;
  border-radius: 20px;
  max-width: 500px;
  width: 90%;
  position: relative;
}

/* Light mode background panel */
.level-up-background-panel.light-mode {
  background: linear-gradient(135deg, #f5f5dc, #e8e8dc);
  border: 3px solid #8d6e63;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Dark mode background panel */
.level-up-background-panel.dark-mode {
  background: #2a2a2a;
  border: 3px solid #000000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Dream mode background panel */
.level-up-background-panel.dream-mode {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 3px solid #ff00cc;
  box-shadow: 0 10px 30px rgba(255, 0, 204, 0.3);
}

/* Main container */
.level-up-main-container {
  width: 100%;
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
}

/* Light mode main container */
.level-up-main-container.light-mode {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #8d6e63;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dark mode main container */
.level-up-main-container.dark-mode {
  background: rgba(62, 39, 35, 0.9);
  border: 2px solid #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Dream mode main container */
.level-up-main-container.dream-mode {
  background: rgba(45, 20, 60, 0.9);
  border: 2px solid #ff00cc;
  box-shadow: 0 4px 12px rgba(255, 0, 204, 0.2);
}

.level-up-popup {
  border-radius: 12px;
  text-align: center;
  position: relative;
}

/* Remove old background styles since we now have the panel structure */
.level-up-popup.light-mode,
.level-up-popup.dark-mode,
.level-up-popup.dream-mode {
  background: transparent;
  border: none;
  box-shadow: none;
}

.level-up-content h2 {
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 15px;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}

.level-up-content p {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 20px;
  text-shadow: 1px 1px 0 #000;
}

/* Dark mode specific styles for level-up popup */
.level-up-title.dark-mode {
  color: #4CAF50 !important;
  font-size: 2.6rem;
  margin-bottom: 15px;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
}

.level-up-message.dark-mode {
  color: #000 !important;
  font-size: 1.2rem;
  margin-bottom: 5px;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

.level-up-level.dark-mode {
  color: #4CAF50 !important;
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
  font-family: 'The Wanters DEMO', serif;
}

.reward-section {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  padding: 20px;
  margin: 20px 0;
}

/* Dark mode reward section */
.level-up-main-container.dark-mode .reward-section {
  background: #8d6e63;
  border: 2px solid #000;
}

.reward-section h3 {
  color: #FFD700;
  font-size: 1.4rem;
  margin-bottom: 10px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.reward-text {
  color: #FFD700 !important;
  font-size: 1.3rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.reward-text.dark-mode {
  color: #4CAF50 !important;
  font-size: 1.1rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

/* Free bag rewards styling - cyan and larger */
.reward-text.dark-mode.free-bag-reward {
  color: #00ffff !important;
  font-size: 1.4rem !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

.message-text {
  color: #fff !important;
  font-size: 1rem !important;
  margin-bottom: 0 !important;
}

.message-text.dark-mode {
  color: #000 !important;
  font-size: 1.1rem !important;
  margin-bottom: 0 !important;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

/* Light mode specific styles for level-up popup */
.level-up-title.light-mode {
  color: #4CAF50 !important;
  font-size: 2.6rem;
  margin-bottom: 15px;
  text-shadow: none !important;
}

.level-up-message.light-mode {
  color: #000 !important;
  font-size: 1.2rem;
  margin-bottom: 5px;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

.level-up-level.light-mode {
  color: #4CAF50 !important;
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-shadow: none !important;
  font-family: 'The Wanters DEMO', serif;
}

.reward-text.light-mode {
  color: #4CAF50 !important;
  font-size: 1.1rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: none !important;
}

.message-text.light-mode {
  color: #000 !important;
  font-family: Verdana, sans-serif !important;
  font-size: 1.1rem !important;
  margin-bottom: 0 !important;
  text-shadow: none !important;
}

/* Dream mode specific styles for level-up popup */
.level-up-title.dream-mode {
  color: #4CAF50 !important;
  font-size: 2.6rem;
  margin-bottom: 15px;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
}

.level-up-message.dream-mode {
  color: #000 !important;
  font-size: 1.2rem;
  margin-bottom: 5px;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

.level-up-level.dream-mode {
  color: #4CAF50 !important;
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
  font-family: 'The Wanters DEMO', serif;
}

.reward-text.dream-mode {
  color: #4CAF50 !important;
  font-size: 1.1rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

.message-text.dream-mode {
  color: #000 !important;
  font-family: Verdana, sans-serif !important;
  font-size: 1.1rem !important;
  margin-bottom: 0 !important;
  text-shadow: none !important;
}

.close-popup-btn {
  background: linear-gradient(135deg, #FFD700, #FFA000);
  color: #000;
  border: 2px solid #000;
  border-radius: 25px;
  padding: 12px 30px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: none;
  margin-top: 15px;
}

.close-popup-btn:hover {
  background: linear-gradient(135deg, #FFA000, #FF8F00);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Hidden Achievement Styles */
.hidden-achievement {
  background: linear-gradient(135deg, #4a4a4a, #2e2e2e) !important;
  border: 2px solid #666 !important;
}

.hidden-achievement.completed {
  background-color: #8d6e63 !important; /* Solid color instead of gradient */
  border: 2px solid #FFD700 !important;
}

.hidden-achievement .achievement-name {
  color: #8d6e63; /* Light brown for better visibility in light mode */
}

.hidden-achievement.completed .achievement-name {
  color: #00ffff !important; /* Cyan color like locked achievements */
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000 !important;
}

.hidden-achievement .achievement-description {
  color: #999;
}

.hidden-achievement.completed .achievement-description {
  color: #fff !important;
}

/* Dark mode overrides for hidden achievements */
.dark .hidden-achievement:not(.completed) {
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a) !important;
  border: 2px solid #444 !important;
}

.dark .hidden-achievement.completed,
.dark .achievement-card.hidden-achievement.completed {
  background-color: #3e2723 !important; /* Dark brown matching tier 3 achievements */
  border: 2px solid #000000 !important;
}

.dark .hidden-achievement .achievement-name {
  color: #8d6e63 !important;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000 !important;
}

.dark .hidden-achievement.completed .achievement-name {
  color: #00ffff !important; /* Cyan color like locked achievements */
  background-color: #3e2723 !important; /* Dark brown background matching tier 3 achievements */
  border: 2px solid #000000 !important; /* Black border */
}

/* Ultra-high specificity override for secret achievements in dark mode */
body.dark .achievement-card.hidden-achievement.unlocked.completed .achievement-name,
.dark-mode .achievement-card.hidden-achievement.unlocked.completed .achievement-name,
.dark .achievement-card.hidden-achievement.unlocked.completed .achievement-name {
  color: #00ffff !important; /* Cyan color like locked achievements */
  background-color: #3e2723 !important; /* Dark brown background matching tier 3 achievements */
  border: 2px solid #000000 !important; /* Black border */
}

/* Dream mode styling for secret achievements */
.dream .hidden-achievement.completed .achievement-name {
  color: #00ffff !important; /* Cyan text matching tier 3 achievements */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  background-color: #1a1a1a !important; /* Dark grey background for dream mode secret achievements */
  border: 2px solid #000000 !important; /* Black border */
}

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

@keyframes popupSlideIn {
  from {
    transform: translateY(-50px) scale(0.8);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
} 
/* Custom Font */
@font-face {
  font-family: 'The Wanters DEMO';
  src: url('/fonts/The%20Wanters%20DEMO.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --text-muted: #666666;
  --button-bg: #e0e0e0;
  --card-bg: #ffffff;
  --image-placeholder-bg: #f5f5f5;
  --placeholder-stripe1: #f0f0f0;
  --placeholder-stripe2: #e6e6e6;
  --tag-bg: #f0f0f0;
  --nav-bg: #f5f5f5;
  --border-color: #e0e0e0;
  --font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --landing-button-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #000000;
  --text-muted: #000000;
  --button-bg: #333333;
  --card-bg: #2d2d2d;
  --image-placeholder-bg: #333333;
  --placeholder-stripe1: #2d2d2d;
  --placeholder-stripe2: #383838;
  --tag-bg: #404040;
  --nav-bg: #2a2a2a;
  --border-color: #444444;
}

/* Dream Mode - Dark Grey Theme with Subtle Patterns */
.dream-mode {
  --bg-color: #111111;
  --text-color: #00ffbb;
  --text-muted: #b347ea;
  --button-bg: #8d6e63;
  --card-bg: rgba(20, 20, 20, 0.9);
  --image-placeholder-bg: #1a1a1a;
  --placeholder-stripe1: #1a1a1a;
  --placeholder-stripe2: #2a2a2a;
  --tag-bg: #2a2a2a;
  --nav-bg: #111111;
  --border-color: #333333;
  
  /* Apply complex dark pattern background */
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(75,0,130,0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(0,0,128,0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 25%, rgba(46,139,87,0.08) 0%, transparent 40%),
    radial-gradient(circle at 25% 75%, rgba(138,43,226,0.08) 0%, transparent 40%),
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(75,0,130,0.05) 0deg 30deg,
      transparent 30deg 60deg,
      rgba(0,0,128,0.05) 60deg 90deg,
      transparent 90deg 120deg
    ),
    linear-gradient(30deg, rgba(30,30,30,0.8) 12%, transparent 12.5%, transparent 87%, rgba(30,30,30,0.8) 87.5%, rgba(30,30,30,0.8)),
    linear-gradient(150deg, rgba(25,25,25,0.7) 12%, transparent 12.5%, transparent 87%, rgba(25,25,25,0.7) 87.5%, rgba(25,25,25,0.7)),
    linear-gradient(90deg, rgba(20,20,20,0.6) 12%, transparent 12.5%, transparent 87%, rgba(20,20,20,0.6) 87.5%, rgba(20,20,20,0.6)),
    linear-gradient(60deg, rgba(35,35,35,0.4) 25%, transparent 25.5%, transparent 75%, rgba(35,35,35,0.4) 75%, rgba(35,35,35,0.4)),
    linear-gradient(120deg, rgba(28,28,28,0.5) 25%, transparent 25.5%, transparent 75%, rgba(28,28,28,0.5) 75%, rgba(28,28,28,0.5));
  background-size: 120px 120px, 100px 100px, 80px 80px, 90px 90px, 200px 200px, 40px 70px, 35px 60px, 50px 85px, 30px 50px, 45px 75px;
  background-position: 0 0, 60px 60px, 40px 40px, 45px 45px, 0 0, 0 0, 17px 30px, 25px 42px, 0 0, 22px 37px;
}

/* Dream Mode Text Animation - Modified Colors */
.dream-mode h1, 
.dream-mode h2, 
.dream-mode h3, 
.dream-mode p:not(.app-subtitle), 
.dream-mode span, 
.dream-mode a {
  animation: dreamText 20s infinite linear;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
}

@keyframes dreamText {
  0% {
    color: #4b0082; /* Indigo (darker purple) */
  }
  20% {
    color: #000080; /* Navy (darker blue) */
  }
  40% {
    color: #0072b1; /* Darker light blue */
  }
  60% {
    color: #2e8b57; /* Sea green (darker light green) */
  }
  80% {
    color: #006400; /* Dark green */
  }
  100% {
    color: #4b0082; /* Back to indigo for smooth loop */
  }
}

/* Dream Mode Button Animation */
.dream-mode button,
.dream-mode .button,
.dream-mode .nav-button,
.dream-mode .home-button,
.dream-mode .privacy-button,
.dream-mode .switch,
.dream-mode .quantity-button,
.dream-mode .remove-item-button,
.dream-mode .checkout-button,
.dream-mode .back-to-cart-button,
.dream-mode .submit-button,
.dream-mode .add-to-cart-button,
.dream-mode .view-cart-button,
.dream-mode .continue-shopping-button,
.dream-mode .back-to-products,
.dream-mode a[class*="button"] {
  animation: none !important;
  border: 3px solid #000000 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}

/* Special handling for landing buttons to maintain their specific font size */
.dream-mode .landing-button {
  animation: none !important;
  border: 3px solid #000000 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  /* Font size will be handled by LandingScreen.css specific rules */
}

.dream-mode .home-button:hover,
.dream-mode .privacy-button:hover,
.dream-mode .nav-button:hover,
.dream-mode .back-button:hover,
.dream-mode button:hover:not(.close-btn):not(.daydreamers-logout-button):not(.achievements-btn),
.dream-mode .button:hover:not(.close-btn):not(.daydreamers-logout-button):not(.achievements-btn),
.dream-mode .switch:hover,
.dream-mode .quantity-button:hover,
.dream-mode .remove-item-button:hover,
.dream-mode .checkout-button:hover,
.dream-mode .back-to-cart-button:hover,
.dream-mode .submit-button:hover,
.dream-mode .add-to-cart-button:hover,
.dream-mode .view-cart-button:hover,
.dream-mode .continue-shopping-button:hover,
.dream-mode .back-to-products:hover,
.dream-mode a[class*="button"]:hover:not(.close-btn):not(.daydreamers-logout-button):not(.achievements-btn) {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleGlobal 1.5s ease-in-out infinite alternate !important;
}

/* Landing button hover effects are handled specifically in LandingScreen.css */

/* Dream Mode Toggle Switch */
.dream-mode .slider {
  background: linear-gradient(45deg, #4b0082, #000080, #0072b1, #2e8b57, #006400);
  background-size: 400% 400%;
  animation: dreamGradient 15s infinite alternate;
}

.dream-mode .slider:before {
  background: #000;
  box-shadow: 0 0 10px #fff, 0 0 20px #fff;
}

@keyframes dreamGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes dreamSparkleGlobal {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Global touch scrolling optimization for all scrollable containers */
* {
  -webkit-overflow-scrolling: touch;
}

/* Ensure all scrollable elements have proper touch behavior */
[class*="container"],
[class*="panel"],
[class*="modal"],
[class*="overlay"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* High specificity touch scrolling for all scrollable elements - cannot be overridden */
/* Touch scrolling only on designated scroll roots; admin panel uses .admin-panel-page on mobile */
.user-menu-modal,
.free-bag-codes-panel,
.privacy-details,
.admin-popup,
.admin-modal,
.error-stack {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* Global button font styling - applies to all buttons and button-like elements */
button, 
input[type="button"], 
input[type="submit"], 
input[type="reset"],
.button,
.btn,
.nav-button,
.home-button,
.landing-button,
.back-button,
.view-cart-button,
.continue-shopping-button,
.back-to-products,
.add-to-cart-button,
.quantity-button,
.remove-item-button,
.checkout-button,
.submit-button,
.retry-button,
.theme-toggle,
.back-to-cart-button,
a[class*="button"],
*[class*="button"] {
  font-family: var(--font-family) !important;
}

button, input, textarea, select {
  font-family: var(--font-family);
}

a {
  color: #8d6e63;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Remove underlines from buttons and navigation links on hover */
button:hover,
.nav-button:hover,
.home-button:hover,
.landing-button:hover,
.back-button:hover,
.view-cart-button:hover,
.continue-shopping-button:hover,
.back-to-products:hover {
  text-decoration: none !important;
}

/* Cart empty state - greyed out */
.view-cart-button.cart-empty,
.back-to-cart-button.cart-empty {
  opacity: 0.4;
  color: #999999 !important;
  background-color: #cccccc !important;
  cursor: default;
  pointer-events: none;
}

.view-cart-button.cart-empty:hover,
.back-to-cart-button.cart-empty:hover {
  opacity: 0.4;
  color: #999999 !important;
  background-color: #cccccc !important;
  transform: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  font-weight: normal;
}

/* Dark mode overrides to ensure black text */
.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3, 
.dark-mode h4, 
.dark-mode h5, 
.dark-mode h6,
.dark-mode p,
.dark-mode span,
.dark-mode div,
.dark-mode a,
.dark-mode button,
.dark-mode input,
.dark-mode textarea,
.dark-mode select,
.dark-mode label {
  color: #000000 !important;
}

/* Override any text-shadow in dark mode */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  text-shadow: none !important;
}

/* Apply dream mode styling to all menu pages */
.dream-mode.landing-screen,
.dream-mode.options-page,
.dream-mode.contact-page,
.dream-mode.privacy-policy-page,
.dream-mode.cart-page,
.dream-mode.order-submission,
.dream-mode.main-menu,
.dream-mode.product-detail {
  background-color: #222;

  background-size: cover;
  background-position: center;
  background-blend-mode: color-burn;
  color: var(--text-color);
  position: relative;
}

.add-to-home-screen {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: 90%;
  width: 400px;
}

/* Dream mode - simple approach to block patterns behind popup */
.add-to-home-screen.dream-mode {
  z-index: 9999 !important;
  isolation: isolate !important;
}

.pwa-prompt {
  background-color: #f5f5dc;
  border: 3px solid #3e2723;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease-out;
  position: relative;
  z-index: 1;
}

.pwa-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pwa-icon {
  flex-shrink: 0;
}

.pwa-icon img {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  border: 4px solid #3e2723;
  object-fit: contain;
  background-color: white;
  padding: 6px;
}

.pwa-text h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #3e2723;
  font-family: var(--font-family);
}

.pwa-text p {
  margin: 0;
  font-size: 0.9rem;
  color: #5d4037;
  line-height: 1.4;
}

.pwa-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.pwa-install-button {
  background-color: #8d6e63;
  color: white;
  border: 2px solid #3e2723;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.pwa-install-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.pwa-dismiss-button {
  background-color: transparent;
  color: #5d4037;
  border: 2px solid #5d4037;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.3s ease;
}

.pwa-dismiss-button:hover {
  background-color: #5d4037;
  color: white;
  transform: translateY(-2px);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Dark mode styles */
.add-to-home-screen.dark-mode .pwa-prompt {
  background-color: #3e2723;
  border-color: #000000;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.add-to-home-screen.dark-mode .pwa-icon img {
  border-color: #000000;
  background-color: #2a2a2a;
}

.add-to-home-screen.dark-mode .pwa-text h3 {
  color: #8d6e63;
}

.add-to-home-screen.dark-mode .pwa-text p {
  color: #a1887f;
}

.add-to-home-screen.dark-mode .pwa-install-button {
  background-color: #5d4037;
  border-color: #000000;
}

.add-to-home-screen.dark-mode .pwa-install-button:hover {
  background-color: #795548;
}

.add-to-home-screen.dark-mode .pwa-dismiss-button {
  color: #a1887f;
  border-color: #a1887f;
}

.add-to-home-screen.dark-mode .pwa-dismiss-button:hover {
  background-color: #a1887f;
  color: #3e2723;
}

/* Dream mode styles - add a solid background around the popup */
.add-to-home-screen.dream-mode .pwa-prompt {
  background: #2d1a3c !important;
  background-image: none !important;
  background-color: #2d1a3c !important;
  border-color: #000000 !important;
  box-shadow: 0 0 0 50px #0d0d0d, 0 8px 25px rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative !important;
  z-index: 10000 !important;
  isolation: isolate !important;
  opacity: 1 !important;
}

/* Ensure no dream mode effects bleed through */
.add-to-home-screen.dream-mode .pwa-prompt::before,
.add-to-home-screen.dream-mode .pwa-prompt::after {
  display: none !important;
}

.add-to-home-screen.dream-mode .pwa-icon img {
  border-color: #000000;
  background-color: #111111;
}

.add-to-home-screen.dream-mode .pwa-text h3 {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.add-to-home-screen.dream-mode .pwa-text p {
  color: #cccccc;
}

.add-to-home-screen.dream-mode .pwa-install-button {
  background-color: #8d6e63;
  color: #000000;
  border-color: #000000;
  font-weight: 900;
  text-shadow: none;
  animation: none;
}

.add-to-home-screen.dream-mode .pwa-install-button:hover {
  background-color: #a1887f;
  color: #ffffff;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4);
  animation: dreamSparkleMainMenu 1.5s ease-in-out infinite alternate;
}

.add-to-home-screen.dream-mode .pwa-dismiss-button {
  color: #cccccc;
  border-color: #cccccc;
  font-weight: 900;
}

.add-to-home-screen.dream-mode .pwa-dismiss-button:hover {
  background-color: #cccccc;
  color: #000000;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .add-to-home-screen {
    bottom: 10px;
    max-width: 95%;
  }
  
  .pwa-prompt {
    padding: 1rem;
  }
  
  .pwa-content {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  
  .pwa-actions {
    flex-direction: column;
  }
  
  .pwa-install-button,
  .pwa-dismiss-button {
    width: 100%;
  }
} 

.add-to-home-screen .pwa-prompt.center-align {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 340px;
  width: 90%;
  margin: 0 auto;
}

.pwa-title {
  font-size: 3.7rem;
  font-weight: 900;
  margin-bottom: 1rem;
  font-family: var(--font-family, 'The Wanters DEMO', sans-serif);
  letter-spacing: 0.5px;
}

.add-to-home-screen.dark-mode .pwa-title,
.add-to-home-screen.dream-mode .pwa-title {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.pwa-icon {
  margin-bottom: 1.5rem;
}

.pwa-actions.vertical {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  align-items: center;
  margin-top: 0.5rem;
}

.pwa-install-button,
.pwa-dismiss-button {
  width: 65%;
  max-width: 200px;
  margin: 0 auto;
}

 
/* ===============================================================================
                                ADMIN PANEL STYLING
=============================================================================== */

/* Main admin panel overlay */
.admin-panel-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  overflow-y: auto;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Removed background pseudo-elements since we're now using a modal overlay */

/* Background panel similar to cart page */
.admin-background-panel {
  background-color: rgba(139, 110, 99, 0.95);
  background-image: 
    linear-gradient(135deg, rgba(93, 64, 55, 0.1) 0%, rgba(139, 110, 99, 0.1) 50%, rgba(93, 64, 55, 0.1) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1' stroke-opacity='0.1'%3E%3Cpath d='M10 10L50 10L50 50L10 50z'/%3E%3Cpath d='M20 20L40 20L40 40L20 40z'/%3E%3Cpath d='M25 25L35 25L35 35L25 35z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  border: 12px solid #5d4037;
  border-radius: 25px;
  padding: 2rem;
  max-width: 1400px;
  width: 98%;
  max-height: 95vh;
  position: relative;
  z-index: 1;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.4),
    0 0 0 3px rgba(93, 64, 55, 0.3),
    0 0 30px rgba(93, 64, 55, 0.3),
    0 0 60px rgba(93, 64, 55, 0.2),
    inset 0 2px 4px rgba(255, 255, 255, 0.1);
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  
  /* Add a subtle inner glow effect */
  position: relative;
}

.admin-background-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    rgba(255, 255, 255, 0.05) 0%, 
    rgba(255, 255, 255, 0.02) 50%, 
    rgba(255, 255, 255, 0.05) 100%);
  border-radius: 25px;
  pointer-events: none;
  z-index: -1;
}

.admin-background-panel::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  pointer-events: none;
  z-index: -1;
}

.admin-background-panel::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

/* Main container inside background panel */
.admin-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  background-image: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.1) 100%);
  border: 4px solid #5d4037;
  border-radius: 15px;
  padding: 2.5rem;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(93, 64, 55, 0.2),
    inset 0 1px 3px rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Admin title panel */
.admin-title-panel {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #ffffff;
  text-align: center;
  padding: 1.5rem 2rem;
  border: 4px solid #0a1a1d;
  border-radius: 15px;
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 50%, #14545c 100%);
  width: 100%;
  max-width: 500px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.4),
    0 0 0 2px rgba(255, 255, 255, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Admin theme switch container */
.admin-theme-switch-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  padding: 1rem;
  width: 100%;
}

/* Admin back button for authentication section */
.admin-back-btn {
  display: block;
  margin: 1.5rem auto 0 auto;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 9999px;
  font-size: 1.6rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'The Wanters DEMO', serif;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-back-btn:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Dark mode admin back button */
.dark-mode .admin-back-btn {
  background-color: #8d6e63;
  color: #ffffff;
  border: 2px solid #000000;
}

.dark-mode .admin-back-btn:hover {
  background-color: #a1887f;
  color: #ffffff;
}

/* Dream mode admin back button */
.dream-mode .admin-back-btn {
  background-color: #dc2626 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
}

.dream-mode .admin-back-btn:hover {
  background-color: #b91c1c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-title {
  font-size: 3rem;
  font-weight: 900;
  margin: 0;
  color: #f5f5dc !important;
  text-align: center;
}

.admin-title-business-name {
  font-size: 1.3em;
  font-weight: 900;
}

.admin-close-btn {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.admin-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.admin-close-btn-topright {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  z-index: 10;
}

.admin-close-btn-topright.admin-close-btn-inpanel {
  top: 2.5rem;
  right: 2.5rem;
  /* Slightly down and left, but still top right */
}

/* Authentication Section */
.admin-auth-section {
  text-align: center;
  width: 100%;
  max-width: 500px;
  padding: 2rem;
}

.admin-auth-section h2 {
  color: #dc2626;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  font-weight: 700;
}

.admin-auth-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.admin-input-group {
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.admin-input-group label {
  display: block;
  color: #3e2723;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.admin-password-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.admin-input-group input {
  width: 100%;
  padding: 0.8rem;
  padding-right: 3rem;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  font-size: 1.1rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
  transition: border-color 0.3s ease;
  background-color: #a1887f;
  color: #3e2723;
}

.admin-input-group input:focus {
  outline: none;
  border-color: #8d6e63;
  background-color: #a1887f;
}

.admin-password-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-password-toggle:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.admin-password-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.eye-icon {
  font-size: 1.2rem;
  line-height: 1;
  user-select: none;
}

.eye-icon.eye-open {
  opacity: 0.8;
}

.eye-icon.eye-closed {
  opacity: 0.6;
}

.admin-login-btn {
  padding: 1rem 2rem;
  background-color: #14545c;
  color: white;
  border: 3px solid #0a1a1d;
  border-radius: 9999px;
  font-size: 1.6rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-login-btn:hover:not(:disabled) {
  background-color: #0d353a;
  color: #fff;
  border: 3px solid #06292b;
}

.admin-login-btn:disabled {
  background-color: #d7ccc8;
  cursor: not-allowed;
  transform: none;
  border: 3px solid #0a1a1d;
}

/* Error and Warning Messages */
.admin-error-message {
  background: #ffebee;
  color: #c62828;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #ef9a9a;
  text-align: center;
  font-weight: 600;
}

.admin-warning {
  background: #fff3e0;
  color: #f57c00;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #ffcc02;
  text-align: center;
  font-weight: 600;
}

.admin-mobile-notice {
  /* Light mode: cream-brown to match app palette */
  background-color: #f5e5c0;
  border: 2px solid #8d6e63;
  border-radius: 10px;
  padding: 1rem;
  margin-top: 1rem;
  color: #3e2723;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.admin-mobile-notice p {
  margin: 0;
  font-family: var(--font-family);
}

.admin-lockout-message {
  background: #ffebee;
  color: #c62828;
  padding: 1.5rem;
  border-radius: 6px;
  border: 1px solid #ef9a9a;
  text-align: center;
}

.admin-lockout-message p {
  margin: 0.5rem 0;
  font-weight: 600;
}

/* Admin Content */
.admin-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.admin-action-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  width: 100%;
  max-width: 1200px;
}

.admin-action-buttons-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: 100%;
  flex-wrap: wrap;
}

/* Customer section responsive layout */
.admin-customer-section-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: 100%;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .admin-customer-section-buttons {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  
  .admin-customer-section-buttons .admin-promo-codes-btn,
  .admin-customer-section-buttons .admin-loyalty-btn,
  .admin-customer-section-buttons .admin-customers-btn {
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
    min-width: 200px;
    width: 100%;
    max-width: 280px;
  }
}

@media (max-width: 480px) {
  .admin-customer-section-buttons .admin-promo-codes-btn,
  .admin-customer-section-buttons .admin-loyalty-btn,
  .admin-customer-section-buttons .admin-customers-btn {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    min-width: 160px;
  }
}

/* Base button styles */
.admin-save-btn,
.admin-logout-btn,
.admin-customers-btn,
.admin-loyalty-btn,
.admin-promo-codes-btn,
.admin-inventory-btn,
.admin-products-btn,
.admin-costs-profits-btn,
.admin-statistics-btn,
.admin-session-preferences-btn,
.admin-summary-btn,
.admin-cook-btn,
.admin-staff-btn,
.admin-qr-generator-btn,
.admin-button-1-btn,
.admin-button-2-btn,
.admin-management-btn {
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #000000;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  min-width: 220px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  white-space: nowrap;
}

/* Make Save button green by default */
.admin-save-btn {
  background-color: #27ae60;
  color: #fff;
  border-color: #1e8449;
}
.admin-save-btn:hover:not(:disabled) {
  background-color: #2ecc71;
  color: #fff;
  border-color: #1e8449;
}

.admin-save-btn.has-changes {
  background-color: #27ae60;
  border-color: #1e8449;
  animation: pulse 2s infinite;
}

.admin-save-btn.has-changes:hover {
  background-color: #2ecc71;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 1; }
}

.admin-save-btn:disabled {
  background-color: #bdc3c7;
  border-color: #95a5a6;
  cursor: not-allowed;
  opacity: 0.7;
}

.admin-revert-btn {
  background-color: #14545c;
  color: white;
  border: none;
  border: 3px solid #0a1a1d;
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-revert-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #0d353a;
}

.admin-revert-btn:disabled {
  background-color: #bdc3c7;
  border-color: #95a5a6;
  cursor: not-allowed;
  opacity: 0.7;
}

.admin-logout-btn {
  background-color: #e74c3c;
  color: white;
  border-color: #c0392b;
  min-width: 260px;
}
/* Customers button same size as the standard buttons */
/* Customers button - Master green for packaging */
.admin-customers-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  color: #fff;
  border: 3px solid #004d06;
  box-shadow: 0 4px 8px rgba(0, 119, 10, 0.3);
}
.admin-customers-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4);
  color: #3e2723 !important;
}

.admin-loyalty-btn {
  background-color: #8e44ad;
  color: #fff;
  border-color: #732d91;
}
.admin-loyalty-btn:hover:not(:disabled) {
  background-color: #9b59b6;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(142, 68, 173, 0.4);
}

.admin-logout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(231, 76, 60, 0.4);
  background-color: #c0392b;
  color: #3e2723 !important;
}

.admin-costs-profits-btn {
  background-color: #9333ea;
  color: white;
  border-color: #7c3aed;
}

.admin-costs-profits-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(147, 51, 234, 0.4);
  background-color: #a855f7;
}

/* Inventory button - Master blue for ingredients */
.admin-inventory-btn { 
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  color: #fff; 
  border: 3px solid #0a5d7a;
  box-shadow: 0 4px 8px rgba(16, 142, 188, 0.3);
}
.admin-inventory-btn:hover { 
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  transform: translateY(-2px); 
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
  color: #3e2723 !important;
}

/* Products button distinct color - Purple like Button 1 */
/* Products button - Master purple for appliances */
.admin-products-btn { 
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  color: #fff; 
  border: 3px solid #36034d;
  box-shadow: 0 4px 8px rgba(87, 5, 138, 0.3);
}
.admin-products-btn:hover { 
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  transform: translateY(-2px); 
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4);
  color: #3e2723 !important;
}

.admin-test-inventory-btn {
  background-color: #e74c3c;
  color: white;
  border: 2px solid #c0392b;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-test-inventory-btn:hover:not(:disabled) {
  background-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.admin-test-inventory-btn:disabled {
  background-color: #95a5a6;
  border-color: #7f8c8d;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-promo-codes-btn {
  background-color: #e67e22;
  color: white;
  border-color: #d35400;
}

.admin-promo-codes-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(230, 126, 34, 0.4);
  background-color: #d68910;
}

.admin-statistics-btn {
  background-color: #9b59b6;
  color: white;
  border-color: #8e44ad;
}

.admin-statistics-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(155, 89, 182, 0.4);
  background-color: #8e44ad;
}

.admin-session-preferences-btn {
  background-color: #059669;
  color: white;
  border-color: #047857;
}

.admin-session-preferences-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(5, 150, 105, 0.4);
  background-color: #10b981;
}

.admin-summary-btn {
  background-color: #fbbf24;
  color: #1f2937;
  border-color: #d97706;
}

.admin-summary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(251, 191, 36, 0.4);
  background-color: #f59e0b;
}

.admin-cook-btn {
  background-color: #14545c;
  color: #ffffff;
  border-color: #0a1a1d;
}

.admin-cook-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.4);
  background-color: #0d353a;
}

.admin-management-btn {
  background-color: #14545c;
  color: #ffffff;
  border-color: #0a1a1d;
}

.admin-management-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.4);
  background-color: #0d353a;
}

.admin-update-message {
  background: #e8f5e8;
  color: #2e7d32;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #4caf50;
  text-align: center;
  font-weight: 600;
  margin-bottom: 1rem;
  width: 100%;
  max-width: 600px;
}

.admin-loading {
  background: #f5f5f5;
  color: #5d4037;
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
}

/* Admin Sections */
.admin-section {
  width: 100%;
  max-width: 1000px;
  margin: 2rem 0;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #5d4037;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.admin-section h3 {
  color: #3e2723;
  margin: 0 0 1.5rem 0;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

/* Customer Management: no backing panel (match Business Management profile look) */
.customer-management-content .admin-section {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  max-width: none;
}

/* Promo Code Styles */
.admin-promo-controls {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

/* Make Create Code button mystic purple */
.admin-create-code-btn {
  background-color: #7c3aed; /* Mystic purple */
  color: #fff;
  border: 3px solid #4b2997;
  font-weight: 700;
  font-size: 1.3rem;
  padding: 1rem 2.2rem;
  border-radius: 32px;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
  transition: background 0.2s, box-shadow 0.2s;
}
.admin-create-code-btn:hover:not(:disabled) {
  background-color: #a78bfa; /* Lighter mystic purple on hover */
  color: #2d0066;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.25);
  border-color: #4b2997;
}

/* Promo code list - make responsive instead of fixed 3-column */
.admin-promo-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.admin-promo-item {
  background: #f5f5dc; /* Match main background cream */
  border: 2px solid #d7ccc8;
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-promo-title-panel {
  width: 100%;
  background: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  margin-bottom: 1rem;
  padding: 0.7rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.admin-promo-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff; /* Ensure white text in light mode */
  margin: 0;
  letter-spacing: 0.5px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  font-family: 'The Wanters DEMO', serif;
}

.admin-promo-title-edit {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff; /* Ensure white text in light mode */
  margin: 0;
  letter-spacing: 0.5px;
  text-align: center;
  width: 100%;
  outline: none;
  font-family: 'The Wanters DEMO', serif; /* Ensure font inheritance */
}

.admin-promo-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
  padding: 0 1rem;
}

.admin-promo-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.admin-promo-field-label {
  font-weight: 600;
  color: #3e2723;
  font-size: 1.4rem;
  font-family: 'The Wanters DEMO', serif;
  text-align: left;
  min-width: 70px;
  flex-shrink: 0;
}

.admin-promo-text-box {
  background: #f5f5f5;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  font-family: 'Verdana', sans-serif;
  font-weight: bold;
  color: #3e2723;
  width: 180px;
  height: 2.5rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-align: center;
}

.admin-promo-text-box:focus {
  outline: none;
  border-color: #5d4037;
  background: white;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(93, 64, 55, 0.1);
}

.admin-promo-text-box[readonly] {
  background: #e8e8e8;
  cursor: not-allowed;
  color: #666;
}
.admin-promo-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.admin-promo-code {
  font-weight: 700;
  color: #3e2723;
  font-size: 1.1rem;
}

.admin-promo-detail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.admin-promo-detail-label {
  font-weight: 700;
  color: #5d4037;
  min-width: 60px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
}

.admin-promo-detail-value {
  font-weight: 500;
  color: #3e2723;
}

.admin-promo-inline-edit {
  background: white;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-size: 0.95rem;
  color: #3e2723;
  min-width: 80px;
  text-align: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.admin-promo-inline-edit:focus {
  outline: none;
  border-color: #5d4037;
  background: #fff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(93, 64, 55, 0.1);
}

.admin-promo-effect {
  color: #5d4037;
  font-size: 0.9rem;
}

.admin-promo-value {
  font-weight: 600;
  color: #8d6e63;
}

.admin-promo-status {
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

.admin-promo-status.active {
  background: #e8f5e8;
  color: #2e7d32;
}

.admin-promo-status.inactive {
  background: #ffebee;
  color: #c62828;
}

.admin-promo-usage {
  color: #666;
  font-size: 0.9rem;
}

/* Promo code actions */
.admin-promo-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}

.admin-promo-toggle {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-promo-toggle.active {
  background-color: #27ae60;
  color: white;
}

.admin-promo-toggle.active:hover {
  background-color: #2ecc71;
}

.admin-promo-toggle.inactive {
  background-color: #e74c3c;
  color: white;
}

.admin-promo-toggle.inactive:hover {
  background-color: #c0392b;
}

.admin-promo-edit {
  padding: 0.5rem 1rem;
  background-color: #14545c;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-promo-edit:hover {
  background-color: #0d353a;
}

.admin-promo-delete {
  padding: 0.5rem 1rem;
  background-color: #c0392b;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.admin-promo-delete:hover {
  background-color: #e74c3c;
}

/* Popup overlay */
.admin-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.admin-popup {
  background-color: white;
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.admin-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #d7ccc8;
}

.admin-popup-header h3 {
  color: #3e2723;
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
}

.admin-popup-close {
  background: none;
  border: none;
  color: #3e2723;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.admin-popup-close:hover {
  background: rgba(62, 39, 35, 0.1);
}

.admin-popup-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-form-group label {
  color: #3e2723;
  font-weight: 600;
  font-size: 1.1rem;
}

.admin-form-group input,
.admin-form-group select {
  padding: 0.8rem;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
  background-color: #a1887f;
  color: #3e2723;
}

.admin-form-group input:focus,
.admin-form-group select:focus {
  outline: none;
  border-color: #8d6e63;
  background-color: #a1887f;
}

.admin-popup-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 2px solid #d7ccc8;
}

.admin-popup-btn {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 9999px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-popup-save {
  background-color: #27ae60;
  color: white;
  border: 3px solid #1e8449;
}

.admin-popup-save:hover {
  background-color: #2ecc71;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.admin-popup-cancel {
  background-color: #e74c3c;
  color: white;
  border: 3px solid #c0392b;
}

.admin-popup-cancel:hover {
  background-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Dark Mode Styles */
.dark-mode .admin-background-panel {
  background-color: rgba(26, 26, 26, 0.95);
  background-image: 
    linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(26, 26, 26, 0.3) 50%, rgba(0, 0, 0, 0.3) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1' stroke-opacity='0.15'%3E%3Cpath d='M10 10L50 10L50 50L10 50z'/%3E%3Cpath d='M20 20L40 20L40 40L20 40z'/%3E%3Cpath d='M25 25L35 25L35 35L25 35z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  border: 12px solid #3e2723;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.6),
    0 0 0 3px rgba(62, 39, 35, 0.4),
    0 0 30px rgba(62, 39, 35, 0.4),
    0 0 60px rgba(62, 39, 35, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.05);
}

.dark-mode .admin-container {
  background-color: rgba(62, 39, 35, 0.9);
  color: #fff8e1;
}

.dark-mode .admin-title-panel {
  background-color: #14545c;
  border: 3px solid #0a1a1d;
}

.dark-mode .admin-title {
  color: #f5f5dc !important;
}

.dark-mode .admin-close-btn {
  color: #8d6e63;
}

.dark-mode .admin-close-btn:hover {
  background: rgba(141, 110, 99, 0.2);
}

.dark-mode .admin-auth-section h2,
.dark-mode .admin-welcome h2 {
  color: #dc2626;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .admin-input-group label {
  color: #8d6e63;
}

.dark-mode .admin-input-group input {
  background: #a1887f;
  border-color: #5d4037;
  color: #3e2723;
}

.dark-mode .admin-input-group input:focus {
  border-color: #8d6e63;
  background: #a1887f;
}

.dark-mode .admin-password-toggle {
  color: #8d6e63;
}

.dark-mode .admin-password-toggle:hover {
  background-color: rgba(141, 110, 99, 0.2);
}

.dark-mode .eye-icon {
  color: #8d6e63;
}

.dark-mode .admin-login-btn {
  background-color: #14545c;
  border-color: #0a1a1d;
  color: #fff;
}

.dark-mode .admin-login-btn:hover:not(:disabled) {
  background-color: #0d353a;
  color: #fff;
  border: 3px solid #0a1a1d;
}

.dark-mode .admin-login-btn:disabled {
  border: 3px solid #0a1a1d;
}

.dark-mode .admin-mobile-notice {
  /* Dark mode: light brown panel */
  background-color: #8d6e63;
  border: 2px solid #000000;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.dark-mode .admin-logout-btn {
  border-color: #000000;
}

.dark-mode .admin-section {
  background: rgba(42, 42, 42, 0.9);
  border-color: #5d4037;
}

.dark-mode .admin-section h3 {
  color: #8d6e63;
}

.dark-mode .admin-inventory-item {
  background: #3e2723;
  border-color: #5d4037;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .admin-inventory-header h4 {
  color: #8d6e63;
}

.dark-mode .admin-size-control label {
  color: #8d6e63;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
}

.dark-mode .admin-size-info label {
  color: #8d6e63;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
}

.dark-mode .admin-product-image {
  border-color: #8d6e63;
}

.dark-mode .admin-size-label {
  color: #d7ccc8;
}

.dark-mode .admin-plus-btn {
  background: #27ae60;
  color: white;
  border: 2px solid #1e8449;
}

.dark-mode .admin-plus-btn:hover {
  background: #2ecc71;
}

.dark-mode .admin-minus-btn {
  background: #e74c3c;
  color: white;
  border: 2px solid #c0392b;
}

.dark-mode .admin-minus-btn:hover {
  background: #c0392b;
}

.dark-mode .admin-quantity-display {
  background: #f7ede2;
  border-color: #5d4037;
  color: #3e2723;
}

.dark-mode .admin-promo-item {
  background: #3e2723;
  border-color: #5d4037;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .admin-promo-code {
  color: #8d6e63;
}

.dark-mode .admin-promo-effect {
  color: #a1887f;
}

.dark-mode .admin-promo-detail-label {
  color: #a1887f;
}

.dark-mode .admin-promo-detail-value {
  color: #8d6e63;
}

.dark-mode .admin-promo-inline-edit {
  background: #2a2a2a;
  border: 2px solid #8d6e63;
  color: #d7ccc8;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .admin-promo-inline-edit:focus {
  border-color: #a1887f;
  background: #3e2723;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(161, 136, 127, 0.2);
}

.dark-mode .admin-promo-field-label {
  color: #d7ccc8;
}

.dark-mode .admin-promo-text-box {
  background: #f5e5c0; /* Cream brown */
  border: 2px solid #8d6e63; /* Brown border */
  color: #14545c; /* Teal color matching selling button */
}
.dark-mode .admin-promo-text-box:focus {
  background: #fff8e1;
  border-color: #5d4037;
  color: #3e2723;
}
.dark-mode .admin-promo-text-box[readonly] {
  background: #e8e0c8;
  color: #666;
}

.dark-mode .admin-promo-title-edit {
  color: #ffffff;
}

.dark-mode .admin-action-buttons {
  background: rgba(42, 42, 42, 0.1);
  border-color: #5d4037;
  border-bottom: none;
}

.dark-mode .admin-save-btn {
  border-color: #000000;
}

.dark-mode .admin-save-btn.has-changes {
  background-color: #27ae60;
  border-color: #1e8449;
}

.dark-mode .admin-revert-btn {
  border-color: #000000;
}

.dark-mode .admin-logout-btn {
  border-color: #000000;
}

.dark-mode .admin-costs-profits-btn {
  border-color: #000000;
}

.dark-mode .admin-inventory-btn {
  border-color: #000000;
}

.dark-mode .admin-test-inventory-btn {
  border-color: #000000;
}

.dark-mode .admin-promo-codes-btn {
  border-color: #000000;
}

.dark-mode .admin-statistics-btn {
  border-color: #000000;
}

.dark-mode .admin-summary-btn {
  border-color: #000000;
}

.dark-mode .admin-promo-actions {
  background: none;
}

/* Dark mode promo toggle buttons - add black borders */
.dark-mode .admin-promo-toggle.active {
  background-color: #27ae60;
  color: white;
  border: 2px solid #000000; /* Black border for active button */
}

.dark-mode .admin-promo-toggle.active:hover {
  background-color: #2ecc71;
  border: 2px solid #000000; /* Maintain black border on hover */
}

.dark-mode .admin-promo-toggle.inactive {
  background-color: #e74c3c;
  color: white;
  border: 2px solid #000000; /* Black border for inactive button */
}

.dark-mode .admin-promo-toggle.inactive:hover {
  background-color: #c0392b;
  border: 2px solid #000000; /* Maintain black border on hover */
}

.dark-mode .admin-promo-delete {
  background-color: #c0392b;
  color: white;
  border: 2px solid #000000; /* Black border for delete button */
}

.dark-mode .admin-promo-delete:hover {
  background-color: #e74c3c;
  border: 2px solid #000000; /* Maintain black border on hover */
}

.dark-mode .admin-popup {
  background-color: #2a2a2a;
  border-color: #5d4037;
}

.dark-mode .admin-popup-header {
  border-color: #5d4037;
}

.dark-mode .admin-popup-header h3 {
  color: #8d6e63;
}

.dark-mode .admin-popup-close {
  color: #8d6e63;
}

.dark-mode .admin-popup-close:hover {
  background: rgba(141, 110, 99, 0.2);
}

.dark-mode .admin-form-group label {
  color: #8d6e63;
}

.dark-mode .admin-form-group input,
.dark-mode .admin-form-group select {
  background: #a1887f;
  border-color: #5d4037;
  color: #3e2723;
}

.dark-mode .admin-form-group input:focus,
.dark-mode .admin-form-group select:focus {
  border-color: #8d6e63;
  background: #a1887f;
}

.dark-mode .admin-popup-actions {
  border-color: #5d4037;
}

.dark-mode .admin-popup-save {
  border-color: #1e8449;
}

.dark-mode .admin-popup-cancel {
  border-color: #c0392b;
}

/* Dream Mode Styles */
.dream-mode .admin-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  border-radius: 20px;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream-mode .admin-container {
  background-color: rgba(255, 255, 255, 0.95);
  color: #333333;
  border: 3px solid #000000;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.dream-mode .admin-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  border-radius: 15px;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .admin-title {
  color: #ffffff !important;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
  animation: none !important;
}

.dream-mode .admin-close-btn {
  color: #ffffff;
}

.dream-mode .admin-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.dream-mode .admin-auth-section h2,
.dream-mode .admin-welcome h2 {
  color: #dc2626;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
}

.dream-mode .admin-input-group label {
  color: #333333;
  text-shadow: none;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
}

.dream-mode .admin-input-group input {
  background: #a1887f;
  border: 2px solid #7c3aed;
  color: #3e2723;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}

.dream-mode .admin-input-group input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
  background: #a1887f;
}

.dream-mode .admin-password-toggle {
  color: #7c3aed;
}

.dream-mode .admin-password-toggle:hover {
  background-color: rgba(124, 58, 237, 0.2);
}

.dream-mode .eye-icon {
  color: #7c3aed;
}

.dream-mode .admin-login-btn {
  background-color: #14545c !important;
  border-color: #0a1a1d !important;
  color: #fff !important;
}

.dream-mode .admin-login-btn:hover:not(:disabled) {
  background-color: #0d353a !important;
  color: #fff !important;
  border: 3px solid #0a1a1d !important;
}

.dream-mode .admin-login-btn:disabled {
  border: 3px solid #0a1a1d !important;
}

.dream-mode .admin-mobile-notice {
  /* Dream mode: mystic purple gradient with crisp border */
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 100%);
  border: 2px solid #000000;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.35);
}

.dream-mode .admin-mobile-notice p {
  color: #ffffff !important;
  animation: none !important;
  text-shadow: none !important;
}

.dream-mode .admin-logout-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-logout-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-section {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-section h3 {
  color: #ffffff;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 50%, #6a1b9a 100%);
  border: 3px solid #1a0033;
  border-radius: 15px;
  padding: 1rem 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-inventory-item {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-inventory-header h4 {
  color: #ffffff;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 50%, #6a1b9a 100%);
  border: 2px solid #1a0033;
  border-radius: 12px;
  padding: 0.8rem 1.5rem;
  text-align: center;
  box-shadow: 0 3px 10px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-size-control label {
  color: #333333;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-size-info label {
  color: #333333;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-product-image {
  border: 3px solid #4a148c;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-size-label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-plus-btn {
  background: #27ae60;
  color: white;
  border: 2px solid #1e8449;
}

.dream-mode .admin-plus-btn:hover {
  background: #2ecc71;
}

.dream-mode .admin-minus-btn {
  background: #e74c3c;
  color: white;
  border: 2px solid #c0392b;
}

.dream-mode .admin-minus-btn:hover {
  background: #c0392b;
}

.dream-mode .admin-quantity-display {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
}

.dream-mode .admin-promo-item {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-promo-code {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-promo-effect {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-value {
  color: #00bcd4;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-promo-detail-label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-detail-value {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-inline-edit {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-promo-inline-edit:focus {
  border-color: #6a1b9a;
  background: #fff;
  box-shadow: 0 0 15px rgba(106, 27, 154, 0.4);
}

.dream-mode .admin-promo-field-label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-text-box {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  font-weight: bold;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-promo-text-box:focus {
  border-color: #6a1b9a;
  background: #fff;
  box-shadow: 0 0 15px rgba(106, 27, 154, 0.4);
}

.dream-mode .admin-promo-text-box[readonly] {
  background: #1a1a1a;
  color: #999;
}

.dream-mode .admin-promo-title-edit {
  color: #ffffff;
}

.dream-mode .admin-action-buttons {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #4a148c;
  border-bottom: none;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-save-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-save-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-save-btn.has-changes {
  background-color: #27ae60;
  border-color: #1e8449;
  color: white;
}

.dream-mode .admin-save-btn.has-changes:hover {
  background-color: #2ecc71;
}

.dream-mode .admin-revert-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-revert-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-logout-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-logout-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-costs-profits-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-costs-profits-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-inventory-btn {
  border-color: #000000;
}

.dream-mode .admin-test-inventory-btn {
  border-color: #000000;
}

.dream-mode .admin-promo-codes-btn {
  border-color: #000000;
}

.dream-mode .admin-statistics-btn {
  border-color: #000000;
}

.dream-mode .admin-summary-btn {
  border-color: #000000;
}

.dream-mode .admin-popup {
  background-color: rgba(255, 255, 255, 0.95);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-popup-header {
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 50%, #6a1b9a 100%);
  border: 3px solid #1a0033;
  border-radius: 12px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-popup-header h3 {
  color: #ffffff;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
}

.dream-mode .admin-popup-close {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.dream-mode .admin-popup-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.dream-mode .admin-form-group label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-form-group input,
.dream-mode .admin-form-group select {
  background: #a1887f;
  border: 2px solid #4a148c;
  color: #3e2723;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-form-group input:focus,
.dream-mode .admin-form-group select:focus {
  border-color: #6a1b9a;
  box-shadow: 0 0 15px rgba(106, 27, 154, 0.4);
  background: #a1887f;
}

.dream-mode .admin-popup-actions {
  border-top: 2px solid #4a148c;
  margin-top: 1rem;
  padding-top: 1rem;
}

.dream-mode .admin-popup-save {
  border-color: #1e8449;
}

.dream-mode .admin-popup-cancel {
  border-color: #c0392b;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .admin-promo-list {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  /* Mobile: single scroll root – .admin-panel-page scrolls; inner containers do not trap scroll */
  .admin-background-panel,
  .admin-container {
    overflow-y: visible !important;
    max-height: none !important;
    -webkit-overflow-scrolling: unset;
  }
  .admin-panel-page {
    touch-action: pan-y;
  }
}

/* Clickable Admin Title for Cache Refresh */
.clickable-title {
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.clickable-title:hover {
  transform: scale(1.02);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.clickable-title:active {
  transform: scale(0.98);
}

/* Light mode hover effects */
.light-mode .clickable-title:hover {
  color: #8d6e63;
  text-shadow: 0 2px 8px rgba(141, 110, 99, 0.4);
}

/* Dark mode hover effects */
.dark-mode .clickable-title:hover {
  color: #a1887f;
  text-shadow: 0 2px 8px rgba(161, 136, 127, 0.6);
}

/* Dream mode hover effects */
.dream-mode .clickable-title:hover {
  color: #00ffbb;
  text-shadow: 0 2px 8px rgba(0, 255, 187, 0.6);
  animation: dreamText 2s ease-in-out infinite;
}

/* Mobile responsive adjustments for clickable title */
@media (max-width: 768px) {
  .clickable-title:hover {
    transform: none;
    text-shadow: none;
  }
  
  .clickable-title:active {
    transform: scale(0.95);
  }
}

/* Medium screens - 2 rows of buttons */
@media (max-width: 1024px) and (min-width: 769px) {
  .admin-action-buttons-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  
  .admin-save-btn,
  .admin-revert-btn,
  .admin-customers-btn,
  .admin-costs-profits-btn,
  .admin-inventory-btn,
  .admin-products-btn,
  .admin-promo-codes-btn,
  .admin-statistics-btn,
  .admin-session-preferences-btn,
  .admin-summary-btn,
  .admin-cook-btn,
  .admin-staff-btn,
  .admin-button-1-btn,
  .admin-button-2-btn {
    width: 180px;
    min-width: auto;
  }
}

/* Small tablets - 3 rows of buttons */
@media (max-width: 768px) and (min-width: 481px) {
  .admin-background-panel {
    width: 98%;
    padding: 1rem;
  }
  
  .admin-container {
    padding: 1.5rem;
  }
  
  .admin-title-panel {
    max-width: 100%;
  }
  
  .admin-title {
    font-size: 2rem;
  }
  
  .admin-inventory-grid {
    grid-template-columns: 1fr;
  }
  
  .admin-promo-list {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.5rem;
  }
  
  .admin-action-buttons {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
  
  .admin-action-buttons-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    width: 100%;
  }
  
  .admin-save-btn,
  .admin-revert-btn,
  .admin-customers-btn,
  .admin-costs-profits-btn,
  .admin-inventory-btn,
  .admin-products-btn,
  .admin-promo-codes-btn,
  .admin-statistics-btn,
  .admin-session-preferences-btn,
  .admin-summary-btn,
  .admin-cook-btn,
  .admin-staff-btn,
  .admin-button-1-btn,
  .admin-button-2-btn {
    width: 160px;
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .admin-panel-page {
    padding: 0.5rem;
  }
  
  .admin-background-panel {
    padding: 0.5rem;
  }
  
  .admin-container {
    padding: 1rem;
  }
  
  .admin-title {
    font-size: 1.8rem;
  }
  
  .admin-close-btn {
    font-size: 1.5rem;
  }
  
  .admin-action-buttons-row {
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
    width: 100%;
  }
  
  .admin-save-btn,
  .admin-revert-btn,
  .admin-customers-btn,
  .admin-costs-profits-btn,
  .admin-inventory-btn,
  .admin-products-btn,
  .admin-promo-codes-btn,
  .admin-statistics-btn,
  .admin-summary-btn,
  .admin-cook-btn,
  .admin-staff-btn,
  .admin-button-1-btn,
  .admin-button-2-btn,
  .admin-site-map-btn-new,
  .admin-back-button,
  .logout-button {
    width: 180px !important;
    min-width: auto !important;
    max-width: 180px !important;
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
  }
}

/* Narrow screens - make buttons narrower to override inline styles */
@media (max-width: 600px) {
  .admin-staff-btn,
  .admin-customers-btn,
  .admin-inventory-btn,
  .admin-products-btn,
  .admin-loyalty-btn,
  .admin-promo-codes-btn,
  .admin-costs-profits-btn,
  .admin-statistics-btn,
  .admin-session-preferences-btn,
  .admin-summary-btn,
  .admin-cook-btn,
  .admin-qr-generator-btn,
  .admin-button-1-btn,
  .admin-button-2-btn,
  .admin-management-btn,
  .admin-site-map-btn-new,
  .admin-back-button,
  .logout-button {
    width: 160px !important;
    min-width: auto !important;
    max-width: 160px !important;
  }
}

/* Very narrow screens - make buttons even narrower */
@media (max-width: 400px) {
  .admin-staff-btn,
  .admin-customers-btn,
  .admin-inventory-btn,
  .admin-products-btn,
  .admin-loyalty-btn,
  .admin-promo-codes-btn,
  .admin-costs-profits-btn,
  .admin-statistics-btn,
  .admin-session-preferences-btn,
  .admin-summary-btn,
  .admin-cook-btn,
  .admin-qr-generator-btn,
  .admin-button-1-btn,
  .admin-button-2-btn,
  .admin-management-btn,
  .admin-site-map-btn-new,
  .admin-back-button,
  .logout-button {
    width: 140px !important;
    min-width: auto !important;
    max-width: 140px !important;
  }
}

/* Admin Management Page Styles */
.admin-tab-navigation {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.admin-tab-btn {
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #000000;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  outline: none;
  background-color: #6b7280;
  color: #fff;
  border-color: #374151;
}

.admin-tab-btn:hover {
  background-color: #818b9b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.admin-tab-btn.active {
  background-color: #14545c;
  border-color: #0a1a1d;
  color: #ffffff;
}

.admin-tab-btn.active:hover {
  background-color: #0d353a;
}

.admin-management-content {
  margin-top: 2rem;
}

.admin-placeholder-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 1rem;
}

.admin-placeholder-item {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid #d7ccc8;
  border-radius: 12px;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.admin-placeholder-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #8d6e63;
}

.admin-placeholder-item h3 {
  color: #3e2723;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: 'The Wanters DEMO', serif;
}

.admin-placeholder-item p {
  color: #5d4037;
  font-size: 1rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.admin-placeholder-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-placeholder-features li {
  color: #5d4037;
  font-size: 0.95rem;
  padding: 0.3rem 0;
  position: relative;
  padding-left: 1.5rem;
}

.admin-placeholder-features li::before {
  content: "•";
  color: #8d6e63;
  font-weight: bold;
  position: absolute;
  left: 0;
  font-size: 1.2rem;
}

/* Dark mode styles for admin management */
.dark-mode .admin-tab-btn {
  background-color: #374151;
  border-color: #1f2937;
  color: #d1d5db;
}

.dark-mode .admin-tab-btn:hover {
  background-color: #4b5563;
}

.dark-mode .admin-tab-btn.active {
  background-color: #14545c;
  border-color: #0a1a1d;
  color: #ffffff;
}

.dark-mode .admin-placeholder-item {
  background: rgba(0, 0, 0, 0.3);
  border-color: #5d4037;
}

.dark-mode .admin-placeholder-item:hover {
  border-color: #8d6e63;
}

.dark-mode .admin-placeholder-item h3 {
  color: #d1d5db;
}

.dark-mode .admin-placeholder-item p,
.dark-mode .admin-placeholder-features li {
  color: #9ca3af;
}

.dark-mode .admin-placeholder-features li::before {
  color: #8d6e63;
}

/* Admin Session Management Section */
.admin-session-management-section {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: rgba(245, 245, 220, 0.6);
  border: 3px solid #8d6e63;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.admin-section-subtitle {
  font-size: 1.4rem;
  font-weight: 600;
  color: #3e2723;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
  letter-spacing: 0.5px;
}

.admin-session-preferences-container {
  margin-top: 1rem;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.8);
  border: 2px solid #5d4037;
  border-radius: 12px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Dark Mode Support for Session Management */
.dark-mode .admin-session-management-section {
  background-color: rgba(26, 26, 26, 0.8);
  border-color: #8d6e63;
}

.dark-mode .admin-section-subtitle {
  color: #fff8e1;
}

.dark-mode .admin-session-preferences-container {
  background-color: rgba(62, 39, 35, 0.9);
  border-color: #5d4037;
}

/* Dream Mode Support for Session Management */
.dream-mode .admin-session-management-section {
  background-color: rgba(45, 20, 60, 0.4);
  border-color: #000000;
}

.dream-mode .admin-section-subtitle {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.dream-mode .admin-session-preferences-container {
  background-color: rgba(26, 26, 26, 0.8);
  border-color: #000000;
}

/* Dream mode styles for admin management */
.dream-mode .admin-tab-btn {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-color: #4a148c;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(124, 58, 237, 0.3);
}

.dream-mode .admin-tab-btn:hover {
  background: linear-gradient(135deg, #6a1b9a, #9333ea);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(124, 58, 237, 0.4);
}

.dream-mode .admin-tab-btn.active {
  background: linear-gradient(135deg, #14545c, #0d353a);
  border-color: #0a1a1d;
  color: #ffffff;
}

.dream-mode .admin-placeholder-item {
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid #7c3aed;
  box-shadow: 0 4px 8px rgba(124, 58, 237, 0.2);
}

.dream-mode .admin-placeholder-item:hover {
  border-color: #a855f7;
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3);
}

.dream-mode .admin-placeholder-item h3 {
  color: #1f2937;
  text-shadow: 0 2px 4px rgba(124, 58, 237, 0.3);
}

.dream-mode .admin-placeholder-item p,
.dream-mode .admin-placeholder-features li {
  color: #374151;
}

.dream-mode .admin-placeholder-features li::before {
  color: #7c3aed;
}

/* Responsive styles for admin management */
@media (max-width: 768px) {
  .admin-tab-navigation {
    flex-direction: column;
    align-items: center;
  }
  
  .admin-tab-btn {
    min-width: 250px;
    width: 100%;
    max-width: 300px;
  }
  
  .admin-placeholder-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .admin-placeholder-item {
    padding: 1.2rem;
  }
}

@media (max-width: 480px) {
  .admin-tab-btn {
    min-width: 200px;
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
  }
  
  .admin-placeholder-item {
    padding: 1rem;
  }
  
  .admin-placeholder-item h3 {
    font-size: 1.2rem;
  }
}

@media (max-width: 360px) {
  .admin-action-buttons-row {
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
    width: 100%;
  }
  
  .admin-save-btn,
  .admin-revert-btn,
  .admin-customers-btn,
  .admin-costs-profits-btn,
  .admin-inventory-btn,
  .admin-products-btn,
  .admin-promo-codes-btn,
  .admin-statistics-btn,
  .admin-summary-btn,
  .admin-cook-btn,
  .admin-staff-btn,
  .admin-button-1-btn,
  .admin-button-2-btn {
    width: 160px;
    min-width: auto;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }
}

.admin-theme-toggle-bar {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
} 

.admin-section-title-panel {
  width: 100%;
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 50%, #14545c 100%);
  border: 4px solid #0a1a1d;
  border-radius: 15px;
  margin-bottom: 1rem;
  padding: 1.5rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(255, 255, 255, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
  position: relative;
}
.admin-section-title {
  font-size: 2.8rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: 1.5px;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.admin-flavour-title-panel {
  flex: 1;
  background: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  padding: 0.7rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.admin-inventory-item h3 {
  font-size: 1.7rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.5px;
  text-align: center;
}

.dark-mode .admin-section-title-panel,
.dream-mode .admin-section-title-panel,
.dark-mode .admin-promo-title-panel,
.dream-mode .admin-promo-title-panel {
  background: #14545c;
  border: 2px solid #0a1a1d;
  color: #ffffff;
}
.dark-mode .admin-flavour-title-panel,
.dream-mode .admin-flavour-title-panel {
  background: #14545c;
  border: 2px solid #0a1a1d;
  color: #ffffff;
} 

@media (max-width: 600px) {
  .admin-promo-list {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .admin-promo-item {
    padding: 1rem;
    gap: 0.2rem;
  }
  .admin-promo-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
  }
  .admin-promo-actions {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.3rem;
  }
} 

/* Make Active and Delete buttons larger in promo actions */
.admin-promo-toggle,
.admin-promo-delete {
  padding: 0.8rem 2rem;
  font-size: 1.2rem;
  border-radius: 28px;
}

/* Ensure dark mode variants inherit the larger size */
.dark-mode .admin-promo-toggle,
.dark-mode .admin-promo-delete {
  padding: 0.8rem 2rem;
  font-size: 1.2rem;
  border-radius: 28px;
} 

/* Dark mode: Create Code button gets a black border */
.dark-mode .admin-create-code-btn {
  border: 3px solid #000;
  background-color: #7c3aed;
  color: #fff;
}
.dark-mode .admin-create-code-btn:hover:not(:disabled) {
  border: 3px solid #000;
  background-color: #a78bfa;
  color: #2d0066;
} 

/* Promo panel titles: white in light/dream, black in dark mode */
.admin-promo-title {
  color: #fff !important;
}
.dream-mode .admin-promo-title {
  color: #fff !important;
}
.dark-mode .admin-promo-title {
  color: #000 !important;
}

.admin-promo-title-edit {
  color: #fff !important;
}
.dream-mode .admin-promo-title-edit {
  color: #fff !important;
}
.dark-mode .admin-promo-title-edit {
  color: #000 !important;
} 

/* Make Revert button mystic purple like Create Code */
.admin-revert-btn {
  background-color: #7c3aed;
  color: #fff;
  border: 3px solid #4b2997;
  font-weight: 700;
  transition: background 0.2s, box-shadow 0.2s;
}
.admin-revert-btn:hover:not(:disabled) {
  background-color: #a78bfa;
  color: #2d0066;
  border-color: #4b2997;
}
.dark-mode .admin-revert-btn {
  background-color: #7c3aed;
  color: #fff;
  border: 3px solid #000;
}
.dark-mode .admin-revert-btn:hover:not(:disabled) {
  background-color: #a78bfa;
  color: #2d0066;
  border: 3px solid #000;
} 

/* Promo Code Creation Modal Styles */
.admin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-modal {
  background: #fff;
  border: 3px solid #5d4037;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  padding: 2.2rem 2rem 1.5rem 2rem;
  min-width: 320px;
  max-width: 95vw;
  width: 400px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.admin-modal-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 2.1rem;
  color: #3e2723;
  margin-bottom: 1.2rem;
  text-align: center;
  font-weight: 800;
}
.admin-modal-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}
.admin-modal-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: #3e2723;
  margin-bottom: 0.3rem;
  font-family: 'The Wanters DEMO', serif;
}
.admin-modal-input {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 2px solid #d7ccc8;
  border-radius: 7px;
  font-size: 1.1rem;
  color: #3e2723;
  background: #f5f5dc;
  font-family: 'Verdana', sans-serif;
  font-weight: 600;
  margin-bottom: 0.2rem;
  transition: border-color 0.2s;
}
.admin-modal-input:focus {
  outline: none;
  border-color: #8d6e63;
  background: #fff;
}
.admin-modal-actions {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  width: 100%;
}
.admin-modal-save-btn {
  background: #27ae60;
  color: #fff;
  border: 3px solid #1e8449;
  border-radius: 9999px;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.admin-modal-save-btn:hover {
  background: #2ecc71;
}
.admin-modal-cancel-btn {
  background: #e74c3c;
  color: #fff;
  border: 3px solid #c0392b;
  border-radius: 9999px;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.admin-modal-cancel-btn:hover {
  background: #c0392b;
}

/* Dark Mode Modal Styles */
.dark-mode .admin-modal {
  background: #2a2a2a;
  border-color: #5d4037;
}
.dark-mode .admin-modal-title {
  color: #8d6e63;
}
.dark-mode .admin-modal-label {
  color: #8d6e63;
}
.dark-mode .admin-modal-input {
  background: #f5e5c0;
  border-color: #8d6e63;
  color: #3e2723;
}
.dark-mode .admin-modal-input:focus {
  background: #fff8e1;
  border-color: #5d4037;
}
.dark-mode .admin-modal-save-btn {
  border-color: #000;
}
.dark-mode .admin-modal-cancel-btn {
  border-color: #000;
}

/* Dream Mode Modal Styles */
.dream-mode .admin-modal {
  background: #2a2a2a;
  border-color: #8a2be2;
  box-shadow: 0 10px 30px rgba(138, 43, 226, 0.3);
}
.dream-mode .admin-modal-title {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.dream-mode .admin-modal-label {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.dream-mode .admin-modal-input {
  background: #2a2a2a;
  border-color: #8a2be2;
  color: #ffffff;
}
.dream-mode .admin-modal-input:focus {
  background: #1a1a1a;
  border-color: #a855f7;
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.3);
}
.dream-mode .admin-modal-save-btn {
  border-color: #8a2be2;
  background: #8a2be2;
  color: #ffffff;
}
.dream-mode .admin-modal-save-btn:hover {
  background: #a855f7;
}
.dream-mode .admin-modal-cancel-btn {
  border-color: #8a2be2;
} 

/* Promo code usage progress bar */
.admin-promo-usage-bar-container {
  width: 90%;
  margin: 0.7rem auto 0.2rem auto;
  background: #2a2a2a;
  border-radius: 12px;
  height: 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
}
.admin-promo-usage-bar {
  height: 100%;
  border-radius: 12px 0 0 12px;
  transition: width 0.4s cubic-bezier(.4,2,.6,1);
}
.admin-promo-usage-bar.green { background: #27ae60; }
.admin-promo-usage-bar.yellow { background: #f1c40f; }
.admin-promo-usage-bar.red { background: #e74c3c; }
.admin-promo-usage-bar-label {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: 1px;
  font-family: 'The Wanters DEMO', serif;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
} 

.admin-promo-list.single-promo {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  grid-template-columns: none !important;
}
.admin-promo-list.single-promo .admin-promo-item {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}

.admin-promo-usage-bar.unlimited {
  background: #e0e0e0;
  height: 16px;
  border-radius: 8px;
  margin-bottom: 0.3rem;
  width: 100%;
  box-shadow: none;
  position: relative;
  border: none;
}
.dark-mode .admin-promo-usage-bar.unlimited {
  border: 2px solid #000;
  background: #bdbdbd;
}
.admin-promo-usage-bar-label {
  display: block;
  text-align: center;
  font-weight: 700;
  color: #3e2723;
  font-size: 1.1rem;
  margin-top: 0.2rem;
}

/* Stats Section Styles */
.admin-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

.admin-stats-panel {
  background: #f5f5f5;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-stats-panel-title {
  background: #167c7c;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  text-align: center;
  border: 1px solid #000;
}

.admin-stats-panel-title h3 {
  color: #fff;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.7rem;
  letter-spacing: 1px;
}

.admin-stats-panel-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Time Selector Buttons */
.admin-stats-time-selector {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.admin-stats-time-btn {
  background: #e0e0e0;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.admin-stats-time-btn:hover {
  background: #d0d0d0;
}

.admin-stats-time-btn.active {
  background: #2E7D5A;
  color: white;
}

/* Metrics Display */
.admin-stats-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-stats-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.admin-stats-metric-label {
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-metric-value {
  font-weight: bold;
  color: #2E7D5A;
  font-size: 1.1rem;
}

/* Table Styles */
.admin-stats-table {
  background: white;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.admin-stats-table-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  background: #2E7D5A;
  color: white;
  padding: 0.75rem;
  font-weight: bold;
  text-align: center;
}

.admin-stats-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  padding: 0.75rem;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.admin-stats-table-row:last-child {
  border-bottom: none;
}

.admin-stats-table-row:nth-child(even) {
  background: #f9f9f9;
}

/* Bar Chart Styles */
.admin-stats-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.admin-stats-bar-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.admin-stats-bar-label {
  min-width: 100px;
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-bar-container {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0.5rem;
}

.admin-stats-bar {
  height: 20px;
  border-radius: 10px;
  min-width: 20px;
  transition: width 0.3s ease;
}

.admin-stats-bar-value {
  font-weight: bold;
  color: #4B2E19;
  min-width: 30px;
}

/* Day Chart Styles */
.admin-stats-day-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-stats-day-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.admin-stats-day-item span:first-child {
  min-width: 80px;
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-day-bar {
  height: 15px;
  background: #2E7D5A;
  border-radius: 7px;
  flex: 1;
  max-width: 200px;
  transition: width 0.3s ease;
}

.admin-stats-day-item span:last-child {
  font-weight: bold;
  color: #2E7D5A;
  min-width: 30px;
}

/* Time Chart Styles */
.admin-stats-time-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-stats-time-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.admin-stats-time-item span:first-child {
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-time-item span:last-child {
  font-weight: bold;
  color: #2E7D5A;
}

/* Subsection Styles */
.admin-stats-subsection {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-stats-subsection h4 {
  margin: 0;
  color: #4B2E19;
  font-size: 1.35rem;
  font-weight: bold;
  border-bottom: 2px solid #2E7D5A;
  padding-bottom: 0.25rem;
  text-align: center;
  letter-spacing: 0.5px;
}

/* Dark Mode Styles */
.dark-mode .admin-stats-panel {
  background: #222;
  border: 3px solid #5d4037;
}

.dark-mode .admin-stats-metric {
  background: #3a3a3a;
  border-color: #555;
}

.dark-mode .admin-stats-metric-label {
  color: #e0e0e0;
}

.dark-mode .admin-stats-table {
  background: #3a3a3a;
  border-color: #555;
}

.dark-mode .admin-stats-table-row {
  border-color: #555;
  color: #e0e0e0;
}

.dark-mode .admin-stats-table-row:nth-child(even) {
  background: #333;
}

.dark-mode .admin-stats-day-item,
.dark-mode .admin-stats-time-item {
  background: #3a3a3a;
  border-color: #555;
  color: #e0e0e0;
}

.dark-mode .admin-stats-day-item span:first-child,
.dark-mode .admin-stats-time-item span:first-child {
  color: #e0e0e0;
}

.dark-mode .admin-stats-subsection h4 {
  color: #e0e0e0;
}

/* Dream Mode Styles */
.dream-mode .admin-stats-panel {
  background: #2a2a2a;
  border: 2px solid #8a2be2;
}

.dream-mode .admin-stats-panel-title {
  background: #8a2be2;
  border: 2px solid #8a2be2;
}

.dream-mode .admin-stats-metric {
  background: rgba(42, 42, 42, 0.9);
  border-color: #8a2be2;
  color: white;
}

.dream-mode .admin-stats-metric-label {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dream-mode .admin-stats-metric-value {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dream-mode .admin-stats-time-btn {
  background: rgba(42, 42, 42, 0.9);
  color: white;
  border: 1px solid #8a2be2;
}

.dream-mode .admin-stats-time-btn:hover {
  background: rgba(138, 43, 226, 0.3);
}

.dream-mode .admin-stats-time-btn.active {
  background: #8a2be2;
  border-color: #8a2be2;
}

/* Responsive Design */
@media (max-width: 768px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .admin-stats-time-selector {
    flex-direction: column;
    align-items: stretch;
  }
  
  .admin-stats-table-header,
  .admin-stats-table-row {
    grid-template-columns: 1fr 80px 80px 80px;
    font-size: 0.9rem;
  }
  
  .admin-stats-bar-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  
  .admin-stats-bar-label {
    min-width: auto;
  }
}

.admin-stats-leaderboard {
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
  margin-bottom: 1rem;
  overflow: hidden;
}
.admin-stats-leaderboard-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  background: #167c7c;
  color: white;
  font-weight: bold;
  padding: 0.75rem;
  text-align: center;
}
.admin-stats-leaderboard-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 0.75rem;
  border-bottom: 1px solid #eee;
  text-align: center;
  font-weight: 500;
  color: #4B2E19;
  background: #f9f9f9;
}
.admin-stats-leaderboard-row:nth-child(even) {
  background: #f5f5f5;
}
.admin-stats-leaderboard-row:last-child {
  border-bottom: none;
}

.dark-mode .admin-stats-leaderboard {
  background: #2a2a2a;
  border-color: #555;
}
.dark-mode .admin-stats-leaderboard-header {
  background: #167c7c;
  color: #fff;
}
.dark-mode .admin-stats-leaderboard-row {
  color: #e0e0e0;
  background: #333;
  border-color: #555;
}
.dream-mode .admin-stats-leaderboard-header {
  background: #167c7c;
  color: #fff;
}
.dream-mode .admin-stats-leaderboard {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
}
.dream-mode .admin-stats-leaderboard-row {
  color: #fff;
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}

:root {
  --cream-brown-bg: #f8f3e6;
  --cream-brown-text: #4B2E19;
  --admin-panel-bg-dark: #3a2320;
}

.dark-mode input,
.dark-mode .admin-promo-text-box,
.dark-mode .admin-modal-input,
.dark-mode .admin-stats-table,
.dark-mode .admin-stats-table-row,
.dark-mode .admin-stats-leaderboard,
.dark-mode .admin-stats-leaderboard-row {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
  border-color: #555;
}

.dark-mode .admin-stats-table-header,
.dark-mode .admin-stats-leaderboard-header {
  background: #167c7c;
  color: #fff;
}

.dark-mode .admin-stats-metric,
.dark-mode .admin-stats-panel-content input,
.dark-mode .admin-stats-panel-content .admin-promo-text-box {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
}

.dark-mode .privacy-policy-panel,
.dark-mode .privacy-policy-content,
.dark-mode .privacy-policy-box {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
}

.dark-mode .admin-stats-day-bar {
  background: #167c7c;
}

.dark-mode .admin-stats-day-item,
.dark-mode .admin-stats-time-item {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
  border: 2px solid #3a2a1a !important;
}

.dark-mode .admin-stats-panel {
  background: var(--admin-panel-bg-dark);
  border: 2.5px solid #000;
}

.dark-mode .admin-stats-subsection h4 {
  color: #f8f3e6 !important;
  text-shadow: 0 0 1px #000, 0 1px 1px #000, 1px 0 1px #000, -1px 0 1px #000;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  min-height: 100vh;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--text-color);
}

.app-header {
  background-color: #4CAF50;
  color: white;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.app-header h1 {
  margin: 0.5rem 0;
  font-size: 2.2rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.app-header nav {
  display: flex;
  gap: 2rem;
  margin-top: 0.5rem;
  width: 100%;
  justify-content: center;
}

.nav-link {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

main {
  flex: 1;
  background-color: var(--bg-color);
}

.back-button {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.back-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.dark-mode .back-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  .app-header {
    padding: 1rem;
  }
  
  .app-header h1 {
    font-size: 1.8rem;
  }
  
  main {
    padding: 1rem;
  }
}

@media (min-width: 768px) {
  .app-header h1 {
    font-size: 2.5rem;
  }

  .app-header h2 {
    font-size: 1.8rem;
  }

  .back-button {
    font-size: 1.1rem;
  }
} 
/* ===============================================================================
                                CART PAGE STYLING
=============================================================================== */

/* Main cart page container */
.cart-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 1rem;
  position: relative;
}

.cart-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.cart-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Background panel similar to contacts page */
.cart-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Main container inside background panel */
.cart-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Orders title panel */
.orders-title-panel {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 400px;
}

.orders-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

/* Navigation button */
.cart-navigation {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  width: 100%;
}

.nav-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723;
}

.nav-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
  text-decoration: none;
}

/* Cart content area */
.cart-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Empty cart state */
.empty-cart {
  text-align: center;
  padding: 3rem 2rem;
}

.empty-cart p {
  font-size: 1.5rem;
  color: #5d4037;
  margin: 0;
  font-weight: 600;
}

/* Cart loading state */
.cart-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.cart-loading p {
  font-size: 1.5rem;
  color: #5d4037;
  margin: 1rem 0 0 0;
  font-weight: 600;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e0e0e0;
  border-top: 4px solid #8d6e63;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

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

/* Typing animation cursor effect for search inputs */
.ingredients-selection-search-input:not(:focus)::placeholder {
  animation: typing-cursor 1s infinite;
}

@keyframes typing-cursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

/* Cart items container */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 2rem;
}

/* Individual cart item */
.cart-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.cart-item-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
  width: 100%;
}

.cart-item-name {
  font-size: 2.5rem;
  font-weight: 900;
  color: #3e2723;
  margin-bottom: 1rem;
  text-align: center;
}

.cart-item-size-price {
  font-size: 1.7rem;
  font-weight: 900;
  color: #3e2723;
  margin-bottom: 1rem;
  text-align: center;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.size-unit {
  font-size: 0.7em; /* 30% smaller - 70% of parent font size */
  font-weight: 900;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.cart-item-size {
  font-size: 1.1rem;
  color: #5d4037;
  margin-bottom: 0.25rem;
}

.cart-item-price {
  font-size: 1.2rem;
  color: #5d4037;
  font-weight: 600;
}

/* Quantity controls */
.cart-item-quantity {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.quantity-button {
  width: 45px;
  height: 45px;
  border: 3px solid #3e2723;
  background-color: #8d6e63;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.quantity-button:hover {
  background-color: #a1887f;
  transform: scale(1.05);
}

.quantity-value {
  font-size: 1.4rem;
  font-weight: bold;
  color: #3e2723;
  min-width: 40px;
  text-align: center;
  background-color: rgba(141, 110, 99, 0.1);
  padding: 0.5rem;
  border-radius: 8px;
}

/* Subtotal and remove button */
.cart-item-subtotal {
  font-size: 1.5rem;
  font-weight: 900;
  color: #d32f2f;
  margin-bottom: 1rem;
  text-align: center;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.remove-item-button {
  padding: 0.8rem 1.5rem;
  background-color: #d32f2f;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.remove-item-button:hover {
  background-color: #f44336;
  transform: translateY(-2px);
}

/* Cart summary */
.cart-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2rem;
  border-top: 3px solid #d7ccc8;
  width: 100%;
  max-width: 400px;
}

.cart-totals {
  margin-bottom: 1.5rem;
  text-align: center;
}

.cart-total-items, 
.cart-total-price {
  font-size: 1.4rem;
  margin: 0.5rem 0;
  color: #3e2723;
  font-weight: 900;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.cart-total-price {
  font-size: 2.2rem;
  font-weight: 900;
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.checkout-button {
  padding: 1.2rem 2.5rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.checkout-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* ===============================================================================
                                DARK MODE STYLES
=============================================================================== */

.dark-mode.cart-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
}

.dark-mode.cart-page::before {
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
}

.dark-mode.cart-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .cart-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .cart-container {
  background-color: rgba(62, 39, 35, 0.9);
  border: 3px solid #000000;
}

.dark-mode .orders-title-panel {
  background-color: #8d6e63;
  border: 2px solid #000000;
}

.dark-mode .orders-title {
  color: #8d6e63;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.dark-mode .nav-button {
  background-color: #8d6e63;
  border: 3px solid #000000;
  color: #fff8e1;
}

.dark-mode .nav-button:hover {
  background-color: #a1887f;
  color: #fff8e1;
}

.dark-mode .empty-cart p {
  color: #fff8e1;
}

.dark-mode .cart-loading p {
  color: #fff8e1;
}

.dark-mode .loading-spinner {
  border: 4px solid #424242;
  border-top: 4px solid #a1887f;
}

.dark-mode .cart-item {
  background-color: #8d6e63;
  border: 3px solid #000000;
}

.dark-mode .cart-item-name {
  color: #fff8e1;
}

.dark-mode .cart-item-size-price {
  color: #000000;
  text-shadow: none;
}

.dark-mode .size-unit {
  color: #000000;
  text-shadow: none;
}

.dark-mode .cart-item-size,
.dark-mode .cart-item-price {
  color: #d7ccc8;
}

.dark-mode .quantity-button:hover {
  background-color: #a1887f;
}

.dark-mode .quantity-value {
  color: #fff !important;
  background-color: transparent;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .cart-item-subtotal {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .remove-item-button {
  border: 3px solid #000000;
}

.dark-mode .cart-totals {
  border-top: 3px solid #666666;
}

.dark-mode .cart-total-items {
  color: #c4a690 !important;
}

.dark-mode .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .checkout-button {
  background-color: #8d6e63;
  border: 3px solid #000000;
  color: #fff8e1;
}

.dark-mode .checkout-button:hover {
  background-color: #a1887f;
}

/* ===============================================================================
                                DREAM MODE STYLES
=============================================================================== */

.dream-mode.cart-page {
  background-color: #222;
}

.dream-mode.cart-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.cart-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .cart-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .cart-container {
  background-color: rgba(26, 26, 26, 0.9);
  border: 3px solid #000000;
}

.dream-mode .orders-title-panel {
  background-color: rgba(45, 20, 60, 0.95);
  border: 2px solid #000000;
}

.dream-mode .orders-title {
  color: #ffffff;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  animation: dreamText 20s infinite linear;
}

@keyframes dreamText {
  0% {
    color: #4b0082; /* Indigo (darker purple) */
  }
  20% {
    color: #000080; /* Navy (darker blue) */
  }
  40% {
    color: #0072b1; /* Darker light blue */
  }
  60% {
    color: #2e8b57; /* Sea green (darker light green) */
  }
  80% {
    color: #006400; /* Dark green */
  }
  100% {
    color: #4b0082; /* Back to indigo for smooth loop */
  }
}

.dream-mode .nav-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .nav-button:hover {
  background-color: #a1887f;
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4);
  animation: dreamSparkle 1.5s ease-in-out infinite alternate;
}

.dream-mode .empty-cart p {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .cart-loading p {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .loading-spinner {
  border: 4px solid #333333;
  border-top: 4px solid #ff00cc;
  box-shadow: 0 0 10px rgba(255, 0, 204, 0.5);
}

.dream-mode .cart-item {
  background-color: rgba(120, 120, 120, 0.6);
  border: 3px solid #000000;
}

.dream-mode .cart-item-name {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .cart-item-size-price {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .size-unit {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .cart-item-size,
.dream-mode .cart-item-price {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .quantity-button {
  background-color: #8d6e63;
  border: 3px solid #000000;
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream-mode .quantity-button:hover {
  background-color: #a1887f;
  color: #ffffff;
  box-shadow: 
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6);
  animation: dreamSparkle 1.5s ease-in-out infinite alternate;
}

.dream-mode .quantity-value {
  color: #ffffff;
  background-color: rgba(45, 20, 60, 0.3);
  text-shadow: none;
  animation: none;
}

.dream-mode .cart-item-subtotal {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .remove-item-button {
  background-color: #d32f2f !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .remove-item-button:hover {
  background-color: #f44336 !important;
  color: #000000 !important;
  transform: translateY(-2px);
  box-shadow: 
    0 0 15px rgba(220, 20, 60, 0.8),
    0 0 25px rgba(255, 69, 0, 0.6);
}

.dream-mode .cart-totals {
  border-top: 3px solid #555555;
}

.dream-mode .cart-total-items {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .checkout-button {
  background-color: #8d6e63;
  border: 3px solid #000000 !important;
  color: #000000;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .checkout-button:hover {
  background-color: #a1887f;
  color: #ffffff;
  border: 3px solid #000000 !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 128, 0, 0.8),
    0 0 25px rgba(34, 139, 34, 0.6),
    0 0 35px rgba(46, 139, 87, 0.4);
  animation: dreamSparkle 1.5s ease-in-out infinite alternate;
}

/* Additional overrides for any remaining glow effects */
.dream-mode .cart-page .cart-item-size,
.dream-mode .cart-page .cart-item-price {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
}

.dream-mode .cart-page .cart-item-size-price,
.dream-mode .cart-page .cart-total-items {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
}

.dream-mode .cart-page .size-unit {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
}

.dream-mode .cart-page .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
}

.dark-mode .cart-page .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Dream mode remove button override - ensure red background with black text */
.dream-mode .cart-page .remove-item-button {
  background-color: #d32f2f !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
}

.dream-mode .cart-page .remove-item-button:hover {
  background-color: #f44336 !important;
  color: #000000 !important;
}

@keyframes dreamSparkle {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-2px) rotate(0deg) scale(1);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-2px) rotate(1deg) scale(1.02);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-2px) rotate(0deg) scale(1.04);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-2px) rotate(-1deg) scale(1.02);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-2px) rotate(0.5deg) scale(1.01);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-2px) rotate(0deg) scale(1);
  }
}

/* ===============================================================================
                            RESPONSIVE DESIGN
=============================================================================== */

/* Mobile First - these styles apply to screens 480px and larger */
@media (min-width: 480px) {
  .cart-item {
    max-width: 600px;
  }
  
  .orders-title {
    font-size: 2.8rem;
  }
}

/* Tablet styles - 768px and larger */
@media (min-width: 768px) {
  .cart-page {
    padding: 2rem;
  }
  
  .cart-background-panel {
    padding: 2rem;
  }
  
  .cart-container {
    padding: 3rem;
  }
  
     .cart-item {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     max-width: 900px;
     padding: 2.5rem;
   }
   
   .cart-item-details {
     flex: 1;
     align-items: flex-start;
     text-align: left;
     margin-bottom: 0;
     margin-right: 2rem;
   }
   
   .cart-item-name {
     font-size: 3rem;
   }
   
       .cart-item-size-price {
      font-size: 2.2rem;
    }
  
  .cart-item-quantity {
    margin-bottom: 0;
    margin-right: 2rem;
  }
  
  .cart-item-subtotal {
    margin-bottom: 0;
    margin-right: 1rem;
    font-size: 1.6rem;
  }
  
  .orders-title {
    font-size: 4rem;
  }
}

 /* Desktop styles - 1024px and larger */
 @media (min-width: 1024px) {
   .cart-background-panel {
     max-width: 1000px;
   }
   
   .cart-item {
     max-width: 1000px;
   }
   
   .cart-item-name {
     font-size: 3.2rem;
   }
   
       .cart-item-size-price {
      font-size: 2.4rem;
    }
   
   .orders-title {
     font-size: 3.2rem;
   }
 }

 /* Large desktop styles - 1200px and larger */
 @media (min-width: 1200px) {
   .cart-background-panel {
     max-width: 1200px;
   }
   
   .cart-item {
     max-width: 1100px;
   }
   
   .cart-item-name {
     font-size: 3.5rem;
   }
   
       .cart-item-size-price {
      font-size: 2.7rem;
    }
   
   .orders-title {
     font-size: 3.5rem;
   }
 } 
.contact-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.contact-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.contact-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.contact-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 850px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.contact-container {
  width: 100%;
  max-width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.contact-title-panel {
  font-weight: bold;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 400px;
}

.contact-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

.home-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
  margin-bottom: 2rem;
}

.home-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
}

.contact-details {
  width: 100%;
  text-align: center;
  padding: 2rem;
  margin-bottom: 2rem;
  background-color: rgba(141, 110, 99, 0.1);
  border-radius: 8px;
  border: 2px solid #d7ccc8;
}

.contact-details p {
  margin: 0.5rem 0;
  font-size: 1.2rem;
  color: #3e2723;
  line-height: 1.6;
}

.contact-details-placeholder {
  width: 100%;
  text-align: center;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 2px dashed #d7ccc8;
  border-radius: 8px;
}

.contact-details-placeholder p {
  margin: 0.5rem 0;
  font-size: 1.2rem;
  color: #5d4037;
}

.contact-actions {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
}

.privacy-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
}

.privacy-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
  text-decoration: none;
}

/* Dark mode styles */
.dark-mode.contact-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode.contact-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode.contact-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .contact-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .contact-container {
  background-color: rgba(62, 39, 35, 0.9);
  color: #fff8e1;
}

.dark-mode .contact-title {
  text-shadow: none;
}

.dark-mode .contact-title-panel {
  background-color: #3e2723;
  border: 3px solid #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark-mode .contact-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dark-mode .contact-details {
  border-color: #5d4037;
  background-color: #8d6e63;
}

.dark-mode .contact-details p {
  color: #fff8e1;
}

.dark-mode .contact-details-placeholder {
  border-color: #5d4037;
}

.dark-mode .contact-details-placeholder p {
  color: #d7ccc8;
}

/* Light mode button base styling */
.contact-page:not(.dark-mode):not(.dream-mode) .home-button,
.contact-page:not(.dark-mode):not(.dream-mode) .privacy-button {
  border: 3px solid #3e2723 !important;
  border-radius: 9999px !important; /* Ensure pill shape in light mode */
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  background-color: #8d6e63 !important;
  color: white !important;
  display: inline-block !important;
  text-decoration: none !important;
}

/* Dark mode button base styling with ultra-high specificity */
body.dark-mode .contact-page .home-button,
body.dark-mode .contact-page .privacy-button,
.dark-mode.contact-page .home-button,
.dark-mode.contact-page .privacy-button,
.dark-mode .contact-page .home-button,
.dark-mode .contact-page .privacy-button,
.dark-mode .home-button,
.dark-mode .privacy-button {
  border: 3px solid #000000 !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  text-decoration: none !important;
  font-family: 'The Wanters DEMO', serif !important;
}

/* Dark mode home button glow with ultra-high specificity */
body.dark-mode .contact-page .home-button:hover,
.dark-mode.contact-page .home-button:hover,
.dark-mode .contact-page .home-button:hover,
.dark-mode .home-button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  background-color: #a1887f !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  text-decoration: none !important;
}

/* Dark mode privacy policy button glow with ultra-high specificity */
body.dark-mode .contact-page .privacy-button:hover,
.dark-mode.contact-page .privacy-button:hover,
.dark-mode .contact-page .privacy-button:hover,
.dark-mode .privacy-button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  background-color: #a1887f !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  text-decoration: none !important;
}

@media (max-width: 768px) {
  .contact-title {
    font-size: 2.5rem;
  }
  
  .contact-background-panel {
    width: 98%;
    max-width: 600px;
  }
  
  .contact-container {
    padding: 1.5rem;
  }
  
  .contact-details {
    padding: 1.5rem;
    margin: 0 0 2rem 0;
  }
  
  .contact-details p {
    font-size: 1.1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none;
    line-height: 1.7;
  }
}

@media (max-width: 480px) {
  .contact-background-panel {
    width: 98%;
    max-width: 450px;
    padding: 1rem;
  }
  
  .contact-container {
    padding: 1.25rem;
  }
  
  .contact-details {
    padding: 1.25rem;
    margin: 0 0 2rem 0;
  }
  
  .contact-details p {
    font-size: 1rem;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none;
  }
}

@media (max-width: 360px) {
  .contact-background-panel {
    width: 99%;
    max-width: 360px;
    padding: 0.25rem;
  }
  
  .contact-container {
    padding: 0.5rem;
  }
  
  .contact-details {
    padding: 0.75rem;
    margin: 0 0 2rem 0;
    width: 100%;
    box-sizing: border-box;
  }
  
  .contact-details p {
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    hyphens: none;
    word-break: break-word;
    text-align: center;
    margin: 0.3rem 0;
  }
  
  .contact-details .email-address {
    font-size: 0.8rem;
    font-weight: 600;
    word-break: break-all;
    overflow-wrap: anywhere;
    letter-spacing: -0.8px;
    transform: scaleX(0.95);
    transform-origin: center;
  }
}

@media (max-width: 340px) {
  .contact-background-panel {
    width: 99%;
    max-width: 340px;
    padding: 0.15rem;
  }
  
  .contact-container {
    padding: 0.35rem;
  }
  
  .contact-details {
    padding: 0.5rem 0.75rem;
    margin: 0 0 2rem 0;
    width: 100%;
    box-sizing: border-box;
  }
  
  .contact-details p {
    font-size: 0.85rem;
    line-height: 1.3;
    margin: 0.25rem 0;
  }
  
  .contact-details .email-address {
    font-size: 0.75rem;
    font-weight: 600;
    word-break: break-all;
    overflow-wrap: anywhere;
    letter-spacing: -1px;
    transform: scaleX(0.9);
    transform-origin: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Dream mode styles */
.dream-mode.contact-page {
  background-color: #222;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
    linear-gradient(45deg, transparent 24%, rgba(75, 0, 130, 0.05) 25%, rgba(75, 0, 130, 0.05) 26%, transparent 27%, transparent 74%, rgba(138, 43, 226, 0.05) 75%, rgba(138, 43, 226, 0.05) 76%, transparent 77%),
    linear-gradient(-45deg, transparent 24%, rgba(102, 51, 153, 0.05) 25%, rgba(102, 51, 153, 0.05) 26%, transparent 27%, transparent 74%, rgba(60, 30, 80, 0.05) 75%, rgba(60, 30, 80, 0.05) 76%, transparent 77%);
  background-size: cover, 300px 300px, 300px 300px, 60px 60px, 60px 60px;
  background-position: center, 0 0, 150px 150px, 0 0, 30px 30px;
  background-blend-mode: color-burn;
}

.dream-mode.contact-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.contact-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .contact-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream-mode .contact-container {
  border: 3px solid #000000;
}

.dream-mode .contact-title {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  animation: none !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dream-mode .contact-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .contact-details p {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: none;
}

/* Ensure dream mode contact details have clean black text */
.dream-mode .contact-details p,
.dream-mode .contact-details span,
.dream-mode .contact-details a {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
}

/* Dream mode responsive text fixes */
@media (max-width: 768px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
}

@media (max-width: 480px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
}

@media (max-width: 360px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
  
  .dream-mode .contact-details .email-address {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
}

@media (max-width: 340px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
  
  .dream-mode .contact-details .email-address {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
}

/* Dream mode button base styling - black text when idle */
.dream-mode .home-button:not(:hover),
.dream-mode .privacy-button:not(:hover) {
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}

/* Dream mode psychedelic button hover effects - white text on hover */
.dream-mode .home-button:hover,
.dream-mode .privacy-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  animation: dreamSparkleContactLanding 1.5s ease-in-out infinite alternate !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
}

@keyframes dreamSparkleContactLanding {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
} 
/* ===============================================================================
                              CUSTOMER STATS PAGE STYLING
=============================================================================== */

/* Main stats page container - matching app's dual geometry pattern */
.customer-stats-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  background-attachment: fixed;
  padding: 1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  overflow-y: auto;
  font-family: 'The Wanters DEMO', sans-serif;
  pointer-events: auto;
  
  /* Hide scrollbar while maintaining scroll functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
.customer-stats-container::-webkit-scrollbar {
  display: none;
}

/* Dual geometry background patterns - exactly like other pages */
.customer-stats-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.customer-stats-container::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Background panel matching app structure */
.stats-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  max-height: calc(100vh - 2rem);
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  margin: 1rem auto;
  overflow: hidden;
}

/* Main container inside background panel */
.stats-main-container {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 5rem);
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  overflow-y: auto;
  
  /* Hide scrollbar while maintaining scroll functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
.stats-main-container::-webkit-scrollbar {
  display: none;
}

/* Header with title and close button */
.customer-stats-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  width: 100%;
  position: relative;
}

/* Title panel matching app style */
.stats-title-panel {
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  padding: 1rem 2rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 400px;
}

.stats-title-panel h2 {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

/* Close button */
.close-btn {
  background: #8d6e63;
  border: 3px solid #3e2723;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.close-btn:hover {
  background: #a1887f;
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Content area */
.customer-stats-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Individual stat sections */
.stats-section {
  width: 100%;
  max-width: 800px;
  background-color: rgba(255, 255, 255, 0.95);
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.stats-section h3 {
  font-size: 2rem;
  font-weight: 900;
  color: #3e2723;
  margin: 0 0 1.5rem 0;
  text-align: center;
}

/* User info and purchase stats */
.user-info, .purchase-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  background-color: rgba(245, 245, 220, 0.9);
}

.stat-label {
  font-size: 1rem;
  color: #5d4037;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 900;
  color: #3e2723;
}

/* Progress bars */
.progress-info {
  text-align: center;
}

.progress-info p {
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
  color: #3e2723;
  font-weight: 600;
}

.progress-bar {
  width: 100%;
  height: 20px;
  border: 2px solid #8d6e63;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background-color: rgba(245, 245, 220, 0.9);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #8d6e63, #5d4037);
  border-radius: 8px;
  transition: width 0.3s ease;
}

/* Flavor breakdown */
.flavor-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.flavor-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  background-color: rgba(245, 245, 220, 0.9);
}

.flavor-name {
  font-weight: 900;
  font-size: 1.1rem;
  color: #3e2723;
}

.flavor-counts {
  font-size: 1rem;
  color: #5d4037;
  font-weight: 600;
}

/* Achievements grid */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.achievement-card {
  padding: 1.5rem;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  background-color: rgba(245, 245, 220, 0.9);
  transition: all 0.3s ease;
  position: relative;
  text-align: center;
}

.achievement-card.unlocked {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #5d4037;
}



.achievement-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  text-align: center;
}

.achievement-name {
  font-weight: 900;
  font-size: 1.7rem;
  color: #5d4037;
  text-align: center;
  text-shadow: none; /* No outline in light mode */
  letter-spacing: 0.01em;
  margin: 0 auto 0.2em auto;
  display: block;
  /* Light mode panel */
  background: rgba(245, 245, 220, 0.8);
  border: 2px solid #8d6e63;
  border-radius: 12px;
  padding: 0.8rem 1.2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.achievement-card.unlocked .achievement-name {
  color: #3e2723;
}



.dark .achievement-name {
  color: #8d6e63 !important;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000 !important;
  /* Dark mode panel */
  background: rgba(62, 39, 35, 0.9);
  border: 2px solid #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dream .achievement-name {
  color: #00ffff; /* Cyan text for dream mode */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* 1px black outline around text */
  animation: none; /* Override color cycling animation */

/* Override for locked secret achievements - more specific than general rule */
.dream .hidden-achievement:not(.completed) .achievement-name,
body.dream .hidden-achievement:not(.completed) .achievement-name,
.dream-mode .hidden-achievement:not(.completed) .achievement-name {
  color: #4a7c7c !important; /* Darker inactive teal for locked secret achievements */
  text-shadow: none !important;
}
  /* Dream mode panel - match the achievements title banner */
  background: rgba(45, 20, 60, 0.95); /* Match the achievements title panel color */
  border: 2px solid #000000; /* Black border instead of purple */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Dream mode overrides for all achievement tiers to ensure cyan color */
.dream .achievement-card.unlocked[data-tier="1"] .achievement-name {
  color: #00ffff !important; /* Cyan text for dream mode - Tier 1 */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream .achievement-card.unlocked[data-tier="2"] .achievement-name {
  color: #00ffff !important; /* Cyan text for dream mode - Tier 2 */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream .achievement-card.unlocked[data-tier="3"] .achievement-name {
  color: #00ffff !important; /* Cyan text for dream mode - Tier 3 */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  background-color: #1a1a1a !important; /* Dark grey background for dream mode tier 3 */
  border: 2px solid #000000 !important; /* Black border */
}

.achievement-tier {
  font-size: 1.5rem;
}

.achievement-description {
  margin: 0.5rem 0 1rem 0;
  font-size: 1.12rem;
  color: #5d4037;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
}

.dark .achievement-description {
  color: #fff8e1;
}

.dream .achievement-description {
  color: #fff !important;
  text-shadow: none !important;
}

.achievement-progress {
  margin-top: 1rem;
}

.progress-text {
  font-size: 1rem;
  font-weight: 600;
  color: #3e2723;
  display: block;
  margin-bottom: 0.5rem;
  text-align: center;
}

.achievement-tiers-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 0.5em;
}

.achievement-tier-icon {
  font-size: 1.2em;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.achievement-tier-icon.active {
  opacity: 1;
  color: #ffd700;
  text-shadow: 0 0 4px #000;
}

/* Dark mode override for tier 3 achievement medals - use dark brown instead of gold */
.dark .achievement-tier-icon.active {
  color: #5d4037;
  text-shadow: 0 0 4px #000;
}

/* ===============================================================================
                                DARK MODE STYLES
=============================================================================== */

.customer-stats-container.dark {
  background-color: #3e2723;
  background-blend-mode: multiply;
}

.customer-stats-container.dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.customer-stats-container.dark::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark .stats-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border-color: #000000;
}

.dark .stats-main-container {
  background-color: rgba(62, 39, 35, 0.9);
  border-color: #000000;
}

.dark .stats-title-panel {
  background-color: #3e2723;
  border-color: #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark .stats-title-panel h2 {
  color: #8d6e63 !important;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000 !important;
  animation: none;
}

.dark .close-btn {
  background: #8d6e63;
  border-color: #000000;
  color: #000000;
}

.dark .close-btn:hover {
  background: #a1887f;
  color: #000000;
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.dark .stats-section {
  background-color: rgba(62, 39, 35, 0.95);
  border-color: #000000;
}

.dark .stats-section h3 {
  color: #8d6e63;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
}

.dark .stat-item {
  background-color: #8d6e63;
  border-color: #5d4037;
}

.dark .stat-label {
  color: #fff8e1;
}

.dark .stat-value {
  color: #fff8e1;
}

.dark .progress-info p {
  color: #fff8e1;
}

.dark .progress-bar {
  background-color: #8d6e63;
  border-color: #5d4037;
}

.dark .progress-fill {
  background: linear-gradient(135deg, #8d6e63, #5d4037);
}

.dark .flavor-item {
  background-color: #8d6e63;
  border-color: #5d4037;
}

.dark .flavor-name {
  color: #fff8e1;
}

.dark .flavor-counts {
  color: #fff8e1;
}

.dark .achievement-card {
  background-color: #8d6e63;
  border-color: #5d4037;
}

/* Override for secret achievements to ensure dark brown color */
.dark .achievement-card.hidden-achievement.unlocked.completed {
  background-color: #3e2723 !important; /* Dark brown matching tier 3 achievements */
  border-color: #000000 !important;
}

/* Nuclear option - force dark brown color for secret achievements with maximum specificity */
body.dark .achievement-card.hidden-achievement.unlocked.completed,
.dark-mode .achievement-card.hidden-achievement.unlocked.completed,
html.dark .achievement-card.hidden-achievement.unlocked.completed,
html body.dark .achievement-card.hidden-achievement.unlocked.completed {
  background-color: #3e2723 !important; /* FORCE dark brown matching tier 3 achievements */
  background: #3e2723 !important; /* Override any background shorthand */
  border-color: #000000 !important;
}

.dark .achievement-card.unlocked {
  background-color: rgba(62, 39, 35, 0.95);
  border-color: #000000;
}

.dark .achievement-description {
  color: #fff8e1;
}

.dark .progress-text {
  color: #fff8e1;
}

/* ===============================================================================
                                DREAM MODE STYLES
=============================================================================== */

.customer-stats-container.dream {
  background-color: #222;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%);
  background-size: cover, 300px 300px, 300px 300px;
  background-position: center, 0 0, 150px 150px;
  background-blend-mode: color-burn;
}

.customer-stats-container.dream::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.customer-stats-container.dream::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream .stats-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream .stats-main-container {
  border: 3px solid #000000;
}

.dream .stats-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream .stats-title-panel h2 {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
  animation: none;
}

.dream .close-btn {
  background: #8d6e63;
  border: 3px solid #000000;
  color: #000000;
}

.dream .close-btn:hover {
  background: #a1887f;
  color: #000000;
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.dream .stats-section {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream .stats-section h3 {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
  animation: none;
}

.dream .stat-item {
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid #000000;
}

.dream .stat-label {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .stat-value {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .progress-info p {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .progress-bar {
  background: rgba(45, 20, 60, 0.95); /* Match the achievements title panel color */
  border: 3px solid #000000;
}

.dream .progress-fill {
  background: linear-gradient(135deg, #8d6e63, #5d4037);
}

.dream .flavor-item {
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid #000000;
}

.dream .flavor-name {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .flavor-counts {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .achievement-card {
  background: rgba(255, 255, 255, 0.15);
  border: 3px solid #000000;
}

.dream .achievement-card.unlocked {
  background: rgba(255, 255, 255, 0.25);
  border: 3px solid #000000;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.dream .achievement-description {
  color: #fff;
  text-shadow: none;
}

.dream .progress-text {
  color: #ff0000; /* Red text for dream mode */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* 1px black outline around text */
  animation: none;
}

/* Dream mode overrides for tier-specific achievement progress text */
.dream .achievement-card.unlocked[data-tier="2"] .progress-text {
  color: #ff0000 !important; /* Red text for dream mode tier 2 achievements */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream .achievement-card.unlocked[data-tier="3"] .progress-text {
  color: #ff0000 !important; /* Red text for dream mode tier 3 achievements */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

/* Dream mode animations */
@keyframes dreamText {
  0% { color: #ff6b6b; }
  16.666% { color: #feca57; }
  33.333% { color: #48dbfb; }
  50% { color: #ff9ff3; }
  66.666% { color: #54a0ff; }
  83.333% { color: #5f27cd; }
  100% { color: #ff6b6b; }
}

/* ===============================================================================
                                RESPONSIVE DESIGN
=============================================================================== */

@media (max-width: 768px) {
  .stats-background-panel {
    padding: 1rem;
    margin: 0.5rem;
    width: calc(100% - 1rem);
  }
  
  .stats-main-container {
    padding: 1rem;
  }
  
  .stats-title-panel {
    padding: 0.75rem 1rem;
  }
  
  .stats-title-panel h2 {
    font-size: 2rem;
  }
  
  .achievements-grid {
    grid-template-columns: 1fr;
  }
  
  .user-info, .purchase-stats {
    grid-template-columns: 1fr;
  }
  
  .stat-item {
    padding: 1rem;
  }
  
  .close-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .stats-background-panel {
    padding: 0.75rem;
  }
  
  .stats-main-container {
    padding: 0.75rem;
  }
  
  .stats-section {
    padding: 1rem;
  }
  
  .stats-title-panel h2 {
    font-size: 1.8rem;
  }
  
  .achievement-card {
    padding: 1rem;
  }
} 

/* Level Up Popup Styles */
.level-up-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease-in-out;
}

/* Theme-appropriate background panel */
.level-up-background-panel {
  padding: 2rem;
  border-radius: 20px;
  max-width: 500px;
  width: 90%;
  position: relative;
}

/* Light mode background panel */
.level-up-background-panel.light-mode {
  background: linear-gradient(135deg, #f5f5dc, #e8e8dc);
  border: 3px solid #8d6e63;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Dark mode background panel */
.level-up-background-panel.dark-mode {
  background: #2a2a2a;
  border: 3px solid #000000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Dream mode background panel */
.level-up-background-panel.dream-mode {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 3px solid #ff00cc;
  box-shadow: 0 10px 30px rgba(255, 0, 204, 0.3);
}

/* Main container */
.level-up-main-container {
  width: 100%;
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
}

/* Light mode main container */
.level-up-main-container.light-mode {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #8d6e63;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dark mode main container */
.level-up-main-container.dark-mode {
  background: rgba(62, 39, 35, 0.9);
  border: 2px solid #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Dream mode main container */
.level-up-main-container.dream-mode {
  background: rgba(45, 20, 60, 0.9);
  border: 2px solid #ff00cc;
  box-shadow: 0 4px 12px rgba(255, 0, 204, 0.2);
}

.level-up-popup {
  border-radius: 12px;
  text-align: center;
  position: relative;
}

/* Remove old background styles since we now have the panel structure */
.level-up-popup.light-mode,
.level-up-popup.dark-mode,
.level-up-popup.dream-mode {
  background: transparent;
  border: none;
  box-shadow: none;
}

.level-up-content h2 {
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 15px;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}

.level-up-content p {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 20px;
  text-shadow: 1px 1px 0 #000;
}

/* Dark mode specific styles for level-up popup */
.level-up-title.dark-mode {
  color: #4CAF50 !important;
  font-size: 2.6rem;
  margin-bottom: 15px;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
}

.level-up-message.dark-mode {
  color: #000 !important;
  font-size: 1.2rem;
  margin-bottom: 5px;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

.level-up-level.dark-mode {
  color: #4CAF50 !important;
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
  font-family: 'The Wanters DEMO', serif;
}

.reward-section {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  padding: 20px;
  margin: 20px 0;
}

/* Dark mode reward section */
.level-up-main-container.dark-mode .reward-section {
  background: #8d6e63;
  border: 2px solid #000;
}

.reward-section h3 {
  color: #FFD700;
  font-size: 1.4rem;
  margin-bottom: 10px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.reward-text {
  color: #FFD700 !important;
  font-size: 1.3rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.reward-text.dark-mode {
  color: #4CAF50 !important;
  font-size: 1.1rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

/* Free bag rewards styling - cyan and larger */
.reward-text.dark-mode.free-bag-reward {
  color: #00ffff !important;
  font-size: 1.4rem !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

.message-text {
  color: #fff !important;
  font-size: 1rem !important;
  margin-bottom: 0 !important;
}

.message-text.dark-mode {
  color: #000 !important;
  font-size: 1.1rem !important;
  margin-bottom: 0 !important;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

/* Light mode specific styles for level-up popup */
.level-up-title.light-mode {
  color: #4CAF50 !important;
  font-size: 2.6rem;
  margin-bottom: 15px;
  text-shadow: none !important;
}

.level-up-message.light-mode {
  color: #000 !important;
  font-size: 1.2rem;
  margin-bottom: 5px;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

.level-up-level.light-mode {
  color: #4CAF50 !important;
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-shadow: none !important;
  font-family: 'The Wanters DEMO', serif;
}

.reward-text.light-mode {
  color: #4CAF50 !important;
  font-size: 1.1rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: none !important;
}

.message-text.light-mode {
  color: #000 !important;
  font-family: Verdana, sans-serif !important;
  font-size: 1.1rem !important;
  margin-bottom: 0 !important;
  text-shadow: none !important;
}

/* Dream mode specific styles for level-up popup */
.level-up-title.dream-mode {
  color: #4CAF50 !important;
  font-size: 2.6rem;
  margin-bottom: 15px;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
}

.level-up-message.dream-mode {
  color: #000 !important;
  font-size: 1.2rem;
  margin-bottom: 5px;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

.level-up-level.dream-mode {
  color: #4CAF50 !important;
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
  font-family: 'The Wanters DEMO', serif;
}

.reward-text.dream-mode {
  color: #4CAF50 !important;
  font-size: 1.1rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

.message-text.dream-mode {
  color: #000 !important;
  font-family: Verdana, sans-serif !important;
  font-size: 1.1rem !important;
  margin-bottom: 0 !important;
  text-shadow: none !important;
}

.close-popup-btn {
  background: linear-gradient(135deg, #FFD700, #FFA000);
  color: #000;
  border: 2px solid #000;
  border-radius: 25px;
  padding: 12px 30px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: none;
  margin-top: 15px;
}

.close-popup-btn:hover {
  background: linear-gradient(135deg, #FFA000, #FF8F00);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Hidden Achievement Styles */
.hidden-achievement {
  background: linear-gradient(135deg, #4a4a4a, #2e2e2e) !important;
  border: 2px solid #666 !important;
}

.hidden-achievement.completed {
  background-color: #8d6e63 !important; /* Solid color instead of gradient */
  border: 2px solid #FFD700 !important;
}

.hidden-achievement .achievement-name {
  color: #8d6e63; /* Light brown for better visibility in light mode */
}

.hidden-achievement.completed .achievement-name {
  color: #00ffff !important; /* Cyan color like locked achievements */
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000 !important;
}

.hidden-achievement .achievement-description {
  color: #999;
}

.hidden-achievement.completed .achievement-description {
  color: #fff !important;
}

/* Dark mode overrides for hidden achievements */
.dark .hidden-achievement:not(.completed) {
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a) !important;
  border: 2px solid #444 !important;
}

.dark .hidden-achievement.completed,
.dark .achievement-card.hidden-achievement.completed {
  background-color: #3e2723 !important; /* Dark brown matching tier 3 achievements */
  border: 2px solid #000000 !important;
}

.dark .hidden-achievement .achievement-name {
  color: #8d6e63 !important;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000 !important;
}

.dark .hidden-achievement.completed .achievement-name {
  color: #00ffff !important; /* Cyan color like locked achievements */
  background-color: #3e2723 !important; /* Dark brown background matching tier 3 achievements */
  border: 2px solid #000000 !important; /* Black border */
}

/* Ultra-high specificity override for secret achievements in dark mode */
body.dark .achievement-card.hidden-achievement.unlocked.completed .achievement-name,
.dark-mode .achievement-card.hidden-achievement.unlocked.completed .achievement-name,
.dark .achievement-card.hidden-achievement.unlocked.completed .achievement-name {
  color: #00ffff !important; /* Cyan color like locked achievements */
  background-color: #3e2723 !important; /* Dark brown background matching tier 3 achievements */
  border: 2px solid #000000 !important; /* Black border */
}

/* Dream mode styling for secret achievements */
.dream .hidden-achievement.completed .achievement-name {
  color: #00ffff !important; /* Cyan text matching tier 3 achievements */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  background-color: #1a1a1a !important; /* Dark grey background for dream mode secret achievements */
  border: 2px solid #000000 !important; /* Black border */
}

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

@keyframes popupSlideIn {
  from {
    transform: translateY(-50px) scale(0.8);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
} 
/* Custom Font */
@font-face {
  font-family: 'The Wanters DEMO';
  src: url('/fonts/The%20Wanters%20DEMO.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --text-muted: #666666;
  --button-bg: #e0e0e0;
  --card-bg: #ffffff;
  --image-placeholder-bg: #f5f5f5;
  --placeholder-stripe1: #f0f0f0;
  --placeholder-stripe2: #e6e6e6;
  --tag-bg: #f0f0f0;
  --nav-bg: #f5f5f5;
  --border-color: #e0e0e0;
  --font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --landing-button-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #000000;
  --text-muted: #000000;
  --button-bg: #333333;
  --card-bg: #2d2d2d;
  --image-placeholder-bg: #333333;
  --placeholder-stripe1: #2d2d2d;
  --placeholder-stripe2: #383838;
  --tag-bg: #404040;
  --nav-bg: #2a2a2a;
  --border-color: #444444;
}

/* Dream Mode - Dark Grey Theme with Subtle Patterns */
.dream-mode {
  --bg-color: #111111;
  --text-color: #00ffbb;
  --text-muted: #b347ea;
  --button-bg: #8d6e63;
  --card-bg: rgba(20, 20, 20, 0.9);
  --image-placeholder-bg: #1a1a1a;
  --placeholder-stripe1: #1a1a1a;
  --placeholder-stripe2: #2a2a2a;
  --tag-bg: #2a2a2a;
  --nav-bg: #111111;
  --border-color: #333333;
  
  /* Apply complex dark pattern background */
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(75,0,130,0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(0,0,128,0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 25%, rgba(46,139,87,0.08) 0%, transparent 40%),
    radial-gradient(circle at 25% 75%, rgba(138,43,226,0.08) 0%, transparent 40%),
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(75,0,130,0.05) 0deg 30deg,
      transparent 30deg 60deg,
      rgba(0,0,128,0.05) 60deg 90deg,
      transparent 90deg 120deg
    ),
    linear-gradient(30deg, rgba(30,30,30,0.8) 12%, transparent 12.5%, transparent 87%, rgba(30,30,30,0.8) 87.5%, rgba(30,30,30,0.8)),
    linear-gradient(150deg, rgba(25,25,25,0.7) 12%, transparent 12.5%, transparent 87%, rgba(25,25,25,0.7) 87.5%, rgba(25,25,25,0.7)),
    linear-gradient(90deg, rgba(20,20,20,0.6) 12%, transparent 12.5%, transparent 87%, rgba(20,20,20,0.6) 87.5%, rgba(20,20,20,0.6)),
    linear-gradient(60deg, rgba(35,35,35,0.4) 25%, transparent 25.5%, transparent 75%, rgba(35,35,35,0.4) 75%, rgba(35,35,35,0.4)),
    linear-gradient(120deg, rgba(28,28,28,0.5) 25%, transparent 25.5%, transparent 75%, rgba(28,28,28,0.5) 75%, rgba(28,28,28,0.5));
  background-size: 120px 120px, 100px 100px, 80px 80px, 90px 90px, 200px 200px, 40px 70px, 35px 60px, 50px 85px, 30px 50px, 45px 75px;
  background-position: 0 0, 60px 60px, 40px 40px, 45px 45px, 0 0, 0 0, 17px 30px, 25px 42px, 0 0, 22px 37px;
}

/* Dream Mode Text Animation - Modified Colors */
.dream-mode h1, 
.dream-mode h2, 
.dream-mode h3, 
.dream-mode p:not(.app-subtitle), 
.dream-mode span, 
.dream-mode a {
  animation: dreamText 20s infinite linear;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
}

@keyframes dreamText {
  0% {
    color: #4b0082; /* Indigo (darker purple) */
  }
  20% {
    color: #000080; /* Navy (darker blue) */
  }
  40% {
    color: #0072b1; /* Darker light blue */
  }
  60% {
    color: #2e8b57; /* Sea green (darker light green) */
  }
  80% {
    color: #006400; /* Dark green */
  }
  100% {
    color: #4b0082; /* Back to indigo for smooth loop */
  }
}

/* Dream Mode Button Animation */
.dream-mode button,
.dream-mode .button,
.dream-mode .nav-button,
.dream-mode .home-button,
.dream-mode .privacy-button,
.dream-mode .switch,
.dream-mode .quantity-button,
.dream-mode .remove-item-button,
.dream-mode .checkout-button,
.dream-mode .back-to-cart-button,
.dream-mode .submit-button,
.dream-mode .add-to-cart-button,
.dream-mode .view-cart-button,
.dream-mode .continue-shopping-button,
.dream-mode .back-to-products,
.dream-mode a[class*="button"] {
  animation: none !important;
  border: 3px solid #000000 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}

/* Special handling for landing buttons to maintain their specific font size */
.dream-mode .landing-button {
  animation: none !important;
  border: 3px solid #000000 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  /* Font size will be handled by LandingScreen.css specific rules */
}

.dream-mode .home-button:hover,
.dream-mode .privacy-button:hover,
.dream-mode .nav-button:hover,
.dream-mode .back-button:hover,
.dream-mode button:hover:not(.close-btn):not(.daydreamers-logout-button):not(.achievements-btn),
.dream-mode .button:hover:not(.close-btn):not(.daydreamers-logout-button):not(.achievements-btn),
.dream-mode .switch:hover,
.dream-mode .quantity-button:hover,
.dream-mode .remove-item-button:hover,
.dream-mode .checkout-button:hover,
.dream-mode .back-to-cart-button:hover,
.dream-mode .submit-button:hover,
.dream-mode .add-to-cart-button:hover,
.dream-mode .view-cart-button:hover,
.dream-mode .continue-shopping-button:hover,
.dream-mode .back-to-products:hover,
.dream-mode a[class*="button"]:hover:not(.close-btn):not(.daydreamers-logout-button):not(.achievements-btn) {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleGlobal 1.5s ease-in-out infinite alternate !important;
}

/* Landing button hover effects are handled specifically in LandingScreen.css */

/* Dream Mode Toggle Switch */
.dream-mode .slider {
  background: linear-gradient(45deg, #4b0082, #000080, #0072b1, #2e8b57, #006400);
  background-size: 400% 400%;
  animation: dreamGradient 15s infinite alternate;
}

.dream-mode .slider:before {
  background: #000;
  box-shadow: 0 0 10px #fff, 0 0 20px #fff;
}

@keyframes dreamGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes dreamSparkleGlobal {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Global touch scrolling optimization for all scrollable containers */
* {
  -webkit-overflow-scrolling: touch;
}

/* Ensure all scrollable elements have proper touch behavior */
[class*="container"],
[class*="panel"],
[class*="modal"],
[class*="overlay"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* High specificity touch scrolling for all scrollable elements - cannot be overridden */
/* Touch scrolling only on designated scroll roots; admin panel uses .admin-panel-page on mobile */
.user-menu-modal,
.free-bag-codes-panel,
.privacy-details,
.admin-popup,
.admin-modal,
.error-stack {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* Global button font styling - applies to all buttons and button-like elements */
button, 
input[type="button"], 
input[type="submit"], 
input[type="reset"],
.button,
.btn,
.nav-button,
.home-button,
.landing-button,
.back-button,
.view-cart-button,
.continue-shopping-button,
.back-to-products,
.add-to-cart-button,
.quantity-button,
.remove-item-button,
.checkout-button,
.submit-button,
.retry-button,
.theme-toggle,
.back-to-cart-button,
a[class*="button"],
*[class*="button"] {
  font-family: var(--font-family) !important;
}

button, input, textarea, select {
  font-family: var(--font-family);
}

a {
  color: #8d6e63;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Remove underlines from buttons and navigation links on hover */
button:hover,
.nav-button:hover,
.home-button:hover,
.landing-button:hover,
.back-button:hover,
.view-cart-button:hover,
.continue-shopping-button:hover,
.back-to-products:hover {
  text-decoration: none !important;
}

/* Cart empty state - greyed out */
.view-cart-button.cart-empty,
.back-to-cart-button.cart-empty {
  opacity: 0.4;
  color: #999999 !important;
  background-color: #cccccc !important;
  cursor: default;
  pointer-events: none;
}

.view-cart-button.cart-empty:hover,
.back-to-cart-button.cart-empty:hover {
  opacity: 0.4;
  color: #999999 !important;
  background-color: #cccccc !important;
  transform: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  font-weight: normal;
}

/* Dark mode overrides to ensure black text */
.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3, 
.dark-mode h4, 
.dark-mode h5, 
.dark-mode h6,
.dark-mode p,
.dark-mode span,
.dark-mode div,
.dark-mode a,
.dark-mode button,
.dark-mode input,
.dark-mode textarea,
.dark-mode select,
.dark-mode label {
  color: #000000 !important;
}

/* Override any text-shadow in dark mode */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  text-shadow: none !important;
}

/* Apply dream mode styling to all menu pages */
.dream-mode.landing-screen,
.dream-mode.options-page,
.dream-mode.contact-page,
.dream-mode.privacy-policy-page,
.dream-mode.cart-page,
.dream-mode.order-submission,
.dream-mode.main-menu,
.dream-mode.product-detail {
  background-color: #222;

  background-size: cover;
  background-position: center;
  background-blend-mode: color-burn;
  color: var(--text-color);
  position: relative;
}

/* Dream mode container borders */
.dream-mode .options-container,
.dream-mode .contact-container,
.dream-mode .privacy-policy-container,
.dream-mode .theme-switch-container .switch-track {
  border: 3px solid #000000;
}

.dream-mode .theme-switch-container .switch-button {
  border: 2px solid #000000;
}

.dream-mode.landing-screen::before,
.dream-mode.options-page::before,
.dream-mode.contact-page::before,
.dream-mode.privacy-policy-page::before,
.dream-mode.cart-page::before,
.dream-mode.order-submission::before,
.dream-mode.main-menu::before,
.dream-mode.product-detail::before {
  background-color: rgba(34, 34, 34, 0.85);
}

/* Dream mode cart empty state */
.dream-mode .view-cart-button.cart-empty,
.dream-mode .back-to-cart-button.cart-empty {
  opacity: 0.4;
  color: #666666 !important;
  background-color: #444444 !important;
  border: 2px solid #666666 !important;
}

/* Error Boundary Styles */
.error-boundary {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--bg-color);
  padding: 2rem;
}

.error-container {
  background-color: var(--card-bg);
  border: 3px solid #f44336;
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  text-align: center;
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.2);
}

.error-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.error-title {
  color: #f44336;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1rem;
  font-family: var(--font-family);
}

.error-message {
  color: var(--text-color);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.error-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.error-actions .retry-button,
.error-actions .home-button {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.error-actions .retry-button {
  background-color: #f44336;
  color: white;
}

.error-actions .retry-button:hover {
  background-color: #d32f2f;
  transform: translateY(-2px);
}

.error-actions .home-button {
  background-color: #8d6e63;
  color: white;
}

.error-actions .home-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
}

/* Dark mode error home button glow */
.dark-mode .error-actions .home-button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.error-details {
  margin-top: 2rem;
  text-align: left;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1rem;
  background-color: #f9f9f9;
}

.error-details summary {
  cursor: pointer;
  font-weight: 600;
  color: #666;
  margin-bottom: 0.5rem;
}

.error-stack {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
  color: #333;
  background-color: #fff;
  padding: 0.5rem;
  border-radius: 4px;
  overflow-x: auto;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Dark mode error styles */
.dark-mode .error-container {
  background-color: #2a2a2a;
  border-color: #f44336;
}

.dark-mode .error-message {
  color: #ffffff;
}

.dark-mode .error-details {
  background-color: #333;
  border-color: #555;
}

.dark-mode .error-details summary {
  color: #ccc;
}

.dark-mode .error-stack {
  background-color: #444;
  color: #fff;
}

/* Dream mode error styles */
.dream-mode .error-container {
  background-color: rgba(34, 34, 34, 0.9);
  border: 2px solid #000000;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(128, 0, 128, 0.4),
    0 0 30px rgba(75, 0, 130, 0.3);
}

.dream-mode .error-title {
  color: #ff6b6b;
  text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}

.dream-mode .error-message {
  color: #ffffff;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.dream-mode .error-actions .retry-button,
.dream-mode .error-actions .home-button {
  border: 2px solid #000000;
  box-shadow: 0 0 10px rgba(128, 0, 128, 0.5);
}

.dream-mode .error-actions .retry-button:hover,
.dream-mode .error-actions .home-button:hover {
  box-shadow: 
    0 0 15px rgba(128, 0, 128, 0.7),
    0 0 25px rgba(75, 0, 130, 0.5);
}

@media (max-width: 768px) {
  .error-container {
    padding: 1.5rem;
  }
  
  .error-title {
    font-size: 1.5rem;
  }
  
  .error-message {
    font-size: 1rem;
  }
  
  .error-actions {
    flex-direction: column;
  }
  
  .error-actions .retry-button,
  .error-actions .home-button {
    width: 100%;
  }
}

.dream-mode .landing-button,
.dream-mode .home-button,
.dream-mode .nav-button,
.dream-mode .contact-button,
.dream-mode .privacy-button,
.dream-mode .view-cart-button,
.dream-mode .add-to-cart-button,
.dream-mode .quantity-button,
.dream-mode .back-button,
.dream-mode .submit-button,
.dream-mode .retry-button,
.dream-mode .options-button,
.dream-mode .cart-button,
.dream-mode .size-option,
.dream-mode .theme-toggle,
.dream-mode .continue-shopping-button,
.dream-mode .back-to-products,
.dream-mode .back-to-cart-button,
.dream-mode a[class*="button"] {
  border: 2px solid #000 !important;
}

/* Button borders for all themes */
.light-mode .submit-button,
.light-mode .remove-item-button,
.light-mode .add-to-cart-button,
.light-mode .quantity-button,
.light-mode .back-button,
.light-mode .continue-shopping-button,
.light-mode .back-to-products,
.light-mode .view-cart-button,
.light-mode .back-to-cart-button,
.light-mode .cart-button,
.light-mode .options-button,
.light-mode .size-option,
.light-mode .theme-toggle,
.light-mode .home-button,
.light-mode .landing-button,
.light-mode .nav-button,
.light-mode .checkout-button,
.light-mode a[class*="button"] {
  border: 3px solid #3e2723 !important;
}
.dark-mode .submit-button,
.dark-mode .remove-item-button,
.dark-mode .add-to-cart-button,
.dark-mode .quantity-button,
.dark-mode .back-button,
.dark-mode .continue-shopping-button,
.dark-mode .back-to-products,
.dark-mode .view-cart-button,
.dark-mode .back-to-cart-button,
.dark-mode .cart-button,
.dark-mode .options-button,
.dark-mode .size-option,
.dark-mode .theme-toggle,
.dark-mode a[class*="button"] {
  border: 2px solid #000 !important;
}
.dream-mode .submit-button,
.dream-mode .remove-item-button,
.dream-mode .add-to-cart-button,
.dream-mode .quantity-button,
.dream-mode .back-button,
.dream-mode .continue-shopping-button,
.dream-mode .back-to-products,
.dream-mode .view-cart-button,
.dream-mode .back-to-cart-button,
.dream-mode .cart-button,
.dream-mode .options-button,
.dream-mode .size-option,
.dream-mode .theme-toggle,
.dream-mode a[class*="button"] {
  border: 2px solid #000 !important;
}

.light-mode .quantity-button,
.light-mode .remove-item-button,
.light-mode .add-to-cart-button,
.light-mode .submit-button,
.light-mode .continue-shopping-button,
.light-mode .back-to-products,
.light-mode .view-cart-button,
.light-mode .back-to-cart-button,
.light-mode .cart-button,
.light-mode .options-button,
.light-mode .size-option,
.light-mode .theme-toggle,
.light-mode .home-button,
.light-mode .landing-button,
.light-mode .nav-button,
.light-mode .checkout-button,
.light-mode a[class*="button"] {
  border: 3px solid #3e2723 !important;
}
.dark-mode .quantity-button,
.dark-mode .remove-item-button,
.dark-mode .add-to-cart-button,
.dark-mode .submit-button,
.dark-mode .continue-shopping-button,
.dark-mode .back-to-products,
.dark-mode .view-cart-button,
.dark-mode .back-to-cart-button,
.dark-mode .cart-button,
.dark-mode .options-button,
.dark-mode .size-option,
.dark-mode .theme-toggle,
.dark-mode a[class*="button"] {
  border: 2px solid #000 !important;
}
.dream-mode .quantity-button,
.dream-mode .remove-item-button,
.dream-mode .add-to-cart-button,
.dream-mode .submit-button,
.dream-mode .continue-shopping-button,
.dream-mode .back-to-products,
.dream-mode .view-cart-button,
.dream-mode .back-to-cart-button,
.dream-mode .cart-button,
.dream-mode .options-button,
.dream-mode .size-option,
.dream-mode .theme-toggle,
.dream-mode a[class*="button"] {
  border: 2px solid #000 !important;
}

.dream-mode::before,
.dream-mode::after,
.dream-mode .main-menu::before,
.dream-mode .main-menu::after,
.dream-mode .landing-screen::before,
.dream-mode .landing-screen::after,
.dream-mode .product-detail::before,
.dream-mode .product-detail::after,
.dream-mode .cart-page::before,
.dream-mode .cart-page::after,
.dream-mode .order-submission::before,
.dream-mode .order-submission::after,
.dream-mode .options-page::before,
.dream-mode .options-page::after,
.dream-mode .privacy-policy-page::before,
.dream-mode .privacy-policy-page::after,
.dream-mode .contact-page::before,
.dream-mode .contact-page::after {
  animation: dreamRainbowHue 40s linear infinite;
  animation-delay: 0s;
  opacity: 0.55;
}

@keyframes dreamRainbowHue {
  0%   { filter: hue-rotate(240deg) saturate(1.2) brightness(1); }
  12.5% { filter: hue-rotate(270deg) saturate(1.2) brightness(1.05); }
  25%  { filter: hue-rotate(300deg) saturate(1.2) brightness(1.1); }
  37.5% { filter: hue-rotate(330deg) saturate(1.2) brightness(1.05); }
  50%  { filter: hue-rotate(0deg)   saturate(1.2) brightness(1); }
  62.5% { filter: hue-rotate(30deg)  saturate(1.2) brightness(1.05); }
  75%  { filter: hue-rotate(60deg)  saturate(1.2) brightness(1.1); }
  87.5% { filter: hue-rotate(90deg)  saturate(1.2) brightness(1.05); }
  100% { filter: hue-rotate(240deg) saturate(1.2) brightness(1); }
}

/* Dream Mode Home Button - match main menu style */
.dream-mode .home-button {
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.5px !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  text-shadow: none !important;
  animation: none !important;
  font-family: var(--font-family);
  transition: all 0.3s ease;
}

.dream-mode .home-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleMainMenu 1.5s ease-in-out infinite alternate !important;
} 

/* Achievements button universal style */
.achievements-btn {
  background: #228B22 !important; /* Forest green */
  color: #fff;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  border: 3px solid #3e2723;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  letter-spacing: 0.02em;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  outline: none;
  display: inline-block;
}

/* Black border in dark mode */
.dark-mode .achievements-btn {
  border: 3px solid #000 !important;
}

/* Forest green in dream mode with high specificity */
.dream-mode .achievements-btn,
body.dream-mode .achievements-btn {
  background: #228B22 !important;
  border: 3px solid #3e2723;
}

.achievements-btn:hover {
  background: #2eaf2e !important;
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.achievements-btn:active, .achievements-btn:focus {
  background: #228B22 !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transform: translateY(0);
} 

.dream-mode .achievements-btn:hover,
body.dream-mode .achievements-btn:hover {
  background: #17641a !important;
  color: #fff !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 0 18px 4px #228B22, 0 4px 16px rgba(0,0,0,0.22) !important;
  animation: none !important;
} 
.landing-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.landing-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.landing-screen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.landing-background-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #8d6e63;
  border-radius: 25px;
  padding: 3rem 2rem 2rem 2rem;
  margin: 2rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(5px);
  max-width: 600px;
  width: 90%;
}

.landing-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
  max-width: 100%;
  width: 100%;
  padding: 0;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.landing-screen .title-panel {
  background-color: rgba(245, 245, 220, 0.9);
  border: 1.5px solid #3e2723;
  border-radius: 20px;
  padding: clamp(1rem, 4vw, 2rem) clamp(1.5rem, 6vw, 3rem); /* Responsive padding */
  margin-bottom: 2rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  position: relative;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  min-width: 0; /* Allow shrinking */
}

.app-title {
  font-size: clamp(3rem, 8vw, 7rem); /* Responsive font size */
  font-weight: 1000; /* Extra bold */
  margin: 0;
  color: #14545c; /* Teal color matching selling button */
  animation: fadeIn 1s ease-in-out;
  line-height: 1.1;
  letter-spacing: clamp(1px, 0.5vw, 2px); /* Responsive letter spacing */
  text-align: center;
  word-break: break-word; /* Allow breaking if needed */
  max-width: 100%;
  cursor: pointer;
  transition: color 0.3s ease;
}

.app-subtitle {
  font-size: 1.5rem;
  margin-bottom: 3rem;
  color: #5d4037; /* Medium brown text */
  font-style: italic;
  animation: fadeIn 1s ease-in-out 0.3s forwards;
  opacity: 0;
}

.landing-buttons {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
  animation: fadeIn 1s ease-in-out 0.6s forwards;
  opacity: 0;
  width: 100%;
  max-width: 300px;
}

.landing-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63; /* Medium brown */
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  font-family: var(--landing-button-font);
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
}

.landing-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f; /* Lighter brown on hover */
}

/* Enhanced hover effects for all modes */
.light-mode .landing-button:hover {
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(141, 110, 99, 0.4),
    0 0 25px rgba(93, 64, 55, 0.3);
}

.dark-mode .landing-button:hover {
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(161, 136, 127, 0.5),
    0 0 25px rgba(93, 64, 55, 0.4);
}

.theme-toggle {
  position: fixed;
  bottom: 2rem;
  padding: 0.75rem 1.5rem;
  background-color: #6d4c41; /* Darker brown */
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 1rem;
  font-family: var(--font-family);
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  animation: fadeIn 1s ease-in-out 0.9s forwards;
  opacity: 0;
  z-index: 1;
}

.theme-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  background-color: #795548;
}

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

/* Dark mode specific styles */
.dark-mode .landing-screen {
  background-color: #3e2723; /* Dark brown background */
  background-blend-mode: multiply;
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 84 48'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23412f2a' fill-opacity='0.25'%3E%3Cpath d='M42 48c23.196 0 42-10.745 42-24S65.196 0 42 0 0 10.745 0 24s18.804 24 42 24zm0-5c19.33 0 35-8.954 35-19s-15.67-19-35-19S7 13.954 7 24s15.67 19 35 19z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 120px 120px;
  background-position: center, center;
  position: relative;
}

.dark-mode .landing-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode .landing-screen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Light mode title with no outline for clean look */
.landing-screen:not(.dark-mode):not(.dream-mode) .app-title {
  text-shadow: none; /* No outline in light mode */
}

.dark-mode.landing-screen .app-title {
  color: #8d6e63 !important; /* Match the cream brown button color */
  text-shadow: 
    -1.5px -1.5px 0 #000,
    1.5px -1.5px 0 #000,
    -1.5px 1.5px 0 #000,
    1.5px 1.5px 0 #000 !important; /* 1.5px black outline */
  cursor: pointer;
  transition: color 0.3s ease;
}

/* Dark mode title panel */
.dark-mode.landing-screen .title-panel {
  background-color: rgba(62, 39, 35, 0.9);
  border: 3px solid #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark-mode .app-subtitle {
  color: #8d6e63 !important; /* Same cream brown as the title */
}

.dark-mode .theme-toggle {
  background-color: #4e342e;
  border: 3px solid #000000;
}

.dark-mode .landing-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .landing-button {
  border: 3px solid #000000;
}

/* Dream mode styles */
.dream-mode.landing-screen {
  background-color: #222;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
    linear-gradient(45deg, transparent 24%, rgba(75, 0, 130, 0.05) 25%, rgba(75, 0, 130, 0.05) 26%, transparent 27%, transparent 74%, rgba(138, 43, 226, 0.05) 75%, rgba(138, 43, 226, 0.05) 76%, transparent 77%),
    linear-gradient(-45deg, transparent 24%, rgba(102, 51, 153, 0.05) 25%, rgba(102, 51, 153, 0.05) 26%, transparent 27%, transparent 74%, rgba(60, 30, 80, 0.05) 75%, rgba(60, 30, 80, 0.05) 76%, transparent 77%);
  background-size: cover, 300px 300px, 300px 300px, 60px 60px, 60px 60px;
  background-position: center, 0 0, 150px 150px, 0 0, 30px 30px;
  background-blend-mode: color-burn;
}

.dream-mode.landing-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.landing-screen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

/* Dream mode abstract symmetrical title panel - specific to landing screen */
.dream-mode.landing-screen .title-panel {
  background: #111111 !important;
  background-color: #111111 !important;
  background-image: none !important;
  border: 3px solid #000000;
  border-radius: 20px;
  position: relative;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(26, 26, 26, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .landing-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

/* Dream mode title with black border */
.dream-mode .app-title {
  text-shadow: 
    -1.3px -1.3px 0 #000,
    1.3px -1.3px 0 #000,
    -1.3px 1.3px 0 #000,
    1.3px 1.3px 0 #000 !important;
}

/* Dream mode subtitle with white teal color - FORCE override global dream mode text animation */
.landing-screen.dream-mode .landing-background-panel .landing-content p.app-subtitle,
.dream-mode.landing-screen .landing-background-panel .landing-content .app-subtitle,
.dream-mode .landing-screen .landing-content .app-subtitle,
.dream-mode.landing-screen .landing-content .app-subtitle,
.dream-mode .landing-background-panel .app-subtitle,
.dream-mode p.app-subtitle {
  color: #b0f0f0 !important; /* White teal color */
  animation: none !important;
  text-shadow: none !important;
  background: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Dream mode button text styling - clean bold black text */
.dream-mode .landing-button {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 900 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.5px !important;
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
}

/* Override any global dream mode text effects for landing buttons */
.dream-mode .landing-button:not(:hover) {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-size: 1.6rem !important;
}

/* Ultra-high specificity to ensure dream mode landing buttons match light/dark mode font size */
body.dream-mode .landing-screen .landing-button,
.dream-mode.landing-screen .landing-button,
.dream-mode .landing-screen .landing-button {
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}

/* Dream mode psychedelic smoke button effects */
.dream-mode .landing-button:hover,
.dream-mode .theme-toggle:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleLanding 1.5s ease-in-out infinite alternate !important;
}

.dream-mode .landing-button {
  border: 3px solid #000000;
}

.dream-mode .theme-toggle {
  border: 3px solid #000000;
}

@keyframes dreamSparkleLanding {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

/* Desktop/Large screen styles */
@media (min-width: 1024px) {
  .landing-screen {
    padding: 3rem;
  }
  
  .landing-background-panel {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    padding: 4rem 3rem 3rem 3rem;
  }
  
  .app-subtitle {
    font-size: 1.8rem;
    margin-bottom: 4rem;
  }
  
  .landing-buttons {
    max-width: 350px;
    gap: 2rem;
  }
  
  .landing-button {
    font-size: 1.8rem;
    padding: 1.2rem 2.5rem;
  }
  
  /* Ensure dream mode landing buttons match font size in desktop */
  .dream-mode .landing-button {
    font-size: 1.8rem !important;
  }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1023px) {
  .landing-background-panel {
    max-width: 650px;
    width: 85%;
    margin: 0 auto;
    padding: 3.5rem 2.5rem 2.5rem 2.5rem;
  }
  
  .app-subtitle {
    font-size: 1.6rem;
    margin-bottom: 3.5rem;
  }
  
  .landing-buttons {
    max-width: 320px;
    gap: 1.8rem;
  }
  
  .landing-button {
    font-size: 1.7rem;
    padding: 1.1rem 2.2rem;
  }
  
  /* Ensure dream mode landing buttons match font size in tablet */
  .dream-mode .landing-button {
    font-size: 1.7rem !important;
  }
}

@media (max-width: 768px) {
  .landing-background-panel {
    margin: 1rem;
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    width: 95%;
  }
  
  .app-subtitle {
    font-size: 1.2rem;
  }
  
  .landing-buttons {
    flex-direction: column;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .landing-background-panel {
    margin: 0.5rem;
    padding: 1.5rem 1rem 1rem 1rem;
    width: 98%;
  }
  
  .app-title {
    font-size: 2.8rem;
  }
  
  .title-panel {
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
  }
}

/* Landscape orientation styles - more specific selectors */
@media screen and (orientation: landscape) and (max-height: 768px) {
  .landing-screen .landing-background-panel {
    max-width: 850px !important;
    width: 90% !important;
    margin: 0.5rem auto !important;
    padding: 1.5rem 2.5rem 1rem 2.5rem !important;
  }
  
  .landing-screen .landing-content {
    margin-bottom: 1rem;
  }
  
  .landing-screen .app-title {
    font-size: 3.5rem !important;
    letter-spacing: 1px;
  }
  
  .landing-screen .title-panel {
    padding: 1rem 2rem !important;
    margin-bottom: 0.8rem !important;
  }
  
  .landing-screen .app-subtitle {
    font-size: 1.2rem !important;
    margin-bottom: 1rem !important;
  }
  
  .landing-screen .landing-buttons {
    flex-direction: row !important;
    gap: 2rem !important;
    margin-top: 0.8rem !important;
    justify-content: center;
    max-width: 500px;
  }
  
  .landing-screen .landing-button {
    font-size: 1.3rem !important;
    padding: 0.7rem 1.5rem !important;
    flex: 1;
    max-width: 180px;
  }
  
  /* Ensure dream mode landing buttons match font size in landscape */
  .dream-mode .landing-screen .landing-button {
    font-size: 1.3rem !important;
  }
}

/* Very small landscape screens (phones in landscape) */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .landing-screen .landing-background-panel {
    max-width: 750px !important;
    width: 95% !important;
    margin: 0.3rem auto !important;
    padding: 1rem 2rem 0.8rem 2rem !important;
  }
  
  .landing-screen .app-title {
    font-size: 2.8rem !important;
  }
  
  .landing-screen .title-panel {
    padding: 0.8rem 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .landing-screen .app-subtitle {
    font-size: 1rem !important;
    margin-bottom: 0.8rem !important;
  }
  
  .landing-screen .landing-buttons {
    gap: 1.5rem !important;
    margin-top: 0.5rem !important;
  }
  
  .landing-screen .landing-button {
    font-size: 1.1rem !important;
    padding: 0.6rem 1.2rem !important;
  }
  
  /* Ensure dream mode landing buttons match font size in small landscape */
  .dream-mode .landing-screen .landing-button {
    font-size: 1.1rem !important;
  }
}

/* Utility for Wanters DEMO font with 1px black outline */
.wantersdemo-outline {
  font-family: 'The Wanters DEMO', serif;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* Themed loading bar base styles */
.daydreamers-loading-bar {
  border-radius: 12px;
  height: 28px;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
}

.daydreamers-loading-bar.light {
  background: #f5f5dc;
  border: 3px solid #3e2723;
}
.daydreamers-loading-bar.dark {
  background: #3e2723;
  border: 3px solid #000;
}
.daydreamers-loading-bar.dream {
  background: linear-gradient(90deg, rgba(26, 13, 35, 0.9), rgba(45, 20, 60, 0.9));
  border: 3px solid #000;
  box-shadow: 0 0 8px rgba(45, 20, 60, 0.4);
}

.daydreamers-loading-bar-fill {
  height: 100%;
  border-radius: 12px;
  transition: width 0.5s;
}
.daydreamers-loading-bar-fill.light {
  background: #8d6e63;
}
.daydreamers-loading-bar-fill.dark {
  background: #fff8e1;
}
.daydreamers-loading-bar-fill.dream {
  background: linear-gradient(90deg, rgba(139, 110, 99, 0.9), rgba(93, 64, 55, 0.9));
} 
.main-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0;
  background-color: #f5f5dc; /* Light beige background for light mode */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  min-height: 100vh;
  position: relative;
}

.main-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.main-menu::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-7.5L27.99 34.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.products-title {
  font-size: 6rem;
  font-weight: 700;
  margin: 0;
  color: #3e2723;
  position: relative;
  z-index: 1;
  text-align: center;
  text-shadow: none; /* No outline in light mode */
  cursor: pointer;
  transition: color 0.3s ease;
}

/* NUCLEAR override: absolutely no hover/focus/active effect for products-title in any mode */
.products-title:hover,
.products-title:focus,
.products-title:active,
.light-mode .products-title:hover,
.light-mode .products-title:focus,
.light-mode .products-title:active,
.dark-mode .products-title:hover,
.dark-mode .products-title:focus,
.dark-mode .products-title:active {
  color: inherit !important;
  cursor: default !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  text-shadow: none !important;
  background: none !important;
  background-color: transparent !important;
  opacity: 1 !important;
  pointer-events: none !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Dream mode specific hover overrides - keep the animation */
.dream-mode .products-title:hover,
.dream-mode .products-title:focus,
.dream-mode .products-title:active,
.dream-mode .title-panel .products-title:hover,
.dream-mode .title-panel .products-title:focus,
.dream-mode .title-panel .products-title:active,
.dream-mode .main-menu .products-title:hover,
.dream-mode .main-menu .products-title:focus,
.dream-mode .main-menu .products-title:active {
  color: inherit !important;
  cursor: default !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  animation: dreamText 20s infinite linear !important;
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important;
  background: none !important;
  background-color: transparent !important;
  opacity: 1 !important;
  pointer-events: none !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Force solid background for title panel - MAIN MENU PAGE ONLY */
body .main-menu .title-panel,
.main-menu .title-panel,
.main-menu.light-mode .title-panel,
div.title-panel {
  background-color: #f5f5dc !important;
  background-image: none !important;
  background: #f5f5dc !important;
  border: 3px solid #3e2723 !important;
  border-radius: 20px;
  padding: 2rem 3rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 100 !important;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
}

.home-button-container {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.home-button {
  display: inline-block;
  background-color: #8d6e63;
  color: white;
  font-weight: 600;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 9999px;
  transition: all 0.3s ease;
  font-size: 1.6rem;
  font-family: var(--font-family);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
}

.home-button:hover {
  background-color: #a1887f;
  transform: translateY(-4px);
  color: white;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Light mode home button - ensure pill shape */
.main-menu:not(.dark-mode):not(.dream-mode) .home-button {
  border-radius: 9999px !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  display: inline-block !important;
  text-decoration: none !important;
  border: 3px solid #3e2723 !important;
  background-color: #8d6e63 !important;
  color: white !important;
}

.main-menu:not(.dark-mode):not(.dream-mode) .home-button:hover {
  background-color: #a1887f !important;
  color: white !important;
  text-decoration: none !important;
}

.main-content-panel {
  background-color: #8d6e63;
  border: 3px solid #3e2723;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 1200px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 2rem;
}

.product-card-container {
  cursor: pointer;
  transition: all 0.3s ease;
}

.product-card-container:hover {
  transform: translateY(-8px);
}

.product-card-background {
  background-color: rgba(255, 255, 255, 1);
  border: 3px solid #3e2723;
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-height: 280px;
}

.product-card-container:hover .product-card-background {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  border-color: #3e2723;
  background-color: rgba(255, 255, 255, 1);
}

.product-name-panel {
  text-align: center;
  padding: 0.75rem;
  background-color: rgba(245, 245, 220, 0.9);
  border: 3px solid #3e2723;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-card-container:hover .product-name-panel {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-color: #3e2723;
  background-color: rgba(245, 245, 220, 1);
}

.product-name {
  font-size: 1.8rem;
  font-weight: 900;
  color: #3e2723;
  font-family: var(--font-family);
  display: block;
  line-height: 1.2;
}

.product-image-card {
  background-color: #5d4037;
  border: 3px solid #000000;
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: 320px;
}

.product-card-container:hover .product-image-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-color: #000000;
}

.product-image-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 4px;
  transition: transform 0.3s ease;
}

.product-card-container:hover .product-image-card img {
  transform: scale(1.05);
}

/* Ensure image upload label takes full space */
.image-upload-label {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 280px;
}

.image-upload-label img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  border-radius: 4px;
}

/* Enhanced styling for admin price inputs and labels */
.admin-price-input {
  padding: 0.5rem;
  border: 2px solid #3e2723;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  min-width: 80px;
  background-color: white;
}

.admin-price-input:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 2px rgba(93, 64, 55, 0.2);
}

/* Narrower input styles for weight and price side-by-side layout */
.admin-weight-input {
  padding: 0.4rem;
  border: 2px solid #3e2723;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  width: 60px;
  min-width: 50px;
  background-color: white;
  box-sizing: border-box;
}

.admin-weight-input:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 2px rgba(93, 64, 55, 0.2);
}

.admin-price-input-narrow {
  padding: 0.4rem;
  border: 2px solid #3e2723;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  width: 70px;
  min-width: 60px;
  background-color: white;
  box-sizing: border-box;
}

.admin-price-input-narrow:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 2px rgba(93, 64, 55, 0.2);
}

/* Responsive design for mobile devices */
@media (max-width: 768px) {
  .admin-weight-input {
    width: 50px;
    min-width: 45px;
    font-size: 0.85rem;
    padding: 0.3rem;
  }
  
  .admin-price-input-narrow {
    width: 60px;
    min-width: 55px;
    font-size: 0.85rem;
    padding: 0.3rem;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .admin-weight-input {
    width: 45px;
    min-width: 40px;
    font-size: 0.8rem;
  }

  .admin-price-input-narrow {
    width: 55px;
    min-width: 50px;
    font-size: 0.8rem;
  }
}

/* Large input fields with no spinners for cleaner admin interface */
.admin-input-large {
  padding: 0.6rem 0.8rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  width: 80px;
  min-width: 70px;
  background-color: white;
  box-sizing: border-box;
  
  /* Remove spinner arrows */
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;
}

.admin-input-large::-webkit-outer-spin-button,
.admin-input-large::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.admin-input-large:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.2);
}

/* Responsive design for large inputs */
@media (max-width: 768px) {
  .admin-input-large {
    width: 70px;
    min-width: 60px;
    font-size: 1rem;
    padding: 0.5rem 0.6rem;
  }
}

@media (max-width: 480px) {
  .admin-input-large {
    width: 60px;
    min-width: 55px;
    font-size: 0.9rem;
    padding: 0.4rem 0.5rem;
  }
}

/* Narrower input fields for compact layout */
.admin-input-narrow {
  padding: 0.6rem 0.8rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  width: 65px;
  min-width: 60px;
  background-color: white;
  box-sizing: border-box;
  
  /* Remove spinner arrows */
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;
}

.admin-input-narrow::-webkit-outer-spin-button,
.admin-input-narrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.admin-input-narrow:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.2);
}

/* Delete button styles - pill-shaped red button */
.admin-product-delete-btn {
  background-color: #dc3545;
  color: #fff;
  border: 3px solid #c82333;
  padding: 0.6rem 1.2rem;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
  font-family: 'The Wanters DEMO', serif;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  user-select: none;
  white-space: nowrap;
}

.admin-product-delete-btn:hover:not(:disabled) {
  background-color: #c82333;
  border-color: #bd2130;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(220, 53, 69, 0.4);
}

.admin-product-delete-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

.admin-product-delete-btn:disabled {
  background-color: #6c757d;
  border-color: #545b62;
  cursor: not-allowed;
  transform: none;
  opacity: 0.6;
}

/* Edit button styles - pill-shaped blue button */
.admin-product-edit-btn {
  background-color: #007bff;
  color: #fff;
  border: 3px solid #0056b3;
  padding: 0.6rem 1.2rem;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
  font-family: 'The Wanters DEMO', serif;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  user-select: none;
  white-space: nowrap;
}

.admin-product-edit-btn:hover:not(:disabled) {
  background-color: #0056b3;
  border-color: #004085;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 123, 255, 0.4);
}

.admin-product-edit-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.admin-product-edit-btn:disabled {
  background-color: #6c757d;
  border-color: #545b62;
  cursor: not-allowed;
  transform: none;
  opacity: 0.6;
}

/* Copy button styles - pill-shaped green button */
.admin-product-copy-btn {
  background-color: #28a745;
  color: #fff;
  border: 3px solid #1e7e34;
  padding: 0.6rem 1.2rem;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
  font-family: 'The Wanters DEMO', serif;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  user-select: none;
  white-space: nowrap;
}

.admin-product-copy-btn:hover:not(:disabled) {
  background-color: #1e7e34;
  border-color: #155724;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(40, 167, 69, 0.4);
}

.admin-product-copy-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

.admin-product-copy-btn:disabled {
  background-color: #6c757d;
  border-color: #545b62;
  cursor: not-allowed;
  transform: none;
  opacity: 0.6;
}

/* Sizes button styles - pill-shaped gold button */
.admin-product-sizes-btn {
  background-color: #ffa000;
  color: #fff;
  border: 3px solid #e65100;
  padding: 0.6rem 1.2rem;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
  font-family: 'The Wanters DEMO', serif;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  user-select: none;
  white-space: nowrap;
}

.admin-product-sizes-btn:hover:not(:disabled) {
  background-color: #e65100;
  border-color: #bf360c;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(255, 160, 0, 0.4);
}

.admin-product-sizes-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(255, 160, 0, 0.3);
}

.admin-product-sizes-btn:disabled {
  background-color: #6c757d;
  border-color: #545b62;
  cursor: not-allowed;
  transform: none;
  opacity: 0.6;
}

/* Responsive design for narrow inputs */
@media (max-width: 768px) {
  .admin-input-narrow {
    width: 55px;
    min-width: 50px;
    font-size: 1rem;
    padding: 0.5rem 0.6rem;
  }
}

@media (max-width: 768px) {
  .admin-product-delete-btn {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    min-width: 90px;
  }
}

@media (max-width: 480px) {
  .admin-input-narrow {
    width: 50px;
    min-width: 45px;
    font-size: 0.9rem;
    padding: 0.4rem 0.5rem;
  }
  
  .admin-product-delete-btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    min-width: 80px;
  }
}





/* Recipe button styling improvements */
.recipe-pill-btn {
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 25px;
  transition: all 0.3s ease;
}

/* Admin product save button improvements */
.admin-product-save-btn {
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.view-cart-container {
  display: flex;
  justify-content: center;
  margin: 0;
}

.view-cart-button {
  display: inline-block;
  background-color: #5d4037;
  color: white;
  font-weight: 600;
  text-decoration: none;
  padding: 0.8rem 2rem;
  border-radius: 30px;
  transition: all 0.2s ease;
  font-size: 1.2rem;
  font-family: var(--font-family);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723;
}

.view-cart-button:hover {
  background-color: #795548;
  transform: translateY(-2px);
  color: white;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Dark mode specific styles */
.main-menu.dark-mode {
  background-color: #3e2723; /* Dark brown background */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 84 48'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23412f2a' fill-opacity='0.25'%3E%3Cpath d='M42 48c23.196 0 42-10.745 42-24S65.196 0 42 0 0 10.745 0 24s18.804 24 42 24zm0-5c19.33 0 35-8.954 35-19s-15.67-19-35-19S7 13.954 7 24s15.67 19 35 19z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 120px 120px;
  background-position: center, center;
  background-blend-mode: multiply;
  position: relative;
  min-height: 100vh;
}

.main-menu.dark-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.main-menu.dark-mode::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .products-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dark-mode .products-title:hover {
  color: #a1887f !important;
}

body .main-menu.dark-mode .title-panel,
.main-menu.dark-mode .title-panel,
.dark-mode .main-menu .title-panel,
.dark-mode div.title-panel {
  background-color: #3e2723 !important;
  background-image: none !important;
  background: #3e2723 !important;
  border: 3px solid #000000 !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  z-index: 100 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
}

.dark-mode .main-content-panel {
  background-color: #2a2a2a;
  border: 3px solid #000000;
}

.dark-mode .product-card-background {
  background-color: rgba(140, 140, 140, 1);
  border: 3px solid #000000;
}

.dark-mode .product-card-container:hover .product-card-background {
  background-color: rgba(160, 160, 160, 1);
  border-color: #000000;
}

.dark-mode .product-image-card {
  background-color: #5d4037;
  border: 3px solid #000000;
}

.dark-mode .product-name-panel {
  background-color: #8d6e63;
  border: 3px solid #000000;
}

.dark-mode .product-card-container:hover .product-image-card,
.dark-mode .product-card-container:hover .product-name-panel {
  border-color: #000000;
}

.dark-mode .product-name {
  color: #fff8e1;
}

/* Dark mode home button with ultra-high specificity - matching dream mode shape */
body.dark-mode .main-menu .home-button,
.dark-mode.main-menu .home-button,
.dark-mode .main-menu .home-button,
.dark-mode .home-button {
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  border-radius: 9999px !important;
  background-color: #8d6e63 !important;
  font-weight: 900 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.5px !important;
  padding: 1rem 2rem !important;
  max-width: none !important;
  min-width: 0 !important;
  width: auto !important;
  display: inline-block !important;
  text-align: center !important;
  text-decoration: none !important;
}

/* Dark mode home button hover with ultra-high specificity */
body.dark-mode .main-menu .home-button:hover,
.dark-mode.main-menu .home-button:hover,
.dark-mode .main-menu .home-button:hover,
.dark-mode .home-button:hover {
  color: #000000 !important;
  background-color: #a1887f !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-4px) !important;
  text-decoration: none !important;
}

.dark-mode .view-cart-button {
  border: 3px solid #000000;
}

/* Dream mode specific styles */
.main-menu.dream-mode {
  background-color: #0d0d0d;
  background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  position: relative;
  min-height: 100vh;
}

.main-menu.dream-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(13, 13, 13, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.main-menu.dream-mode::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .product-card-background {
  background-color: rgba(190, 190, 190, 1);
  border: 3px solid #000000;
}

.dream-mode .product-card-container:hover .product-card-background {
  background-color: rgba(210, 210, 210, 1);
  border-color: #000000;
}

.dream-mode .product-image-card,
.dream-mode .product-name-panel {
  border: 3px solid #000000;
}

/* Dream mode product name panel styling */
.dream-mode .product-name-panel {
  background-color: #808080 !important; /* Grey background */
}

/* Dream mode product name text styling - with color-changing animation */
.dream-mode .product-name {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Dream mode panel styling */
.dream-mode .main-content-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

body .main-menu.dream-mode .title-panel,
.main-menu.dream-mode .title-panel,
.dream-mode .main-menu .title-panel,
.dream-mode div.title-panel {
  background-color: #111111 !important;
  background-image: none !important;
  background: #111111 !important;
  border: 3px solid #000000 !important;
  border-radius: 20px;
  position: relative;
  z-index: 100 !important;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
}

/* Dream mode title with color-changing animation and black border */
.dream-mode .products-title {
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important; /* Only black border, no glow */
  cursor: default !important; /* Remove pointer cursor */
  transition: none !important; /* Remove all transitions */
}

/* Override global dream mode text glow for products title specifically */
.dream-mode .main-menu .products-title,
.dream-mode .title-panel .products-title,
.main-menu.dream-mode .products-title {
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important; /* Override global glow with only black border */
  animation: dreamText 20s infinite linear !important; /* Keep the color animation */
  cursor: default !important; /* Remove pointer cursor */
  transition: none !important; /* Remove all transitions */
}

/* Completely disable ALL hover effects for dream mode main menu title */
.dream-mode .products-title:hover,
.dream-mode .title-panel .products-title:hover,
.dream-mode .main-menu .products-title:hover {
  color: inherit !important; /* Keep the animated color exactly the same */
  cursor: default !important; /* No pointer cursor */
  transition: none !important; /* No transitions */
  transform: none !important; /* No transforms */
  filter: none !important; /* No filters */
  animation: dreamText 20s infinite linear !important; /* Keep the same animation */
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important; /* Keep the same text-shadow */
  background: none !important; /* No background changes */
  background-color: transparent !important; /* No background color */
  opacity: 1 !important; /* No opacity changes */
}

/* Dream mode button text styling - clean bold black text */
.dream-mode .home-button,
.dream-mode .view-cart-button {
  border: 3px solid #000000;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Override any global dream mode text effects for main menu buttons */
.dream-mode .home-button:not(:hover),
.dream-mode .view-cart-button:not(:hover) {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Dream mode button hover effects with white text and glow animation */
.dream-mode .home-button:hover,
.dream-mode .view-cart-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleMainMenu 1.5s ease-in-out infinite alternate !important;
}

@keyframes dreamSparkleMainMenu {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

@media (max-width: 992px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .products-title {
    font-size: 4.5rem;
  }
  
  .title-panel {
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    max-width: 90%;
  }
  
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-name {
    font-size: 1.6rem;
  }

  .product-card-background {
    padding: 1rem;
  }

  .main-content-panel {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .products-title {
    font-size: 3.5rem;
  }
  
  .title-panel {
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    max-width: 95%;
  }
  
  .products-grid {
    grid-template-columns: 1fr;
  }

  .product-name {
    font-size: 1.4rem;
  }

  .product-card-background {
    padding: 0.8rem;
  }

  .main-content-panel {
    padding: 1rem;
  }
}

/* Light mode hover/active for product name panel */
.product-card-container:hover .product-name-panel,
.product-card-container:active .product-name-panel {
  background-color: #c4a690;
  border-color: #3e2723;
}
.product-card-container:hover .product-name,
.product-card-container:active .product-name {
  color: #3e2723;
}

/* Dark mode hover/active for product name panel */
.dark-mode .product-card-container:hover .product-name-panel,
.dark-mode .product-card-container:active .product-name-panel {
  background-color: #3e2723;
  border-color: #000;
}
.dark-mode .product-card-container:hover .product-name,
.dark-mode .product-card-container:active .product-name {
  color: #8d6e63;
}

/* Dream mode hover/active for product name panel */
.dream-mode .product-card-container:hover .product-name-panel,
.dream-mode .product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #1565c0 0%, #002171 100%); /* blue to much darker blue, top to bottom */
}


/* Dream mode: unique highlight for each flavour (more distinct colors, black text) */
.dream-mode .flavour-barbecue.product-card-container:hover .product-name-panel,
.dream-mode .flavour-barbecue.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #1565c0 0%, #002171 100%); /* blue to much darker blue, top to bottom */
}
.dream-mode .flavour-smokey-barbecue.product-card-container:hover .product-name-panel,
.dream-mode .flavour-smokey-barbecue.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #00e676 0%, #512da8 100%); /* bright green to indigo, top to bottom */
}
.dream-mode .flavour-teriyaki.product-card-container:hover .product-name-panel,
.dream-mode .flavour-teriyaki.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #ff69b4 0%, #1a1a1a 100%); /* pink to dark grey, top to bottom */
}
.dream-mode .flavour-korean-bbq.product-card-container:hover .product-name-panel,
.dream-mode .flavour-korean-bbq.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #7c4dff 0%, #8e24aa 100%); /* purple, top to bottom */
}
.dream-mode .flavour-sweet-chilli.product-card-container:hover .product-name-panel,
.dream-mode .flavour-sweet-chilli.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #ff9800 0%, #2e7d32 100%); /* orange to dark green, top to bottom */
}
.dream-mode .flavour-exotic-spice.product-card-container:hover .product-name-panel,
.dream-mode .flavour-exotic-spice.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #00bfae 0%, #ff3d00 100%); /* teal to orange-red, top to bottom */
}
.dream-mode .flavour-hot-chilli.product-card-container:hover .product-name-panel,
.dream-mode .flavour-hot-chilli.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #d32f2f 0%, #1a1a1a 100%); /* red to dark grey, top to bottom */
}
.dream-mode .flavour-roast-lamb.product-card-container:hover .product-name-panel,
.dream-mode .flavour-roast-lamb.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #cddc39 0%, #388e3c 100%); /* lime to green, top to bottom */
}
/* Animation is already applied to .dream-mode .product-name - no override needed on hover */

/* ===============================================================================
                      DREAM MODE: DISABLE PRODUCT HOVER EFFECTS
=============================================================================== */

/* Disable card transform on hover in dream mode */
.dream-mode .product-card-container:hover {
  transform: none !important;
}

/* Disable background changes on hover in dream mode */
.dream-mode .product-card-container:hover .product-card-background {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border-color: #000000 !important;
  background-color: rgba(190, 190, 190, 1) !important;
}

/* Disable image card changes on hover in dream mode */
.dream-mode .product-card-container:hover .product-image-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  border-color: #000000 !important;
}

/* Disable image scaling on hover in dream mode */
.dream-mode .product-card-container:hover .product-image-card img {
  transform: none !important;
}

/* Dream mode color-changing text animation */
@keyframes dreamText {
  0% {
    color: #4b0082; /* Indigo (darker purple) */
  }
  20% {
    color: #000080; /* Navy (darker blue) */
  }
  40% {
    color: #0072b1; /* Darker light blue */
  }
  60% {
    color: #2e8b57; /* Sea green (darker light green) */
  }
  80% {
    color: #006400; /* Dark green */
  }
  100% {
    color: #4b0082; /* Back to indigo for smooth loop */
  }
}

/* Sold Out Product Styles */
.product-card-container.sold-out {
  position: relative;
}

.product-image-card {
  position: relative;
  overflow: hidden;
}

.sold-out-image {
  filter: brightness(0.4) saturate(0.6);
  transition: filter 0.3s ease;
}

.sold-out-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.sold-out-text {
  color: #ff0000;
  font-family: 'The Wanters DEMO', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  line-height: 1.4;
  padding: 10px;
}

/* Sold Out overlay main and subtext styling */
.sold-out-main {
  display: block;
  font-size: 2.1rem;
  font-weight: 900;
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', sans-serif !important;
  text-align: center;
  line-height: 1.1;
  margin-bottom: 0.2em;
}

.dark-mode .sold-out-main {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-family: 'The Wanters DEMO', sans-serif !important;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.light-mode .sold-out-main {
  text-shadow: none !important;
}

.sold-out-sub {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: #d32f2f;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  opacity: 0.95;
}

.dark-mode .sold-out-sub {
  color: #d32f2f !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.light-mode .sold-out-sub {
  color: #d32f2f !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.product-card-container.sold-out .product-name-panel {
  background-color: #4a3a2a !important; /* dark brown for dimming */
  opacity: 0.7;
  transition: background 0.3s, background-color 0.3s, opacity 0.3s;
}

.dark-mode .product-card-container.sold-out .product-name-panel {
  background-color: #18100a !important;
  opacity: 0.7;
}

.dream-mode .product-card-container.sold-out .product-name-panel {
  background-color: #222 !important;
  opacity: 0.7;
}

.dream-mode .sold-out-main, .dream-mode .sold-out-sub {
  color: #d32f2f !important;
  font-family: 'The Wanters DEMO', Tahoma, sans-serif !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-weight: 900;
  letter-spacing: 0.5px;
}

/* Remove all product card hover effects in dream mode */
.dream-mode .product-card-container:hover,
.dream-mode .product-card-container:focus,
.dream-mode .product-card-container:active,
.dream-mode .product-card-background:hover,
.dream-mode .product-card-background:focus,
.dream-mode .product-card-background:active {
  background: none !important;
  background-color: inherit !important;
  color: inherit !important;
  box-shadow: none !important;
  border-color: inherit !important;
  filter: none !important;
  outline: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
} 
.network-status {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: 400px;
  width: 90%;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  animation: slideDown 0.3s ease-out;
}

.network-status.online {
  background-color: rgba(76, 175, 80, 0.95);
  border: 2px solid #4CAF50;
  color: white;
}

.network-status.offline {
  background-color: rgba(244, 67, 54, 0.95);
  border: 2px solid #f44336;
  color: white;
}

.network-indicator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.status-icon {
  font-size: 1.5rem;
  min-width: 2rem;
  text-align: center;
}

.status-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.status-text {
  font-weight: 600;
  font-size: 1rem;
}

.online-text {
  color: #ffffff;
}

.offline-text {
  color: #ffffff;
}

.status-details {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.8rem;
  opacity: 0.9;
}

.last-online,
.connection-type {
  color: rgba(255, 255, 255, 0.9);
}

.retry-button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  color: white;
  transition: all 0.2s ease;
}

.retry-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.retry-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.retry-button.retrying {
  animation: spin 1s linear infinite;
}

.offline-message {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.85rem;
  line-height: 1.4;
}

.offline-message p {
  margin: 0.25rem 0;
  color: rgba(255, 255, 255, 0.9);
}

/* Dark mode adjustments */
.dark-mode.network-status.online {
  background-color: rgba(56, 142, 60, 0.95);
  border-color: #388E3C;
}

.dark-mode.network-status.offline {
  background-color: rgba(198, 40, 40, 0.95);
  border-color: #C62828;
}

/* Dream mode adjustments */
.dream-mode.network-status {
  border: 2px solid #000000;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(128, 0, 128, 0.4),
    0 0 30px rgba(75, 0, 130, 0.3);
}

.dream-mode.network-status.online {
  background: linear-gradient(135deg, 
    rgba(46, 139, 87, 0.95) 0%, 
    rgba(0, 100, 0, 0.95) 100%);
}

.dream-mode.network-status.offline {
  background: linear-gradient(135deg, 
    rgba(139, 69, 19, 0.95) 0%, 
    rgba(160, 82, 45, 0.95) 100%);
}

.dream-mode .retry-button {
  border: 1px solid #000000;
  box-shadow: 0 0 10px rgba(128, 0, 128, 0.5);
}

.dream-mode .retry-button:hover {
  box-shadow: 
    0 0 15px rgba(128, 0, 128, 0.7),
    0 0 25px rgba(75, 0, 130, 0.5);
}

/* Animations */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .network-status {
    top: 10px;
    padding: 0.75rem;
    font-size: 0.9rem;
  }
  
  .status-icon {
    font-size: 1.25rem;
    min-width: 1.5rem;
  }
  
  .retry-button {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }
  
  .status-details {
    font-size: 0.75rem;
  }
  
  .offline-message {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .network-status {
    width: 95%;
    padding: 0.5rem;
  }
  
  .network-indicator {
    gap: 0.5rem;
  }
} 
.options-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.options-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.options-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.options-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 650px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.options-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 10px;
  padding: 2rem;
  margin: 0;
  max-width: 100%;
  width: 100%;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.options-title-panel {
  font-weight: bold;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 400px;
}

.options-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

/* STANDARDIZED BUTTON STYLING - All Options buttons look identical */
.options-page .home-button,
.options-page .contact-button,
.options-page .theme-button,
.options-page .back-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  color: white !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #3e2723 !important;
  text-align: center !important;
  cursor: pointer !important;
  font-family: 'The Wanters DEMO', serif !important;
  min-width: 120px !important;
  width: auto !important;
  height: auto !important;
}

/* Home button specific spacing - consistent across all themes */
.options-page .home-button {
  margin-bottom: 2rem !important;
}

/* Ensure consistent spacing in all themes - using light mode as reference */
.options-page .options-list {
  width: 100% !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

/* Dark mode spacing override with ultra-high specificity */
body.dark-mode .options-page .options-list,
.dark-mode.options-page .options-list,
.dark-mode .options-page .options-list {
  width: 100% !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

/* Dark mode home button spacing override */
body.dark-mode .options-page .home-button,
.dark-mode.options-page .home-button,
.dark-mode .options-page .home-button {
  margin-bottom: 2rem !important;
  margin-top: 0 !important;
}

/* Dream mode spacing override with ultra-high specificity */
body.dream-mode .options-page .options-list,
.dream-mode.options-page .options-list,
.dream-mode .options-page .options-list {
  width: 100% !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

/* Dream mode home button spacing override */
body.dream-mode .options-page .home-button,
.dream-mode.options-page .home-button,
.dream-mode .options-page .home-button {
  margin-bottom: 2rem !important;
  margin-top: 0 !important;
}

/* CRITICAL FIX: Remove all individual button margins and rely only on flex gap */
/* Reset any conflicting margins on all buttons in all themes */
.options-page .home-button,
.options-page .contact-button,
.options-page .theme-button,
.options-page .back-button {
  margin: 0 !important;
}

/* Only home button gets bottom margin for spacing from title */
.options-page .home-button {
  margin-bottom: 2rem !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure Contact and Theme buttons have NO margins - rely on flex gap only */
.options-page .contact-button,
.options-page .theme-button {
  margin: 0 !important;
}

/* Ultra-high specificity for dark mode to override any global styles */
body.dark-mode .options-page .contact-button,
body.dark-mode .options-page .theme-button,
.dark-mode.options-page .contact-button,
.dark-mode.options-page .theme-button,
.dark-mode .options-page .contact-button,
.dark-mode .options-page .theme-button {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ultra-high specificity for dream mode */
body.dream-mode .options-page .contact-button,
body.dream-mode .options-page .theme-button,
.dream-mode.options-page .contact-button,
.dream-mode.options-page .theme-button,
.dream-mode .options-page .contact-button,
.dream-mode .options-page .theme-button {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Hover effects - consistent across all buttons */
.options-page .home-button:hover,
.options-page .contact-button:hover,
.options-page .theme-button:hover,
.options-page .back-button:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  background-color: #a1887f !important;
  text-decoration: none !important;
  color: white !important;
}

/* Dark mode - consistent black borders and styling with ultra-high specificity */
body.dark-mode .options-page .home-button,
body.dark-mode .options-page .contact-button,
body.dark-mode .options-page .theme-button,
body.dark-mode .options-page .back-button,
.dark-mode.options-page .home-button,
.dark-mode.options-page .contact-button,
.dark-mode.options-page .theme-button,
.dark-mode.options-page .back-button,
.dark-mode .options-page .home-button,
.dark-mode .options-page .contact-button,
.dark-mode .options-page .theme-button,
.dark-mode .options-page .back-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #000000 !important;
  text-align: center !important;
  cursor: pointer !important;
  font-family: 'The Wanters DEMO', serif !important;
  min-width: 120px !important;
  width: auto !important;
  height: auto !important;
}

body.dark-mode .options-page .home-button:hover,
body.dark-mode .options-page .contact-button:hover,
body.dark-mode .options-page .theme-button:hover,
body.dark-mode .options-page .back-button:hover,
.dark-mode.options-page .home-button:hover,
.dark-mode.options-page .contact-button:hover,
.dark-mode.options-page .theme-button:hover,
.dark-mode.options-page .back-button:hover,
.dark-mode .options-page .home-button:hover,
.dark-mode .options-page .contact-button:hover,
.dark-mode .options-page .theme-button:hover,
.dark-mode .options-page .back-button:hover {
  transform: translateY(-4px) !important;
  background-color: #a1887f !important;
  color: #000000 !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  text-decoration: none !important;
}

/* Dream mode - consistent black borders and styling with ultra-high specificity */
body.dream-mode .options-page .home-button,
body.dream-mode .options-page .contact-button,
body.dream-mode .options-page .theme-button,
body.dream-mode .options-page .back-button,
.dream-mode.options-page .home-button,
.dream-mode.options-page .contact-button,
.dream-mode.options-page .theme-button,
.dream-mode.options-page .back-button,
.dream-mode .options-page .home-button,
.dream-mode .options-page .contact-button,
.dream-mode .options-page .theme-button,
.dream-mode .options-page .back-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #000000 !important;
  text-align: center !important;
  cursor: pointer !important;
  font-family: 'The Wanters DEMO', serif !important;
  min-width: 120px !important;
  width: auto !important;
  height: auto !important;
  text-shadow: none !important;
  animation: none !important;
  letter-spacing: 0.5px !important;
}

body.dream-mode .options-page .home-button:hover,
body.dream-mode .options-page .contact-button:hover,
body.dream-mode .options-page .theme-button:hover,
body.dream-mode .options-page .back-button:hover,
.dream-mode.options-page .home-button:hover,
.dream-mode.options-page .contact-button:hover,
.dream-mode.options-page .theme-button:hover,
.dream-mode.options-page .back-button:hover,
.dream-mode .options-page .home-button:hover,
.dream-mode .options-page .contact-button:hover,
.dream-mode .options-page .theme-button:hover,
.dream-mode .options-page .back-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleOptions 1.5s ease-in-out infinite alternate !important;
  text-decoration: none !important;
}

/* Legacy theme container styles - DISABLED to prevent spacing conflicts */
.theme-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.theme-toggle-container {
  margin-top: 0 !important; /* CHANGED: was -0.5rem, now 0 to prevent spacing issues */
}

.theme-toggle-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 !important; /* ADDED: ensure no margins */
}

/* Override theme container styles in Options page specifically */
.options-page .theme-section,
.options-page .theme-toggle-container {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Ensure no theme containers affect button spacing in any theme */
.options-page .theme-section .theme-button,
.options-page .theme-toggle-container .theme-button {
  margin: 0 !important;
}

.options-list {
  width: 100% !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

.option-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #d7ccc8;
}

.option-label {
  font-size: 1.2rem;
  font-weight: 600;
  color: #5d4037;
}

/* Back button now inherits from standardized button styling above */

/* Dark mode styles */
.dark-mode .options-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode .options-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode .options-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .options-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .options-container {
  background-color: rgba(62, 39, 35, 0.9);
}

.dark-mode .options-title {
  text-shadow: none; /* No outline in dark mode */
}

.dark-mode .option-item {
  border-bottom: 1px solid #6d4c41;
}

.dark-mode .option-label {
  color: #d7ccc8;
}

/* Dark mode button borders now handled by standardized styling above */

/* Dream mode styles */
.dream-mode.options-page {
  background-color: #222;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
    linear-gradient(45deg, transparent 24%, rgba(75, 0, 130, 0.05) 25%, rgba(75, 0, 130, 0.05) 26%, transparent 27%, transparent 74%, rgba(138, 43, 226, 0.05) 75%, rgba(138, 43, 226, 0.05) 76%, transparent 77%),
    linear-gradient(-45deg, transparent 24%, rgba(102, 51, 153, 0.05) 25%, rgba(102, 51, 153, 0.05) 26%, transparent 27%, transparent 74%, rgba(60, 30, 80, 0.05) 75%, rgba(60, 30, 80, 0.05) 76%, transparent 77%);
  background-size: cover, 300px 300px, 300px 300px, 60px 60px, 60px 60px;
  background-position: center, 0 0, 150px 150px, 0 0, 30px 30px;
  background-blend-mode: color-burn;
}

.dream-mode.options-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.options-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .options-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream-mode .options-container {
  border: 3px solid #000000;
}

.dream-mode .options-title {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  animation: none !important;
}

/* Dream mode button borders now handled by standardized styling above */

/* Old button styling removed - now handled by standardized styling above */

@keyframes dreamSparkleOptions {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

/* Dream mode button text styling now handled by standardized styling above */

/* Dark mode button glow effects now handled by standardized styling above */

/* Dark mode styles */
.dark-mode .options-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode .options-title-panel {
  background-color: #3e2723;
  border: 3px solid #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark-mode .options-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dream-mode .options-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .options-title {
  /* Let the global dreamText animation handle the color changes */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* Daydreamers menu button: fixed size and shape for all themes */
.daydreamers-menu-button {
  width: 220px;
  height: 56px;
  padding: 0;
  font-size: 1.35rem;
  font-family: 'The Wanters DEMO', serif;
  border-radius: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.02em;
  margin-bottom: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  border-width: 3px;
  border-style: solid;
}

/* Daydreamers Enter Email button: slightly smaller, consistent across all themes */
.daydreamers-email-button {
  width: 160px;
  height: 44px;
  padding: 0 10px;
  font-size: 1.02rem;
  font-family: 'The Wanters DEMO', serif;
  border-radius: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.02em;
  margin-bottom: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  border-width: 3px;
  border-style: solid;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
}

/* Email button specific styles only - home buttons now handled by standardized styling above */
.daydreamers-email-button {
  font-size: 1.02rem;
}

.dark-mode .daydreamers-email-button {
  width: 170px !important;
  height: 48px !important;
}

/* Welcome panel styles - appears behind welcome section when logged in */
.welcome-panel {
  background-color: #f5f5dc; /* Light mode: solid cream color to match background */
  border: 3px solid #8d6e63;
  border-radius: 15px;
  padding: 2rem;
  margin: 1rem 0;
  width: 100%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
}

.dark-mode .welcome-panel {
  background-color: rgba(26, 26, 26, 0.9);
  border: 3px solid #444;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.dream-mode .welcome-panel {
  background: linear-gradient(135deg, 
    rgba(26, 13, 35, 0.85) 0%,
    rgba(45, 20, 60, 0.8) 50%,
    rgba(26, 13, 35, 0.85) 100%);
  border: 3px solid #000;
  box-shadow: 0 6px 20px rgba(255, 0, 204, 0.3);
  animation: dreamSparkleWelcome 3s ease-in-out infinite;
}

@keyframes dreamSparkleWelcome {
  0%, 100% { box-shadow: 0 6px 20px rgba(255, 0, 204, 0.3); }
  50% { box-shadow: 0 6px 30px rgba(255, 0, 204, 0.5), 0 0 40px rgba(255, 0, 204, 0.2); }
}

/* Dark mode welcome panel text overrides */
.dark-mode .welcome-panel .welcome-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .welcome-panel .customer-name {
  color: red !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .welcome-panel .level-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .welcome-panel .level-number {
  color: cyan !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .welcome-panel .progress-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Dream Mode - Welcome panel text overrides */
.dream-mode .welcome-panel .welcome-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream-mode .welcome-panel .customer-name {
  /* Keep the color changing animation but add black outline */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream-mode .welcome-panel .level-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream-mode .welcome-panel .level-number {
  color: #00ffff !important;
  animation: none !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream-mode .welcome-panel .progress-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Light mode welcome panel text - remove outlines from name and progress text */
.welcome-panel .customer-name {
  text-shadow: none !important;
}

.welcome-panel .progress-text {
  text-shadow: -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000 !important;
}

/* Logout button styles */
.daydreamers-logout-button {
  width: auto;
  min-width: 180px;
  min-height: 54px;
  padding: 1.1rem 2.5rem;
  font-size: 1.25rem;
  font-family: 'The Wanters DEMO', serif;
  border-radius: 18px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  border-width: 4px;
  border-style: solid;
  background: #d32f2f !important;
  color: #fff !important;
  border-color: #000 !important;
  transition: all 0.2s;
}

.daydreamers-logout-button:hover {
  background: #b71c1c !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  transform: translateY(-2px) scale(1.03);
}

/* Dream mode logout button - ensure it stays red */
.dream-mode .daydreamers-logout-button {
  background: #d32f2f !important;
  color: #fff !important;
  border-color: #000 !important;
}

.dream-mode .daydreamers-logout-button:hover {
  background: #b71c1c !important;
  color: #fff !important;
  border-color: #000 !important;
  animation: none !important;
  box-shadow: 0 0 18px 4px #d32f2f, 0 4px 16px rgba(0,0,0,0.22) !important;
}

/* Simple Loading Spinner */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid transparent;
  border-top: 4px solid #8d6e63;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

/* Theme-specific colors for spinner */
.dark-mode .loading-spinner {
  border-top-color: #f5f5dc;
}

.dream-mode .loading-spinner {
  border-top-color: #ff00cc;
}

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

/* Typing animation cursor effect for search inputs */
.ingredients-selection-search-input:not(:focus)::placeholder {
  animation: typing-cursor 1s infinite;
}

@keyframes typing-cursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

/* Loading container */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 1rem 0;
  gap: 0.5rem;
}

.loading-text {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.achievements-button,
.dark-mode .achievements-button,
.dream-mode .achievements-button,
.light-mode .achievements-button {
  background: #228B22 !important;
  color: #fff !important;
  border: 3px solid #000 !important;
}

.achievements-button:hover {
  background: #17641a !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  transform: translateY(-2px) scale(1.03);
}

/* Dream mode achievements button - ensure it stays green */
.dream-mode .achievements-button:hover {
  background: #17641a !important;
  color: #fff !important;
  border: 3px solid #000 !important;
  animation: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22) !important;
}

/* Businesses button universal style */
.businesses-btn {
  background: #14545c !important; /* Teal color matching Smooth Sales */
  color: #fff;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  border: 3px solid #3e2723;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  letter-spacing: 0.02em;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  outline: none;
  display: inline-block;
}

/* Black border in dark mode */
.dark-mode .businesses-btn {
  border: 3px solid #000 !important;
}

/* Teal in dream mode with high specificity */
.dream-mode .businesses-btn,
body.dream-mode .businesses-btn {
  background: #14545c !important;
  border: 3px solid #3e2723;
}

.businesses-btn:hover {
  background: #0f3d42 !important;
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.businesses-btn:active, .businesses-btn:focus {
  background: #14545c !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transform: translateY(0);
} 

.dream-mode .businesses-btn:hover,
body.dream-mode .businesses-btn:hover {
  background: #0f3d42 !important;
  color: #fff !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 0 18px 4px #14545c, 0 4px 16px rgba(0,0,0,0.22) !important;
  animation: none !important;
}

.light-mode .achievements-button {
  border: none !important;
}

/* Ensure red glow on hover in DREAM MODE ONLY */
.dream-mode .daydreamers-logout-button:hover {
  box-shadow: 0 0 18px 4px #d32f2f, 0 4px 16px rgba(0,0,0,0.22) !important;
} 
/* ===============================================================================
                              ORDER SUBMISSION STYLING
=============================================================================== */

/* Main order submission page container */
.order-submission {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 1rem;
  position: relative;
}

.order-submission::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.order-submission::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Background panel similar to cart page */
.order-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Main container inside background panel */
.order-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Order title panel */
.order-title-panel {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 500px;
}

.order-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-decoration: none !important;
}

/* Back to cart button */
.back-to-cart-button,
.light-mode .back-to-cart-button {
  display: inline-block;
  padding: 1rem 2rem !important;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem !important;
  text-decoration: none;
  font-weight: 600 !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723;
  margin-bottom: 2rem;
}

.back-to-cart-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
  text-decoration: none;
}

/* Section styling */
.order-process-info,
.order-summary {
  width: 100%;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background-color: rgba(141, 110, 99, 0.1);
  border-radius: 8px;
  border: 2px solid #d7ccc8;
}

.section-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #3e2723;
  text-align: center;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.order-process-info p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #5d4037;
  text-align: center;
}

/* Order items styling */
.order-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.summary-item {
  display: grid;
  grid-template-columns: 1fr 0.8fr 0.5fr;
  padding: 0.5rem;
  border-bottom: 1px dashed #d7ccc8;
  align-items: center;
}

.item-name {
  font-weight: 600;
  color: #3e2723;
  text-align: left;
}

.item-details {
  color: #5d4037;
  text-align: center;
}

.item-price {
  font-weight: 600;
  color: #3e2723;
  text-align: right;
}

.order-total {
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 2px solid #d7ccc8;
  font-weight: 700;
  font-size: 1.1rem;
  color: #3e2723;
}

.total-price-value {
  color: #d32f2f; /* Red color for total price */
  font-weight: 900;
  font-size: 1.8rem !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Form styling */
.submission-form {
  width: 100%;
  margin-bottom: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #3e2723;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.form-input {
  width: 100%;
  max-width: 400px;
  padding: 0.8rem;
  border: 2px solid #d7ccc8;
  border-radius: 4px;
  font-size: 1rem;
  background-color: rgba(255, 255, 255, 0.9);
  transition: border-color 0.3s ease;
  color: #3e2723;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  text-align: center !important;
  margin: 0 auto;
}

.form-input:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.3);
}

/* Submission actions */
.submission-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.submit-button {
  padding: 1rem 2rem !important;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 8px;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.submit-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.submit-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.submission-note {
  text-align: center;
  font-size: 0.9rem;
  color: #5d4037;
  max-width: 400px;
  margin: 1rem auto 0 auto;
  width: 100%;
}

/* Success state */
.submission-success {
  text-align: center;
  padding: 2rem;
  margin-bottom: 2rem;
}

.submission-success p {
  font-size: 1.1rem;
  color: #3e2723;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.home-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 8px;
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.home-button:hover {
  background-color: #a1887f;
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* ===============================================================================
                                DARK MODE STYLING
=============================================================================== */

.dark-mode.order-submission {
  background-color: #3e2723;
}

.dark-mode.order-submission::before {
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
}

.dark-mode.order-submission::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .order-background-panel {
  background-color: rgba(26, 26, 26, 0.9);
  border-color: #000000;
}

.dark-mode .order-container {
  background-color: rgba(62, 39, 35, 0.9);
  border-color: #000000;
}

.dark-mode .order-title-panel {
  background-color: #8d6e63;
  border-color: #000000;
}

.dark-mode .order-title {
  color: #8d6e63;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}

.dark-mode .back-to-cart-button {
  background-color: #8d6e63;
  color: white;
  border-color: #000000;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
}

.dark-mode .back-to-cart-button:hover {
  background-color: #a1887f;
}

.dark-mode .order-process-info,
.dark-mode .order-summary {
  background-color: #8d6e63;
  color: #3e2723;
  border-color: #000000;
}

.dark-mode .order-process-info p,
.dark-mode .order-summary p,
.dark-mode .order-summary li {
  color: #c4a690;
}

.dark-mode .order-container input,
.dark-mode .order-container textarea {
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  border-radius: 8px;
  font-size: 1.1rem;
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
  transition: background 0.2s, color 0.2s;
  display: block;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

.dark-mode .order-container input:disabled,
.dark-mode .order-container textarea:disabled,
.dark-mode .order-container .postal-address-disabled {
  background-color: #424242 !important;
  color: #bdbdbd !important;
  border: 2px solid #000000 !important;
  opacity: 0.7;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center !important;
}

.dark-mode .order-container label {
  color: #8d6e63 !important;
  font-weight: 900;
  font-size: 1.4rem;
  text-align: center;
  display: block;
  margin-bottom: 0.4rem;
  margin-top: 1.2rem;
}

/* Old dark mode checkbox styles removed */

.dark-mode .input:focus,
.dark-mode .textarea:focus {
  outline: 2px solid #3e2723;
  background-color: #a1887f;
}

.dark-mode .section-title {
  color: #8d6e63;
}

.dark-mode .item-details {
  color: #8d6e63;
}

.dark-mode .item-name,
.dark-mode .item-price,
.dark-mode .order-total {
  color: #8d6e63;
}

.dark-mode .total-price-value {
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.8rem !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .form-group label {
  color: #8d6e63;
}

.dark-mode .form-input {
  background-color: rgba(26, 26, 26, 0.9);
  border-color: #000000;
  color: #8d6e63;
  text-align: center !important;
  max-width: 400px;
  margin: 0 auto;
}

.dark-mode .form-input:focus {
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.3);
}

.dark-mode .submit-button {
  background-color: #8d6e63;
  border-color: #000000;
  padding: 1rem 2rem !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
}

.dark-mode .submit-button:hover {
  background-color: #a1887f;
}

.dark-mode .order-submission .submission-note,
.dark-mode .submission-note,
.dark-mode .submission-note p {
  color: #c4a690 !important;
}

.dark-mode .submission-success p {
  color: #c4a690 !important;
}

.dark-mode .home-button {
  display: inline-block !important;
  background-color: #8d6e63 !important;
  color: white !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 1rem 2rem !important;
  border-radius: 9999px !important;
  transition: all 0.3s ease !important;
  font-size: 1.4rem !important;
  font-family: var(--font-family) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #3e2723 !important;
}

.dark-mode .home-button:hover {
  background-color: #a1887f !important;
  transform: translateY(-2px) !important;
  color: white !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
}

.dark-mode .order-container label {
  color: #8d6e63 !important;
  font-weight: 700;
  font-size: 1.1rem;
}

.dark-mode .order-container .postal-address-disabled {
  background-color: #424242 !important;
  color: #bdbdbd !important;
  border: 2px solid #757575 !important;
  opacity: 0.7;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center !important;
}

/* ===============================================================================
                                DREAM MODE STYLING
=============================================================================== */

.dream-mode.order-submission {
  background-color: #222;
}

.dream-mode.order-submission::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(45, 20, 60, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.order-submission::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-7.5L27.99 34.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .order-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: 18px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  position: relative;
  z-index: 1;
}

.dream-mode .order-container {
  background: #18151c;
  border-radius: 14px;
  border: 3px solid #000;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.25);
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dream-mode .order-process-info,
.dream-mode .order-summary {
  background: #fff !important;
  color: #000 !important;
  border-radius: 12px;
  border: 2px solid #8a2be2;
  box-shadow: 0 2px 12px 0 rgba(138,43,226,0.08);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.dream-mode .order-process-info .section-title,
.dream-mode .order-summary .section-title {
  color: #000 !important;
  text-shadow: none !important;
}

.dream-mode .order-process-info p,
.dream-mode .order-summary p,
.dream-mode .order-summary li,
.dream-mode .order-summary .item-name,
.dream-mode .order-summary .item-details,
.dream-mode .order-summary .item-price {
  color: #000 !important;
  text-shadow: none !important;
}

.dream-mode .order-title-panel {
  background-color: rgba(45, 20, 60, 0.95);
  border-color: #000000;
}

.dream-mode .order-title {
  animation: dreamText 20s linear infinite;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}

@keyframes dreamText {
  0% { color: #ff6b9d; }
  16.66% { color: #c44569; }
  33.33% { color: #f8b500; }
  50% { color: #3742fa; }
  66.66% { color: #2ed573; }
  83.33% { color: #ff3838; }
  100% { color: #ff6b9d; }
}

.dream-mode .back-to-cart-button {
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 600 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0px !important;
  padding: 1rem 2rem !important;
}

.dream-mode .submit-button {
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 900 !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.5px !important;
  padding: 1rem 2rem !important;
  filter: none !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  background-image: none !important;
  backdrop-filter: none !important;
}

.dream-mode .back-to-cart-button:hover,
.dream-mode .submit-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  filter: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  animation: none !important;
}

.dream-mode .section-title {
  color: white;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}

.dream-mode .submission-note {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.dream-mode .submission-success p {
  color: white !important;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}

.dream-mode .home-button {
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 600 !important;
  font-size: 1.4rem !important;
  padding: 1rem 2rem !important;
  letter-spacing: 0px !important;
}

.dream-mode .home-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleOrderSubmission 1.5s ease-in-out infinite alternate !important;
}

@keyframes dreamSparkleOrderSubmission {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

/* ===============================================================================
                                RESPONSIVE DESIGN
=============================================================================== */

@media (max-width: 768px) {
  .order-title {
    font-size: 2rem;
  }
  
  .order-container {
    padding: 1.5rem;
  }
  
  .back-to-cart-button,
  .submit-button,
  .home-button {
    font-size: 1.2rem;
    padding: 0.8rem 1.5rem;
  }
}

/* Submit effect animations */
.submit-effect-active {
  animation: submitPulse 0.6s ease-in-out;
}

.light-mode .submit-effect-active {
  animation: lightSubmitEffect 0.8s ease-in-out;
}

.dark-mode .submit-effect-active {
  animation: darkSubmitEffect 0.8s ease-in-out;
}

.dream-mode .submit-effect-active {
  animation: dreamSubmitEffect 1s ease-in-out;
}

@keyframes lightSubmitEffect {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  25% { 
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(141, 110, 99, 0.4);
  }
  50% { 
    transform: scale(1.1);
    box-shadow: 0 8px 16px rgba(93, 64, 55, 0.5);
  }
  75% { 
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(141, 110, 99, 0.4);
  }
}

@keyframes darkSubmitEffect {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  25% { 
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(141, 110, 99, 0.6);
  }
  50% { 
    transform: scale(1.1);
    box-shadow: 0 8px 16px rgba(141, 110, 99, 0.8);
  }
  75% { 
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(141, 110, 99, 0.6);
  }
}

@keyframes dreamSubmitEffect {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  20% { 
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 107, 157, 0.6);
  }
  40% { 
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.7);
  }
  60% { 
    transform: scale(1.08);
    box-shadow: 0 0 30px rgba(75, 0, 130, 0.8);
  }
  80% { 
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 107, 157, 0.6);
  }
}

.order-divider {
  width: 90%;
  margin: 1.2rem auto 1.2rem auto;
  border: none;
  border-top: 2px solid #bdbdbd;
  opacity: 0.7;
}

.form-label-large {
  font-size: 1.9rem;
  font-weight: 900;
  text-align: center;
  display: block;
  margin-bottom: 0.4rem;
  margin-top: 1.2rem;
  color: #8d6e63;
  letter-spacing: 0.01em;
}

/* Loyalty congratulations text styling */
.loyalty-congratulations.light-mode {
  text-shadow: none;
}

.loyalty-congratulations.dark-mode {
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}

.loyalty-congratulations.dream-mode {
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}

.dream-mode .order-container input:not(:disabled),
.dream-mode .order-container textarea:not(:disabled) {
  background-color: #fff !important;
  color: #000 !important;
  border: 2.5px solid #000 !important;
  text-align: center !important;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.dream-mode .order-container input:disabled,
.dream-mode .order-container .postal-address-disabled {
  background-color: #bdbdbd !important;
  color: #757575 !important;
  border: 2.5px solid #000 !important;
  opacity: 0.7;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center !important;
}

.light-mode .order-container .postal-address-disabled {
  background-color: #f5e3c3 !important;
  color: #3e2723 !important;
  border: 2.5px solid #8d6e63 !important;
  opacity: 1;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center !important;
}

.light-mode .order-container input:not(:disabled) {
  background-color: #fff !important;
  color: #000 !important;
  border: 2.5px solid #8d6e63 !important;
  text-align: center !important;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.dream-mode .order-container label,
.dream-mode .order-container .postal-address-disabled {
  color: #fff !important;
}

/* Dream mode: Make total items black, total price red, no glow */
.dream-mode .order-summary .order-total,
.dream-mode .order-total {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Dream mode: Specifically target total items text */
.dream-mode .total-items-text {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.dream-mode .order-summary .total-price-value {
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.8rem !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Dream mode: Make submission note white, no glow */
.dream-mode .submission-note,
.dream-mode .order-submission .submission-note,
.dream-mode .submission-note p {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Dream mode: Center align text input fields */
.dream-mode .form-input {
  text-align: center !important;
}

/* Dream mode: Remove ALL glow effects from order submission text */
.dream-mode .order-submission * {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Override global dream mode rule for Enter Code button specifically */
.dream-mode .order-submission .enter-code-button,
.dream-mode.order-submission .enter-code-button {
  background-color: #8d6e63 !important;
  color: #000 !important;
  border: 2px solid #000 !important;
  min-width: 110px !important;
  padding: 0.5em 1.2em !important;
  font-size: 1rem !important;
  font-family: 'The Wanters DEMO', serif !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .order-submission .order-total,
.dream-mode .order-submission .submission-note,
.dream-mode .order-submission .submission-note p {
  text-shadow: none !important;
  filter: none !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Dream mode: Apply black outline to total price value (more specific rule) */
.dream-mode .order-submission .total-price-value {
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.8rem !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Styles for free bag code selection */
.free-bag-group, .promo-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 1.5rem;
}

.free-bag-select {
  width: 100%;
  max-width: 400px;
  padding: 0.8rem;
  border: 2px solid #d7ccc8;
  border-radius: 4px;
  font-size: 1rem;
  background-color: rgba(255, 255, 255, 0.9);
  transition: border-color 0.3s ease;
  color: #3e2723;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  text-align: center !important;
  cursor: pointer;
  margin: 0 auto;
}

.free-bag-select:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.3);
}

/* Light mode specific */
.light-mode .free-bag-group {
  color: #3e2723;
}

.light-mode .free-bag-select {
  background-color: rgba(255, 255, 255, 0.9);
  color: #3e2723;
  border: 2px solid #d7ccc8;
}

.light-mode .free-bag-select:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.3);
}

/* Dark mode specific */
.dark-mode .free-bag-group {
  color: #ffffff;
}

.dark-mode .free-bag-select {
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  max-width: 400px;
  margin: 0 auto;
}

.dark-mode .free-bag-select:focus {
  outline: none;
  border-color: #a1887f !important;
  box-shadow: 0 0 0 2px rgba(161, 136, 127, 0.3);
}

/* Dream mode specific */
.dream-mode .free-bag-group {
  color: #ffffff;
}

.dream-mode .free-bag-select {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(5px);
  max-width: 400px;
  margin: 0 auto;
}

.dream-mode .free-bag-select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

/* ===============================================================================
                          SUPER AGGRESSIVE CHECKBOX STYLING
=============================================================================== */

/* Base checkbox - completely override everything */
input[type='checkbox'].order-checkbox {
  position: relative !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  border: 2px solid #8d6e63 !important;
  margin: 0 !important;
  margin-right: 0.8rem !important;
  padding: 0 !important;
  vertical-align: middle !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  outline: none !important;
  cursor: pointer !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.1s ease !important;
}

/* Checkbox checked state */
input[type='checkbox'].order-checkbox:checked::after {
  content: '✓' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 12px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  color: #8d6e63 !important;
  font-family: Arial, sans-serif !important;
}

/* Checkbox row */
.checkbox-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1.5rem !important;
  gap: 0.3rem !important;
}

/* Label styling */
.checkbox-label {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  user-select: none !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Light mode overrides */
.light-mode input[type='checkbox'].order-checkbox {
  border-color: #8d6e63 !important;
  background: #ffffff !important;
}

.light-mode input[type='checkbox'].order-checkbox:checked::after {
  color: #8d6e63 !important;
}

.light-mode .checkbox-label {
  color: #5d4037 !important;
}

/* Dark mode overrides */
.dark-mode input[type='checkbox'].order-checkbox {
  border-color: #8d6e63 !important;
  background: #ffffff !important;
}

.dark-mode input[type='checkbox'].order-checkbox:checked::after {
  color: #8d6e63 !important;
}

.dark-mode .checkbox-label {
  color: #8d6e63 !important;
}

/* Dream mode overrides */
.dream-mode input[type='checkbox'].order-checkbox {
  border-color: #000000 !important;
  background: #ffffff !important;
}

.dream-mode input[type='checkbox'].order-checkbox:checked::after {
  color: #000000 !important;
}

.dream-mode .checkbox-label {
  color: #ffffff !important;
}

.enter-code-button {
  background-color: #4CAF50 !important;
  color: #000000 !important;
}

.enter-code-button.light-mode {
  background-color: #4CAF50 !important;
  color: #000000 !important;
  border: 2px solid #3e2723;
}
.enter-code-button.light-mode:hover {
  background-color: #45a049 !important;
}
.dark-mode .enter-code-button {
  background-color: #4CAF50 !important;
  color: #000000 !important;
  border: 2px solid #000 !important;
  min-width: 110px !important;
  padding: 0.5em 1.2em !important;
  font-size: 1rem !important;
  font-family: 'The Wanters DEMO', serif !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}
.dark-mode .enter-code-button:hover {
  background-color: #45a049 !important;
}
.dream-mode .order-submission .enter-code-button,
.dream-mode.order-submission .enter-code-button,
.dream-mode .enter-code-button {
  background-color: #4CAF50 !important;
  color: #000000 !important;
  border: 2px solid #000 !important;
  min-width: 110px !important;
  padding: 0.5em 1.2em !important;
  font-size: 1rem !important;
  font-family: 'The Wanters DEMO', serif !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
  filter: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
  animation: none !important;
}
.dream-mode .order-submission .enter-code-button:hover,
.dream-mode .order-submission .enter-code-button:hover,
.dream-mode .enter-code-button:hover {
  background-color: #45a049 !important;
  filter: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  animation: none !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
} 
.privacy-policy-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.privacy-policy-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.privacy-policy-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-7.5L27.99 34.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.privacy-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 850px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.privacy-container {
  width: 100%;
  max-width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.privacy-title-panel {
  font-weight: bold;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 400px;
  cursor: pointer;
}

.privacy-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

.home-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
  margin-bottom: 2rem;
}

.home-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
}

.privacy-details {
  width: 100%;
  text-align: center;
  padding: 2rem;
  margin-bottom: 2rem;
  background-color: rgba(141, 110, 99, 0.1);
  border-radius: 8px;
  border: 2px solid #d7ccc8;
  max-height: 60vh;
  overflow-y: auto;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.privacy-details h2 {
  font-size: 1.8rem;
  color: #3e2723;
  margin-bottom: 1rem;
  text-align: center;
}

.privacy-details h3 {
  font-size: 1.4rem;
  color: #5d4037;
  margin: 1.5rem 0 0.8rem 0;
}

.privacy-details p {
  margin: 0.8rem 0;
  font-size: 1rem;
  color: #3e2723;
  line-height: 1.6;
}

.privacy-details ul {
  margin: 0.8rem 0;
  padding-left: 1.5rem;
}

.privacy-details li {
  margin: 0.5rem 0;
  font-size: 1rem;
  color: #3e2723;
  line-height: 1.6;
}

.privacy-details a {
  color: #8d6e63;
  text-decoration: underline;
}

.privacy-details a:hover {
  color: #5d4037;
}

.app-info {
  background-color: rgba(141, 110, 99, 0.15);
  padding: 1rem;
  border-radius: 6px;
  margin: 1rem 0;
}

.app-details {
  font-size: 1rem;
  margin: 0;
}

.effective-date {
  font-style: italic;
  font-weight: 600;
  color: #5d4037;
  text-align: center;
  margin: 1rem 0 2rem 0;
}

.agreement {
  background-color: rgba(141, 110, 99, 0.2);
  padding: 1.5rem;
  border-radius: 8px;
  border: 2px solid #8d6e63;
  margin-top: 2rem;
  text-align: center;
}

.privacy-actions {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
}

.contact-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
}

.contact-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
  text-decoration: none;
}

/* Dark mode styles */
.dark-mode.privacy-policy-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode.privacy-policy-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode.privacy-policy-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-7.5L27.99 34.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .privacy-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .privacy-container {
  background-color: rgba(62, 39, 35, 0.9);
  color: #fff8e1;
  padding: 2rem 2rem 0.5rem 2rem !important; /* Further reduced bottom padding to exactly match light mode */
}

.dark-mode .privacy-title {
  color: #000000 !important;
  text-shadow: none;
}

.dark-mode .privacy-title-panel {
  background-color: #3e2723;
  border: 3px solid #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.dark-mode .privacy-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dark-mode .privacy-details {
  border-color: #5d4037;
  background-color: #8d6e63;
}

.dark-mode .privacy-details h2,
.dark-mode .privacy-details h3,
.dark-mode .privacy-details p,
.dark-mode .privacy-details li {
  color: #000000 !important;
}

.dark-mode .privacy-details a {
  color: #3e2723;
}

.dark-mode .privacy-details a:hover {
  color: #000000;
}

.dark-mode .app-info {
  background-color: rgba(93, 64, 55, 0.3);
}

.dark-mode .agreement {
  background-color: rgba(93, 64, 55, 0.4);
  border-color: #5d4037;
}

.privacy-policy-page:not(.dark-mode):not(.dream-mode) .home-button,
.privacy-policy-page:not(.dark-mode):not(.dream-mode) .contact-button {
  border: 3px solid #3e2723 !important;
  border-radius: 9999px !important; /* Ensure pill shape in light mode */
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
}

/* Extra specificity for light mode home button pill shape */
.privacy-policy-page:not(.dark-mode):not(.dream-mode) .home-button {
  border-radius: 9999px !important; /* Force pill shape specifically for home button in light mode */
  display: inline-block !important;
  text-decoration: none !important;
}

/* Dark mode button styling with ultra-high specificity */
body.dark-mode .privacy-policy-page .home-button,
body.dark-mode .privacy-policy-page .contact-button,
.dark-mode.privacy-policy-page .home-button,
.dark-mode.privacy-policy-page .contact-button,
.dark-mode .privacy-policy-page .home-button,
.dark-mode .privacy-policy-page .contact-button,
.dark-mode .home-button,
.dark-mode .contact-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #000000 !important;
  margin-bottom: 2rem !important;
  font-family: 'The Wanters DEMO', serif !important;
}

/* Dark mode button hover styling with ultra-high specificity */
body.dark-mode .privacy-policy-page .home-button:hover,
body.dark-mode .privacy-policy-page .contact-button:hover,
.dark-mode.privacy-policy-page .home-button:hover,
.dark-mode.privacy-policy-page .contact-button:hover,
.dark-mode .privacy-policy-page .home-button:hover,
.dark-mode .privacy-policy-page .contact-button:hover,
.dark-mode .home-button:hover,
.dark-mode .contact-button:hover {
  background-color: #a1887f !important;
  color: #000000 !important;
  text-decoration: none !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Dream mode styles */
.dream-mode.privacy-policy-page {
  background-color: #222;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%);
  background-size: cover, 300px 300px, 300px 300px;
  background-position: center, 0 0, 150px 150px;
  background-blend-mode: color-burn;
}

.dream-mode.privacy-policy-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.privacy-policy-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-7.5L27.99 34.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .privacy-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream-mode .privacy-container {
  background-color: rgba(26, 26, 26, 0.9);
  border: 3px solid #000000;
}

.dream-mode .privacy-title {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  animation: none !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dream-mode .privacy-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .privacy-details {
  background-color: rgba(26, 26, 26, 0.8);
  border: 2px solid #000000;
}

.dream-mode .privacy-details h2,
.dream-mode .privacy-details h3,
.dream-mode .privacy-details p,
.dream-mode .privacy-details li {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .privacy-details a {
  color: #8d6e63;
}

.dream-mode .app-info {
  background-color: rgba(26, 26, 26, 0.6);
  border: 1px solid #444;
}

.dream-mode .agreement {
  background-color: rgba(26, 26, 26, 0.7);
  border-color: #444;
}

.dream-mode .home-button:not(:hover),
.dream-mode .contact-button:not(:hover) {
  background-color: #8d6e63 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 900 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.5px !important;
  border: 3px solid #000000 !important;
}

.dream-mode .home-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparklePrivacy 1.5s ease-in-out infinite alternate !important;
  text-decoration: none !important;
}

.dream-mode .contact-button:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  animation: none !important;
  text-decoration: none !important;
}

@keyframes dreamSparklePrivacy {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .privacy-title {
    font-size: 2.5rem;
  }
  
  .privacy-background-panel {
    width: 98%;
    padding: 1rem;
  }
  
  .privacy-container {
    padding: 1.5rem;
  }
  
  .privacy-details {
    padding: 1.5rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .privacy-background-panel {
    width: 99%;
    padding: 0.75rem;
  }
  
  .privacy-container {
    padding: 1.25rem;
  }
  
  .privacy-details {
    padding: 1.25rem;
    max-height: 50vh;
  }
  
  .privacy-details h2 {
    font-size: 1.5rem;
  }
  
  .privacy-details h3 {
    font-size: 1.2rem;
  }
  
  .privacy-details p,
  .privacy-details li {
    font-size: 0.9rem;
  }
} 
.product-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.product-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.product-detail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-7.5L27.99 34.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.product-detail-title-panel {
  background: radial-gradient(circle at 50% 50%, rgba(245, 245, 220, 1) 70%, rgba(245, 245, 220, 0.92) 90%, rgba(245, 245, 220, 0.7) 100%) !important;
  border: 3px solid #3e2723;
  border-radius: 20px;
  padding: 1.5rem 3rem;
  margin-bottom: 1rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.dark-mode .product-detail-title-panel {
  background-color: #3e2723 !important;
  background-image: none !important;
}

.dream-mode .product-detail-title-panel {
  background: unset;
}

.product-detail-title {
  font-size: 3rem;
  font-weight: 900; /* Extra bold */
  margin: 0;
  color: #14545c; /* Teal color matching selling button */
  position: relative;
  z-index: 1;
}

.top-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 800px;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.back-to-products {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 30px;
  font-size: 1rem;
  text-decoration: none;
  font-weight: 600;
  font-family: 'Arial Black', Arial, sans-serif;
  font-stretch: condensed;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.back-to-products:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  text-decoration: none;
}

.nav-button {
  padding: 0.8rem 1.5rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 30px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  font-family: var(--font-family);
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.product-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 800px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
}

.flavor-panel {
  background-color: #f5f5dc;
  border: 3px solid #3e2723;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
}

.product-detail-name {
  font-size: 5.5rem;
  font-weight: 900;
  margin-bottom: 1.5rem;
  color: #3e2723;
  text-align: center;
  letter-spacing: 1px;
  white-space: nowrap;
  transition: color 0.3s ease;
  text-shadow: none;
}

.product-detail-name:hover {
  color: #5d4037;
}

.product-detail-image-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
  height: 300px; /* Fixed height for consistency */
  overflow: hidden;
  position: relative;
}

.product-detail-image {
  width: 300px; /* Fixed width */
  height: 300px; /* Fixed height */
  object-fit: cover; /* Maintain aspect ratio and cover the container */
  border-radius: 8px;
  border: 3px solid #8d6e63;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.product-detail-description {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: #5d4037;
  text-align: center;
  max-width: 600px;
}

.product-size-options {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  width: 100%;
}

.size-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  border: 3px solid #3e2723;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 150px;
  background-color: rgba(255, 255, 255, 0.7);
}

.size-option:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.size-option.selected {
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.size-name {
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.size-price {
  font-size: 1.8rem;
  font-weight: 900;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #ff0000;
}

.product-quantity {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}

.product-quantity label {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #3e2723;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 900;
}

.max-quantity-info {
  font-size: 1.1rem;
  color: #3e2723;
  margin: 0.5rem 0 0 0;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 900;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.quantity-button {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #8d6e63 !important;
  color: white !important;
  border: 3px solid #3e2723 !important;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: bold;
  font-family: var(--font-family);
  transition: all 0.2s ease;
  outline: none;
}

.quantity-button:hover {
  background-color: #a1887f;
}

.quantity-value {
  font-size: 2.2rem;
  font-weight: 900;
  color: #3e2723;
  min-width: 30px;
  text-align: center;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.product-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.add-to-cart-button {
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  font-family: var(--font-family);
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 200px;
}

.add-to-cart-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.view-cart-button {
  padding: 1rem 2rem;
  background-color: #5d4037;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  font-family: var(--font-family);
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 200px;
  text-align: center;
  text-decoration: none;
}

.view-cart-button:hover {
  background-color: #795548;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  color: white;
}

/* Nutritional Information Section - Separate White Box */
.nutritional-info-section {
  width: 100%;
  max-width: 800px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  margin-top: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nutritional-info-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
}

.nutritional-panel {
  width: 100%;
  max-width: 600px;
  background-color: #ffffff;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  overflow: hidden;
}

.nutritional-header {
  background-color: #f5f5f5;
  padding: 1rem;
  border-bottom: 2px solid #8d6e63;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.nutritional-header-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 120px;
}

.header-label {
  font-size: 0.9rem;
  color: #5d4037;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.header-value {
  font-size: 1.1rem;
  color: #3e2723;
  font-weight: bold;
}

.nutritional-table {
  background-color: #ffffff;
}

.nutritional-table-header {
  background-color: #8d6e63;
  color: white;
  padding: 0.75rem 1rem;
  font-weight: bold;
  font-size: 1.1rem;
  border-bottom: 1px solid #6d4c41;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
}

.nutritional-label-header {
  text-align: left;
}

.nutritional-value-header {
  text-align: center;
  font-weight: bold;
}

.nutritional-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e0e0e0;
  transition: background-color 0.2s ease;
}

.nutritional-row:hover {
  background-color: #f9f9f9;
}

.nutritional-row:last-child {
  border-bottom: none;
}

.nutritional-label {
  font-weight: 600;
  color: #3e2723;
  text-align: left;
}

.nutritional-value {
  font-weight: bold;
  color: #5d4037;
  text-align: center;
}

/* Removed border extensions for consistent table appearance
.fat-section,
.fat-subsection {
  border-left: 4px solid #8d6e63;
}
*/

.fat-subsection .nutritional-label,
.sugar-subsection .nutritional-label {
  padding-left: 1rem;
  font-style: italic;
  color: #6d4c41;
}

/* Removed border extensions for consistent table appearance
.sugar-subsection {
  border-left: 4px solid #8d6e63;
}
*/

.ingredients-section {
  background-color: #f8f5f0;
  padding: 1.5rem;
  border-top: 2px solid #8d6e63;
  text-align: center;
}

.ingredients-title {
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 1.5rem;
  text-align: center;
  padding: 1rem;
  border: 2px solid #000000;
  border-radius: 8px;
  background-color: #5d4037;
}

.allergen-info {
  font-size: 1.5rem;
  color: #3e2723;
  margin: 1.5rem 0 0 0;
  line-height: 1.4;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.allergen-info strong {
  color: #d32f2f;
  font-weight: 900;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Dark mode styles */
.dark-mode .product-detail {
  background-color: #3e2723;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 84 48'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23412f2a' fill-opacity='0.25'%3E%3Cpath d='M42 48c23.196 0 42-10.745 42-24S65.196 0 42 0 0 10.745 0 24s18.804 24 42 24zm0-5c19.33 0 35-8.954 35-19s-15.67-19-35-19S7 13.954 7 24s15.67 19 35 19z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
  background-position: center, center;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode .product-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode .product-detail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-7.5L27.99 34.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .product-detail-title-panel {
  background-color: #3e2723;
  border: 3px solid #000000;
  border-radius: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  padding: 1.5rem 3rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.dark-mode .product-detail-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  font-size: 3rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
  font-family: var(--font-family);
  cursor: pointer;
  transition: color 0.3s ease;
}

.dark-mode .product-detail-title:hover {
  color: #a1887f !important;
}

.dark-mode .product-content {
  background-color: rgba(26, 26, 26, 0.9);
  border: 3px solid #000000;
}

.dark-mode .product-detail-description {
  color: #fff8e1;
}

.dark-mode .product-detail-name {
  color: #8d6e63 !important;
  text-shadow: 
    -1.5px -1.5px 0 #000,
    1.5px -1.5px 0 #000,
    -1.5px 1.5px 0 #000,
    1.5px 1.5px 0 #000 !important;
}

.dark-mode .product-detail-name:hover {
  color: #a1887f !important;
}

.dark-mode .product-detail-image {
  border: 3px solid #000000;
}

.dark-mode .flavor-panel {
  background-color: #3e2723 !important;
  border: 3px solid #000000;
}

.dark-mode .size-option {
  background-color: rgba(62, 39, 35, 0.8);
  border: 3px solid #000000;
  color: #fff8e1;
}

.dark-mode .size-option.selected {
  background-color: #a1887f;
  border: 3px solid #000000;
}

.dark-mode .size-name {
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.dark-mode .size-price {
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: #ff0000 !important;
}

.dark-mode .product-quantity label,
.dark-mode .max-quantity-info {
  color: #ffffff !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 900 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .quantity-value {
  background-color: #8d6e63;
  color: #c4a690 !important;
  padding: 0.5rem;
  border-radius: 4px;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .nutritional-info-section {
  background-color: rgba(26, 26, 26, 0.9);
  color: #fff8e1;
  border: 3px solid #000000;
}

.dark-mode .nutritional-info-title,
.dark-mode .nutritional-label,
.dark-mode .nutritional-value {
  color: #fff8e1;
}

.dark-mode .nutritional-info-title {
  border: 2px solid #000000 !important;
}

.dark-mode .nutritional-info-item {
  background-color: rgba(141, 110, 99, 0.2);
  border-color: #5d4037;
}

.dream-mode .nutritional-info-section {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  ) !important;
  color: #000000 !important;
  border: 3px solid #000000;
}

.dream-mode .product-detail {
  background-color: #0d0d0d;
  background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  position: relative;
}

.dream-mode .product-detail-title-panel {
  background: #111111 !important;
  background-color: #111111 !important;
  background-image: none !important;
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .product-content {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  ) !important;
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .flavor-panel {
  background: #111111 !important;
  background-color: #111111 !important;
  background-image: none !important;
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .nav-button,
.dream-mode .back-to-products,
.dream-mode .add-to-cart-button,
.dream-mode .view-cart-button,
.dream-mode .quantity-button {
  border: 2px solid #000000;
}

.dream-mode .size-option {
  border: 3px solid #000000;
}

.dream-mode .size-option {
  background-color: #8d6e63 !important; /* Match add-to-cart button color */
  border: 3px solid #000000;
}

.dream-mode .size-option.selected {
  background-color: #888888 !important; /* Grey selected state instead of brown */
  border: 3px solid #000000;
  color: white !important;
}

.dream-mode .nutritional-info-item {
  background-color: #111111 !important;
  border-color: #000000;
}

.dream-mode .nutritional-panel {
  background-color: #ffffff !important;
  border: 3px solid #000000;
}

.dream-mode .nutritional-header {
  background-color: #ffffff !important;
  border-bottom: 2px solid #000000;
}

.dream-mode .nutritional-table {
  background-color: #ffffff !important;
}

.dream-mode .nutritional-table-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #000000;
}

.dream-mode .nutritional-info-title,
.dream-mode .nutritional-label,
.dream-mode .nutritional-value,
.dream-mode .header-label,
.dream-mode .header-value,
.dream-mode .nutritional-label-header,
.dream-mode .nutritional-value-header,
.dream-mode .fat-subsection .nutritional-label,
.dream-mode .sugar-subsection .nutritional-label {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .product-detail .ingredients-section,
.dream-mode .nutritional-info-section .ingredients-section {
  background-color: #ffffff !important;
  border-top: 2px solid #000000;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .product-detail .ingredients-section p,
.dream-mode .product-detail .ingredients-section span,
.dream-mode .nutritional-info-section .ingredients-section p,
.dream-mode .nutritional-info-section .ingredients-section span {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .product-detail .allergen-info,
.dream-mode .product-detail .allergen-info p,
.dream-mode .product-detail .allergen-info span,
.dream-mode .nutritional-info-section .allergen-info,
.dream-mode .nutritional-info-section .allergen-info p,
.dream-mode .nutritional-info-section .allergen-info span {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .product-detail .allergen-info strong,
.dream-mode .nutritional-info-section .allergen-info strong {
  color: #d32f2f !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dark-mode .product-detail .ingredients-section,
.dark-mode .product-detail .ingredients-section p,
.dark-mode .product-detail .ingredients-section span,
.dark-mode .nutritional-info-section .ingredients-section,
.dark-mode .nutritional-info-section .ingredients-section p,
.dark-mode .nutritional-info-section .ingredients-section span {
  color: #d7ccc8 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dark-mode .product-detail .allergen-info,
.dark-mode .product-detail .allergen-info p,
.dark-mode .product-detail .allergen-info span,
.dark-mode .nutritional-info-section .allergen-info,
.dark-mode .nutritional-info-section .allergen-info p,
.dark-mode .nutritional-info-section .allergen-info span {
  color: #d7ccc8 !important;
  text-shadow: none !important;
  animation: none !important;
}



.dream-mode .ingredients-title {
  background-color: #111111 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  border: 3px solid #000000;
}

.dark-mode .nutritional-info-title,
.dark-mode .nutritional-label,
.dark-mode .nutritional-value {
  color: #fff8e1;
}

.dark-mode .nutritional-info-section {
  background-color: rgba(26, 26, 26, 0.9);
  color: #fff8e1;
  border: 3px solid #000000;
}

.dark-mode .nutritional-panel {
  background-color: #8d6e63;
  border: 3px solid #000000;
}

.dark-mode .nutritional-header {
  background-color: #8d6e63;
  border-bottom: 2px solid #000000;
}

.dark-mode .header-label {
  color: #d7ccc8;
}

.dark-mode .header-value {
  color: #fff8e1;
}

.dark-mode .nutritional-table {
  background-color: #8d6e63;
}

.dark-mode .nutritional-table-header {
  background-color: #2a2a2a;
  color: #fff8e1;
  border-bottom: 1px solid #000000;
}

.dark-mode .nutritional-label-header,
.dark-mode .nutritional-value-header {
  color: #fff8e1;
}

.dark-mode .nutritional-label,
.dark-mode .nutritional-value {
  color: #fff8e1;
}

.dark-mode .nutritional-value {
  color: #d7ccc8;
}

.dark-mode .nutritional-row {
  border-bottom: 1px solid #666666;
}

.dark-mode .nutritional-row:hover {
  background-color: #8d6e63;
}

/* Removed border extensions for consistent table appearance
.dark-mode .fat-section,
.dark-mode .fat-subsection,
.dark-mode .sugar-subsection {
  border-left: 4px solid #000000;
}
*/

.dark-mode .fat-subsection .nutritional-label,
.dark-mode .sugar-subsection .nutritional-label {
  color: #b0b0b0;
}

.dark-mode .ingredients-section {
  background-color: #3a3a3a;
  border-top: 2px solid #000000;
}

.dark-mode .allergen-info {
  color: #fff8e1;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .allergen-info strong {
  color: #d32f2f;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .nutritional-info-item {
  background-color: rgba(141, 110, 99, 0.2);
  border-color: #5d4037;
}

.dream-mode .nutritional-info-title {
  background-color: #111111 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  border: 3px solid #000000;
}

.dream-mode .product-detail-name {
  text-shadow: 
    -1.5px -1.5px 0 #000,
    1.5px -1.5px 0 #000,
    -1.5px 1.5px 0 #000,
    1.5px 1.5px 0 #000;
}

/* Dream mode product detail title - remove glow, add clean black outline like flavor title */
.dream-mode .product-detail-title {
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important; /* Clean 1px black outline, override global glow */
  animation: dreamText 20s infinite linear !important; /* Keep the color-changing animation */
}

/* Dream mode size option text - black by default */
.dream-mode .size-name {
  color: #000000 !important;
  text-shadow: none !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.dream-mode .size-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Dream mode size option text - white on hover */
.dream-mode .size-option:hover .size-name,
.dream-mode .size-option:hover .size-price {
  color: #ffffff !important;
  text-shadow: none !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Dream mode quantity value override - cyan with 1px black outline */
.dream-mode .quantity-value {
  color: #40e0d0 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Dream mode quantity label and max info - white with black outline */
.dream-mode .product-quantity label,
.dream-mode .max-quantity-info {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 900 !important;
}

.dream-mode .product-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(13, 13, 13, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode .product-detail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dark-mode .product-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode .product-detail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Responsive scaling for product detail name */
@media (max-width: 768px) {
  .product-detail-name {
    font-size: 4rem;
    white-space: normal;
    word-wrap: break-word;
  }
  
  .product-detail-title {
    font-size: 2.5rem;
  }
  
  .product-detail-title-panel {
    padding: 1rem 2rem;
  }
}

@media (max-width: 480px) {
  .product-detail-name {
    font-size: 3rem;
    white-space: normal;
    word-wrap: break-word;
  }
  
  .product-detail-title {
    font-size: 2rem;
  }
  
  .product-detail-title-panel {
    padding: 0.8rem 1.5rem;
  }
  
  .flavor-panel {
    padding: 0.8rem;
  }
}

/* Sold Out and Stock Warning Styles */
.sold-out-info {
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', sans-serif !important;
  font-weight: bold;
  margin: 5px 0;
  text-align: center;
  font-size: 1.3rem;
}

.dark-mode .sold-out-info,
.dream-mode .sold-out-info {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.light-mode .sold-out-info {
  text-shadow: none !important;
}

.low-stock-warning {
  color: #ff6b35;
  font-weight: bold;
  font-size: 0.8rem;
}

.add-to-cart-button:disabled {
  background-color: #666 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

.quantity-button:disabled {
  background-color: #666 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

.max-quantity-num, .max-quantity-num.low-stock-max, .dark-mode .max-quantity-num, .dark-mode .max-quantity-num.low-stock-max, .dream-mode .max-quantity-num, .dream-mode .max-quantity-num.low-stock-max {
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important;
}

.max-num-light {
  color: #3e2723;
  text-shadow: none;
}

.max-num-dark {
  color: #fff;
  text-shadow:
    -0.5px -0.5px 0 #000,
    0.5px -0.5px 0 #000,
    -0.5px 0.5px 0 #000,
    0.5px 0.5px 0 #000;
}

.dark-mode .max-quantity-num {
  color: #fff !important;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important;
}

.dark-mode .max-quantity-num.low-stock-max {
  color: #d32f2f !important;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important;
}

.low-stock-max {
  color: #ff3333 !important;
}

.dream-mode .max-quantity-num {
  color: unset !important; /* Let animation set the color */
  animation: dreamText 20s infinite linear !important;
  text-shadow:
    -0.75px -0.75px 0 #000,
    0.75px -0.75px 0 #000,
    -0.75px 0.75px 0 #000,
    0.75px 0.75px 0 #000 !important;
  filter: none !important;
}

.dream-mode .max-quantity-num.low-stock-max {
  color: #d32f2f !important;
  animation: none !important;
  text-shadow:
    -0.75px -0.75px 0 #000,
    0.75px -0.75px 0 #000,
    -0.75px 0.75px 0 #000,
    0.75px 0.75px 0 #000 !important;
}

.dark-mode .sold-out-info {
  color: #d32f2f !important;
  font-family: 'The Wanters DEMO', Tahoma, sans-serif !important;
  font-size: 1.3rem;
  font-weight: 900;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important;
  letter-spacing: 0.5px;
  margin: 5px 0;
  text-align: center;
}

.light-mode .sold-out-info {
  text-shadow: none !important;
}

.light-mode .max-quantity-num {
  text-shadow: none !important;
} 
.theme-switch-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  padding: 1rem;
  position: relative;
  z-index: 1;
}

/* Lower positioning for specific pages */
.landing-screen .theme-switch-container {
  margin-top: 8rem;
  margin-bottom: 2rem;
}

.options-page .theme-switch-container,
.product-detail .theme-switch-container {
  margin-top: 4rem;
  margin-bottom: 2rem;
}

.theme-switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.switch-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.switch-labels.two-position,
.theme-switch.two-position .switch-labels {
  width: 80px;
}

.switch-labels.three-position,
.theme-switch.three-position .switch-labels {
  width: 120px;
}

.switch-label {
  font-size: 1.2rem;
  opacity: 0.4;
  transition: all 0.3s ease;
}

.switch-label.active {
  opacity: 1;
  transform: scale(1.1);
}

.switch-track {
  position: relative;
  height: 36px;
  background: #e0e0e0;
  border-radius: 18px;
  border: 2px solid #ccc;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.switch-track:hover {
  background: #d5d5d5;
  border-color: #aaa;
}

.switch-track.two-position {
  width: 80px;
}

.switch-track.three-position {
  width: 120px;
}

.switch-thumb {
  position: absolute;
  top: 2px;
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #bbb;
  transition: all 0.4s ease;
  z-index: 2;
  pointer-events: none; /* Prevent thumb from blocking clicks */
}

/* Two-position thumb positions */
.switch-thumb.light-position.two-position {
  left: 2px;
  background: #fff3e0;
}

.switch-thumb.dark-position.two-position {
  left: 46px;
  background: #424242;
}

/* Three-position thumb positions */
.switch-thumb.light-position.three-position {
  left: 2px;
  background: #fff3e0;
}

.switch-thumb.dark-position.three-position {
  left: 44px;
  background: #424242;
}

.switch-thumb.dream-position.three-position {
  left: 86px;
  background: #9c27b0;
}

/* Dark mode styles */
.dark-mode .switch-track {
  background: #2a2a2a;
  border-color: #555;
}

.dark-mode .switch-track:hover {
  background: #333;
  border-color: #666;
}

.dark-mode .switch-thumb {
  border-color: #555;
}

/* Dream mode styles */
.dream-mode .switch-track {
  background: #333;
  border: 3px solid #000000;
}

.dream-mode .switch-track:hover {
  background: #444;
}

.dream-mode .switch-thumb {
  border: 2px solid #000000;
}

.dream-mode .switch-label {
  animation: dreamText 20s infinite linear;
  text-shadow: 0 0 5px currentColor;
}

/* Responsive design */
@media (max-width: 768px) {
  .theme-switch-container {
    margin-top: 1.5rem;
    padding: 0.8rem;
  }
  
  /* Lower positioning for specific pages on mobile */
  .landing-screen .theme-switch-container {
    margin-top: 6rem;
    margin-bottom: 1.5rem;
  }
  
  .options-page .theme-switch-container,
  .product-detail .theme-switch-container {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
  }
  
  .switch-track {
    height: 32px;
  }
  
  .switch-track.two-position {
    width: 70px;
  }
  
  .switch-track.three-position {
    width: 105px;
  }
  
  .switch-thumb {
    width: 24px;
    height: 24px;
    top: 2px;
  }
  
  .switch-thumb.light-position.two-position {
    left: 2px;
  }
  
  .switch-thumb.dark-position.two-position {
    left: 42px;
  }
  
  .switch-thumb.light-position.three-position {
    left: 2px;
  }
  
  .switch-thumb.dark-position.three-position {
    left: 38px;
  }
  
  .switch-thumb.dream-position.three-position {
    left: 77px;
  }
  
  .switch-labels.two-position,
  .theme-switch.two-position .switch-labels {
    width: 70px;
  }
  
  .switch-labels.three-position,
  .theme-switch.three-position .switch-labels {
    width: 105px;
  }
} 
/* UserMenu Component Styles - Center Aligned */

.user-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.user-menu-modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  margin: 1rem;
  border: 2px solid #8d6e63;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.user-menu-modal.dark-mode {
  background: #3e2723;
  border-color: #000000;
  color: #fff8e1;
}

.user-menu-modal.dream-mode {
  background: linear-gradient(135deg, rgba(26, 13, 35, 1) 0%, rgba(45, 20, 60, 1) 25%, rgba(60, 30, 80, 1) 50%, rgba(45, 20, 60, 1) 75%, rgba(26, 13, 35, 1) 100%);
  border-color: #000000;
  color: #ffffff;
}

.user-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.user-menu-header h2 {
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: 2rem;
  color: #8d6e63;
  font-weight: 700;
  flex: 1;
  text-align: center;
}

.dark-mode .user-menu-header {
  border-bottom-color: #000000;
}

.dark-mode .user-menu-header h2 {
  color: #fff8e1;
}

.dream-mode .user-menu-header {
  border-bottom-color: #000000;
}

.dream-mode .user-menu-header h2 {
  color: #ffffff;
}

.user-menu-close {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #999;
  transition: all 0.2s ease;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.user-menu-close:hover {
  color: #d32f2f;
  transform: scale(1.1);
}

.user-menu-content {
  padding: 1.5rem;
}

.user-info-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #8d6e63;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  border: 3px solid #3e2723;
}

.dark-mode .user-avatar {
  background: #8d6e63;
  border-color: #000000;
}

.dream-mode .user-avatar {
  background: #8d6e63;
  border-color: #000000;
}

.avatar-initial {
  font-size: 3.2rem;
  font-weight: 700;
  color: white;
  font-family: 'The Wanters DEMO', serif;
}

.user-details {
  width: 100%;
  max-width: 380px;
}

.user-field-section {
  margin-bottom: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.user-field-section.flash-red {
  background-color: rgba(244, 67, 54, 0.1);
  border: 2px solid #f44336;
  border-radius: 8px;
  padding: 1rem;
  animation: flashRed 0.5s ease-in-out;
}

@keyframes flashRed {
  0% { background-color: rgba(244, 67, 54, 0.1); }
  50% { background-color: rgba(244, 67, 54, 0.3); }
  100% { background-color: rgba(244, 67, 54, 0.1); }
}

.user-field-section label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #3e2723;
  font-size: 1rem;
  text-align: center;
}

.dark-mode .user-field-section label {
  color: #fff8e1;
}

.dream-mode .user-field-section label {
  color: #ffffff;
}

.display-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: #f5f5f5;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.dark-mode .display-container {
  background: #8d6e63;
  border-color: #000000;
}

.dream-mode .display-container {
  background: rgba(26, 26, 26, 0.9);
  border-color: #000000;
}

.current-value {
  font-weight: 500;
  color: #3e2723;
  font-size: 1rem;
  text-align: center;
  word-break: break-word;
}

.dark-mode .current-value {
  color: #3e2723;
}

.dream-mode .current-value {
  color: #ffffff;
}

.readonly-value {
  background: #f5f5f5;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid #ddd;
  color: #666;
  font-style: italic;
  display: block;
  text-align: center;
  word-break: break-word;
}

.dark-mode .readonly-value {
  background: #8d6e63;
  border-color: #000000;
  color: #3e2723;
}

.dream-mode .readonly-value {
  background: rgba(26, 26, 26, 0.9);
  border-color: #000000;
  color: #ffffff;
}

.edit-button {
  background: #8d6e63;
  color: white;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
  font-weight: 600;
}

.edit-button:hover {
  background: #a1887f;
}

.dream-mode .edit-button {
  background: #ff00cc;
}

.dream-mode .edit-button:hover {
  background: #cc0099;
}

.dark-mode .edit-button {
  border: 2px solid #000000;
}

.dark-mode .hate-jerky-button {
  border: 2px solid #000000;
}

.edit-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

.field-input {
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background: white;
  color: #3e2723;
  width: 100%;
  max-width: 300px;
  text-align: center;
}

.address-input {
  text-align: left;
  resize: vertical;
  min-height: 80px;
}

.dark-mode .field-input {
  background: #8d6e63;
  border-color: #000000;
  color: #000000 !important;
}

.dream-mode .field-input {
  background: rgba(26, 26, 26, 0.9);
  border-color: #000000;
  color: #ffffff;
}

.edit-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.save-button,
.cancel-button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.save-button {
  background: #4caf50;
  color: white;
}

.save-button:hover:not(:disabled) {
  background: #45a049;
}

.save-button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.cancel-button {
  background: #f44336;
  color: white;
}

.cancel-button:hover:not(:disabled) {
  background: #da190b;
}

.user-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.dark-mode .user-stats-grid {
  border-top-color: #000000;
}

.dream-mode .user-stats-grid {
  border-top-color: #000000;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #f9f9f9;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid #eee;
}

.dark-mode .stat-item {
  background: #8d6e63;
  border-color: #000000;
}

.dream-mode .stat-item {
  background: rgba(26, 26, 26, 0.9);
  border-color: #000000;
}

.stat-item label {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.dark-mode .stat-item label {
  color: #3e2723;
}

.dream-mode .stat-item label {
  color: #ffffff;
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: #8d6e63;
  font-family: 'The Wanters DEMO', serif;
}

.dark-mode .stat-value {
  color: #3e2723;
}

.dream-mode .stat-value {
  color: #ffffff;
}

.user-menu-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #eee;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.dark-mode .user-menu-footer {
  border-top-color: #000000;
}

.dream-mode .user-menu-footer {
  border-top-color: #000000;
}

/* Delivery Preference Checkbox */
.delivery-preference-section {
  display: flex;
  justify-content: center;
  width: 100%;
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.checkbox-container:hover {
  background-color: rgba(139, 110, 99, 0.1);
}

.dark-mode .checkbox-container:hover {
  background-color: rgba(255, 248, 225, 0.1);
}

.dream-mode .checkbox-container:hover {
  background-color: rgba(255, 0, 204, 0.1);
}

.checkbox-input {
  width: 18px;
  height: 18px;
  accent-color: #8d6e63;
  cursor: pointer;
}

.dream-mode .checkbox-input {
  accent-color: #ff00cc;
}

.checkbox-label {
  font-size: 14px;
  font-weight: 500;
  color: #3e2723;
  cursor: pointer;
  user-select: none;
}

.dark-mode .checkbox-label {
  color: #fff8e1;
}

.dream-mode .checkbox-label {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.hate-jerky-button {
  background: #d32f2f;
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-family: 'The Wanters DEMO', serif;
}

.hate-jerky-button:hover {
  background: #c62828;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Delete Confirmation Modal */
.delete-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1100;
  backdrop-filter: blur(4px);
}

.delete-confirm-modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  max-width: 450px;
  width: 90%;
  margin: 1rem;
  border: 3px solid #d32f2f;
  text-align: center;
  padding: 2rem;
}

.delete-confirm-modal.dark-mode {
  background: #3e2723;
  color: #fff8e1;
}

.delete-confirm-modal.dream-mode {
  background: linear-gradient(135deg, rgba(26, 13, 35, 0.95) 0%, rgba(45, 20, 60, 0.9) 25%, rgba(60, 30, 80, 0.85) 50%, rgba(45, 20, 60, 0.9) 75%, rgba(26, 13, 35, 0.95) 100%);
  color: #ffffff;
}

.delete-confirm-modal h3 {
  margin: 0 0 1rem 0;
  font-size: 1.8rem;
  color: #d32f2f;
  font-weight: 700;
  font-family: 'The Wanters DEMO', serif;
}

.delete-confirm-modal p {
  margin: 0.5rem 0 1rem 0;
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 500;
}

.delete-confirm-modal ul {
  text-align: left;
  margin: 1rem 0;
  padding-left: 1.5rem;
  display: inline-block;
}

.delete-confirm-modal li {
  margin: 0.5rem 0;
  font-size: 1rem;
  line-height: 1.3;
}

.delete-confirm-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.confirm-delete-button,
.cancel-delete-button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s ease;
  font-family: 'The Wanters DEMO', serif;
  min-width: 150px;
}

.confirm-delete-button {
  background: #d32f2f;
  color: white;
}

.confirm-delete-button:hover {
  background: #c62828;
  transform: translateY(-2px);
}

.cancel-delete-button {
  background: #4caf50;
  color: white;
}

.cancel-delete-button:hover {
  background: #45a049;
  transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 600px) {
  .user-menu-modal {
    width: 95%;
    margin: 0.5rem;
  }
  
  .user-menu-header,
  .user-menu-content,
  .user-menu-footer {
    padding: 1rem;
  }
  
  .user-stats-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .stat-item {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  
  .user-avatar {
    width: 60px;
    height: 60px;
  }
  
  .avatar-initial {
    font-size: 1.5rem;
  }
  
  .delete-confirm-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .confirm-delete-button,
  .cancel-delete-button {
    width: 100%;
    max-width: 200px;
  }
}

@media (max-width: 400px) {
  .field-input {
    max-width: 100%;
  }
  
  .edit-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .save-button,
  .cancel-button {
    width: 100%;
  }
} 

.dream-mode .avatar-initial {
  color: #00ffff;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
} 

.dream-mode .current-value,
.dream-mode .readonly-value,
.dream-mode .stat-value,
.dream-mode .stat-item label {
  color: #ffffff !important;
  animation: none !important;
  text-shadow: none !important;
} 

.dream-mode .user-menu-close {
  background: none !important;
  border: none !important;
} 

.dream-mode .user-menu-header h2 {
  color: #ffffff !important;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000 !important;
  animation: none !important;
} 

.dream-mode .hate-jerky-button {
  background: #d32f2f !important;
  color: #000 !important;
  border: 2px solid #000 !important;
} 

/* Dream mode: Only the level number is cyan */
.dream-mode .stat-item.level .stat-value {
  color: #00ffff !important;
  animation: none !important;
  text-shadow: none !important;
} 

.dream-mode .user-menu-close:hover {
  background: none !important;
  color: #fff !important;
  box-shadow: none !important;
  border: none !important;
  transform: none !important;
}

/* Rewards Section Styles */
.rewards-section {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.rewards-title {
  font-family: 'The Wanters DEMO', serif !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: #8d6e63 !important;
  text-align: center;
  display: block;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

.dark-mode .rewards-title {
  color: #000000 !important;
}

.dream-mode .rewards-title {
  color: #ffffff !important;
}

.rewards-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  /* No scrolling - let content flow naturally */
}

/* Free Bag Codes Panel Styles */
.free-bag-codes-panel {
  background: #f5f5f5;
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 0.75rem;
  max-height: 200px;
  overflow-y: auto;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.dark-mode .free-bag-codes-panel {
  background: #8d6e63;
  border-color: #000000;
}

.dream-mode .free-bag-codes-panel {
  background: rgba(26, 26, 26, 0.9);
  border-color: #000000;
}

.free-bag-codes-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.free-bag-code-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #8d6e63 !important;
  padding: 1rem;
  border-radius: 8px;
  border: 2px solid #000000;
  transition: all 0.2s ease;
  text-align: center;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.dark-mode .free-bag-code-item {
  background: #3e2723;
  border-color: #000000;
}

.dream-mode .free-bag-code-item {
  background: rgba(45, 20, 60, 0.8);
  border-color: #000000;
}

.free-bag-code-item:hover {
  background: #5d4037;
  border-color: #000000;
}

.free-bag-code-item.applied {
  background: #4CAF50 !important;
  border-color: #2E7D32 !important;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

.free-bag-code-item.applied:hover {
  background: #388E3C !important;
  border-color: #1B5E20 !important;
}

.dark-mode .free-bag-code-item:hover {
  background: #5d4037;
  border-color: #fff8e1;
}

.dream-mode .free-bag-code-item:hover {
  background: rgba(60, 30, 80, 0.9);
  border-color: #ffffff;
}

.free-bag-code-text {
  font-weight: 500;
  color: #000000;
  font-size: 1rem;
  text-align: center;
  word-break: break-word;
  margin-bottom: 0.25rem;
}

.free-bag-code-description {
  font-weight: 500;
  color: #000000;
  font-size: 0.9rem;
  text-align: center;
  word-break: break-word;
  opacity: 0.8;
  font-style: italic;
}

.dark-mode .free-bag-code-text {
  color: #3e2723;
}

.dark-mode .free-bag-code-description {
  color: #3e2723;
}

.dream-mode .free-bag-code-text {
  color: #ffffff;
}

.dream-mode .free-bag-code-description {
  color: #ffffff;
}

/* Applied state styling for dark and dream modes */
.dark-mode .free-bag-code-item.applied {
  background: #4CAF50 !important;
  border-color: #2E7D32 !important;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

.dark-mode .free-bag-code-item.applied:hover {
  background: #388E3C !important;
  border-color: #1B5E20 !important;
}

.dream-mode .free-bag-code-item.applied {
  background: #4CAF50 !important;
  border-color: #2E7D32 !important;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

.dream-mode .free-bag-code-item.applied:hover {
  background: #388E3C !important;
  border-color: #1B5E20 !important;
}

/* Toast Notification Styles */
.toast-notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #4CAF50;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  font-weight: 600;
  font-size: 0.9rem;
  animation: toastSlideIn 0.3s ease-out;
}

.toast-notification.dark-mode {
  background: #4CAF50;
  color: white;
  border: 2px solid #2E7D32;
}

.toast-notification.dream-mode {
  background: #4CAF50;
  color: white;
  border: 2px solid #2E7D32;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(76, 175, 80, 0.2);
}

.toast-message {
  display: block;
  text-align: center;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.remove-code-button {
  background: #d32f2f;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  transition: all 0.2s ease;
  margin-left: 0.5rem;
}

.remove-code-button:hover {
  background: #b71c1c;
  transform: scale(1.1);
}

.dark-mode .remove-code-button {
  background: #d32f2f;
}

.dark-mode .remove-code-button:hover {
  background: #b71c1c;
}

.dream-mode .remove-code-button {
  background: #d32f2f;
}

.dream-mode .remove-code-button:hover {
  background: #b71c1c;
} 

/* Dream mode: force promo code description and applied indicator to black */
.dream-mode .free-bag-code-description,
.dream-mode .applied-indicator {
  color: #000 !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Light mode: cream panel and hover for promo code items */
.free-bag-code-item {
  background: #f5f5dc !important;
  border: 2px solid #8d6e63;
}

.free-bag-code-item:hover {
  background: #e0d7c3 !important;
  border-color: #5d4037 !important;
}

/* Dark mode: restore original dark brown panel and hover */
.dark-mode .free-bag-code-item {
  background: #3e2723 !important;
  border-color: #000000 !important;
}
.dark-mode .free-bag-code-item:hover {
  background: #5d4037 !important;
  border-color: #fff8e1 !important;
}

/* Dream mode: restore original dream panel and hover */
.dream-mode .free-bag-code-item {
  background: rgba(45, 20, 60, 0.8) !important;
  border-color: #000000 !important;
}
.dream-mode .free-bag-code-item:hover {
  background: rgba(60, 30, 80, 0.9) !important;
  border-color: #ffffff !important;
}

/* Applied indicator styling */
.applied-indicator {
  font-weight: bold;
  color: #388E3C;
  letter-spacing: 0.5px;
  font-size: 1.01em;
  display: inline-block;
  margin-top: 2px;
} 

/* Dark mode: match stats panel for promo code items */
.dark-mode .free-bag-code-item {
  background: #8d6e63 !important;
  border-color: #000000 !important;
}
.dark-mode .free-bag-code-item:hover {
  background: #8d6e63 !important;
  border-color: #fff8e1 !important;
} 

/* Dream mode: match stats panel for promo code items */
.dream-mode .free-bag-code-item {
  background: rgba(26, 26, 26, 0.9) !important;
  border-color: #000000 !important;
  color: #fff !important;
}
.dream-mode .free-bag-code-item * {
  color: #fff !important;
  text-shadow: none !important;
}
.dream-mode .free-bag-code-item:hover {
  background: rgba(26, 26, 26, 0.9) !important;
  border-color: #fff !important;
} 

/* Light mode: cream background and border for stats and display panels */
.stat-item,
.display-container {
  background: #f5f5dc !important;
  border: 1px solid #8d6e63 !important;
}

/* Dark mode: brown background for stats and display panels (matching rewards) */
.dark-mode .stat-item,
.dark-mode .display-container {
  background: #8d6e63 !important;
  border: 1px solid #000000 !important;
}

/* Dream mode: dark gray background for stats and display panels (matching rewards) */
.dream-mode .stat-item,
.dream-mode .display-container {
  background: rgba(26, 26, 26, 0.9) !important;
  border: 1px solid #000000 !important;
}

/* Remove hover effect for stat and display panels in light mode */
.stat-item:hover,
.display-container:hover {
  background: #f5f5dc !important;
  border: 1px solid #8d6e63 !important;
}

/* Dark mode: no hover effect for stats and display panels */
.dark-mode .stat-item:hover,
.dark-mode .display-container:hover {
  background: #8d6e63 !important;
  border: 1px solid #000000 !important;
}

/* Dream mode: no hover effect for stats and display panels */
.dream-mode .stat-item:hover,
.dream-mode .display-container:hover {
  background: rgba(26, 26, 26, 0.9) !important;
  border: 1px solid #000000 !important;
}

/* Checkout-specific rewards styling - smaller panels in rows of 2 */
.checkout-rewards-section {
  max-width: 800px !important;
  padding: 1.5rem !important;
}

.checkout-rewards-container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.75rem !important;
}

.checkout-rewards-container .customer-settings-reward-code {
  padding: 1rem !important;
  min-height: auto !important;
}

.checkout-rewards-container .customer-settings-reward-reason {
  font-size: 1.2rem !important;
  margin-bottom: 0.3rem !important;
}

.checkout-rewards-container .customer-settings-reward-code-text {
  font-size: 1.1rem !important;
  padding: 0.4rem 0.8rem !important;
}

.checkout-rewards-container .customer-settings-reward-description {
  font-size: 0.9rem !important;
  margin-top: 0.3rem !important;
}

.checkout-rewards-container .customer-settings-reward-description-text {
  font-size: 1rem !important;
}

/* Dark mode clear button styling */
.dark-mode .clear-button {
  border: 2px solid #000000 !important;
}

/* Dream mode clear button styling - make it red like dark mode */
.dream-mode .clear-button {
  border: 2px solid #000000 !important;
  background-color: #d32f2f !important;
  color: #000000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  background-image: none !important;
  background: #d32f2f !important;
}

/* Additional override for any inline styles */
.dream-mode .clear-button[style*="background"] {
  background: #d32f2f !important;
  background-color: #d32f2f !important;
  background-image: none !important;
}

/* Light mode enter code button styling - ensure white text */
.light-mode .enter-code-button {
  color: #ffffff !important;
}

/* Reward description text - The Wanters DEMO font for both checkout and customer settings */
.customer-settings-reward-description-text,
.checkout-rewards-container .customer-settings-reward-description-text {
  font-family: 'The Wanters DEMO, serif' !important;
}

/* Dream mode checkout rewards title - 1px black outline */
.dream-mode .checkout-rewards-section .customer-settings-rewards-title {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Dream mode reward reason - ensure The Wanters DEMO font */
.dream-mode .customer-settings-reward-reason {
  font-family: 'The Wanters DEMO', serif !important;
}

:root {
  /* Base Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  
  /* Green Accents */
  --color-green-100: rgba(72, 187, 120, 0.1);
  --color-green-200: rgba(72, 187, 120, 0.2);
  --color-green-300: rgba(72, 187, 120, 0.3);
  --color-green-400: #48bb78;
  --color-green-500: #38a169;
  
  /* Seasonal Colors */
  --color-spring: #a8e6cf;
  --color-summer: #ffd3b6;
  --color-autumn: #ffaaa5;
  --color-winter: #d4e7ee;
  
  /* UI Colors */
  --background-color: #0a0f0d;
  --background-color-secondary: #111815;
  --text-color: #e2e8f0;
  --text-color-secondary: #a0aec0;
  --accent-color: var(--color-green-400);
  --border-color: #2d3748;
  
  /* Typography */
  --font-decorative: 'Cinzel Decorative', serif;
  --font-body: 'Crimson Text', serif;
  
  /* Gradients */
  --gradient-green: linear-gradient(135deg, 
    var(--color-green-100) 0%,
    var(--color-green-200) 100%);
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(72, 187, 120, 0.1);
  --shadow-md: 0 4px 6px rgba(72, 187, 120, 0.15);
  --shadow-lg: 0 10px 15px rgba(72, 187, 120, 0.2);
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

/* Customer Tables */
.admin-customer-table {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 15px;
}

.admin-customer-table-header {
  display: grid;
  grid-template-columns: 1fr 1.5fr 0.5fr 0.5fr 1fr 0.5fr 1fr;
  gap: 10px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.1);
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #2c1810;
}

.admin-customer-table-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 0.5fr 0.5fr 1fr 0.5fr 1fr;
  gap: 10px;
  padding: 12px 15px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background-color 0.2s ease;
  color: #3e2723;
}

.admin-customer-table-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.admin-customer-table-row:last-child {
  border-bottom: none;
}

/* Level Chart */
.admin-stats-level-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-stats-level-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9em;
}

.admin-stats-level-item span:first-child {
  min-width: 60px;
  text-align: left;
}

.admin-stats-level-item span:last-child {
  min-width: 80px;
  text-align: right;
}

.admin-stats-level-bar {
  flex: 1;
  height: 20px;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  border-radius: 10px;
  transition: width 0.3s ease;
}

/* Dark mode styles for customer tables */
.dark-mode .admin-customer-table {
  background: rgba(0, 0, 0, 0.2);
}

.dark-mode .admin-customer-table-header {
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .admin-customer-table-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dark-mode .admin-customer-table-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Dream mode styles for customer tables */
.dream-mode .admin-customer-table {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dream-mode .admin-customer-table-header {
  background: rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.dream-mode .admin-customer-table-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dream-mode .admin-customer-table-row:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dream-mode .admin-stats-level-bar {
  background: linear-gradient(90deg, #FF6B6B, #4ECDC4);
  box-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
}

/* Quick Actions Grid */
.admin-quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.admin-quick-action-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.admin-quick-action-item:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.admin-quick-action-item h4 {
  margin: 0 0 12px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.admin-quick-action-item p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #666;
}

/* Dark mode styles for quick actions */
.dark-mode .admin-quick-action-item {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .admin-quick-action-item:hover {
  background: rgba(0, 0, 0, 0.3);
}

.dark-mode .admin-quick-action-item h4 {
  color: #e2e8f0;
}

.dark-mode .admin-quick-action-item p {
  color: #a0aec0;
}

/* Dream mode styles for quick actions */
.dream-mode .admin-quick-action-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dream-mode .admin-quick-action-item:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
}

.dream-mode .admin-quick-action-item h4 {
  color: #1a202c;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.dream-mode .admin-quick-action-item p {
  color: #4a5568;
}

/* Responsive design for quick actions */
@media (max-width: 768px) {
  .admin-quick-actions-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .admin-quick-action-item {
    padding: 15px;
  }
  
  .admin-quick-action-item h4 {
    font-size: 1rem;
  }
  
  .admin-quick-action-item p {
    font-size: 0.9rem;
  }
}

/* Force consistent button widths */
.admin-management-btn {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}

.super-admin-management-btn {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #000000;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  background-color: #818b9b;
  color: #ffffff;
}

.super-admin-management-btn:hover {
  background-color: #818b9b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

/* Super Admin Users Button */
.super-admin-users-btn {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.3s ease;
  border: 2px solid #2f2f2f;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  background-color: #696969;
  color: #ffffff;
}

.super-admin-users-btn:hover {
  background-color: #7a7a7a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

/* Super Admin Users - Inventory Style Panels */
.businesses-list,
.customers-list {
  padding: 1.5rem 1rem; /* Increased padding to prevent clipping */
  margin: 0 0.5rem; /* Added margin for extra buffer */
  overflow: visible;
}

/* Business items styled like inventory horizontal panels */
.business-item {
  display: grid;
  grid-template-columns: 2fr 120px;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 1rem; /* Increased margin between items */
  background: rgba(245, 245, 220, 0.9);
  border: 2px solid #8d6e63;
  border-left: 8px solid #14545c; /* Teal accent like selling button */
  border-radius: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

.business-item:hover:not(.editing) {
  background-color: #e3f2fd !important;
  box-shadow: inset 0 0 8px rgba(20, 84, 92, 0.2) !important;
  transform: scale(1.005) !important; /* Reduced scale to prevent clipping */
}

/* Customer items styled like inventory horizontal panels */
.customer-item {
  display: grid;
  grid-template-columns: 2fr 120px;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 1rem; /* Increased margin between items */
  background: rgba(245, 245, 220, 0.9);
  border: 2px solid #8d6e63;
  border-left: 8px solid #2e7d32; /* Green accent like buying button */
  border-radius: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

.customer-item:hover:not(.editing) {
  background-color: #e8f5e8 !important;
  box-shadow: inset 0 0 8px rgba(46, 125, 50, 0.2) !important;
  transform: scale(1.005) !important; /* Reduced scale to prevent clipping */
}

/* Business and Customer item cells - matching inventory table cell styling */
.business-item-cell,
.customer-item-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.business-item-cell.icon-cell,
.customer-item-cell.icon-cell {
  justify-content: center;
}

.business-item-cell.info-cell,
.customer-item-cell.info-cell {
  justify-content: flex-start;
  text-align: left;
  padding-left: 0px;
}

.business-item-cell.status-cell,
.customer-item-cell.status-cell {
  justify-content: center;
  text-align: center;
}

/* Responsive layout for business items on narrow screens */
@media (max-width: 768px) {
  .business-item {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0.75rem;
  }
  
  .business-item-cell.info-cell {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }
  
  .business-item-cell.status-cell {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }
  
  .customer-item {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0.75rem;
  }
  
  .customer-item-cell.info-cell {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }
  
  .customer-item-cell.status-cell {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }
}

.business-icon,
.customer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.business-status-icon,
.customer-status-icon {
  font-size: 1.5rem;
}

.business-status-icon {
  color: #14545c;
}

.customer-status-icon {
  color: #2e7d32;
}

/* Admin and Staff items styled like inventory horizontal panels */
.admin-item {
  display: grid;
  grid-template-columns: 40px 2fr 120px;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  background: rgba(245, 245, 220, 0.9);
  border: 2px solid #8d6e63;
  border-left: 8px solid #14545c; /* Teal accent like admin button */
  border-radius: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

.admin-item:hover:not(.editing) {
  background-color: #e3f2fd !important;
  box-shadow: inset 0 0 8px rgba(20, 84, 92, 0.2) !important;
  transform: scale(1.005) !important;
}

.staff-item {
  display: grid;
  grid-template-columns: 40px 2fr 120px;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  background: rgba(245, 245, 220, 0.9);
  border: 2px solid #8d6e63;
  border-left: 8px solid #e74c3c; /* Red accent like staff button */
  border-radius: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

.staff-item:hover:not(.editing) {
  background-color: #fdeaea !important;
  box-shadow: inset 0 0 8px rgba(231, 76, 60, 0.2) !important;
  transform: scale(1.005) !important;
}

/* Admin and Staff item cells - matching inventory table cell styling */
.admin-item-cell,
.staff-item-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.admin-item-cell.icon-cell,
.staff-item-cell.icon-cell {
  justify-content: center;
}

.admin-item-cell.info-cell,
.staff-item-cell.info-cell {
  justify-content: flex-start;
  text-align: left;
  padding-left: 0px;
}

.admin-item-cell.status-cell,
.staff-item-cell.status-cell {
  justify-content: center;
  text-align: center;
}

.admin-icon,
.staff-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-status-icon,
.staff-status-icon {
  font-size: 1.5rem;
}

.admin-status-icon {
  color: #14545c;
}

.staff-status-icon {
  color: #e74c3c;
}

.admin-info,
.staff-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.admin-name,
.staff-name {
  font-weight: 600;
  font-size: 1rem;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
}

.admin-email,
.staff-email {
  font-size: 0.9rem;
  color: #666;
  font-family: 'Verdana', sans-serif;
}

/* Admin and Staff lists */
.admins-list,
.staff-list {
  max-height: 400px;
  overflow-y: auto;
  padding: 1.5rem 1rem;
  margin: 0 0.5rem;
}

.business-info,
.customer-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.business-name,
.customer-name {
  font-weight: 700;
  color: #3e2723;
  font-size: 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.business-phone,
.customer-email {
  font-style: italic;
  color: #8d6e63;
  font-size: 0.9rem;
}

.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 600px;
  font-family: 'Verdana', sans-serif;
}

.admin-table thead {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.admin-table th {
  padding: 1rem 0.75rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.9rem;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  min-width: 150px;
}

.admin-table th:last-child {
  border-right: none;
}

.admin-table th.sortable-header {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}

.admin-table th.sortable-header:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.admin-table tbody tr {
  transition: background-color 0.2s ease;
  border-bottom: 1px solid #f0f0f0;
}

.admin-table tbody tr:hover {
  background-color: #f8f9fa;
}

.admin-table tbody tr.clickable-row:hover {
  background-color: #e3f2fd;
  cursor: pointer;
}

.admin-table td {
  padding: 0.75rem;
  border-right: 1px solid #f0f0f0;
  color: #333333;
  font-size: 0.9rem;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-table td:last-child {
  border-right: none;
}

/* Status Badge Styling */
.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
}

.status-badge.active {
  background-color: #e8f5e8;
  color: #2e7d32;
  border: 1px solid #4caf50;
}

.status-badge.inactive {
  background-color: #ffebee;
  color: #c62828;
  border: 1px solid #f44336;
}

/* Table styling - no resizing */
.admin-table {
  min-width: 600px;
}

/* Mobile responsiveness for Super Admin Users tables */
@media (max-width: 768px) {
  .admin-table {
    min-width: 400px;
  }
  
  .admin-table th,
  .admin-table td {
    padding: 0.5rem 0.25rem;
    font-size: 0.8rem;
  }
  
  .admin-table th:last-child,
  .admin-table td:last-child {
    display: none;
  }
}

@media (max-width: 480px) {
  .admin-table {
    min-width: 300px;
  }
  
  .admin-table th,
  .admin-table td {
    padding: 0.4rem 0.2rem;
    font-size: 0.75rem;
  }
  
  .admin-table th:last-child,
  .admin-table td:last-child {
    display: none;
  }
  
  .admin-table th:nth-child(2),
  .admin-table td:nth-child(2) {
    display: none;
  }
}

/* Dark mode support */
.dark-mode .admin-table-container {
  background: #2d2d2d;
  border-color: #444;
}

.dark-mode .admin-table tbody tr {
  border-bottom-color: #444;
}

.dark-mode .admin-table tbody tr:hover {
  background-color: #3a3a3a;
}

.dark-mode .admin-table tbody tr.clickable-row:hover {
  background-color: #1e3a5f;
}

.dark-mode .admin-table td {
  color: #e0e0e0;
  border-right-color: #444;
}

.dark-mode .status-badge.active {
  background-color: #1b5e20;
  color: #a5d6a7;
}

.dark-mode .status-badge.inactive {
  background-color: #b71c1c;
  color: #ffcdd2;
}

/* Dark mode styles for super admin management button */
.dark-mode .super-admin-management-btn {
  background-color: #374151;
  border-color: #1f2937;
  color: #d1d5db;
}

.dark-mode .super-admin-management-btn:hover {
  background-color: #4b5563;
}

/* Dream mode styles for super admin management button */
.dream-mode .super-admin-management-btn {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-color: #4a148c;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(124, 58, 237, 0.3);
}

.dream-mode .super-admin-management-btn:hover {
  background: linear-gradient(135deg, #6a1b9a, #9333ea);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(124, 58, 237, 0.4);
}

.super-admin-management-content {
  margin-top: 2rem;
}

/* Allow admin panel to expand beyond 95vh for super admin management */
.admin-background-panel:has(.super-admin-management-content) {
  max-height: none;
  overflow-y: visible;
  min-height: auto;
}

/* Fallback for browsers that don't support :has() - target via parent */
.admin-panel-page:has(.super-admin-management-content) .admin-background-panel {
  max-height: none;
  overflow-y: visible;
  min-height: auto;
}

/* Additional fallback using class-based approach */
.admin-background-panel.expandable-content {
  max-height: none;
  overflow-y: visible;
  min-height: auto;
}

/* QR Generator Button */
.admin-qr-generator-btn {
  background-color: #000000;
  color: #ffffff;
  border-color: #333333;
}

.admin-qr-generator-btn:hover:not(:disabled) {
  background-color: #333333;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Button 1 - Purple */
.admin-button-1-btn {
  background-color: #8e44ad;
  color: #ffffff;
  border-color: #732d91;
}

.admin-button-1-btn:hover:not(:disabled) {
  background-color: #9b59b6;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(142, 68, 173, 0.4);
}

/* Button 2 - Red */
.admin-button-2-btn {
  background-color: #e74c3c;
  color: #ffffff;
  border-color: #c0392b;
}

.admin-button-2-btn:hover:not(:disabled) {
  background-color: #ec7063;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(231, 76, 60, 0.4);
}

/* Updated Cook button styling - new orange color */
.admin-cook-btn {
  background-color: #f97316 !important;
  color: #ffffff !important;
  border-color: #ea580c !important;
}

.admin-cook-btn:hover {
  background-color: #ea580c !important;
  box-shadow: 0 6px 12px rgba(249, 115, 22, 0.4) !important;
}

/* Admin Staff Button */
.admin-staff-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  color: #ffffff;
  border: 3px solid #0a1a1d;
  box-shadow: 0 4px 8px rgba(20, 84, 92, 0.3);
}

.admin-staff-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.4);
  color: #3e2723 !important;
}

/* Additional button colors for business page */
.admin-gray-btn { 
  background-color: #6b7280; 
  color: #fff; 
  border-color: #374151; 
  border-radius: 25px;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  font-family: 'The Wanters DEMO', serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  white-space: nowrap;
}

.admin-gray-btn:hover { 
  background-color: #818b9b; 
  transform: translateY(-2px); 
  box-shadow: 0 6px 12px rgba(0,0,0,0.25); 
}

.admin-purple-btn { 
  background-color: #7c3aed; 
  color: #fff; 
  border-color: #5b21b6; 
  border-radius: 25px;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  font-family: 'The Wanters DEMO', serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  white-space: nowrap;
}

.admin-purple-btn:hover { 
  background-color: #8b5cf6; 
  transform: translateY(-2px); 
  box-shadow: 0 6px 12px rgba(0,0,0,0.25); 
}

.admin-orange-btn { 
  background-color: #f97316; 
  color: #fff; 
  border-color: #ea580c; 
  border-radius: 25px;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  font-family: 'The Wanters DEMO', serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  white-space: nowrap;
}

.admin-orange-btn:hover { 
  background-color: #ea580c; 
  transform: translateY(-2px); 
  box-shadow: 0 6px 12px rgba(0,0,0,0.25); 
}

/* Active state for business widget buttons - white text for legibility */
.admin-management-btn.active,
.admin-customers-btn.active,
.admin-promo-codes-btn.active,
.admin-loyalty-btn.active,
.admin-inventory-btn.active,
.admin-products-btn.active,
.admin-costs-profits-btn.active {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  opacity: 0.8;
  color: #ffffff !important;
}

.admin-management-btn.active {
  background-color: #0d353a;
}

.admin-customers-btn.active {
  background-color: #1e8449;
}

.admin-promo-codes-btn.active {
  background-color: #41AE06;
}

.admin-loyalty-btn.active {
  background-color: #732d91;
}

.admin-inventory-btn.active {
  background-color: #374151;
}

.admin-products-btn.active {
  background-color: #732d91;
}

.admin-costs-profits-btn.active {
  background-color: #5b21b6;
}

/* Mobile / touch: ensure active nav button text stays white on small screens */
@media (max-width: 767px) {
  .admin-management-btn.active,
  .admin-customers-btn.active,
  .admin-promo-codes-btn.active,
  .admin-loyalty-btn.active,
  .admin-inventory-btn.active,
  .admin-products-btn.active,
  .admin-costs-profits-btn.active {
    color: #ffffff !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .admin-management-btn.active,
  .admin-customers-btn.active,
  .admin-promo-codes-btn.active,
  .admin-loyalty-btn.active,
  .admin-inventory-btn.active,
  .admin-products-btn.active,
  .admin-costs-profits-btn.active {
    color: #ffffff !important;
  }
}

/* Business Widget Buttons Responsive Styles */
.business-widget-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.business-widget-buttons .admin-management-btn,
.business-widget-buttons .admin-customers-btn,
.business-widget-buttons .admin-promo-codes-btn,
.business-widget-buttons .admin-loyalty-btn {
  min-width: 150px !important;
  width: 150px !important;
  max-width: 150px !important;
  flex: 0 0 150px !important;
}

/* Responsive styles for business widget buttons */
@media (max-width: 768px) {
  .business-widget-buttons {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  
  .business-widget-buttons .admin-management-btn,
  .business-widget-buttons .admin-customers-btn,
  .business-widget-buttons .admin-promo-codes-btn,
  .business-widget-buttons .admin-loyalty-btn {
    min-width: 150px !important;
    width: 150px !important;
    max-width: 150px !important;
    flex: 0 0 150px !important;
    padding: 0.6rem 1.2rem !important;
    font-size: 1rem;
  }
}

/* ===============================================================================
                                ACHIEVEMENTS & PROMO CODES STYLES
=============================================================================== */

/* Achievements Management Styles */
.achievements-container {
  padding: 1rem;
}

.achievements-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  justify-content: center;
}

.admin-add-achievement-btn,
.admin-add-level-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  color: white;
  border: 2px solid #004d06;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 150px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.admin-add-promo-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  color: white;
  border: 2px solid #36034d;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 150px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.admin-add-achievement-btn:hover,
.admin-add-level-btn:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4);
  color: #3e2723 !important;
}

.admin-add-promo-btn:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #36034d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4);
  color: #3e2723 !important;
}

.achievements-section-title {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2rem 0 1rem 0;
  text-align: center;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Achievement Flip Cards */
.achievement-flip-card {
  background-color: transparent;
  width: 100%;
  height: 320px;
  perspective: 1000px;
  cursor: pointer;
  aspect-ratio: 1;
  max-width: 300px;
  margin: 0 auto;
}

.achievement-flip-card:hover {
  transform: none;
}

.achievement-flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.achievement-flip-card-inner.flipped {
  transform: rotateY(180deg);
}

.achievement-flip-card-front,
.achievement-flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
}

.achievement-flip-card-front {
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  border: 2px solid #d0d0d0;
}

.achievement-flip-card-back {
  background: linear-gradient(135deg, #fff8e1 0%, #fff3c4 100%);
  border: 2px solid #ffcc02;
  transform: rotateY(180deg);
  overflow-y: auto;
}

.flip-hint {
  text-align: center;
  margin-top: auto;
  padding: 0.5rem;
  background: rgba(230, 126, 34, 0.1);
  border-radius: 6px;
  color: #e67e22;
  font-size: 0.9rem;
  font-weight: 600;
}

.achievement-edit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #ffcc02;
}

.achievement-edit-header h4 {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
}

.flip-back-btn {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.flip-back-btn:hover {
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
  transform: scale(1.1);
}

.achievement-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 1;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form-group label {
  color: #3e2723;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: left;
}

.achievement-select,
.achievement-input {
  padding: 0.5rem;
  border: 2px solid #d0d0d0;
  border-radius: 6px;
  font-size: 0.9rem;
  background: white;
  color: #3e2723;
  transition: all 0.2s ease;
}

.achievement-select:focus,
.achievement-input:focus {
  outline: none;
  border-color: #e67e22;
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.1);
}

.achievement-select {
  cursor: pointer;
}

.achievement-edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #d0d0d0;
}

.save-btn,
.cancel-btn {
  flex: 1;
  padding: 0.5rem;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.save-btn {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: white;
}

.save-btn:hover {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  transform: translateY(-1px);
}

.cancel-btn {
  background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
  color: white;
}

.cancel-btn:hover {
  background: linear-gradient(135deg, #7f8c8d 0%, #95a5a6 100%);
  transform: translateY(-1px);
}

.achievement-level-card {
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  border: 2px solid #d0d0d0;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.achievement-level-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.achievement-level-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.achievement-level-header h4 {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
}

.level-badge {
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.level-badge.bronze {
  background: linear-gradient(135deg, #cd7f32 0%, #b8860b 100%);
  color: white;
}

.level-badge.silver {
  background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%);
  color: white;
}

.level-badge.gold {
  background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
  color: #3e2723;
}

.achievement-level-content p {
  color: #666;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.achievement-stats {
  background: rgba(20, 84, 92, 0.1);
  padding: 0.5rem;
  border-radius: 6px;
  text-align: center;
}

.achievement-stats span {
  color: #14545c;
  font-weight: 600;
  font-size: 0.9rem;
}

.achievement-level-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.customer-rewards-section {
  margin-top: 2rem;
}

.rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.reward-card {
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
  border: 2px solid #b3d9ff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.reward-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.reward-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.reward-header h4 {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
}

.reward-type {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.reward-content p {
  color: #666;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.reward-stats {
  display: flex;
  justify-content: space-between;
  background: rgba(39, 174, 96, 0.1);
  padding: 0.5rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.reward-stats span {
  color: #27ae60;
  font-weight: 600;
  font-size: 0.9rem;
}

.reward-actions {
  display: flex;
  gap: 0.5rem;
}

/* Promo Codes Grid Styles */
.promo-codes-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.promo-codes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
}

.promo-code-card {
  background: linear-gradient(135deg, #fff8e1 0%, #fff3c4 100%);
  border: 2px solid #ffcc02;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.promo-code-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.promo-code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.promo-code-title {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: 1px;
}

.promo-code-details {
  margin-bottom: 1rem;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  color: #666;
  font-weight: 600;
  font-size: 0.9rem;
}

.detail-value {
  color: #3e2723;
  font-weight: 700;
  font-size: 0.9rem;
}

.promo-code-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.edit-btn, .copy-btn, .delete-btn {
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.edit-btn {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
}

.edit-btn:hover {
  background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
  transform: translateY(-1px);
}

.copy-btn {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: white;
}

.copy-btn:hover {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  transform: translateY(-1px);
}

.delete-btn {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
}

.delete-btn:hover {
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
  transform: translateY(-1px);
}

/* Empty State Styles */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px dashed #dee2e6;
  border-radius: 12px;
  margin: 2rem 0;
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.empty-state h3 {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.empty-state p {
  color: #666;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

/* Loyalty Management Styles */
.loyalty-container {
  padding: 1rem;
}

.loyalty-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  justify-content: center;
}

.admin-add-loyalty-btn {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  color: white;
  border: 2px solid #0a5d7a;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 150px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.admin-add-loyalty-btn:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
}

.loyalty-section-title {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 2rem 0 1rem 0;
  text-align: center;
}

.loyalty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Loyalty Flip Cards */
.loyalty-flip-card {
  background-color: transparent;
  width: 100%;
  height: 320px;
  perspective: 1000px;
  cursor: pointer;
  aspect-ratio: 1;
  max-width: 300px;
  margin: 0 auto;
}

.loyalty-flip-card:hover {
  transform: none;
}

.loyalty-flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.loyalty-flip-card-inner.flipped {
  transform: rotateY(180deg);
}

.loyalty-flip-card-front,
.loyalty-flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
}

.loyalty-flip-card-front {
  background: linear-gradient(135deg, #f8f0ff 0%, #e8d5ff 100%);
  border: 2px solid #d0b3ff;
}

.loyalty-flip-card-back {
  background: linear-gradient(135deg, #fff8e1 0%, #fff3c4 100%);
  border: 2px solid #ffcc02;
  transform: rotateY(180deg);
  overflow-y: auto;
}

.level-progress {
  margin-top: 1rem;
  padding: 0.5rem;
  background: rgba(142, 68, 173, 0.1);
  border-radius: 6px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(142, 68, 173, 0.2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.3rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  color: #8e44ad;
  font-weight: 600;
  font-size: 0.8rem;
  text-align: center;
  display: block;
}

.loyalty-edit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #ffcc02;
}

.loyalty-edit-header h4 {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
}

.loyalty-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 1;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.loyalty-input,
.loyalty-select {
  padding: 0.5rem;
  border: 2px solid #d0d0d0;
  border-radius: 6px;
  font-size: 0.9rem;
  background: white;
  color: #3e2723;
  transition: all 0.2s ease;
}

.loyalty-input:focus,
.loyalty-select:focus {
  outline: none;
  border-color: #8e44ad;
  box-shadow: 0 0 0 3px rgba(142, 68, 173, 0.1);
}

.loyalty-select {
  cursor: pointer;
}

.loyalty-edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #d0d0d0;
}

.loyalty-level-card {
  background: linear-gradient(135deg, #f8f0ff 0%, #e8d5ff 100%);
  border: 2px solid #d0b3ff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.loyalty-level-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.loyalty-level-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.loyalty-level-header h4 {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
}

.loyalty-badge {
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.loyalty-badge.bronze {
  background: linear-gradient(135deg, #cd7f32 0%, #b8860b 100%);
  color: white;
}

.loyalty-badge.silver {
  background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%);
  color: white;
}

.loyalty-badge.gold {
  background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
  color: #3e2723;
}

.loyalty-level-content p {
  color: #666;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.loyalty-stats {
  background: rgba(142, 68, 173, 0.1);
  padding: 0.5rem;
  border-radius: 6px;
  text-align: center;
  display: flex;
  justify-content: space-between;
}

.loyalty-stats span {
  color: #8e44ad;
  font-weight: 600;
  font-size: 0.9rem;
}

.loyalty-level-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.loyalty-rewards-section {
  margin-top: 2rem;
}

.loyalty-rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.loyalty-reward-card {
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
  border: 2px solid #b3d9ff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* New Loyalty Accordion Styles */
.loyalty-levels-accordion {
  margin-top: 1rem;
}

.loyalty-table-header {
  display: grid;
  grid-template-columns: 2fr 0.8fr 0.8fr 1fr 1fr;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem 1rem;
  background: #f5f5f5;
  border: 2px solid #d7ccc8;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 0.9rem;
}

.loyalty-table-header .loyalty-table-cell.points-cell {
  justify-content: flex-start;
  text-align: left;
  padding-left: 0;
  margin-left: -2rem;
}

.loyalty-table-header .loyalty-table-cell.discount-cell {
  justify-content: flex-start;
  text-align: left;
  padding-left: 0;
  margin-left: -0.5rem;
}

.loyalty-level-container {
  margin-bottom: 0.5rem;
}

.loyalty-level-row {
  display: grid;
  grid-template-columns: 2fr 0.8fr 0.8fr 1fr 1fr;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(245, 245, 220, 0.9);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 8px;
  margin: 0.5rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.loyalty-level-row:hover:not(.expanded):not(.editing) {
  background: rgba(235, 235, 210, 0.95);
}

.loyalty-level-row.expanded,
.loyalty-level-row.editing {
  background: rgba(245, 245, 220, 0.9);
  border: 2px solid #8d6e63;
}

.loyalty-level-row.editing {
  cursor: default;
}

.loyalty-table-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5rem;
}

.loyalty-table-cell.discount-cell {
  justify-content: flex-start;
  padding-left: 0;
  margin-left: 0;
}

.loyalty-table-cell.points-cell {
  justify-content: flex-start;
  padding-left: 0;
  margin-left: 0;
}

.loyalty-table-cell.points-cell .loyalty-edit-input-inline {
  text-align: center;
}

.loyalty-level-name {
  font-weight: 700;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
}

.loyalty-level-points {
  color: #3e2723;
  font-weight: 700;
  font-size: 1.2rem;
}

.loyalty-level-discount {
  color: #3e2723;
  font-weight: 700;
  font-size: 1.2rem;
  font-family: 'The Wanters DEMO', serif;
}

/* Inline Edit Inputs for Loyalty Levels */
.loyalty-edit-input-inline {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 2px solid #108EBC;
  border-radius: 6px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 600;
  background: white;
  color: #3e2723;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(16, 142, 188, 0.2);
}

.loyalty-edit-input-inline:focus {
  outline: none;
  border-color: #108EBC;
  box-shadow: 0 0 0 3px rgba(16, 142, 188, 0.3);
}

.loyalty-rewards-count-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 2px solid #108EBC;
  border-radius: 6px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 600;
  background: white;
  color: #3e2723;
  text-align: center;
  cursor: default;
}

.loyalty-rewards-count-input:disabled {
  opacity: 1;
  cursor: default;
  background: white;
}

.loyalty-edit-actions-inline {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
  padding-right: 0;
  margin-right: -1rem;
}

.loyalty-edit-actions-inline .loyalty-add-reward-inline-btn {
  margin-right: 2rem;
  margin-left: -2.5rem;
}

.loyalty-save-inline-btn,
.loyalty-cancel-inline-btn,
.loyalty-add-reward-inline-btn {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  min-width: 80px;
}

.loyalty-save-inline-btn {
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
  color: white;
  border: 2px solid #388e3c !important;
}

.loyalty-save-inline-btn:hover {
  background: linear-gradient(135deg, #388e3c 0%, #4caf50 100%);
  border-color: #2e7d32 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.3);
}

.loyalty-cancel-inline-btn {
  background: #d32f2f !important;
  color: white !important;
  border: 2px solid #b71c1c !important;
}

.loyalty-cancel-inline-btn:hover {
  background: #b71c1c !important;
  border-color: #a01515 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(211, 47, 47, 0.3);
}

.loyalty-add-reward-inline-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%) !important;
  color: white !important;
  border: 2px solid #36034d !important;
  white-space: nowrap !important;
}

.loyalty-add-reward-inline-btn:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  border-color: #2d0239 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(87, 5, 138, 0.3);
}

.loyalty-status-toggle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loyalty-status-toggle:hover {
  transform: scale(1.1);
}

/* Rewards Container (like product-sizes-container) */
.loyalty-rewards-container {
  background: #f5f5f5;
  border-left: 8px solid #8b45d1;
  border-radius: 8px;
  margin: 0.5rem 0;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: loyaltyExpandDown 0.3s ease-out;
  overflow: hidden;
}

/* Mobile styles for promo accordion - centre aligned accordion style, fix button clipping */
@media (max-width: 768px) {
  /* Hide header on narrow screens */
  .loyalty-table-header {
    display: none;
  }
  
  /* Stack table cells vertically on narrow screens, centre aligned - enough padding to avoid button clipping */
  .loyalty-level-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem !important;
    text-align: center;
  }
  
  /* Show mobile labels */
  .mobile-label {
    display: block;
  }
  
  /* Make table cells full width, centre aligned */
  .loyalty-table-cell {
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
    gap: 0.25rem;
    text-align: center;
  }
  
  /* Larger name and value text on narrow screens */
  .loyalty-level-row .loyalty-level-name {
    font-size: 1.6rem !important;
    text-align: center !important;
  }
  .loyalty-level-row .loyalty-level-points,
  .loyalty-level-row .loyalty-level-discount {
    font-size: 1.35rem !important;
    text-align: center !important;
  }
  
  /* Fix button clipping - remove negative margins, centre buttons */
  .loyalty-edit-actions-inline {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center !important;
    align-items: center;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    width: 100%;
  }
  .loyalty-edit-actions-inline .loyalty-add-reward-inline-btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .loyalty-add-reward-inline-btn,
  .loyalty-save-inline-btn,
  .loyalty-cancel-inline-btn {
    margin: 0 !important;
    min-width: auto;
    padding: 0.5rem 1rem;
  }
  
  /* Better spacing for mobile */
  .loyalty-table-cell.name-cell {
    order: 1;
  }
  
  .loyalty-table-cell.points-cell {
    order: 2;
  }
  
  .loyalty-table-cell.discount-cell {
    order: 3;
  }
  
  .loyalty-table-cell.status-cell {
    order: 4;
  }
  
  .loyalty-table-cell.action-cell {
    order: 5;
    display: flex !important;
    justify-content: center;
  }
  
  /* Nested tier rows - same centre alignment, avoid clipping */
  .loyalty-level-container .loyalty-level-container .loyalty-level-row {
    padding: 1rem 1.25rem;
    margin-left: 0 !important;
  }
  
  /* Improved expanded accordion layout on mobile */
  .loyalty-rewards-container {
    padding: 1.25rem;
    gap: 1.25rem;
  }
  
  /* Better mobile layout for promo code display */
  .loyalty-rewards-container > div:first-child {
    width: 100%;
    max-width: 100%;
  }
  
  /* Better mobile button styling */
  .loyalty-rewards-container .reward-remove-btn {
    width: 100%;
    max-width: 200px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
}

@keyframes loyaltyExpandDown {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 2000px;
    opacity: 1;
  }
}

.loyalty-level-config {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: white;
  border-radius: 6px;
  border: 1px solid #dee2e6;
}

.loyalty-config-top {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.loyalty-config-bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.loyalty-config-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
}

.loyalty-config-bottom .loyalty-config-field {
  align-items: center;
}

.loyalty-config-field label {
  font-weight: 600;
  color: #3e2723;
  font-size: 0.9rem;
  font-family: 'The Wanters DEMO', serif;
}

.loyalty-name-input,
.loyalty-message-input,
.loyalty-points-input {
  padding: 0.75rem;
  border: 2px solid #d0d0d0;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: 'Verdana', sans-serif;
  background: white;
  color: #3e2723;
  width: 100%;
}

.loyalty-message-input {
  text-align: center;
  resize: vertical;
  transition: all 0.2s ease;
}

.loyalty-name-input {
  width: 100%;
  max-width: 200px;
  text-align: center;
}

.loyalty-message-input {
  width: 33.33%;
  max-width: 33.33%;
  min-height: 120px;
  resize: vertical;
}

.loyalty-points-input {
  width: 100%;
  max-width: 150px;
  text-align: center;
}

.loyalty-name-input:focus,
.loyalty-message-input:focus,
.loyalty-points-input:focus {
  outline: none;
  border-color: #8b45d1;
  box-shadow: 0 0 0 3px rgba(139, 69, 209, 0.1);
}

/* Rewards List Container (like product-sizes-container) */
.loyalty-rewards-list-container {
  background: #f5f5f5;
  border-radius: 8px;
  margin: 1rem 0;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.loyalty-rewards-list-header {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border: 2px solid #36034d;
  color: white;
  padding: 0.75rem 1rem;
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 8px;
  margin: 1rem 0;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
}

.loyalty-reward-row {
  display: grid;
  grid-template-columns: 3fr 2fr 1.5fr auto;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #dee2e6;
  background: white;
  transition: all 0.2s ease;
  align-items: center;
  position: relative;
}

.loyalty-reward-row:last-child {
  border-bottom: none;
}

.reward-code-name,
.reward-category,
.reward-value,
.reward-uses {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.reward-code-text,
.reward-category-text,
.reward-value-text,
.reward-uses-text {
  font-weight: 600;
  color: #495057;
  font-size: 0.9rem;
  font-family: 'The Wanters DEMO', serif;
}

.reward-code-text {
  color: #8b45d1;
  font-size: 0.95rem;
}

.reward-category-text {
  color: #3e2723;
  text-transform: capitalize;
}

.reward-value-text {
  color: #27ae60;
}

.reward-uses-text {
  color: #3e2723;
  font-size: 0.85rem;
}

.mobile-label {
  display: none;
  font-size: 0.75rem;
  color: #6c757d;
  margin-bottom: 0.25rem;
  text-transform: capitalize;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.reward-remove {
  display: flex;
  align-items: center;
  justify-content: center;
}

.reward-remove-btn {
  background: #d32f2f;
  color: white;
  border: 2px solid #b71c1c;
  border-radius: 20px;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-family: 'The Wanters DEMO', serif;
  white-space: nowrap;
}

.reward-remove-btn:hover {
  background: #b71c1c;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(211, 47, 47, 0.3);
}

.reward-remove-btn:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .loyalty-reward-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1rem;
  }
  
  .mobile-label {
    display: block;
  }
  
  .reward-code-name,
  .reward-category,
  .reward-value,
  .reward-uses {
    width: 100%;
  }
}

/* Achievement Tiers List (like product sizes) */
.achievement-tiers-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

.achievement-tier-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: white;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  transition: all 0.2s ease;
}

.achievement-tier-item:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
}

.tier-label {
  font-weight: 600;
  color: #495057;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  font-family: 'The Wanters DEMO', serif;
}

.tier-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tier-detail-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.tier-detail-label {
  font-weight: 600;
  color: #6c757d;
  font-size: 0.85rem;
  min-width: 80px;
}

.tier-detail-value {
  color: #495057;
  font-size: 0.9rem;
}

.achievements-accordion {
  margin-top: 1rem;
}

.achievements-actions {
  margin-bottom: 1rem;
}

.admin-add-achievement-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  color: white;
  border: 2px solid #004d06;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'The Wanters DEMO', serif;
}

.admin-add-achievement-btn:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 119, 10, 0.3);
}

/* Add Achievement Modal Styles */
.achievement-tiers-section {
  margin-top: 1.5rem;
}

.achievement-tiers-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.add-tier-btn {
  background: linear-gradient(135deg, #4caf50, #45a049);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-tier-btn:hover {
  background: linear-gradient(135deg, #45a049, #3d8b40);
  transform: translateY(-1px);
}

.achievement-tier-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  margin-bottom: 1rem;
}

.achievement-tier-inputs {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.remove-tier-btn {
  background: linear-gradient(135deg, #d32f2f, #b71c1c);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-end;
}

.remove-tier-btn:hover {
  background: linear-gradient(135deg, #b71c1c, #9a1616);
  transform: translateY(-1px);
}

.no-rewards-message {
  padding: 1rem;
  text-align: center;
  color: #6c757d;
  font-style: italic;
}

.loyalty-reward-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
  padding: 0;
  border: none;
}

.loyalty-add-reward-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  color: white;
  border: 2px solid #36034d;
  border-radius: 20px;
  padding: 0.5rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  width: auto;
  min-width: 120px;
  max-width: 160px;
}

.loyalty-add-reward-btn:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #2d0239;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(87, 5, 138, 0.4);
}

/* Invite Customer Button */
.invite-customer-section {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.invite-customer-btn {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: white;
  border: 2px solid #1e8449;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.invite-customer-btn:hover {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  border-color: #1e8449;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(39, 174, 96, 0.4);
}

.loyalty-reward-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.loyalty-reward-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.loyalty-reward-header h4 {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
}

.loyalty-reward-content p {
  color: #666;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.loyalty-reward-stats {
  display: flex;
  justify-content: space-between;
  background: rgba(39, 174, 96, 0.1);
  padding: 0.5rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.loyalty-reward-stats span {
  color: #27ae60;
  font-weight: 600;
  font-size: 0.9rem;
}

.loyalty-reward-actions {
  display: flex;
  gap: 0.5rem;
}

/* Responsive styles for achievements and promo codes */
@media (max-width: 768px) {
  .achievements-grid,
  .rewards-grid,
  .promo-codes-grid,
  .loyalty-grid,
  .loyalty-rewards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .achievements-actions,
  .loyalty-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .admin-add-achievement-btn,
  .admin-add-level-btn,
  .admin-add-promo-btn,
  .admin-add-loyalty-btn,
  .admin-add-reward-btn {
    width: 100%;
    max-width: 300px;
  }

  .achievement-flip-card,
  .loyalty-flip-card {
    max-width: 100%;
    height: 280px;
  }

  .achievement-edit-form,
  .loyalty-edit-form {
    gap: 0.6rem;
  }

  .form-group label {
    font-size: 0.8rem;
  }

  .achievement-select,
  .achievement-input,
  .loyalty-input,
  .loyalty-select {
    font-size: 0.8rem;
    padding: 0.4rem;
  }
}

@media (max-width: 480px) {
  .business-widget-buttons {
    gap: 0.3rem;
  }
  
  .business-widget-buttons .admin-management-btn,
  .business-widget-buttons .admin-customers-btn,
  .business-widget-buttons .admin-promo-codes-btn,
  .business-widget-buttons .admin-loyalty-btn {
    min-width: 150px !important;
    width: 150px !important;
    max-width: 150px !important;
    flex: 0 0 150px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem;
  }
}

/* Linked Customers Styles */
.linked-customers-container {
  width: 100%;
}

.linked-customers-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 500px;
  overflow-y: auto;
  padding: 0.5rem;
}

.linked-customer-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(245, 245, 220, 0.1);
  border: 2px solid #8d6e63;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.linked-customer-item:hover {
  background: rgba(245, 245, 220, 0.2);
  border-color: #5d4037;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.customer-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8d6e63, #5d4037);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #f5f5dc;
  flex-shrink: 0;
}

.customer-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.customer-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #3e2723;
}

.customer-email {
  font-size: 0.9rem;
  color: #6d4c41;
}

.customer-status {
  margin-top: 0.25rem;
}

.status-badge.linked {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.status-badge.pending {
  background: linear-gradient(135deg, #ff9800, #f57c00);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.customer-actions {
  flex-shrink: 0;
}

.view-customer-btn {
  background: linear-gradient(135deg, #8d6e63, #5d4037);
  color: #f5f5dc;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.view-customer-btn:hover {
  background: linear-gradient(135deg, #5d4037, #3e2723);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.no-linked-customers {
  text-align: center;
  padding: 3rem 2rem;
  color: #6d4c41;
}

.no-customers-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.no-linked-customers h3 {
  margin: 0 0 0.5rem 0;
  color: #3e2723;
  font-size: 1.5rem;
}

.no-linked-customers p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

/* Customer Settings Modal */
.customer-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.customer-modal {
  background: #f5f5dc;
  border: 3px solid #8d6e63;
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

.customer-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 2px solid #8d6e63;
  background: linear-gradient(135deg, #8d6e63, #5d4037);
  color: #f5f5dc;
  border-radius: 13px 13px 0 0;
}

.customer-modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.customer-modal-close {
  background: none;
  border: none;
  color: #f5f5dc;
  font-size: 2rem;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.customer-modal-close:hover {
  background: rgba(245, 245, 220, 0.2);
}

.customer-modal-content {
  padding: 1.5rem;
}

.customer-details-section {
  margin-bottom: 2rem;
}

.customer-details-section:last-child {
  margin-bottom: 0;
}

.customer-details-section h3 {
  margin: 0 0 1rem 0;
  color: #3e2723;
  font-size: 1.2rem;
  font-weight: 600;
  border-bottom: 2px solid #8d6e63;
  padding-bottom: 0.5rem;
}

.customer-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.customer-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.customer-detail-item label {
  font-weight: 600;
  color: #5d4037;
  font-size: 0.9rem;
}

.customer-detail-item span {
  color: #3e2723;
  font-size: 1rem;
  padding: 0.5rem;
  background: rgba(245, 245, 220, 0.3);
  border-radius: 6px;
  border: 1px solid #8d6e63;
}

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

/* Link Business Button Styles */
.link-business-btn {
  color: white;
  padding: 0.5rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  width: 80px;
  height: 80px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.link-business-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.link-business-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Specific override for main menu link button */
.main-menu-link-btn {
  opacity: 1 !important;
  color: #fff !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1000 !important;
}

.main-menu-link-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(0,0,0,0.3) !important;
}

.main-menu-link-btn:disabled {
  opacity: 1 !important;
  color: #fff !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1000 !important;
}

/* Dynamic link button - overrides all other styles */
.dynamic-link-button {
  background-color: var(--link-button-bg, #14545c) !important;
  border-color: var(--link-button-border, #000) !important;
}

.dynamic-link-button:hover {
  background-color: var(--link-button-hover-bg, #0f3f47) !important;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Typing animation cursor effect for search inputs */
.ingredients-selection-search-input:not(:focus)::placeholder {
  animation: typing-cursor 1s infinite;
}

@keyframes typing-cursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}/* QR Generator Button Styles */
.admin-qr-generator-btn {
  background-color: #1a1a1a;
  color: #fff;
  border-color: #000000;
  padding: 0.8rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: 'The Wanters DEMO', serif;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #000000;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  white-space: nowrap;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.admin-qr-generator-btn:hover {
  background-color: #2d2d2d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}


/* Site Map Button - Red color as requested */
.admin-site-map-btn {
  /* Base button styles - same as other admin buttons */
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #000000;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  width: 220px;
  min-width: 220px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  /* Red color styling - gradient red */
  background: linear-gradient(135deg, #d32f2f 0%, #a31b00 100%);
  color: #fff;
  border-color: #8b0000;
  box-shadow: 0 4px 8px rgba(163, 27, 0, 0.3);
}

.admin-site-map-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #a31b00 0%, #d32f2f 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(163, 27, 0, 0.4);
  border-color: #8b0000;
  color: #3e2723 !important;
}

/* Dark mode site map button */
.dark-mode .admin-site-map-btn {
  background: linear-gradient(135deg, #d32f2f 0%, #a31b00 100%);
  border-color: #8b0000;
}

.dark-mode .admin-site-map-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #a31b00 0%, #d32f2f 100%);
  box-shadow: 0 6px 12px rgba(163, 27, 0, 0.4);
  border-color: #8b0000;
  color: #3e2723 !important;
}
/* Admin Session Preferences Component Styles */

.admin-session-preferences {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Prevent session-actions block from ever growing on wide screens (keeps Home/Logout stacked) */
.admin-session-preferences .session-status .session-actions,
.admin-session-preferences .session-actions {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

.admin-session-preferences.dark {
  color: #e5e7eb;
}

.admin-session-preferences.light {
  color: #1f2937;
}

/* Session status: single column so Home, Site Map, Logout stack and align */
.session-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Use block layout so Home and Logout always stack; flex can be overridden elsewhere */
.session-actions.session-actions-stack,
.session-actions-column.session-actions-stack {
  display: block !important;
  width: 100% !important;
  max-width: 220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.session-actions {
  display: block !important;
  width: 100%;
  max-width: 220px;
}

/* Inner wrapper: block so buttons stack in normal flow, never side-by-side */
.session-actions-inner {
  display: block !important;
  width: 100% !important;
  max-width: 220px;
}

/* Force block layout so Home and Logout always stack (all screen sizes) - no flex row can override */
.admin-session-preferences .session-status .session-actions,
.admin-session-preferences .session-actions,
.admin-session-preferences .session-actions-column,
.admin-session-preferences .session-actions-stack,
.session-actions-column.session-actions-stack,
.admin-content .admin-session-preferences .session-actions-inner,
.admin-panel-page .admin-session-preferences .session-actions-inner,
.admin-session-preferences .session-actions .session-actions-inner {
  display: block !important;
  width: 100% !important;
  max-width: 220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Buttons: block so they stack vertically. Home, Logout on all screen sizes. */
.admin-session-preferences .session-actions button,
.admin-session-preferences .session-status .session-actions button,
.admin-session-preferences .session-actions-inner button,
.admin-session-preferences .admin-back-button,
.admin-session-preferences .logout-button,
.admin-session-preferences .admin-session-return-button {
  display: block !important;
  width: 100% !important;
  max-width: 220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0.5rem !important;
  box-sizing: border-box;
}
.admin-session-preferences .session-actions-inner button:last-child,
.admin-session-preferences .logout-button,
.admin-session-preferences .admin-session-return-button:last-child {
  margin-bottom: 0 !important;
}

/* Wide screens: keep Home and Logout stacked vertically (block layout, never row).
   High specificity to override any wide-screen row layout from AdminPanel or other global CSS. */
@media (min-width: 769px) {
  .admin-panel-page .admin-content .admin-session-preferences .session-status,
  .admin-panel-page .admin-content .admin-session-preferences .session-status .session-actions,
  .admin-panel-page .admin-content .admin-session-preferences .session-actions.session-actions-stack,
  .admin-panel-page .admin-content .admin-session-preferences .session-actions-inner,
  .admin-session-preferences .session-status .session-actions,
  .admin-session-preferences .session-actions,
  .admin-session-preferences .session-actions-inner,
  .session-actions-column.session-actions-stack {
    display: block !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    width: 100% !important;
    max-width: 220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .admin-panel-page .admin-content .admin-session-preferences .session-actions-inner .admin-back-button,
  .admin-panel-page .admin-content .admin-session-preferences .session-actions-inner .logout-button,
  .admin-panel-page .admin-content .admin-session-preferences .session-actions-inner .admin-session-return-button,
  .admin-panel-page .admin-content .admin-session-preferences .admin-back-button,
  .admin-panel-page .admin-content .admin-session-preferences .logout-button,
  .admin-panel-page .admin-content .admin-session-preferences .admin-session-return-button,
  .admin-panel-page .admin-content .admin-session-preferences .session-actions-inner button,
  .admin-session-preferences .session-actions button,
  .admin-session-preferences .session-status .session-actions button,
  .admin-session-preferences .admin-back-button,
  .admin-session-preferences .logout-button,
  .admin-session-preferences .admin-session-return-button {
    display: block !important;
    width: 100% !important;
    max-width: 220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0.5rem !important;
  }
  .admin-session-preferences .session-actions-inner button:last-child,
  .admin-session-preferences .logout-button,
  .admin-session-preferences .admin-session-return-button:last-child {
    margin-bottom: 0 !important;
  }
}

/* Header Section */
.preferences-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
}

.preferences-header h2 {
  margin: 0 0 10px 0;
  font-size: 2rem;
  font-weight: 600;
}

.preferences-header p {
  margin: 0;
  font-size: 1.1rem;
  opacity: 0.9;
}

/* Content Sections */
.preferences-content {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* Current Session Info */
.current-session-info {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.dark .current-session-info {
  background: #1e293b;
  border-color: #334155;
}

.current-session-info h3 {
  margin: 0 0 15px 0;
  color: #374151;
  font-size: 1.25rem;
  font-weight: 600;
}

.dark .current-session-info h3 {
  color: #e5e7eb;
}

.session-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.session-detail {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.session-detail .label {
  font-weight: 600;
  color: #6b7280;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .session-detail .label {
  color: #9ca3af;
}

.session-detail .value {
  font-size: 1rem;
  color: #111827;
  font-weight: 500;
}

.dark .session-detail .value {
  color: #f9fafb;
}

/* Preference Sections */
.preference-section {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.dark .preference-section {
  background: #1f2937;
  border-color: #374151;
}

.preference-section h3 {
  margin: 0 0 10px 0;
  color: #111827;
  font-size: 1.5rem;
  font-weight: 600;
}

.dark .preference-section h3 {
  color: #f9fafb;
}

.preference-section p {
  margin: 0 0 20px 0;
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.5;
}

.dark .preference-section p {
  color: #9ca3af;
}

/* Session Options */
.session-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.session-option {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fafafa;
}

.dark .session-option {
  border-color: #374151;
  background: #111827;
}

.session-option:hover {
  border-color: #3b82f6;
  background: #eff6ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.dark .session-option:hover {
  background: #1e3a8a;
  border-color: #60a5fa;
}

.session-option.selected {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dark .session-option.selected {
  background: #1e3a8a;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

.option-header {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.option-radio {
  flex-shrink: 0;
  margin-top: 2px;
}

.option-radio input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #3b82f6;
}

.option-content {
  flex: 1;
}

.option-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.label-text {
  font-weight: 600;
  font-size: 1.1rem;
  color: #111827;
}

.dark .label-text {
  color: #f9fafb;
}

.security-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  text-align: center;
  min-width: 60px;
}

.option-description {
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.4;
}

.dark .option-description {
  color: #9ca3af;
}

/* Persistence Toggle */
.persistence-toggle {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.toggle-label {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  flex-shrink: 0;
}

.toggle-label input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: #3b82f6;
}

input:checked + .toggle-slider:before {
  transform: translateX(26px);
}

.persistence-info {
  flex: 1;
}

.persistence-title {
  font-weight: 600;
  font-size: 1.1rem;
  color: #111827;
  margin-bottom: 8px;
}

.dark .persistence-title {
  color: #f9fafb;
}

.persistence-description {
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.4;
}

.dark .persistence-description {
  color: #9ca3af;
}

/* Security Notice */
.security-notice {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 20px;
}

.dark .security-notice {
  background: #451a03;
  border-color: #d97706;
}

.security-notice h4 {
  margin: 0 0 15px 0;
  color: #92400e;
  font-size: 1.1rem;
  font-weight: 600;
}

.dark .security-notice h4 {
  color: #fbbf24;
}

.security-notice ul {
  margin: 0;
  padding-left: 20px;
  color: #92400e;
  font-size: 0.9rem;
  line-height: 1.5;
}

.dark .security-notice ul {
  color: #fbbf24;
}

.security-notice li {
  margin-bottom: 8px;
}

.security-notice strong {
  color: #78350f;
}

.dark .security-notice strong {
  color: #f59e0b;
}

/* Action Buttons */
.preferences-actions {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.save-button {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.25);
}

.save-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(59, 130, 246, 0.35);
}

.save-button:active:not(:disabled) {
  transform: translateY(0);
}

.save-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.save-button.loading {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

/* Message Display */
.message {
  padding: 15px 20px;
  border-radius: 8px;
  font-weight: 500;
  text-align: center;
  animation: slideIn 0.3s ease;
}

.message.success {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #10b981;
}

.dark .message.success {
  background: #064e3b;
  color: #6ee7b7;
  border-color: #059669;
}

.message.error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #ef4444;
}

.dark .message.error {
  background: #7f1d1d;
  color: #fca5a5;
  border-color: #dc2626;
}

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

/* Responsive Design */
@media (max-width: 768px) {
  .admin-session-preferences {
    padding: 15px;
  }
  
  .preferences-header h2 {
    font-size: 1.5rem;
  }
  
  .preferences-header p {
    font-size: 1rem;
  }
  
  .session-details {
    grid-template-columns: 1fr;
  }
  
  .persistence-toggle {
    flex-direction: column;
    gap: 15px;
  }
  
  .toggle-label {
    align-self: flex-start;
  }
  
  .preference-section {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .admin-session-preferences {
    padding: 10px;
  }
  
  .preferences-header {
    padding: 15px;
  }
  
  .preferences-header h2 {
    font-size: 1.25rem;
  }
  
  .preference-section {
    padding: 15px;
  }
  
  .session-option {
    padding: 12px;
  }
  
  .option-header {
    gap: 12px;
  }
  
  .save-button {
    padding: 12px 24px;
    font-size: 1rem;
  }
}
/* Business Setup Modal Styles - Everdream Theme */

.business-setup-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 20, 20, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease-out;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

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

.business-setup-modal {
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #5d4037;
  border-radius: 15px;
  width: 90%;
  max-width: 600px;
  min-width: 320px;
  max-height: 95vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  animation: modalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  font-family: 'The Wanters DEMO', serif;
  margin: 0 auto;
  text-align: center;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition: transform 0.6s ease-in-out;
  perspective: 1000px;
}

/* Card flip animation */
.business-setup-modal.flipped {
  animation: flipCard 0.6s ease-in-out;
}

.business-setup-modal.flipping-back {
  animation: flipCardBack 0.6s ease-in-out;
}

@keyframes flipCard {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes flipCardBack {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(-90deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

/* Responsive modal width for different screen sizes */
@media (min-width: 768px) {
  .business-setup-modal {
    max-width: 700px;
    width: 85%;
  }
}

@media (min-width: 1024px) {
  .business-setup-modal {
    max-width: 800px;
    width: 80%;
  }
}

/* Card flip animation - Remove the flip transform that was causing text to be mirrored */
.business-setup-modal.flipped {
  /* Remove the problematic rotateY transform that was flipping the text */
  transform: none;
}

/* Hide scrollbar but maintain scroll functionality */
.business-setup-modal::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.business-setup-modal::-webkit-scrollbar-track {
  background: transparent;
}

.business-setup-modal::-webkit-scrollbar-thumb {
  background: transparent;
}

/* Dark mode */
.business-setup-modal.dark {
  background: rgba(30, 30, 30, 0.98);
  border: 3px solid #000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
}

/* Dream mode */
.business-setup-modal.dream {
  background: rgba(20, 20, 20, 0.98);
  border: 3px solid #000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header */
.business-setup-modal-header {
  padding: 0.5rem;
  background: transparent;
  text-align: center;
}

/* Content */
.business-setup-modal-content {
  padding: 1rem 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Back Button Section */
.business-setup-back-section {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  padding: 0 1rem;
  width: 100%;
}

.business-setup-back-button {
  background: linear-gradient(135deg, #d32f2f, #f44336);
  color: white;
  border: 2px solid #b71c1c;
  border-radius: 25px;
  padding: 0.75rem 2rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'The Wanters DEMO', serif;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 8px rgba(211, 47, 47, 0.2);
}

.business-setup-back-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #f44336, #d32f2f);
  border-color: #b71c1c;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(211, 47, 47, 0.3);
}

.business-setup-back-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Title Panel - Like Daydreamers Menu */
.business-setup-modal-title-panel {
  background: linear-gradient(135deg, #5d4037 0%, #8d6e63 50%, #5d4037 100%);
  border: 4px solid #3e2723;
  border-radius: 15px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
  box-shadow: 0 8px 20px rgba(62, 39, 35, 0.3);
  width: 100%;
}

.business-setup-modal-title {
  color: #f5f5dc;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.business-setup-update-message {
  color: #f5f5dc;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif;
  font-size: 0.9rem;
  font-style: italic;
  margin-top: 0.5rem;
  text-align: center;
  opacity: 0.8;
}

.business-setup-modal-subtitle {
  color: #5d4037;
  font-size: 1rem;
  margin: 0.5rem 0 0 0;
  font-family: 'The Wanters DEMO', serif;
  line-height: 1.5;
  text-align: center;
}

.dark .business-setup-modal-subtitle {
  color: #ffffff;
}

.dream .business-setup-modal-subtitle {
  color: #ffffff;
}

/* Form Background Panel - Teal Theme */
.business-setup-form-panel {
  background: linear-gradient(135deg, #14545c 0%, #1a5f68 50%, #14545c 100%);
  border: 4px solid #0e3a40;
  border-radius: 15px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 20px rgba(20, 84, 92, 0.3);
  width: 100%;
}

/* Title Container inside teal panel */
.business-setup-title-container {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(245, 245, 220, 0.3);
}

.dark .business-setup-form-panel {
  background: linear-gradient(135deg, #0e3a40 0%, #14545c 50%, #0e3a40 100%);
  border: 4px solid #000;
}

.dream .business-setup-form-panel {
  background: linear-gradient(135deg, #000 0%, #0e3a40 50%, #000 100%);
  border: 4px solid #000;
}

/* Form */
.business-setup-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Form Group */
.business-setup-form-group {
  margin-bottom: 1rem;
}

.business-setup-label {
  display: block;
  color: #f5f5dc;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  text-transform: capitalize;
}

.business-setup-input {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  transition: border-color 0.3s ease;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
}

/* Dropdown specific styling to match app standards */
.business-setup-input-verdana {
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
  padding: 0.8rem;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
  text-align: left;
  cursor: pointer;
}

.business-setup-input-verdana:focus {
  outline: none;
  border-color: #8d6e63;
}

.dark .business-setup-input-verdana {
  background: #1a1a1a;
  border-color: #5d4037;
  color: #8d6e63;
}

.dark .business-setup-input-verdana:focus {
  border-color: #8d6e63;
}

.dream .business-setup-input-verdana {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
}

.dream .business-setup-input-verdana:focus {
  border-color: #6a1b9a;
  box-shadow: 0 0 15px rgba(106, 27, 154, 0.4);
  background: #fff;
}

.business-setup-input:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.dark .business-setup-input,
.dream .business-setup-input {
  background: rgba(80, 80, 80, 0.9);
  border-color: #000;
  color: #fff;
}

.dark .business-setup-input:focus,
.dream .business-setup-input:focus {
  border-color: #4CAF50;
}

/* Form Row for side-by-side inputs */
.business-setup-form-row {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.business-setup-form-row .business-setup-form-group {
  flex: 1;
  margin-bottom: 1rem;
}

/* Ensure all form groups in the panel are center-aligned */
.business-setup-form-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Street fields row - side by side on wide screens */
.business-setup-form-row.street-fields-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto 1rem auto;
  max-width: 500px;
  width: 100%;
}

/* City fields row - side by side on wide screens */
.business-setup-form-row.city-fields-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto 1rem auto;
  max-width: 500px;
  width: 100%;
}

.business-setup-form-group.street-number-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 150px;
  flex: 0 0 auto;
  margin: 0;
  width: auto;
}

.business-setup-form-group.street-name-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 250px;
  flex: 1;
  margin: 0;
  width: auto;
}

.business-setup-form-group.city-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 250px;
  flex: 1;
  margin: 0;
  width: auto;
}

.business-setup-form-group.postcode-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 150px;
  flex: 0 0 auto;
  margin: 0;
  width: auto;
}

.business-setup-form-group.street-number-group .business-setup-input,
.business-setup-form-group.street-name-group .business-setup-input,
.business-setup-form-group.city-group .business-setup-input,
.business-setup-form-group.postcode-group .business-setup-input {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  display: block;
}

/* Prevent line breaks on labels */
.business-setup-form-group.street-number-group .business-setup-label,
.business-setup-form-group.postcode-group .business-setup-label {
  white-space: nowrap;
}

/* Other address fields - narrower */
.business-setup-form-panel .business-setup-form-group:not(.street-number-group):not(.street-name-group):not(.postcode-group) {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 1rem auto;
  max-width: 250px;
  width: auto;
}

.business-setup-form-panel .business-setup-form-group:not(.street-number-group):not(.street-name-group):not(.postcode-group) .business-setup-input {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  display: block;
}

/* Form Section Title */
.business-setup-section-title {
  text-align: center;
  margin: 2rem 0 0.5rem 0;
}

.business-setup-section-title h3 {
  color: #f5f5dc;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  text-transform: capitalize;
}

/* Textarea styling - Force height with highest specificity */
.business-setup-modal .business-setup-textarea,
.business-setup-modal textarea.business-setup-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  resize: vertical;
  min-height: 150px !important;
  height: auto !important;
  transition: border-color 0.3s ease;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  overflow-y: auto;
}

.business-setup-textarea:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.dark .business-setup-textarea,
.dream .business-setup-textarea {
  background: rgba(80, 80, 80, 0.9);
  border-color: #000;
  color: #fff;
}

.dark .business-setup-textarea:focus,
.dream .business-setup-textarea:focus {
  border-color: #4CAF50;
}

/* Character count styling */
.business-setup-char-count {
  color: #8d6e63;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif;
  font-size: 0.8rem;
  text-align: center;
  margin-top: 0.25rem;
  opacity: 0.7;
}

.dark .business-setup-char-count,
.dream .business-setup-char-count {
  color: #f5f5dc;
}

/* Error Panel */
.business-setup-error-panel {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 1rem;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
  font-size: 0.9rem;
}

.dark .business-setup-error-panel,
.dream .business-setup-error-panel {
  background: #721c24;
  color: #f8d7da;
  border-color: #f5c6cb;
}

/* Action Section */
.business-setup-action-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  align-items: center;
}

/* Next Button - Green like buying button */
.business-setup-next-button {
  background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%);
  color: #ffffff;
  border: 3px solid #1b5e20;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.4);
  width: 200px;
  text-transform: capitalize;
}

.business-setup-next-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(46, 125, 50, 0.6);
}

.business-setup-next-button:disabled {
  background: #9e9e9e !important;
  color: #666666 !important;
  border: 3px solid #757575 !important;
  cursor: not-allowed;
  opacity: 0.6;
}

.business-setup-next-button:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Complete Button - Green for second modal */
.business-setup-complete-button-green {
  background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%);
  color: #ffffff;
  border: 3px solid #1b5e20;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.4);
  width: 200px;
  text-transform: capitalize;
}

.business-setup-complete-button-green:hover:not(:disabled) {
  background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(46, 125, 50, 0.6);
}

.business-setup-complete-button-green:disabled {
  background: #9e9e9e !important;
  color: #666666 !important;
  border: 3px solid #757575 !important;
  cursor: not-allowed;
  opacity: 0.6;
}

.business-setup-complete-button-green:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Complete Button - Purple like recipe buttons (for first modal) */
.business-setup-complete-button {
  background: linear-gradient(135deg, #8e24aa 0%, #ab47bc 100%);
  color: #ffffff;
  border: 3px solid #6a1b9a;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(142, 36, 170, 0.4);
  width: 200px;
  text-transform: capitalize;
}

.business-setup-complete-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #ab47bc 0%, #8e24aa 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(142, 36, 170, 0.6);
}

.business-setup-complete-button:disabled {
  background: #9e9e9e !important;
  color: #666666 !important;
  border: 3px solid #757575 !important;
  cursor: not-allowed;
  opacity: 0.6;
}

.business-setup-complete-button:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Skip Button */
.business-setup-skip-button {
  background: linear-gradient(135deg, #d32f2f 0%, #f44336 100%);
  color: #ffffff;
  border: 3px solid #b71c1c;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.4);
  width: 200px;
  text-transform: capitalize;
}

.business-setup-skip-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(211, 47, 47, 0.6);
}

.business-setup-skip-button:disabled {
  background: #9e9e9e !important;
  color: #666666 !important;
  border: 3px solid #757575 !important;
  cursor: not-allowed;
  opacity: 0.6;
}

.business-setup-skip-button:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Verdana font for textarea */
.business-setup-textarea-verdana {
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
}

/* Checkbox sections */
.business-setup-checkbox-section {
  margin: 1rem 0;
  text-align: center;
}

.business-setup-checkbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* Force checkbox size - highest specificity */
.business-setup-modal .business-setup-checkbox,
.business-setup-modal input[type="checkbox"].business-setup-checkbox,
.business-setup-modal .business-setup-checkbox-section input[type="checkbox"],
.business-setup-modal .business-setup-day-checkbox input[type="checkbox"] {
  width: 1.3rem !important;
  height: 1.3rem !important;
  min-width: 1.3rem !important;
  min-height: 1.3rem !important;
  max-width: 1.3rem !important;
  max-height: 1.3rem !important;
  accent-color: #14545c !important;
  cursor: pointer !important;
}

.business-setup-checkbox-label {
  color: #f5f5dc;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  text-transform: capitalize;
  cursor: pointer;
}

/* Small labels for postal address fields */
.business-setup-label-small {
  display: block;
  color: #f5f5dc;
  font-family: 'The Wanters DEMO', serif;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  text-transform: capitalize;
}

/* Small input fields for postal address */
.business-setup-input-small {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
  background-color: rgba(255, 255, 255, 0.9);
  color: #3e2723;
  transition: all 0.3s ease;
  box-sizing: border-box;
  text-align: center;
}

.business-setup-input-small:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

.business-setup-input-small:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.dark .business-setup-input-small,
.dream .business-setup-input-small {
  background: rgba(80, 80, 80, 0.9);
  border-color: #000;
  color: #fff;
}

.dark .business-setup-input-small:focus,
.dream .business-setup-input-small:focus {
  border-color: #4CAF50;
}

/* Postal address section */
.business-setup-postal-section {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(245, 245, 220, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(245, 245, 220, 0.2);
}

/* Opening hours section */
.business-setup-hours-section {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(245, 245, 220, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(245, 245, 220, 0.2);
}

.business-setup-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.business-setup-day-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 120px;
}

.business-setup-day-label {
  color: #f5f5dc;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  text-transform: capitalize;
  cursor: pointer;
}

.business-setup-hours-input {
  flex: 1;
  max-width: 200px;
  min-width: 0; /* Allow shrinking */
}

/* More space for hours input on larger screens */
@media (min-width: 768px) {
  .business-setup-hours-input {
    max-width: 300px;
  }
}

/* Responsive: Full width on narrow screens */
@media (max-width: 480px) {
  .business-setup-hours-input {
    max-width: none;
    width: 100%;
  }
  
  .business-setup-hours-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .business-setup-day-checkbox {
    justify-content: center;
    margin-bottom: 0.5rem;
  }
}

.business-setup-time-selectors {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.business-setup-time-select {
  padding: 0.5rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.9);
  color: #3e2723;
  font-size: 0.9rem;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100px; /* Increased width */
  height: 80px; /* Increased height */
  overflow-y: auto;
  text-align: center;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  touch-action: pan-y; /* Allow vertical scrolling on touch devices */
  scroll-behavior: smooth; /* Smooth scrolling */
  scroll-snap-type: y mandatory; /* Snap to each option */
  scroll-padding: 0.5rem; /* Padding for snap points */
  /* Enhanced smooth scrolling */
  scrollbar-width: thin; /* Thin scrollbar */
  scrollbar-color: #8d6e63 transparent; /* Custom scrollbar colors */
  /* Smooth momentum scrolling */
  -webkit-scroll-behavior: smooth;
  /* Reduce scroll jumpiness */
  scroll-margin: 0.5rem;
  /* Better scroll physics */
  overscroll-behavior: contain;
  /* Webkit smooth scrolling enhancements */
  -webkit-scrollbar: thin;
  -webkit-scrollbar-track: transparent;
  -webkit-scrollbar-thumb: #8d6e63;
  /* Momentum scrolling for better feel */
  -webkit-momentum-scrolling: touch;
}

.business-setup-time-select:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

.business-setup-time-select:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

/* Time input styling */
.business-setup-time-inputs {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* More spacing on larger screens */
@media (min-width: 768px) {
  .business-setup-time-inputs {
    gap: 2rem;
  }
}

/* Responsive: Stack vertically on narrow screens */
@media (max-width: 480px) {
  .business-setup-time-inputs {
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
  }
  
  .business-setup-time-input {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
  }
}

.business-setup-time-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.business-setup-time-label {
  color: #f5f5dc;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
}

.business-setup-time-input {
  width: 120px;
  padding: 0.6rem 0.8rem;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.9);
  color: #3e2723;
  font-size: 0.9rem;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif;
  text-align: center;
  transition: all 0.3s ease;
}

.business-setup-time-input:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

.business-setup-time-input:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.dark .business-setup-time-input,
.dream .business-setup-time-input {
  background: rgba(80, 80, 80, 0.9);
  border-color: #000;
  color: #fff;
}

.dark .business-setup-time-input:focus,
.dream .business-setup-time-input:focus {
  border-color: #4CAF50;
}

.business-setup-time-separator {
  color: #f5f5dc;
  font-family: 'The Wanters DEMO', serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.business-setup-closed-indicator {
  color: #ff4444;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  opacity: 1;
  text-align: center;
  padding: 0.5rem;
  background: rgba(255, 68, 68, 0.1);
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.dark .business-setup-time-select,
.dream .business-setup-time-select {
  background: rgba(80, 80, 80, 0.9);
  border-color: #000;
  color: #fff;
}

.dark .business-setup-time-select:focus,
.dream .business-setup-time-select:focus {
  border-color: #4CAF50;
}

/* Mobile responsiveness for form-row */
@media (max-width: 768px) {
  .business-setup-form-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .business-setup-form-row .business-setup-form-group {
    margin-bottom: 0.5rem;
  }
  
  .business-setup-modal {
    width: 95%;
    max-width: none;
  }
  
  .business-setup-modal-content {
    padding: 1rem;
  }
  
  /* Address fields responsive adjustments - tablet */
  .business-setup-form-panel .business-setup-form-group:not(.street-number-group):not(.street-name-group):not(.postcode-group) {
    max-width: 220px;
    margin: 0 auto 1rem auto;
    width: auto;
  }
  
  .business-setup-form-group.street-number-group {
    max-width: 120px;
    margin: 0;
    width: auto;
  }
  
  .business-setup-form-group.street-name-group,
  .business-setup-form-group.city-group {
    max-width: 200px;
    margin: 0;
    width: auto;
  }
  
  .business-setup-form-group.postcode-group {
    max-width: 120px;
    margin: 0;
    width: auto;
  }
  
  .business-setup-form-group.street-number-group .business-setup-input,
  .business-setup-form-group.postcode-group .business-setup-input {
    max-width: 120px;
    margin: 0 auto;
    display: block;
  }
  
  .business-setup-form-group.street-name-group .business-setup-input,
  .business-setup-form-group.city-group .business-setup-input {
    max-width: 200px;
    margin: 0 auto;
    display: block;
  }
  
  /* Ensure field rows are centered on tablet */
  .business-setup-form-row.street-fields-row,
  .business-setup-form-row.city-fields-row {
    max-width: 400px;
    margin: 0 auto 1rem auto;
    width: 100%;
  }
  
  /* Fix alignment for medium screens just before stacking */
  @media (max-width: 700px) and (min-width: 601px) {
    .business-setup-form-row.street-fields-row,
    .business-setup-form-row.city-fields-row {
      max-width: 350px;
      margin: 0 auto 1rem auto;
      width: 100%;
      justify-content: center;
      align-items: center;
    }
    
    .business-setup-form-group.street-number-group {
      max-width: 100px;
      flex: 0 0 auto;
      margin: 0;
    }
    
    .business-setup-form-group.street-name-group,
    .business-setup-form-group.city-group {
      max-width: 200px;
      flex: 1;
      margin: 0;
    }
    
    .business-setup-form-group.postcode-group {
      max-width: 100px;
      flex: 0 0 auto;
      margin: 0;
    }
  }
  
  /* Additional fine-tuning for the problematic range */
  @media (max-width: 650px) and (min-width: 601px) {
    .business-setup-form-row.street-fields-row,
    .business-setup-form-row.city-fields-row {
      max-width: 320px;
      gap: 0.75rem;
    }
    
    .business-setup-form-group.street-number-group {
      max-width: 90px;
    }
    
    .business-setup-form-group.street-name-group,
    .business-setup-form-group.city-group {
      max-width: 180px;
    }
    
    .business-setup-form-group.postcode-group {
      max-width: 90px;
    }
  }
  
  /* Stack fields vertically on smaller tablets */
  @media (max-width: 600px) {
    .business-setup-form-row.street-fields-row,
    .business-setup-form-row.city-fields-row {
      flex-direction: column;
      gap: 0.5rem;
      max-width: 300px;
    }
    
    .business-setup-form-group.street-number-group,
    .business-setup-form-group.street-name-group,
    .business-setup-form-group.city-group,
    .business-setup-form-group.postcode-group {
      margin: 0 auto 0.5rem auto;
    }
  }
  
  .business-setup-hours-row {
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
  }
  
  .business-setup-day-checkbox {
    min-width: auto;
    justify-content: center;
  }
  
  .business-setup-hours-input {
    max-width: none;
  }
  
  .business-setup-time-selectors {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .business-setup-time-select {
    width: 100%;
    height: 80px;
    font-size: 0.9rem; /* Adjusted for mobile */
    padding: 0.5rem; /* Adjusted padding for mobile */
  }
}

/* Extra small screens - mobile */
@media (max-width: 480px) {
  .business-setup-form-panel .business-setup-form-group:not(.street-number-group):not(.street-name-group):not(.postcode-group) {
    max-width: 200px;
    margin: 0 auto 1rem auto;
    width: auto;
  }
  
  .business-setup-form-group.street-number-group {
    max-width: 100px;
    margin: 0 auto 1rem auto;
    width: auto;
  }
  
  .business-setup-form-group.street-name-group,
  .business-setup-form-group.city-group {
    max-width: 180px;
    margin: 0 auto 1rem auto;
    width: auto;
  }
  
  .business-setup-form-group.postcode-group {
    max-width: 100px;
    margin: 0 auto 1rem auto;
    width: auto;
  }
  
  .business-setup-form-group.street-number-group .business-setup-input,
  .business-setup-form-group.postcode-group .business-setup-input {
    max-width: 100px;
    margin: 0 auto;
    display: block;
  }
  
  .business-setup-form-group.street-name-group .business-setup-input,
  .business-setup-form-group.city-group .business-setup-input {
    max-width: 180px;
    margin: 0 auto;
    display: block;
  }
  
  /* Ensure field rows are centered on mobile */
  .business-setup-form-row.street-fields-row,
  .business-setup-form-row.city-fields-row {
    max-width: 350px;
    margin: 0 auto 1rem auto;
    width: 100%;
  }
}

/* Very narrow screens - ensure perfect center alignment */
@media (max-width: 360px) {
  .business-setup-form-panel {
    padding: 1rem;
  }
  
  .business-setup-form-panel .business-setup-form-group:not(.street-number-group):not(.street-name-group):not(.postcode-group) {
    max-width: 180px;
    margin: 0 auto 1rem auto;
    width: auto;
  }
  
  .business-setup-form-group.street-number-group,
  .business-setup-form-group.postcode-group {
    max-width: 80px;
    margin: 0 auto 1rem auto;
    width: auto;
  }
  
  .business-setup-form-group.street-name-group,
  .business-setup-form-group.city-group {
    max-width: 160px;
    margin: 0 auto 1rem auto;
    width: auto;
  }
  
  .business-setup-form-group.street-number-group .business-setup-input,
  .business-setup-form-group.postcode-group .business-setup-input {
    max-width: 80px;
    margin: 0 auto;
    display: block;
  }
  
  .business-setup-form-group.street-name-group .business-setup-input,
  .business-setup-form-group.city-group .business-setup-input {
    max-width: 160px;
    margin: 0 auto;
    display: block;
  }
  
  /* Force all field rows to stack vertically on very narrow screens */
  .business-setup-form-row.street-fields-row,
  .business-setup-form-row.city-fields-row {
    flex-direction: column;
    gap: 0.5rem;
    max-width: 200px;
    margin: 0 auto 1rem auto;
    width: 100%;
  }
  
  .business-setup-form-group.street-number-group,
  .business-setup-form-group.street-name-group,
  .business-setup-form-group.city-group,
  .business-setup-form-group.postcode-group {
    margin: 0 auto 0.5rem auto;
  }
}

/* Extremely narrow screens - force perfect center alignment */
@media (max-width: 320px) {
  .business-setup-form-panel {
    padding: 0.75rem;
  }
  
  .business-setup-form-panel .business-setup-form-group:not(.street-number-group):not(.street-name-group):not(.postcode-group) {
    max-width: 160px;
    margin: 0 auto 1rem auto;
    width: auto;
  }
  
  .business-setup-form-group.street-number-group,
  .business-setup-form-group.postcode-group {
    max-width: 70px;
    margin: 0 auto 1rem auto;
    width: auto;
  }
  
  .business-setup-form-group.street-name-group,
  .business-setup-form-group.city-group {
    max-width: 140px;
    margin: 0 auto 1rem auto;
    width: auto;
  }
  
  .business-setup-form-group.street-number-group .business-setup-input,
  .business-setup-form-group.postcode-group .business-setup-input {
    max-width: 70px;
    margin: 0 auto;
    display: block;
  }
  
  .business-setup-form-group.street-name-group .business-setup-input,
  .business-setup-form-group.city-group .business-setup-input {
    max-width: 140px;
    margin: 0 auto;
    display: block;
  }
  
  /* Force all field rows to stack vertically on extremely narrow screens */
  .business-setup-form-row.street-fields-row,
  .business-setup-form-row.city-fields-row {
    flex-direction: column;
    gap: 0.25rem;
    max-width: 180px;
    margin: 0 auto 1rem auto;
    width: 100%;
  }
  
  .business-setup-form-group.street-number-group,
  .business-setup-form-group.street-name-group,
  .business-setup-form-group.city-group,
  .business-setup-form-group.postcode-group {
    margin: 0 auto 0.5rem auto;
  }
}

/* CRITICAL OVERRIDES - Highest priority at end of file */
.business-setup-modal input[type="checkbox"] {
  width: 1.3rem !important;
  height: 1.3rem !important;
  min-width: 1.3rem !important;
  min-height: 1.3rem !important;
  max-width: 1.3rem !important;
  max-height: 1.3rem !important;
}

.business-setup-modal textarea {
  min-height: 130px !important;
  height: 130px !important;
}/* Red glow effect for empty required fields */
.quick-add-input.field-empty {
  box-shadow: 0 0 8px rgba(220, 53, 69, 0.3);
  border-color: #dc3545;
  animation: redGlow 2s ease-in-out infinite;
}

.quick-add-input.field-empty:focus {
  box-shadow: 0 0 12px rgba(220, 53, 69, 0.4);
  border-color: #dc3545;
}

/* Red outline and glow for required fields */
.quick-add-input.required-field {
  border: 2px solid #ff4444 !important;
  box-shadow: 0 0 8px rgba(255, 68, 68, 0.5) !important;
  background-color: #fff5f5 !important;
}

.quick-add-input.required-field:focus {
  border: 2px solid #ff4444 !important;
  box-shadow: 0 0 12px rgba(255, 68, 68, 0.7) !important;
  outline: none !important;
  background-color: #fff5f5 !important;
}

/* Standard dark brown border for filled fields */
.quick-add-input.filled-field {
  border: 2px solid #5d4037 !important;
  box-shadow: none !important;
  background-color: #ffffff !important;
}

.quick-add-input.filled-field:focus {
  border: 2px solid #5d4037 !important;
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.2) !important;
  outline: none !important;
  background-color: #fafafa !important;
}

/* Green pulse animation for completed fields */
.quick-add-input.field-completed {
  animation: greenPulse 0.6s ease-in-out;
}

.quick-add-input.field-saved {
  animation: greenPulse 2s ease-in-out;
}

/* Red glow animation */
@keyframes redGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(220, 53, 69, 0.1);
  }
}

/* Green pulse animation */
@keyframes greenPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.6);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
}

/* Quick Add Modal Styles */

.quick-add-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 10000001 !important;
  backdrop-filter: blur(4px) !important;
  width: 100vw !important;
  height: 100vh !important;
}

.quick-add-modal {
  background: #f5f5dc;
  border: 3px solid #8d6e63;
  border-radius: 15px;
  min-width: 400px;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  font-family: 'The Wanters DEMO', serif;
  position: relative;
  z-index: 10000002 !important;
  /* Hide scrollbar but maintain scroll functionality */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hide scrollbar but maintain scroll functionality */
.quick-add-modal::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.quick-add-modal::-webkit-scrollbar-track {
  background: transparent;
}

.quick-add-modal::-webkit-scrollbar-thumb {
  background: transparent;
}

/* Modal Header */
.quick-add-modal-header {
  background: #8d6e63;
  color: #fff8e1;
  padding: 1rem 1.5rem;
  text-align: center !important;
  border-radius: 12px 12px 0 0;
}

/* Modal Header Colors by Type - Updated to match master colors */
.quick-add-modal-header.ingredients {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%); /* Master blue for ingredients */
}

.quick-add-modal-header.packaging {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%); /* Master green for packaging */
}

.quick-add-modal-header.appliances {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%); /* Master purple for appliances */
}

.quick-add-modal-header.sizes {
  background: linear-gradient(135deg, #C8990C 0%, #a67c0a 100%); /* Master yellow for costs */
  color: #ffffff; /* White text for contrast */
}

.quick-add-modal-title {
  font-size: 1.8rem;
  font-weight: 900;
  margin: 0;
  text-shadow: 
    1px 1px 0 #000000,
    -1px -1px 0 #000000,
    1px -1px 0 #000000,
    -1px 1px 0 #000000,
    0 1px 0 #000000,
    0 -1px 0 #000000,
    1px 0 0 #000000,
    -1px 0 0 #000000;
}

/* Modal Body */
.quick-add-modal-body {
  padding: 2rem;
}

/* General Error Message */
.quick-add-general-error {
  background: #ffebee;
  border: 2px solid #d32f2f;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  color: #d32f2f;
  font-weight: 600;
  text-align: center !important;
}

/* Form Fields */
.quick-add-form-field {
  margin-bottom: 1.5rem;
}

.quick-add-label {
  display: block;
  font-weight: 700;
  color: #5d4037;
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  text-align: center !important;
}

.quick-add-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 3px solid #8d6e63;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif;
  background: #ffffff;
  color: #3e2723;
  transition: all 0.2s ease;
  box-sizing: border-box;
  text-align: center !important;
}

.quick-add-input:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.2);
  background: #fafafa;
}

.quick-add-input::placeholder {
  color: #8d6e63;
  opacity: 0.7;
}

.quick-add-input.error {
  border-color: #d32f2f;
  background: #ffebee;
}

/* Add Size modal: only the unit dropdown trigger text is larger; box stays 80×44 */
.add-size-modal .ingredient-unit-dropdown-wrap {
  width: 80px;
  max-width: 80px;
}
.add-size-modal .ingredient-unit-dropdown-trigger {
  font-size: 1.35rem;
  width: 100%;
  min-height: 44px;
  max-height: 44px;
  height: 44px;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-add-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 3px solid #8d6e63;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif;
  background: #ffffff;
  color: #3e2723;
  transition: all 0.2s ease;
  box-sizing: border-box;
  text-align: center !important;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
}

.quick-add-select:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.2);
}

/* Error Messages */
.quick-add-error {
  color: #d32f2f;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0.25rem;
  display: block;
  text-align: center !important;
}

/* Modal Footer - fixed-width buttons like Add Item modal */
.quick-add-modal-footer {
  background: #8d6e63;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  border-radius: 0 0 12px 12px;
}

/* Cancel: red (right on wider screens) */
.quick-add-cancel-btn {
  background: linear-gradient(135deg, #f44336, #d32f2f);
  color: #ffffff;
  border: 3px solid #d32f2f;
  border-radius: 9999px;
  padding: 0.75rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
  flex: 0 0 auto;
}

.quick-add-cancel-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #d32f2f, #b71c1c);
  border-color: #b71c1c;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Add/Save: green (left on wider screens); overridden to gold for size modals */
.quick-add-save-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  color: #ffffff;
  border: 3px solid #004d06;
  border-radius: 9999px;
  padding: 0.75rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
  flex: 0 0 auto;
}

.quick-add-save-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #005d08, #004d06);
  border-color: #003d05;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 80, 0, 0.3);
}

/* Size Modal Specific Button Styles */
.quick-add-modal-header.sizes ~ .quick-add-modal-body ~ .quick-add-modal-footer .quick-add-save-btn {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #8b4513;
  border: 3px solid #daa520;
  font-weight: 900;
}

.quick-add-modal-header.sizes ~ .quick-add-modal-body ~ .quick-add-modal-footer .quick-add-save-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #ffed4e, #ffd700);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 215, 0, 0.4);
}

.quick-add-save-btn:disabled,
.quick-add-cancel-btn:disabled {
  background: #cccccc;
  border-color: #999999;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Dark Mode Styles */
.dark-mode .quick-add-modal {
  background: #1a1a1a;
  border-color: #8d6e63;
  color: #fff8e1;
}

.dark-mode .quick-add-input,
.dark-mode .quick-add-select {
  background: #2d2d2d;
  border-color: #8d6e63;
  color: #fff8e1;
}

.dark-mode .quick-add-input:focus,
.dark-mode .quick-add-select:focus {
  background: #3d3d3d;
  border-color: #a1887f;
}

.dark-mode .quick-add-input::placeholder {
  color: #a1887f;
  opacity: 0.7;
}

.dark-mode .quick-add-label {
  color: #a1887f;
}

/* Responsive Design - keep fixed-width buttons when stacked on small screens */
@media (max-width: 768px) {
  .quick-add-modal {
    min-width: 90vw;
    max-width: 95vw;
    margin: 1rem;
  }
  
  .quick-add-modal-footer {
    flex-direction: column;
  }
}
/* Ingredients Selection Modal Styles */
.ingredients-selection-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.8) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  z-index: 999999 !important;
  backdrop-filter: blur(8px) !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
  padding: 2rem 1rem !important;
}

/* Ensure the modal appears above all other elements */
body .ingredients-selection-modal-overlay {
  z-index: 999999 !important;
}

body .ingredients-selection-modal {
  z-index: 1000000 !important;
  position: relative !important;
  margin: auto !important;
  max-height: 90vh !important;
  overflow: hidden !important;
}

/* Force the modal to be rendered on top of everything */
.ingredients-selection-modal-overlay * {
  z-index: inherit !important;
}

.ingredients-selection-modal {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 2px solid #5d4037 !important;
  border-radius: 12px !important;
  max-width: 95vw !important;
  max-height: 90vh !important;
  width: 1200px !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 1000000 !important;
}

/* Modal Header – same as Batch Edit Modal */
.ingredients-selection-modal .ingredients-selection-modal-header {
  padding: 0.6rem 1rem;
  background: linear-gradient(135deg, #14545c 0%, #0a1a1d 100%);
  border-bottom: 2px solid #5d4037;
  text-align: center;
  flex-shrink: 0;
}

.ingredients-selection-modal .ingredients-selection-modal-title {
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.85rem;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.02em;
}

/* Modal Body – scrollable content, same as Batch Edit Modal */
.ingredients-selection-modal .ingredients-selection-modal-body {
  padding: 1rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Add New Item Buttons - Three Side by Side */
.ingredients-selection-add-button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
  padding: 1rem 2rem 0.25rem 2rem; /* reduce top/bottom to bring closer to search */
}

.add-own-text {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: #3e2723;
  margin-bottom: 0.5rem;
  font-family: 'The Wanters DEMO', serif;
}

.ingredients-selection-add-button-container .ingredients-selection-add-btn {
  margin: 0 0.5rem;
}

.ingredients-selection-add-button-container .ingredients-selection-add-btn:first-of-type {
  margin-left: 0;
}

.ingredients-selection-add-button-container .ingredients-selection-add-btn:last-of-type {
  margin-right: 0;
}

/* Button row container */
.buttons-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.ingredients-selection-add-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.ingredients-selection-add-btn.ingredients {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border-color: #0a5d7a;
  color: white;
}

.ingredients-selection-add-btn.ingredients:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
}

.ingredients-selection-add-btn.packaging {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border-color: #004d06;
  color: white;
}

.ingredients-selection-add-btn.packaging:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4);
}

.ingredients-selection-add-btn.appliances {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border-color: #36034d;
  color: white;
}

.ingredients-selection-add-btn.appliances:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #36034d;
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4);
}

/* Batch controls - above Add Items (Final Batch Weight on top, Products Made / Excess Product beneath) */
.ingredients-selection-batch-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 0;
  padding: 0 1rem 1rem 1rem;
}

/* Gradient divider between batch weight section and search bar (match AdminProductsPage style) */
.ingredients-selection-section-divider {
  display: block;
  flex-shrink: 0;
  min-height: 2px;
  height: 2px;
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  /* Wider color band + darker center so line is visible on light beige */
  background: linear-gradient(to right, transparent 5%, rgb(141, 110, 99) 20%, rgb(93, 64, 55) 50%, rgb(141, 110, 99) 80%, transparent 95%);
  border: none;
  box-sizing: border-box;
}

.ingredients-selection-batch-controls .batch-weight-input,
.ingredients-selection-batch-controls .batch-calculations {
  margin-bottom: 0;
}

/* Search Container */
.ingredients-selection-search-container {
  padding: 1rem 2rem 1.2rem 2rem; /* tighter spacing */
  background: rgba(255, 255, 255, 0.1);
  border-bottom: none; /* removed divider below search */
  position: relative;
  z-index: 1000000;
  margin-bottom: 0.5rem; /* closer to + buttons */
}

.search-instruction-text {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #3e2723 !important; /* match other section headings */
  margin-bottom: 1rem;
  text-transform: capitalize;
  font-family: 'The Wanters DEMO', serif;
}

.ingredients-selection-search-input {
  width: 300px; /* Narrower width */
  padding: 0.8rem 1rem;
  border: 2px solid #8d6e63;
  border-radius: 25px; /* Pill shape */
  background: rgba(255, 255, 255, 0.9);
  color: #3e2723;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  margin: 0 auto; /* Center align */
  display: block;
  text-align: center; /* Center the text as user types */
}

.ingredients-selection-search-input:focus {
  outline: none;
  border-color: #14545c;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.1);
}

.ingredients-selection-search-input::placeholder {
  color: #8d6e63;
  font-style: normal; /* Remove italic styling */
  transition: all 0.3s ease;
}

/* Green pulse on search bar when an item is added from dropdown (no red state) */
.ingredients-selection-search-input.save-success {
  border: 2px solid #4caf50 !important;
  animation: savePulse 1s ease-in-out;
}

/* Typing animation cursor effect */
.ingredients-selection-search-input:not(:focus)::placeholder {
  animation: typing-cursor 1s infinite;
}

@keyframes typing-cursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

/* Search Dropdown */
.search-dropdown-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  z-index: 1000001;
  min-height: 50px;
}

.search-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px; /* Match search input width exactly */
  background: white;
  border: 2px solid #8d6e63;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999999 !important;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 8px;
  margin-bottom: 20px;
  pointer-events: auto;
  position: relative;
  z-index: 10000000;
}

.search-dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
  pointer-events: auto;
  user-select: none;
  position: relative;
  z-index: 9999999;
  min-height: 50px;
  touch-action: manipulation;
  gap: 1rem;
}

.search-dropdown-item:hover {
  background: rgba(141, 110, 99, 0.1);
}

/* Color coding for different category items */
.search-dropdown-item.ingredients-item {
  border-left: 4px solid #3b82f6;
}

.search-dropdown-item.packaging-item {
  border-left: 4px solid #10b981;
}

.search-dropdown-item.appliances-item {
  border-left: 4px solid #6f42c1;
}

/* Staff: same style as other recipe items (override AdminPanel .staff-item brown border) */
.search-dropdown-item.staff-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
  border-left: 4px solid #0d9488;
  background: transparent;
  box-shadow: none;
  padding: 1rem 1.2rem;
  margin-bottom: 0;
  border-radius: 0;
  grid-template-columns: unset;
  gap: unset;
}

.search-dropdown-item.staff-item:hover {
  background: rgba(13, 148, 136, 0.1);
  border: 2px solid rgba(13, 148, 136, 0.3);
  border-left: 4px solid #0d9488;
  border-radius: 8px;
  box-shadow: none;
  transform: none;
}

.search-dropdown-item.ingredients-item:hover {
  background: rgba(59, 130, 246, 0.1);
}

.search-dropdown-item.packaging-item:hover {
  background: rgba(16, 185, 129, 0.1);
}

.search-dropdown-item.appliances-item:hover {
  background: rgba(245, 158, 11, 0.1);
}

.search-dropdown-item:last-child {
  border-bottom: none;
}

.search-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.search-item-name {
  font-weight: 600;
  color: #3e2723;
  text-transform: capitalize;
  font-size: 1rem;
}

.search-item-category {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
}

.search-item-category.ingredients-category {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #3b82f6;
}

.search-item-category.packaging-category {
  background: #dcfce7;
  color: #047857;
  border: 1px solid #10b981;
}

.search-item-category.appliances-category {
  background: #fef3c7;
  color: #6f42c1;
  border: 1px solid #6f42c1;
}

.search-item-type {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  width: fit-content;
}

.search-item-type.ingredient {
  background: rgba(33, 150, 243, 0.1);
  color: #1976d2;
  border: 1px solid rgba(33, 150, 243, 0.3);
}

.search-item-type.packaging {
  background: rgba(76, 175, 80, 0.1);
  color: #388e3c;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.search-item-type.appliance {
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
  border: 1px solid rgba(111, 66, 193, 0.3);
}

.search-item-cost {
  font-weight: bold;
  color: #2e7d32;
  font-size: 0.9rem;
  text-align: right;
  min-width: 80px;
}

/* Colored prices for different item types */
.search-item-cost.ingredient-cost {
  color: #2196f3; /* Blue for ingredients */
  text-align: right !important;
  min-width: 80px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.search-item-cost.packaging-cost {
  color: #4caf50; /* Green for packaging */
  text-align: right !important;
  min-width: 80px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.search-item-cost.appliance-cost {
  color: #6f42c1; /* Purple for appliances */
  text-align: right !important;
  min-width: 80px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.search-item-cost.staff-cost {
  color: #0d9488; /* Teal for staff - same visual weight as other types */
  text-align: right !important;
  min-width: 80px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Colored borders for highlighted items */
.search-dropdown-item.ingredient-item:hover {
  background: rgba(33, 150, 243, 0.1);
  border: 2px solid #2196f3;
  border-radius: 8px;
}

.search-dropdown-item.packaging-item:hover {
  background: rgba(76, 175, 80, 0.1);
  border: 2px solid #4caf50;
  border-radius: 8px;
}

.search-dropdown-item.appliance-item:hover {
  background: rgba(111, 66, 193, 0.1);
  border: 2px solid #6f42c1;
  border-radius: 8px;
}

/* Cost editing styles */
.cost-input-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cost-edit-button {
  background: #7c3aed;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.25rem 0.5rem;
  transition: all 0.2s ease;
  min-width: 32px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cost-edit-button:hover {
  background: #6d28d9;
  transform: scale(1.05);
}

.cost-edit-input {
  width: 80px;
  padding: 0.25rem 0.5rem;
  border: 2px solid #7c3aed;
  border-radius: 4px;
  font-size: 0.9rem;
  text-align: right;
  background: white;
  -moz-appearance: textfield;
}

.cost-edit-input::-webkit-outer-spin-button,
.cost-edit-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cost-edit-input:focus {
  outline: none;
  border-color: #6d28d9;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

.cost-display {
  font-weight: bold;
  color: #3e2723;
  min-width: 80px;
  text-align: right;
  display: inline-block;
}

.cost-display-static {
  font-weight: bold;
  color: #3e2723;
  min-width: 80px;
  text-align: center;
  display: inline-block;
}

/* Remove spinner arrows from all number inputs */
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Content Area */
.ingredients-selection-content {
  flex: 1;
  padding: 1.5rem 2rem;
  overflow-y: auto;
  max-height: 60vh;
  position: relative;
  z-index: 1;
}

.ingredients-selection-loading {
  text-align: center;
  color: #8d6e63;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 2rem;
}

/* Batch Yield Input - Top Position */
.ingredients-selection-batch-yield-top {
  background: #f0f0f0;
  border: 2px solid #8d6e63;
  border-radius: 12px;
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  text-align: center;
}

.ingredients-selection-batch-yield-top .batch-yield-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.ingredients-selection-batch-yield-top .batch-yield-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: #5d4037;
  margin: 0;
}

.ingredients-selection-batch-yield-top .batch-yield-input-field {
  max-width: 200px;
  text-align: center;
  font-size: 1.1rem;
  padding: 0.75rem 1rem;
}

/* Add Item Plus Buttons */
.add-item-buttons-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 2px solid rgba(141, 110, 99, 0.2);
}

.add-item-btn {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  border: 3px solid !important;
  color: white !important;
  font-size: 1.5rem !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 50px !important;
  min-height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
}

.add-item-btn:hover {
  transform: translateY(-2px) scale(1.1);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.add-item-btn:active {
  transform: translateY(0) scale(1.05);
}

.add-ingredient-btn {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%) !important;
  border-color: #0a5d7a !important;
  border-radius: 50% !important;
}

.add-ingredient-btn:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%) !important;
  border-color: #0a5d7a !important;
}

.add-packaging-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%) !important;
  border-color: #004d06 !important;
  border-radius: 50% !important;
}

.add-packaging-btn:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%) !important;
  border-color: #004d06 !important;
}

.add-appliance-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%) !important;
  border-color: #36034d !important;
  border-radius: 50% !important;
}

.add-appliance-btn:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  border-color: #36034d !important;
}

.plus-icon {
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Navigation Buttons - Match Inventory Screen Style */
.ingredients-selection-nav-buttons {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 2px solid rgba(141, 110, 99, 0.2);
  justify-content: center;
}

.nav-btn {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 25px; /* Pill shape */
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: capitalize; /* Only first letter capitalized */
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Default colors for each button type (like other admin screens) */
.nav-btn.ingredients-btn {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%); /* Master blue for ingredients */
  color: white;
}

.nav-btn.packaging-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%); /* Master green for packaging */
  color: white;
}

.nav-btn.appliances-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%); /* Master purple for appliances */
  color: white;
}

/* Inactive state - transparent/light version */
.nav-btn.ingredients-btn:not(.active) {
  background: linear-gradient(135deg, rgba(16, 142, 188, 0.2), rgba(13, 123, 168, 0.2));
  color: white;
}

.nav-btn.packaging-btn:not(.active) {
  background: linear-gradient(135deg, rgba(0, 119, 10, 0.2), rgba(0, 93, 8, 0.2));
  color: white;
}

.nav-btn.appliances-btn:not(.active) {
  background: linear-gradient(135deg, rgba(87, 5, 138, 0.2), rgba(69, 4, 106, 0.2));
  color: white;
}

.nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.nav-btn.ingredients-btn:hover:not(.active) {
  background: linear-gradient(135deg, rgba(16, 142, 188, 0.3), rgba(13, 123, 168, 0.3));
}

.nav-btn.packaging-btn:hover:not(.active) {
  background: linear-gradient(135deg, rgba(0, 119, 10, 0.3), rgba(0, 93, 8, 0.3));
}

.nav-btn.appliances-btn:hover:not(.active) {
  background: linear-gradient(135deg, rgba(87, 5, 138, 0.3), rgba(69, 4, 106, 0.3));
}

/* Active state - buttons keep their default colors when active */
.nav-btn.active {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Table Container */
.ingredients-selection-table-container {
  width: 80%; /* Make table narrower */
  max-width: 800px; /* Set maximum width */
  margin: 0 auto; /* Center the table */
  overflow-x: auto;
  border-radius: 10px;
  border: 2px solid rgba(141, 110, 99, 0.3);
  background: white;
}

.ingredients-selection-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.ingredients-selection-table-header {
  background: linear-gradient(135deg, #14545c, #0a1a1d);
  color: white;
}

.ingredients-selection-table-header th {
  padding: 1rem 0.5rem;
  text-align: left;
  font-weight: bold;
  text-transform: capitalize; /* Only first letter capitalized */
  letter-spacing: 0.5px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.ingredients-selection-table-header th:last-child {
  border-right: none;
}

.ingredients-selection-table-row {
  border-bottom: 1px solid rgba(141, 110, 99, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.ingredients-selection-table-row:hover {
  background: rgba(141, 110, 99, 0.05);
}

.ingredients-selection-table-row.selected {
  background: rgba(20, 84, 92, 0.1);
  border-left: 4px solid #14545c;
}

/* Color-coded highlighting for different item types */
.ingredients-selection-table-row.selected.ingredients-item {
  background: rgba(33, 150, 243, 0.1);
  border-left: 4px solid #2196f3;
}

.ingredients-selection-table-row.selected.packaging-item {
  background: rgba(76, 175, 80, 0.1);
  border-left: 4px solid #4caf50;
}

.ingredients-selection-table-row.selected.appliances-item {
  background: rgba(111, 66, 193, 0.1);
  border-left: 4px solid #6f42c1;
}

.ingredients-selection-table-row td {
  padding: 0.8rem 0.5rem;
  vertical-align: middle;
  border-right: 1px solid rgba(141, 110, 99, 0.1);
}

.ingredients-selection-table-row td:last-child {
  border-right: none;
}

/* Column Styles */
/* Checkbox column removed */

.name-column {
  min-width: 120px;
  max-width: 150px;
  word-wrap: break-word;
  font-size: 1.1rem;
  text-align: center;
}

.cost-column {
  width: 100px;
  text-align: center;
}

/* Removed static unit column - only dropdown unit column remains */

.amount-column,
.quantity-column,
.hours-column {
  width: 100px;
  font-size: 1.1rem;
}

.unit-select-column {
  width: 80px;
}

.total-column {
  width: 100px;
  text-align: center;
  font-weight: bold;
  color: #3e2723;
  font-size: 1.1rem;
}

/* Cost and total column styling for selected items table */
.selected-items-table .cost-column,
.selected-items-table .total-column,
.selected-items-table .name-column,
.selected-items-table .amount-column,
.selected-items-table .quantity-column,
.selected-items-table .unit-column,
.selected-items-table .hours-column {
  color: #3e2723 !important;
  font-weight: bold;
  font-size: 1.1rem;
}

/* Ensure cost and total columns maintain dark brown color even in placeholder rows */
.selected-items-table .placeholder-row .cost-column,
.selected-items-table .placeholder-row .total-column {
  color: #3e2723 !important;
  font-weight: bold;
}

/* Packaging unit column styling to match total cost color */
.selected-items-table .unit-column {
  color: #3e2723;
  font-weight: bold;
  font-size: 1.1rem;
  text-align: center;
}

/* Ensure cost display elements maintain dark brown color */
.selected-items-table .cost-display {
  color: #3e2723 !important;
  font-weight: bold;
}

/* Item Name and Category */
.selected-items-table-container .item-name {
  font-weight: bold;
  color: #2c1810; /* Darker color for better contrast */
  margin-bottom: 0.2rem;
  text-transform: capitalize; /* Only first letter capitalized */
  font-size: 1.5rem;
  text-align: center;
}

/* Legacy .item-name for other contexts (e.g. section-table) */
.item-name {
  font-weight: bold;
  color: #2c1810;
  margin-bottom: 0.2rem;
  text-transform: capitalize;
  font-size: 1.5rem;
  text-align: center;
}

.item-category {
  font-size: 0.8rem;
  color: #6d4c41; /* Darker color for better contrast */
  font-style: italic;
  text-align: center;
}

/* Input Styles */
.ingredient-amount-input,
.packaging-quantity-input,
.appliance-quantity-input,
.appliance-hours-input,
.staff-quantity-input,
.staff-hours-input,
.batch-yield-input-field {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 2px solid rgba(141, 110, 99, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: #3e2723;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;
  /* Remove spinner arrows */
  -moz-appearance: textfield;
}

.ingredient-amount-input::-webkit-outer-spin-button,
.ingredient-amount-input::-webkit-inner-spin-button,
.packaging-quantity-input::-webkit-outer-spin-button,
.packaging-quantity-input::-webkit-inner-spin-button,
.appliance-quantity-input::-webkit-outer-spin-button,
.appliance-quantity-input::-webkit-inner-spin-button,
.appliance-hours-input::-webkit-outer-spin-button,
.appliance-hours-input::-webkit-inner-spin-button,
.staff-quantity-input::-webkit-outer-spin-button,
.staff-quantity-input::-webkit-inner-spin-button,
.staff-hours-input::-webkit-outer-spin-button,
.staff-hours-input::-webkit-inner-spin-button,
.batch-yield-input-field::-webkit-outer-spin-button,
.batch-yield-input-field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ingredient-amount-input:focus,
.packaging-quantity-input:focus,
.appliance-quantity-input:focus,
.appliance-hours-input:focus,
.staff-quantity-input:focus,
.staff-hours-input:focus,
.batch-yield-input-field:focus {
  outline: none;
  border-color: #14545c;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.1);
}

/* Red outline and glow for empty quantity/hours fields */
.ingredient-amount-input.required-field,
.packaging-quantity-input.required-field,
.appliance-quantity-input.required-field,
.appliance-hours-input.required-field,
.staff-quantity-input.required-field,
.staff-hours-input.required-field {
  border: 1px solid #ff4444 !important;
  box-shadow: 0 0 8px rgba(255, 68, 68, 0.5) !important;
  background-color: #fff5f5 !important;
}

.ingredient-amount-input.required-field:focus,
.packaging-quantity-input.required-field:focus,
.appliance-quantity-input.required-field:focus,
.appliance-hours-input.required-field:focus,
.staff-quantity-input.required-field:focus,
.staff-hours-input.required-field:focus {
  border: 1px solid #ff4444 !important;
  box-shadow: 0 0 12px rgba(255, 68, 68, 0.7) !important;
  outline: none !important;
  background-color: #fff5f5 !important;
}

/* Green pulse animation for successful save */
.ingredient-amount-input.save-success,
.packaging-quantity-input.save-success,
.appliance-quantity-input.save-success,
.appliance-hours-input.save-success,
.staff-quantity-input.save-success,
.staff-hours-input.save-success {
  border: 2px solid #4caf50 !important;
  animation: savePulse 1s ease-in-out;
}

.ingredient-unit-select {
  width: 80px;
  padding: 0.4rem 0.3rem;
  border: 2px solid rgba(141, 110, 99, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: #3e2723;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Metric dropdowns in recipe table – same look as search bar (brown border, 8px radius, white), not search behavior */
.ingredients-selection-modal .batch-edit-table-style .ingredient-unit-select {
  width: 80px;
  padding: 0.35rem 0.5rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  background: #fff;
  color: #3e2723;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align: center;
  box-sizing: border-box;
}

.ingredients-selection-modal .batch-edit-table-style .ingredient-unit-select:focus {
  outline: none;
  border-color: #8d6e63;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.2);
}

.ingredient-unit-select:focus {
  outline: none;
  border-color: #14545c;
  background: rgba(255, 255, 255, 1);
  border-radius: 6px 6px 0 0;
}

.ingredient-unit-select option:disabled {
  color: #999999;
  background-color: #f5f5f5;
  font-style: italic;
}

.ingredient-unit-select option {
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0.5rem;
  background: white;
  color: #3e2723;
}

.ingredient-unit-select option:disabled {
  color: #999999;
  background-color: #f5f5f5;
  font-style: italic;
  cursor: not-allowed;
}

/* Placeholder and Total Cost */
.placeholder {
  color: #ccc;
  font-style: italic;
}

.total-cost {
  color: #3e2723;
  font-weight: bold;
}

/* Summary Section */
.ingredients-selection-summary-section {
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.1);
  border-top: 2px solid rgba(141, 110, 99, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.batch-yield-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.batch-yield-label {
  color: #2c1810; /* Darker color for better contrast on light background */
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
}

.batch-yield-input-field {
  width: 120px;
  padding: 0.6rem 1rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #3e2723;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

/* Red outline and glow for empty batch yield field */
.batch-yield-input-field.required-field {
  border: 2px solid #ff4444 !important;
  box-shadow: 0 0 8px rgba(255, 68, 68, 0.5) !important;
  background-color: #fff5f5 !important;
}

.batch-yield-input-field.required-field:focus {
  border: 2px solid #ff4444 !important;
  box-shadow: 0 0 12px rgba(255, 68, 68, 0.7) !important;
  outline: none !important;
  background-color: #fff5f5 !important;
}

/* Standard dark brown border for filled batch yield field */
.batch-yield-input-field.filled-field {
  border: 2px solid #5d4037 !important;
  box-shadow: none !important;
  background-color: #ffffff !important;
}

.batch-yield-input-field.filled-field:focus {
  border: 2px solid #5d4037 !important;
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.2) !important;
  outline: none !important;
  background-color: #fafafa !important;
}

/* Green pulse animation for successful batch yield save */
.batch-yield-input-field.save-success {
  border: 2px solid #4caf50 !important;
  animation: savePulse 1s ease-in-out;
}

/* Red outline and glow for empty batch weight field */
.batch-weight-input-field.required-field {
  border: 2px solid #ff4444 !important;
  box-shadow: 0 0 8px rgba(255, 68, 68, 0.5) !important;
  background-color: #fff5f5 !important;
}

.batch-weight-input-field.required-field:focus {
  border: 2px solid #ff4444 !important;
  box-shadow: 0 0 12px rgba(255, 68, 68, 0.7) !important;
  outline: none !important;
  background-color: #fff5f5 !important;
}

/* Standard dark brown border for filled batch weight field */
.batch-weight-input-field.filled-field {
  border: 2px solid #5d4037 !important;
  box-shadow: none !important;
  background-color: #ffffff !important;
}

.batch-weight-input-field.filled-field:focus {
  border: 2px solid #5d4037 !important;
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.2) !important;
  outline: none !important;
  background-color: #fafafa !important;
}

/* Red outline and glow for empty products made field */
.calculated-input.required-field {
  border: 2px solid #ff4444 !important;
  box-shadow: 0 0 8px rgba(255, 68, 68, 0.5) !important;
  background-color: #fff5f5 !important;
}

.calculated-input.required-field:focus {
  border: 2px solid #ff4444 !important;
  box-shadow: 0 0 12px rgba(255, 68, 68, 0.7) !important;
  outline: none !important;
  background-color: #fff5f5 !important;
}

/* Standard dark brown border for filled products made field */
.calculated-input.filled-field {
  border: 2px solid #5d4037 !important;
  box-shadow: none !important;
  background-color: #ffffff !important;
}

.calculated-input.filled-field:focus {
  border: 2px solid #5d4037 !important;
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.2) !important;
  outline: none !important;
  background-color: #fafafa !important;
}

.cost-summary {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.cost-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.cost-label {
  color: #2c1810; /* Darker color for better contrast on light background */
  font-size: 0.9rem;
  font-weight: 500;
}

.cost-value {
  color: #3e2723; /* Dark brown for better contrast */
  font-size: 1.2rem;
  font-weight: bold;
}

/* Cost Breakdown Panel */
.cost-breakdown-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(245, 245, 220, 0.9));
  border: 2px solid rgba(93, 64, 55, 0.3);
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(93, 64, 55, 0.1);
  min-width: 500px;
  max-width: 580px;
  margin: 0 auto;
  overflow: visible;
}

.cost-breakdown-header {
  background: linear-gradient(135deg, #14545c, #0a1a1d);
  padding: 1rem 1.5rem;
  text-align: center;
  border-radius: 13px 13px 0 0;
  border-bottom: 2px solid #8d6e63;
}

.cost-breakdown-title {
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  margin: 0;
}

/* Simple / Detailed toggle switch (matches ThemeSwitch / light–dark style) */
.cost-breakdown-toggle-container {
  padding: 1rem 1.5rem;
  text-align: center;
  background: rgba(20, 84, 92, 0.05);
  border-bottom: 1px solid rgba(20, 84, 92, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.cost-breakdown-view-switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.cost-breakdown-view-switch:focus-visible {
  outline: 2px solid #14545c;
  outline-offset: 2px;
  border-radius: 8px;
}

.cost-breakdown-switch-label-single {
  width: 80px;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
}

.cost-breakdown-switch-track {
  position: relative;
  height: 36px;
  width: 80px;
  background: #e0e0e0;
  border-radius: 18px;
  border: 2px solid #ccc;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.cost-breakdown-switch-track:hover {
  background: #d5d5d5;
  border-color: #aaa;
}

.cost-breakdown-switch-track.two-position {
  width: 80px;
}

.cost-breakdown-switch-thumb {
  position: absolute;
  top: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cost-breakdown-switch-thumb.two-position.simple-position {
  left: 2px;
  background: linear-gradient(135deg, #14545c, #0a1a1d);
}

.cost-breakdown-switch-thumb.two-position.detailed-position {
  left: 46px;
  background: linear-gradient(135deg, #6f42c1, #5a32a5);
}

.cost-breakdown-content {
  padding: 0 0 0 0;
  animation: slideUp 0.4s ease-out forwards;
  transform-origin: top;
  overflow-x: visible;
  width: 100%;
  max-width: 100%;
}

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

.cost-breakdown-panel {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: stretch;
}

.cost-breakdown-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Animation for expanding/collapsing rows */
.cost-breakdown-table-row {
  animation: rowFadeIn 0.3s ease-out forwards;
}

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

.cost-breakdown-table {
  border-collapse: collapse;
  margin: 0;
  max-width: 100%;
  width: 100%;
}

.cost-breakdown-table-header {
  display: flex;
  background: rgba(20, 84, 92, 0.1);
  border-bottom: 2px solid rgba(20, 84, 92, 0.3);
  font-weight: bold;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  padding: 0.8rem 1.5rem;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  margin-left: 18rem;
}

.cost-breakdown-table-row {
  display: flex;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
  transition: background-color 0.2s ease;
  padding: 0 1.5rem;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  margin-left: 18rem;
}

.cost-breakdown-table-row:hover {
  background: rgba(141, 110, 99, 0.05);
}

.cost-breakdown-table-row:last-child {
  border-bottom: none;
}

.cost-breakdown-table-cell {
  flex: 1;
  padding: 0.8rem 0.5rem;
  text-align: center;
  font-size: 1.4rem;
  color: #3e2723;
  min-width: 0;
}

.cost-breakdown-table-cell:first-child {
  flex: 1.5;
  padding-right: 0.5rem;
  font-weight: 600;
  text-transform: capitalize;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
}

.cost-breakdown-table-cell:nth-child(2),
.cost-breakdown-table-cell:nth-child(3) {
  flex: 1;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.cost-breakdown-table-cell:not(:first-child) {
  text-align: center;
  font-weight: bold;
}

/* Special row styling */
.cost-breakdown-total-row {
  background: rgba(141, 110, 99, 0.1);
  border-top: 2px solid rgba(141, 110, 99, 0.3);
  font-weight: bold;
}

.cost-breakdown-value-row {
  background: rgba(33, 150, 243, 0.1);
  border-top: 1px solid rgba(33, 150, 243, 0.3);
}

.cost-breakdown-profit-row {
  background: rgba(76, 175, 80, 0.1);
  border-top: 1px solid rgba(76, 175, 80, 0.3);
}

.cost-breakdown-margin-row {
  background: rgba(111, 66, 193, 0.1);
  border-top: 1px solid rgba(111, 66, 193, 0.3);
}

.cost-breakdown-wasted-row {
  background: rgba(255, 152, 0, 0.1);
  border-top: 1px solid rgba(255, 152, 0, 0.3);
}

/* Value colors */
.cost-breakdown-table-cell.ingredient-cost {
  color: #2196f3; /* Blue - matches ingredients button */
  font-size: 1.4rem; /* Ensure consistent font size with other cost cells */
  font-weight: bold;
}

.cost-breakdown-table-cell.packaging-cost {
  color: #4caf50; /* Green - matches packaging button */
  font-size: 1.4rem; /* Ensure consistent font size */
  font-weight: bold;
}

.cost-breakdown-table-cell.electricity-cost {
  color: #6f42c1; /* Purple - matches appliances button */
  font-size: 1.4rem; /* Ensure consistent font size */
  font-weight: bold;
}

.cost-breakdown-table-cell.total-cost {
  color: #f44336; /* Red - matches cancel button */
}

.cost-breakdown-table-cell.product-value {
  color: #2196f3; /* Blue for product value */
}

.cost-breakdown-table-cell.profit-amount {
  color: #4caf50; /* Green for profit */
}

.cost-breakdown-table-cell.profit-margin {
  color: #6f42c1; /* Purple for profit margin */
}

.cost-breakdown-table-cell.wasted-cost {
  color: #ff9800; /* Orange for wasted cost */
  font-weight: bold;
}

/* Enhanced orange for better visibility */
.cost-breakdown-wasted-row .cost-breakdown-table-cell.wasted-cost {
  color: #f57c00; /* Darker orange for wasted cost */
}

/* Individual Ingredient Panel */
.ingredient-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(245, 245, 220, 0.9));
  border: 2px solid rgba(93, 64, 55, 0.3);
  border-radius: 15px;
  padding: 1.25rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.ingredient-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #8d6e63, #d4af37, #8d6e63);
  border-radius: 15px 15px 0 0;
}

.ingredient-panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(93, 64, 55, 0.2);
  border-color: rgba(93, 64, 55, 0.5);
}

.ingredient-panel.selected {
  border-color: #14545c;
  background: linear-gradient(135deg, rgba(20, 84, 92, 0.1), rgba(10, 26, 29, 0.05));
  box-shadow: 0 4px 15px rgba(20, 84, 92, 0.2);
}

.ingredient-panel.selected::before {
  background: linear-gradient(90deg, #14545c, #8d6e63, #14545c);
}

.ingredient-panel.expanded {
  border-color: #7c3aed;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(139, 92, 246, 0.05));
  box-shadow: 0 6px 25px rgba(124, 58, 237, 0.2);
}

.ingredient-panel.expanded::before {
  background: linear-gradient(90deg, #7c3aed, #8b5cf6, #7c3aed);
}

/* Panel Header */
.ingredient-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(93, 64, 55, 0.1);
}

.ingredient-name {
  margin: 0;
  color: #3e2723;
  font-size: 1.1rem;
  font-weight: bold;
  transition: all 0.3s ease;
  flex: 1;
  text-align: center;
}

.ingredient-panel:hover .ingredient-name {
  color: #8d6e63;
  transform: scale(1.05);
}

.ingredient-panel.selected .ingredient-name {
  color: #14545c;
}

.ingredient-panel.expanded .ingredient-name {
  color: #7c3aed;
}

.ingredient-selection-indicator {
  background: linear-gradient(135deg, #8d6e63, #6d4c41);
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.ingredient-panel.selected .ingredient-selection-indicator {
  background: linear-gradient(135deg, #14545c, #0a1a1d);
}

.ingredient-panel.expanded .ingredient-selection-indicator {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

/* Panel Content */
.ingredient-panel-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ingredient-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

.ingredient-unit {
  color: #5d4037;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}

.ingredient-cost {
  color: #3e2723;
  font-weight: bold;
}

/* Expanded Content */
.ingredient-expanded-content {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid rgba(124, 58, 237, 0.2);
  animation: expandContent 0.3s ease-out;
}

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

.ingredient-quantity-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ingredient-quantity-label {
  font-size: 0.9rem;
  font-weight: bold;
  color: #7c3aed;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  text-align: center;
}

.ingredient-quantity-input-container {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.ingredient-quantity-input {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border: 2px solid rgba(124, 58, 237, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #3e2723;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;
}

.ingredient-quantity-input:focus {
  outline: none;
  border-color: #7c3aed;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.ingredient-unit-select {
  padding: 0.6rem 0.8rem;
  border: 2px solid rgba(124, 58, 237, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #3e2723;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.ingredient-unit-select:focus {
  outline: none;
  border-color: #7c3aed;
  background: rgba(255, 255, 255, 1);
  border-radius: 8px 8px 0 0;
}

.ingredient-total-cost {
  text-align: center;
  color: #3e2723;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 0.5rem;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 6px;
  border: 1px solid rgba(124, 58, 237, 0.2);
}

/* Recipe Yield Section */
.ingredients-selection-yield-section {
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.1);
  border-top: 2px solid rgba(141, 110, 99, 0.2);
  border-bottom: 2px solid rgba(141, 110, 99, 0.2);
}

.ingredients-selection-yield-title {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  text-align: center;
}

.ingredients-selection-yield-inputs {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}

.yield-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.yield-input-label {
  color: #5d4037;
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}

.yield-input {
  padding: 0.6rem 1rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #3e2723;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  width: 120px;
  transition: all 0.3s ease;
}

.yield-input:focus {
  outline: none;
  border-color: #14545c;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.1);
}

/* Error Messages */
.ingredients-selection-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 2rem;
  text-align: center;
  font-weight: 500;
}

/* Empty State */
.ingredients-selection-empty-state {
  text-align: center;
  padding: 2rem;
  color: #6d4c41;
  font-size: 1rem;
  font-style: italic;
  margin: 1rem 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  border: 1px solid rgba(141, 110, 99, 0.2);
}

/* Selected Items Section */
.selected-items-section {
  margin: 0.1rem 0 1rem 0;
  padding: 0 2rem 1rem 2rem;
}

.selected-items-title-panel {
  background: linear-gradient(135deg, #14545c, #0a1a1d);
  border-radius: 10px;
  padding: 1rem 1.5rem;
  margin: 1rem 0 1.5rem 0;
  text-align: center;
  box-shadow: 0 2px 8px rgba(20, 84, 92, 0.3);
}

.selected-items-title {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}

.selected-items-title .title-description {
  font-size: 1.0rem;
  font-weight: 600;
}

.selected-items-title .title-product-name {
  font-size: 1.4rem;
  font-weight: bold;
}

.selected-items-table-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background: linear-gradient(135deg, #14545c, #0a1a1d);
  border: 3px solid #3e2723;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

/* Batch-edit-style table (match Edit Batch modal look) */
.selected-items-table-container.batch-edit-table-style {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 2px solid #8d6e63;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.selected-items-table-container.batch-edit-table-style:has(.ingredient-unit-dropdown-wrap.unit-dropdown-open) {
  overflow: visible;
}

/* Widen table: reduce section padding when using batch-edit style */
.selected-items-section:has(.selected-items-table-container.batch-edit-table-style) {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.batch-edit-table-style .selected-items-table {
  width: 100%;
  table-layout: fixed;
  position: relative;
  z-index: 0;
}

.batch-edit-table-style .selected-items-table tbody {
  position: relative;
  z-index: 0;
}

/* Column widths via colgroup – name a bit wider, action a bit narrower; total 100%, subtle difference. */
.batch-edit-table-style .selected-items-table col.col-name {
  width: 32%;
}
.batch-edit-table-style .selected-items-table col.col-cost {
  width: 15%;
}
.batch-edit-table-style .selected-items-table col.col-amount {
  width: 16%;
}
.batch-edit-table-style .selected-items-table col.col-unit {
  width: 11%;
}
.batch-edit-table-style .selected-items-table col.col-total {
  width: 16%;
}
.batch-edit-table-style .selected-items-table col.col-action {
  width: 10%;
}

/* Action column: keep narrow and centered for tick/X buttons. */
.batch-edit-table-style .selected-items-table th.action-column,
.batch-edit-table-style .selected-items-table td.action-column {
  overflow: visible;
  text-align: center;
}

.batch-edit-table-style .section-divider-header {
  background: linear-gradient(135deg, #14545c 0%, #0a1a1d 100%) !important;
  color: #f5f5dc;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.55rem !important;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid #8d6e63;
  letter-spacing: 0.03em;
  border-left: none !important;
}

.batch-edit-table-style .section-divider-header td,
.selected-items-table-container.batch-edit-table-style .section-divider-header td {
  color: #f5f5dc !important;
  font-size: 1.55rem !important;
  font-weight: 700;
  padding: 0.6rem 0.75rem;
}

.batch-edit-table-style .section-header-row th {
  border-bottom: 1px solid rgba(141, 110, 99, 0.3);
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.4rem 0.5rem;
  border-right: 1px solid rgba(141, 110, 99, 0.2);
}

/* Section header row same colour as add row for that section */
.batch-edit-table-style .ingredients-header th {
  background: rgba(16, 142, 188, 0.22) !important;
  border-bottom-color: rgba(16, 142, 188, 0.35);
  color: #3e2723 !important;
}
.batch-edit-table-style .packaging-header th {
  background: rgba(0, 119, 10, 0.22) !important;
  border-bottom-color: rgba(0, 119, 10, 0.35);
  color: #3e2723 !important;
}
.batch-edit-table-style .appliances-header th {
  background: rgba(87, 5, 138, 0.20) !important;
  border-bottom-color: rgba(87, 5, 138, 0.35);
  color: #3e2723 !important;
}
.batch-edit-table-style .staff-header th {
  background: rgba(20, 84, 92, 0.30) !important;
  border-bottom-color: rgba(20, 84, 92, 0.4);
  color: #3e2723 !important;
}

.batch-edit-table-style .selected-items-table-row {
  background: #ffffff;
  border-bottom: 1px solid rgba(141, 110, 99, 0.15);
}

.batch-edit-table-style .selected-items-table-row:nth-child(even) {
  background: rgba(241, 241, 241, 0.8);
}

.batch-edit-table-style .selected-items-table-row.ingredients-item,
.batch-edit-table-style .selected-items-table-row.packaging-item,
.batch-edit-table-style .selected-items-table-row.appliances-item,
.batch-edit-table-style .selected-items-table-row.staff-item {
  border-left: none !important;
}

/* Override later rule that adds staff-item left accent (orange) */
.selected-items-table-container.batch-edit-table-style .selected-items-table-row.staff-item {
  border-left: none !important;
}

.batch-edit-table-style .selected-items-table-row.placeholder-row {
  background: rgba(20, 84, 92, 0.04) !important;
}

.batch-edit-table-style .selected-items-table td {
  padding: 0.35rem 0.5rem;
  border-right: 1px solid rgba(141, 110, 99, 0.15);
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
}

.batch-edit-table-style .selected-items-table .cost-column,
.batch-edit-table-style .selected-items-table .total-column {
  color: #2196f3;
  font-weight: 600;
}

.batch-edit-table-style .selected-items-table input,
.batch-edit-table-style .selected-items-table select {
  border: 2px solid #8d6e63;
  border-radius: 8px;
  padding: 0.3rem 0.4rem;
  text-align: center;
}

/* Quantity/Hours column width is set above (14%, min 140px). Inputs inside use 137px width. */

.batch-edit-table-style .remove-item-btn {
  background: #d32f2f;
  color: white;
  border: 2px solid #b71c1c;
  border-radius: 20px;
  padding: 0.35rem 0.65rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(211, 47, 47, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  text-transform: none;
}

.batch-edit-table-style .remove-item-btn:hover:not(:disabled) {
  background: #b71c1c;
  border-color: #9a1616;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.5);
}

.batch-edit-table-style .action-column {
  text-align: center;
}

.batch-edit-table-style .item-name {
  font-size: 1.12rem;
  font-weight: bold;
}

.selected-items-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  border-radius: 8px;
  overflow: hidden;
}

.selected-items-table thead {
  background: linear-gradient(135deg, #14545c, #0d3a3f);
  color: white;
}

.selected-items-table th {
  padding: 1rem 0.5rem;
  text-align: left;
  font-weight: bold;
  font-size: 0.9rem;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}

.selected-items-table-row {
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.95);
}

.selected-items-table-row:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.selected-items-table-row.ingredients-item {
  border-left: 4px solid #0a5d7a;
}

.selected-items-table-row.packaging-item {
  border-left: 4px solid #004d06;
}

.selected-items-table-row.appliances-item {
  border-left: 4px solid #36034d;
}

/* Staff row: override AdminPanel .staff-item (grid/card/red) and match other sections */
.selected-items-table-container .selected-items-table-row.staff-item {
  display: table-row;
  grid-template-columns: unset;
  gap: unset;
  padding: unset;
  margin-bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
  border-left: 4px solid #e65100;
  border-radius: 0;
  cursor: default;
  position: static;
}

.selected-items-table-container .selected-items-table-row.staff-item:hover {
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  transform: none !important;
}

.selected-items-table-container .selected-items-table-row.staff-item .quantity-column {
  font-size: 1.35rem;
  text-align: center;
  font-weight: bold;
}

/* Section divider headers */
.section-divider-header {
  background: linear-gradient(135deg, #0d3a3f, #14545c);
  color: white;
  font-weight: bold;
  font-size: 1.5rem;
  text-transform: capitalize;
  letter-spacing: 1px;
  text-align: center;
  padding: 1rem;
  border: none;
}

.section-divider-header.ingredients {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
}

.section-divider-header.packaging {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
}

.section-divider-header.appliances {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
}

.section-divider-header.staff {
  background: linear-gradient(135deg, #e65100 0%, #bf360c 100%);
}

/* Section-specific headers */
.section-header-row {
  background: #f5f5f5;
  border-bottom: 2px solid #ddd;
  font-weight: bold;
  text-align: center;
  font-size: 0.9rem;
  padding: 8px 4px;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.section-header-row th {
  padding: 8px 4px;
  border-right: 1px solid #ddd;
  font-weight: bold;
  background: #f5f5f5;
  text-align: center;
}

.section-header-row th.name-column {
  text-align: center;
}

.section-header-row th:last-child {
  border-right: none;
}

/* Color-coded section headers */
.ingredients-header th {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  color: #0a5d7a;
}

.packaging-header th {
  background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
  color: #004d06;
}

.appliances-header th {
  background: linear-gradient(135deg, #e8e0f5, #d1c4e9);
  color: #36034d;
}

/* Override specific column header colors to be consistent */
.ingredients-header th.name-column,
.ingredients-header th.amount-column,
.packaging-header th.name-column,
.packaging-header th.quantity-column,
.appliances-header th.name-column,
.appliances-header th.quantity-column,
.appliances-header th.hours-column,
.staff-header th.name-column,
.staff-header th.quantity-column,
.staff-header th.hours-column {
  color: #3e2723 !important; /* Same color as cost, unit, and total cost columns */
}

/* New section-based structure */
.recipe-section {
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 12px;
}

.section-header {
  padding: 0.8rem 1.2rem;
  font-weight: bold;
  text-align: center;
  font-size: 1.1rem;
  letter-spacing: 1px;
  text-transform: capitalize;
  color: white;
  margin: 0;
}

.section-header.ingredients {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
}

.section-header.packaging {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
}

.section-header.appliances {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
}

.section-header h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: bold;
  text-transform: capitalize;
  letter-spacing: 1px;
}

.section-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px;
  background: transparent;
  border-radius: 0 0 12px 12px;
  overflow: visible;
  margin-top: 8px;
}

.section-table thead {
  background: linear-gradient(135deg, #14545c, #0d3a3f);
  color: white;
}

.section-table th {
  padding: 1rem 0.5rem;
  text-align: center;
  font-weight: bold;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  text-transform: capitalize;
  border: none;
}

.section-table td {
  padding: 0.4rem 0.6rem;
  vertical-align: middle;
  border-right: 1px solid rgba(141, 110, 99, 0.1);
  text-align: center;
  min-width: 80px;
}

.section-table td:last-child {
  border-right: none;
}

/* Cost text styling for better visibility */
.section-table td.cost-column,
.section-table td.total-column,
.section-table td.name-column,
.section-table td.amount-column,
.section-table td.quantity-column,
.section-table td.unit-column,
.section-table td.hours-column {
  color: #3e2723 !important;
  font-weight: bold;
  font-size: 1.1rem;
}

.section-table td.cost-column {
  color: #3e2723 !important;
}

.section-table td.total-column {
  color: #3e2723 !important;
  font-weight: bold;
  font-size: 1.1rem;
}

.section-table tbody tr {
  border: 2px solid #e8dcc0;
  border-radius: 12px;
  transition: all 0.3s ease;
  background: #f8f9fa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 8px;
  padding: 10px;
}

.section-table tbody tr:hover {
  background: #f8f4e6;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-color: #d4af37;
}

.section-table tbody tr.ingredients-item {
  border-left: 4px solid #0a5d7a;
  border-color: #0a5d7a;
}

.section-table tbody tr.packaging-item {
  border-left: 4px solid #004d06;
  border-color: #004d06;
}

.section-table tbody tr.appliances-item {
  border-left: 4px solid #36034d;
  border-color: #36034d;
}

/* Placeholder rows for empty sections */
.placeholder-row {
  background: rgba(255, 255, 255, 0.7) !important;
  color: #999999;
  font-style: italic;
  text-align: center;
}

.placeholder-row:hover {
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: none;
}

.selected-items-table td {
  padding: 0.8rem 0.5rem;
  vertical-align: middle;
  border-right: 1px solid rgba(141, 110, 99, 0.1);
}

.selected-items-table td:last-child {
  border-right: none;
}

/* Remove column – narrower than others, fits circular Remove button */
.action-column {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  text-align: center;
}

.add-to-recipe-btn {
  background: linear-gradient(135deg, #4caf50, #388e3c);
  color: white;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-to-recipe-btn:hover {
  background: linear-gradient(135deg, #388e3c, #2e7d32);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.remove-item-btn {
  background: #d32f2f;
  color: white;
  border: 2px solid #b71c1c;
  border-radius: 20px;
  padding: 0.4rem 1.2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(211, 47, 47, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  max-width: none;
  max-height: none;
}

.remove-item-btn:hover:not(:disabled) {
  background: #b71c1c;
  border-color: #9a1616;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(211, 47, 47, 0.4);
}

/* In-table Remove button: same style as Add but red circular with white × */
.selected-items-table .remove-item-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #b71c1c;
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(211, 47, 47, 0.3);
}

.selected-items-table .remove-item-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b71c1c 0%, #9a1616 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(211, 47, 47, 0.4);
}

.selected-items-table .remove-item-btn-icon {
  font-size: 1.25rem;
  line-height: 1;
  color: #fff;
}

/* Add row: circular green tick button to save/add the item (same column as red X below) */
.ingredients-selection-add-row .add-row-confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #2e7d32;
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
  transition: all 0.2s ease;
}

.ingredients-selection-add-row .add-row-confirm-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(76, 175, 80, 0.4);
}

.ingredients-selection-add-row .add-row-confirm-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ingredients-selection-add-row .add-row-confirm-btn-icon {
  font-size: 1.25rem;
  line-height: 1;
  color: #fff;
}

/* Quick-add state: reuse blue Ingredients add button styling when creating a new ingredient */
.ingredients-selection-add-row .add-row-confirm-btn.add-row-confirm-btn-quick-add {
  border-color: #0a5d7a;
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  box-shadow: 0 2px 4px rgba(16, 142, 188, 0.3);
}

.ingredients-selection-add-row .add-row-confirm-btn.add-row-confirm-btn-quick-add:hover:not(:disabled) {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  box-shadow: 0 3px 6px rgba(16, 142, 188, 0.4);
}

/* In-table add row (search dropdown is main way to add – slightly darker so it reads as a different row) */
.ingredients-selection-add-row {
  position: relative;
  z-index: 1;
  background: rgba(26, 107, 117, 0.16);
  border-bottom: 1px solid rgba(141, 110, 99, 0.25);
}

/* Add row background matches the section’s button colour (darker tint) */
.ingredients-selection-add-row.add-row-ingredients {
  background: rgba(16, 142, 188, 0.22);
  border-bottom-color: rgba(16, 142, 188, 0.35);
}
.ingredients-selection-add-row.add-row-packaging {
  background: rgba(0, 119, 10, 0.22);
  border-bottom-color: rgba(0, 119, 10, 0.35);
}
.ingredients-selection-add-row.add-row-appliances {
  background: rgba(87, 5, 138, 0.20);
  border-bottom-color: rgba(87, 5, 138, 0.35);
}
.ingredients-selection-add-row.add-row-staff {
  background: rgba(20, 84, 92, 0.30);
  border-bottom-color: rgba(20, 84, 92, 0.4);
}

.ingredients-selection-add-row .ingredients-selection-add-name-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

/* Add button: green circular with white plus icon */
.ingredients-selection-add-row .ingredients-selection-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #2e7d32;
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
  color: #fff;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ingredients-selection-add-row .ingredients-selection-add-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

.ingredients-selection-add-row .ingredients-selection-add-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.ingredients-selection-add-row .ingredients-selection-add-btn-icon {
  font-size: 1.2rem;
  line-height: 1;
  color: #fff;
}

.ingredients-selection-add-row .ingredients-selection-add-rate {
  font-size: 0.95rem;
  font-weight: 600;
  color: #3e2723;
}

/* Wrap fills name column; input centered in column; dropdown positioned to sit under the centered input */
.ingredients-selection-add-row .ingredients-selection-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
  z-index: 100000002;
  isolation: isolate;
}

/* When this row's dropdown is open, stack the entire row and cells above everything so dropdown is on top */
.ingredients-selection-add-row.dropdown-open {
  position: relative !important;
  z-index: 2147483647 !important;
}

.ingredients-selection-add-row.dropdown-open td {
  position: relative !important;
  z-index: 2147483647 !important;
}

.ingredients-selection-add-row .ingredients-selection-search-wrap.dropdown-open {
  z-index: 2147483647;
}

/* When any add row has dropdown open, other add rows get lower z-index so the open dropdown always wins */
.ingredients-selection-modal-body:has(.ingredients-selection-add-row.dropdown-open) .ingredients-selection-add-row:not(.dropdown-open) {
  position: relative !important;
  z-index: 0 !important;
}

/* When a table row has unit dropdown open, stack it and its dropdown on top – force with !important */
.selected-items-table-row.unit-dropdown-open {
  position: relative !important;
  z-index: 2147483647 !important;
}

.selected-items-table-row.unit-dropdown-open td {
  position: relative !important;
  z-index: 2147483647 !important;
}

.ingredients-selection-modal-body:has(.selected-items-table-row.unit-dropdown-open) .selected-items-table-row:not(.unit-dropdown-open) {
  position: relative !important;
  z-index: 0 !important;
}

.ingredients-selection-modal-body:has(.selected-items-table-row.unit-dropdown-open) .ingredients-selection-add-row {
  position: relative !important;
  z-index: 0 !important;
}

.ingredients-selection-add-row .ingredients-selection-search-input {
  width: 180px;
  min-width: 180px;
  max-width: 180px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding: 0.35rem 0.5rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-size: 0.95rem;
  background: #fff;
  color: #3e2723;
  box-sizing: border-box;
}

/* Unit select in add row – same border and rounded style as search input (brown, 8px), keep 80px width */
.ingredients-selection-add-row .ingredient-unit-select {
  width: 80px;
  padding: 0.35rem 0.5rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  background: #fff;
  color: #3e2723;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align: center;
  box-sizing: border-box;
}

.ingredients-selection-add-row .ingredient-unit-select:focus {
  outline: none;
  border-color: #8d6e63;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.2);
}

/* Dropdown: same width as text box, centered under input, nudge up to align with search bar; on top of all UI */
.ingredients-selection-add-row .ingredients-selection-search-dropdown {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  min-width: 180px;
  max-width: 180px;
  top: 100%;
  margin-top: -6px;
  max-height: 116px;
  overflow-y: auto;
  background: #fff;
  border: 2px solid #8d6e63;
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 2147483647;
  box-sizing: border-box;
}

.ingredients-selection-add-row .ingredients-selection-search-dropdown-item {
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: #3e2723;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
}

.ingredients-selection-add-row .ingredients-selection-search-dropdown-item:last-child {
  border-bottom: none;
}

.ingredients-selection-add-row .ingredients-selection-search-dropdown-item:hover {
  background: rgba(26, 107, 117, 0.12);
}

/* Custom unit dropdown – same border and style as search dropdown (brown, 8px radius, one panel) */
.ingredient-unit-dropdown-wrap {
  position: relative;
  display: inline-block;
  width: 80px;
  margin-left: auto;
  margin-right: auto;
}

.ingredient-unit-dropdown-wrap.unit-dropdown-open {
  z-index: 2147483647 !important;
  position: relative;
}

.ingredient-unit-dropdown-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: -6px;
  background: #fff;
  border: 2px solid #8d6e63;
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 2147483647 !important;
  min-height: 140px;
  max-height: 220px;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Add-row unit dropdown: show only 4 items with scroll for the rest */
.ingredient-unit-dropdown-list-add-row {
  min-height: 0;
  max-height: calc(4 * 2.25em);
  overflow-y: auto;
}

/* Prevent table from clipping the dropdown */
.ingredients-selection-add-row.dropdown-open td.unit-column,
.selected-items-table-row.unit-dropdown-open td.unit-column {
  overflow: visible !important;
}

.ingredients-selection-add-row.dropdown-open,
.selected-items-table-row.unit-dropdown-open {
  overflow: visible !important;
}

.ingredient-unit-dropdown-trigger {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  background: #fff;
  color: #3e2723;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  appearance: none;
}

.ingredient-unit-dropdown-trigger:hover,
.ingredient-unit-dropdown-trigger:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.2);
}

.ingredient-unit-dropdown-item {
  padding: 0.55rem 0.6rem;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  color: #3e2723;
  text-align: center;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
}

.ingredient-unit-dropdown-item:last-child {
  border-bottom: none;
}

.ingredient-unit-dropdown-item:hover {
  background: rgba(141, 110, 99, 0.12);
}

/* Match add-row quantity/hours input to table row inputs – same width as column (width: 100%) */
.ingredients-selection-add-row .ingredients-selection-add-amount-input {
  width: 100%;
  max-width: 100%;
  padding: 0.4rem 0.6rem;
  text-align: center;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  box-sizing: border-box;
}

.ingredients-selection-add-row td.quantity-column.ingredients-selection-add-row-staff-qty {
  vertical-align: middle;
  text-align: center;
}

.ingredients-selection-add-row td.quantity-column.ingredients-selection-add-row-staff-qty span {
  display: inline-block;
}

.ingredients-selection-empty-state p {
  margin: 0;
  line-height: 1.5;
}

/* Responsive design for narrow screens */
@media (max-width: 768px) {
  .section-table {
    display: block;
  }
  
  .section-table thead {
    display: none;
  }
  
  .section-table tbody {
    display: block;
  }
  
  .section-table tbody tr {
    display: block;
    margin-bottom: 10px;
    padding: 15px;
    border: 2px solid #e8dcc0;
    border-radius: 12px;
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    text-align: center;
  }
  
  .section-table tbody tr:hover {
    background: #f8f4e6;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-color: #d4af37;
  }
  
  /* Section-specific mobile styling */
  .section-table tbody tr.ingredients-item {
    border-left: 4px solid #0a5d7a;
    border-color: #0a5d7a;
  }
  
  .section-table tbody tr.packaging-item {
    border-left: 4px solid #004d06;
    border-color: #004d06;
  }
  
  .section-table tbody tr.appliances-item {
    border-left: 4px solid #36034d;
    border-color: #36034d;
  }
  
  /* Hide all table cells except essential ones */
  .section-table td {
    display: none;
    border: none;
    padding: 0;
  }
  
  /* Show only essential cells in vertical order */
  .section-table td.name-column {
    display: block;
    text-align: center;
    margin-bottom: 12px;
    order: 1;
  }
  
  .section-table td.amount-column,
  .section-table td.quantity-column,
  .section-table td.hours-column {
    display: block;
    text-align: center;
    margin-bottom: 8px;
    order: 2;
  }
  
  .section-table td.unit-column {
    display: block;
    text-align: center;
    margin-bottom: 12px;
    order: 3;
  }
  
  .section-table td.action-column {
    display: block;
    text-align: center;
    margin-bottom: 0;
    order: 4;
  }
  
  /* Hide all data labels */
  .section-table td:before {
    content: "" !important;
  }
  
  /* Mobile ingredient name - large and centered */
  .section-table .item-name {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin: 0 !important;
    color: #2c3e50 !important;
    text-transform: capitalize !important;
    display: block !important;
  }
  
  .section-table .item-category {
    display: none !important;
  }
  
  /* Mobile input styling - vertical stacking */
  .section-table input,
  .section-table select {
    width: 120px;
    margin: 0 auto;
    display: block;
    font-size: 0.9rem;
    padding: 10px 12px;
    text-align: center;
  }
  
  /* Mobile button styling - centered at bottom */
  .section-table .remove-item-btn {
    width: 120px;
    margin: 0 auto;
    display: block;
    font-size: 0.8rem;
    padding: 10px 16px;
  }
}

/* Empty row styling */
.ingredients-selection-table-row.empty-row {
  opacity: 0.5;
  pointer-events: none;
}

.ingredients-selection-table-row.empty-row td {
  color: #ccc;
}

/* Ensure proper spacing between tables */
.selected-items-section {
  margin-top: 0.1rem;
  margin-bottom: 1rem;
}

/* Responsive design for tables */
@media (max-width: 768px) {
  .ingredients-selection-modal {
    max-width: 98vw !important;
    width: 98vw !important;
    margin: 1rem !important;
  }
  
  .ingredients-selection-modal-overlay {
    padding: 1rem 0.5rem !important;
  }
  
  .search-dropdown-container {
    max-width: 90%;
  }
  
  .selected-items-table-container {
    width: 95%;
    max-width: 95vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .selected-items-table {
    min-width: 500px;
    font-size: 0.85rem;
  }
  
  /* Ensure all table content is centered on mobile */
  .selected-items-table th,
  .selected-items-table td {
    text-align: center;
    vertical-align: middle;
  }
  
  /* Make sure input fields are properly sized */
  .selected-items-table input,
  .selected-items-table select {
    width: 100%;
    max-width: 80px;
    margin: 0 auto;
    display: block;
  }
  
  .search-dropdown-item {
    padding: 1.2rem 1.2rem;
    min-height: 60px;
  }
  
  .name-column {
    min-width: 100px;
    max-width: 120px;
  }
  
  .action-column {
    width: 80px;
  }
  
  .add-to-recipe-btn,
  .remove-item-btn {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
  }
  
  .cost-breakdown-panel {
    min-width: 250px;
    padding: 1rem;
  }
  
  .batch-yield-input-field {
    width: 100px;
  }
}

/* Keyframes animation for save success pulse */
@keyframes savePulse {
  0% {
    box-shadow: 0 0 0 rgba(76, 175, 80, 0);
  }
  50% {
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.6);
  }
  100% {
    box-shadow: 0 0 0 rgba(76, 175, 80, 0);
  }
}

@media (max-width: 480px) {
  .ingredients-selection-modal {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  .ingredients-selection-modal-overlay {
    padding: 0 !important;
  }
  
  .selected-items-table {
    min-width: 400px;
  }
  
  /* Mobile table improvements */
  .selected-items-table th,
  .selected-items-table td {
    padding: 0.5rem 0.25rem;
    font-size: 0.8rem;
    text-align: center;
  }
  
  .selected-items-table th {
    font-size: 0.75rem;
    padding: 0.6rem 0.25rem;
  }
  
  /* Input fields in mobile table */
  .ingredient-amount-input,
  .ingredient-unit-select,
  .packaging-quantity-input,
  .appliance-quantity-input,
  .appliance-hours-input {
    width: 100%;
    min-width: 80px;
    padding: 0.3rem 0.2rem;
    font-size: 0.8rem;
    text-align: center;
  }
  
  /* Section divider headers on mobile (not batch-edit table) */
  .section-divider-header td {
    font-size: 0.9rem;
    padding: 0.6rem 0.25rem;
    text-align: center;
    font-weight: 700;
  }
  .selected-items-table-container.batch-edit-table-style .section-divider-header td {
    font-size: 1.55rem !important;
    padding: 0.6rem 0.75rem;
  }
  
  /* Action buttons on mobile */
  .remove-item-btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
    min-width: 60px;
  }
  
  /* Item names and categories on mobile */
  .item-name {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
  }
  
  .item-category {
    font-size: 0.7rem;
    margin-top: 0.2rem;
    text-align: center;
  }
}

/* Extra small mobile screens */
@media (max-width: 360px) {
  .selected-items-table {
    min-width: 350px;
    font-size: 0.75rem;
  }
  
  .selected-items-table th,
  .selected-items-table td {
    padding: 0.4rem 0.15rem;
    font-size: 0.7rem;
  }
  
  .selected-items-table th {
    font-size: 0.65rem;
    padding: 0.5rem 0.15rem;
  }
  
  /* Even smaller input fields */
  .ingredient-amount-input,
  .ingredient-unit-select,
  .packaging-quantity-input,
  .appliance-quantity-input,
  .appliance-hours-input {
    min-width: 50px;
    padding: 0.25rem 0.15rem;
    font-size: 0.7rem;
  }
  
  .remove-item-btn {
    padding: 0.25rem 0.4rem;
    font-size: 0.65rem;
    min-width: 50px;
  }
  
  .item-name {
    font-size: 1.2rem;
    text-align: center;
  }
  
  .item-category {
    font-size: 0.6rem;
  }
  
  .section-divider-header td {
    font-size: 0.8rem;
    padding: 0.5rem 0.15rem;
  }
  .selected-items-table-container.batch-edit-table-style .section-divider-header td {
    font-size: 1.55rem !important;
    padding: 0.6rem 0.75rem;
  }
  
  /* Mobile responsiveness for new section structure */
  .recipe-section {
    margin-bottom: 1rem;
  }
  
  .section-header {
    padding: 0.8rem 1rem;
    font-size: 1rem;
  }
  
  .section-header h4 {
    font-size: 1rem;
  }
  
  .section-table th,
  .section-table td {
    padding: 0.5rem 0.25rem;
    font-size: 0.8rem;
  }
  
  .section-table th {
    font-size: 0.75rem;
    padding: 0.6rem 0.25rem;
  }
  
  /* Input fields in mobile section tables */
  .section-table input,
  .section-table select {
    width: 100%;
    min-width: 50px;
    padding: 0.3rem 0.2rem;
    font-size: 0.8rem;
    text-align: center;
  }
  
  .remove-item-btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
    min-width: 60px;
  }
  
  .item-name {
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
  }
  
  .item-category {
    font-size: 0.7rem;
    margin-top: 0.2rem;
    text-align: center;
  }
  
  .cost-breakdown-panel {
    min-width: 200px;
    padding: 0.8rem;
  }
  
  /* Mobile responsiveness for plus buttons */
  .add-item-buttons-container {
    gap: 0.5rem;
    padding: 0.8rem 1rem;
  }
  
  .add-item-btn {
    width: 45px !important;
    height: 45px !important;
    font-size: 1.3rem !important;
    border-radius: 50% !important;
    min-width: 45px !important;
    min-height: 45px !important;
    max-width: 45px !important;
    max-height: 45px !important;
  }
  
  .plus-icon {
    font-size: 1.5rem;
  }
}

/* Modal Footer – same as Batch Edit Modal (brown bar, pill buttons) */
.ingredients-selection-modal .ingredients-selection-modal-footer {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  padding: 1rem 2.5rem;
  border-top: 2px solid #5d4037;
  background: linear-gradient(135deg, #8d6e63 0%, #6d4c41 100%);
  flex-shrink: 0;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
}

.ingredients-selection-modal .ingredients-selection-modal-footer button {
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s ease;
  border: none;
}

.ingredients-selection-modal .ingredients-selection-cancel-btn {
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  color: #fff;
}

.ingredients-selection-modal .ingredients-selection-cancel-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b71c1c 0%, #8d0000 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.ingredients-selection-modal .ingredients-selection-save-btn {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
  color: #fff;
}

.ingredients-selection-modal .ingredients-selection-save-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #1b5e20 0%, #0d3e0d 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.ingredients-selection-modal .ingredients-selection-save-btn:disabled,
.ingredients-selection-modal .ingredients-selection-cancel-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .ingredients-selection-modal {
    width: 95vw;
    max-height: 95vh;
  }
  
  .ingredients-selection-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
  }
  
  .ingredients-selection-yield-inputs {
    flex-direction: column;
    gap: 1rem;
  }
  
  .ingredients-selection-modal-footer {
    flex-direction: column;
  }
  
  .ingredients-selection-save-btn,
  .ingredients-selection-cancel-btn {
    width: 100%;
  }
}

/* New Batch Yield System Styles */
.batch-weight-input {
  margin-bottom: 1rem;
}

.batch-weight-label {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: #5d4037;
  margin-bottom: 0.5rem;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
}

.batch-weight-input-container {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Batch weight unit dropdown: stack above Products Made / Excess Product when open */
.ingredients-selection-batch-controls .batch-weight-input-container .ingredient-unit-dropdown-wrap.unit-dropdown-open {
  position: relative;
  z-index: 2147483647;
}

.ingredients-selection-batch-controls .batch-weight-input-container .ingredient-unit-dropdown-wrap.unit-dropdown-open .ingredient-unit-dropdown-list {
  z-index: 2147483647;
}

.batch-weight-input-field {
  flex: 1;
  max-width: 120px;
  padding: 0.75rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'The Wanters DEMO', serif;
  background: #f8f9fa;
  color: #5d4037;
  text-align: center;
  font-weight: 600;
}

.batch-weight-input-field:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.1);
}

.batch-weight-unit-select {
  padding: 0.75rem;
  border: 2px solid #8d6e63 !important;
  border-radius: 12px !important;
  font-size: 1.6rem !important;
  font-weight: 700;
  font-family: 'The Wanters DEMO', serif;
  background: white;
  color: #5d4037;
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}

.batch-weight-unit-select:focus {
  outline: none;
  border: 2px solid #5d4037 !important;
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.1);
}

.batch-weight-unit-select:hover {
  border: 2px solid #5d4037 !important;
}

/* Center-align dropdown options */
.batch-weight-unit-select option {
  text-align: center;
}

.product-size-selection-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center the button container */
  width: 100%;
  margin-top: 1.5rem; /* increased space from title header */
  margin-bottom: 0.1rem; /* minimal gap above selected items table */
  padding-top: 1rem; /* increased padding above the bar */
  padding-bottom: 0.5rem;
  text-align: center;
}

.product-size-label {
  display: block;
  font-size: 1.5rem; /* match Add Items To Your Recipe */
  font-weight: 600;
  color: #3e2723; /* match add-own-text color */
  margin-bottom: 1rem;
  font-family: 'The Wanters DEMO', serif;
}

/* Override pool-view-buttons width for product size buttons to wrap dynamically */
.product-size-buttons-container.pool-view-buttons {
  width: fit-content !important; /* Fit content instead of 100% to wrap dynamically around buttons */
  max-width: 100% !important; /* Allow it to shrink but not exceed container */
}

.product-size-buttons-container {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: fit-content !important; /* Fit content instead of 100% to wrap dynamically around buttons */
  max-width: 100% !important; /* Allow it to shrink but not exceed container */
  padding: 0.5rem 0.25rem !important; /* More padding top/bottom (0.5rem), tighter left/right (0.25rem) */
  margin: 0 auto; /* Center the container */
  box-sizing: border-box;
}

.product-size-btn {
  min-width: 80px;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.3s ease;
}

.product-size-btn:hover:not(.active) {
  opacity: 0.8 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.product-size-btn.active {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  transform: scale(1.02);
}

.batch-calculations {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.calculated-products,
.excess-product {
  flex: 1;
}

.calculated-label,
.excess-label {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: #5d4037;
  margin-bottom: 0.5rem;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
}

.calculated-input,
.excess-input {
  width: 100%;
  max-width: 120px;
  padding: 0.75rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'The Wanters DEMO', serif;
  background: #f8f9fa;
  color: #5d4037;
  text-align: center;
  font-weight: 600;
}

.calculated-input:focus,
.excess-input:focus {
  outline: none;
  border-color: #5d4037;
}

/* Mobile responsiveness for batch yield */
@media (max-width: 768px) {
  .ingredients-selection-batch-controls {
    flex-direction: column;
    align-items: center;
  }

  .batch-weight-input-container {
    flex-direction: column;
  }
  
  .master-dropdown {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    font-size: 1.8rem !important;
  }
  
  .batch-weight-unit-select {
    font-size: 1.8rem !important;
  }
  
  .product-size-buttons {
    justify-content: center;
  }
  
  .batch-calculations {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Add Size Modal Styles */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Delete Confirmation Modal Styles */
.delete-confirmation-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 2rem;
}

.delete-confirmation-modal {
  background: #f8f5f0;
  border: 3px solid #8d6e63;
  border-radius: 15px;
  padding: 0;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-family: 'The Wanters DEMO', serif;
}

.delete-confirmation-header {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: white;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid #b91c1c;
}

.delete-confirmation-title {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 800;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.delete-confirmation-content {
  padding: 2rem;
}

.delete-confirmation-message {
  text-align: center;
}

.delete-warning-text {
  font-size: 1.1rem;
  color: #2c1810;
  margin-bottom: 1rem;
  font-weight: 600;
}

/* Inline so "?" stays on same row as item name */
.delete-item-name {
  display: inline;
  font-size: 1.5rem;
  font-weight: 800;
  color: #dc2626;
  margin: 0.5rem 0 0 0;
}

.delete-additional-warning {
  background: rgba(255, 193, 7, 0.1);
  border: 2px solid #ffc107;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.delete-warning-sub {
  margin: 0;
  color: #856404;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Match quick-add-modal-footer: brown panel, rounded bottom */
.delete-confirmation-actions {
  background: #8d6e63;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  border-radius: 0 0 12px 12px;
}

/* Keep: green, left on wider screens - same style as quick-add Add button */
.delete-cancel-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  color: white;
  border: 3px solid #004d06;
  border-radius: 9999px;
  padding: 0.75rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
  flex: 0 0 auto;
}

.delete-cancel-btn:hover {
  background: linear-gradient(135deg, #005d08, #004d06);
  border-color: #003d05;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 80, 0, 0.3);
}

/* Delete: darker red (match Batch tab button) */
.delete-confirm-btn {
  background: linear-gradient(135deg, #a31b00 0%, #d32f2f 100%);
  color: white;
  border: 3px solid #8b0000;
  border-radius: 9999px;
  padding: 0.75rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
  flex: 0 0 auto;
}

.delete-confirm-btn:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #a31b00 100%);
  border-color: #8b0000;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(163, 27, 0, 0.4);
}

/* Dark Mode */
.dark-mode.delete-confirmation-modal {
  background: #3e2723;
  border-color: #8d6e63;
}

.dark-mode .delete-confirmation-content {
  background: transparent;
}

.dark-mode .delete-warning-text {
  color: #fff8e1;
}

.dark-mode .delete-additional-warning {
  background: rgba(255, 193, 7, 0.2);
  border-color: #ffb300;
}

.dark-mode .delete-warning-sub {
  color: #ffb300;
}

.dark-mode .delete-confirmation-actions {
  background: #8d6e63;
}

/* Dream Mode */
.dream-mode.delete-confirmation-modal {
  background: linear-gradient(135deg, #f8f5f0 0%, #fff8e1 100%);
  border-color: #b8860b;
  box-shadow: 0 10px 30px rgba(184, 134, 11, 0.4);
}

.dream-mode .delete-confirmation-header {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  border-bottom-color: #b91c1c;
}

.dream-mode .delete-warning-text {
  color: #3e2723;
}

.dream-mode .delete-additional-warning {
  background: rgba(255, 193, 7, 0.15);
  border-color: #f57f17;
}

.dream-mode .delete-warning-sub {
  color: #f57f17;
}

.dream-mode .delete-confirmation-actions {
  background: #8d6e63;
}

/* Responsive Design */
@media (max-width: 768px) {
  .delete-confirmation-overlay {
    padding: 1rem;
  }
  
  .delete-confirmation-modal {
    width: 95%;
    max-width: none;
  }
  
  .delete-confirmation-header {
    padding: 1rem;
  }
  
  .delete-confirmation-title {
    font-size: 1.6rem;
  }
  
  .delete-confirmation-content {
    padding: 1.5rem;
  }
  
  .delete-confirmation-actions {
    padding: 1rem;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .delete-confirmation-content {
    padding: 1rem;
  }
  
  .delete-warning-text {
    font-size: 1rem;
  }
  
  .delete-item-name {
    font-size: 1.3rem;
  }
}/* Product Creation Loading Modal - Styled like allergen confirmation modal */

.product-creation-loading-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10001;
  backdrop-filter: blur(4px);
}

.product-creation-loading-modal {
  background: #f5f5dc;
  border: 3px solid #8d6e63;
  border-radius: 15px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(139, 110, 99, 0.2),
    0 0 0 2px rgba(255, 255, 255, 0.1);
  font-family: 'The Wanters DEMO', serif;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.product-creation-loading-header {
  text-align: center;
}

.product-creation-loading-header h2 {
  font-size: 1.5rem;
  color: #5d4037;
  font-weight: 600;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
}

.product-creation-progress-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

.product-creation-progress-bar-container {
  width: 100%;
  height: 20px;
  background: rgba(141, 110, 99, 0.2);
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #8d6e63;
  position: relative;
}

.product-creation-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #8d6e63 0%, #a1887f 50%, #8d6e63 100%);
  border-radius: 10px;
  transition: width 0.3s ease-out;
  position: relative;
  overflow: hidden;
}

.product-creation-progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.product-creation-progress-text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.product-creation-progress-percentage {
  font-size: 1.8rem;
  font-weight: 700;
  color: #5d4037;
  font-family: 'The Wanters DEMO', serif;
}

.product-creation-progress-status {
  font-size: 1rem;
  color: #5d4037;
  text-align: center;
  font-weight: 500;
  font-family: 'The Wanters DEMO', serif;
}






/* Add Product Modal Styles */

/* Refresh button styles - matching admin product button style with light blue */
.admin-product-refresh-btn {
  background-color: #87CEEB;
  color: #fff;
  border: 3px solid #5AA3E6;
  padding: 0.6rem 1.2rem;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
  font-family: 'The Wanters DEMO', serif;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  user-select: none;
  white-space: nowrap;
}

.admin-product-refresh-btn:hover:not(:disabled) {
  background-color: #5AA3E6;
  border-color: #4A9FE5;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(135, 206, 235, 0.4);
}

.admin-product-refresh-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(135, 206, 235, 0.3);
}

.admin-product-refresh-btn:disabled {
  background-color: #6c757d;
  border-color: #545b62;
  cursor: not-allowed;
  transform: none;
  opacity: 0.6;
}

.add-product-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
  width: 100vw;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.add-product-modal {
  background: #f5f5dc;
  border: 3px solid #8d6e63;
  border-radius: 15px;
  min-width: 580px;
  max-width: 720px;
  width: 90%;
  max-height: 95vh;
  overflow-y: auto;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(139, 110, 99, 0.2),
    0 0 0 2px rgba(255, 255, 255, 0.1);
  font-family: 'The Wanters DEMO', serif;
  /* Hide scrollbar but maintain scroll functionality */
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  margin: 0;
  left: 0;
  right: 0;
}

/* Hide scrollbar but maintain scroll functionality */
.add-product-modal::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

/* Red outline and glow for empty nutrition fields - matching postal address thickness */
.nutrition-input-empty {
  border: 2px solid #ff4444 !important;
  box-shadow: 0 0 8px rgba(255, 68, 68, 0.5) !important;
  background-color: #fff5f5 !important;
  border-radius: 8px;
}

.nutrition-input-empty:focus {
  border: 2px solid #ff4444 !important;
  box-shadow: 0 0 12px rgba(255, 68, 68, 0.7) !important;
  outline: none !important;
}

/* Red outline and glow for required product fields */
.add-product-input.required-field {
  border: 2px solid #ff4444 !important;
  box-shadow: 0 0 8px rgba(255, 68, 68, 0.5) !important;
  background-color: #fff5f5 !important;
}

.add-product-input.required-field:focus {
  border: 2px solid #ff4444 !important;
  box-shadow: 0 0 12px rgba(255, 68, 68, 0.7) !important;
  outline: none !important;
  background-color: #fff5f5 !important;
}

/* Standard dark brown border for filled fields */
.add-product-input.filled-field {
  border: 2px solid #5d4037 !important;
  box-shadow: none !important;
  background-color: #ffffff !important;
}

.add-product-input.filled-field:focus {
  border: 2px solid #5d4037 !important;
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.2) !important;
  outline: none !important;
  background-color: #fafafa !important;
}

/* Green pulse animation for successful save */
.add-product-input.save-success {
  border: 2px solid #4caf50 !important;
  animation: savePulse 1s ease-in-out;
}

@keyframes savePulse {
  0% {
    box-shadow: 0 0 0 rgba(76, 175, 80, 0);
  }
  50% {
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.6);
  }
  100% {
    box-shadow: 0 0 0 rgba(76, 175, 80, 0);
  }
}

/* Nutrition input container for tooltip positioning */
.nutrition-input-container {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Nutrition validation tooltip */
.nutrition-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #333;
  color: white;
  padding: 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  z-index: 10000;
  margin-top: 0.25rem;
  text-align: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  animation: fadeInTooltip 0.2s ease-in-out;
}

.nutrition-tooltip::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #333;
}


@keyframes fadeInTooltip {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.add-product-modal::-webkit-scrollbar-track {
  background: transparent;
}

.add-product-modal::-webkit-scrollbar-thumb {
  background: transparent;
}

/* Modal Header */
.add-product-modal-header {
  background: #8d6e63;
  color: #fff8e1;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
  position: relative;
}

/* Products Modal Header - Master Purple for Appliances */
.add-product-modal-header.products-modal-header {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  color: #ffffff;
  border-bottom: 3px solid #36034d;
}

/* Items Modal Header - Master Green for Packaging */
.add-product-modal-header.items-modal-header {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  color: #ffffff;
  border-bottom: 3px solid #004d06;
}

.add-product-modal-title {
  font-size: 3rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: 1px;
  text-align: center !important;
  width: 100%;
  position: relative;
  padding: 1rem 0;
  z-index: 2;
  text-shadow: 
    1.5px 1.5px 0 #000000,
    -1.5px -1.5px 0 #000000,
    1.5px -1.5px 0 #000000,
    -1.5px 1.5px 0 #000000,
    0 1.5px 0 #000000,
    0 -1.5px 0 #000000,
    1.5px 0 0 #000000,
    -1.5px 0 0 #000000;
}


.add-product-modal-close {
  background: none;
  border: none;
  color: #fff8e1;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.add-product-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-50%) scale(1.1);
}

/* Modal Body */
.add-product-modal-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* General Error Message */
.add-product-general-error {
  background: #ffebee;
  border: 2px solid #d32f2f;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  color: #d32f2f;
  font-weight: 600;
  text-align: center !important;
}

/* Form Styling */
.add-product-form-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 300px;
}

.add-product-form-field.add-product-name-field {
  max-width: 300px;
}

.add-product-form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.3rem;
  justify-content: center;
}

.add-product-form-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center !important;
  max-width: 300px;
}

.add-product-form-field:only-child {
  margin-bottom: 1.5rem;
}

.add-product-unit-selector {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  margin: 0 1rem;
}

/* Larger text for size unit dropdown in Add Product – trigger and list match */
.add-product-modal .add-product-unit-selector .ingredient-unit-dropdown-trigger {
  font-size: 1.35rem;
}

.add-product-modal .add-product-unit-selector .ingredient-unit-dropdown-item {
  font-size: 1.35rem;
}

.add-product-unit-select {
  padding: 0.65rem 1rem;
  border: 3px solid #8d6e63;
  border-radius: 8px;
  font-size: 1.1rem;
  font-family: 'Verdana', sans-serif;
  font-weight: 600;
  background: #fff;
  color: #3e2723;
  text-transform: uppercase;
  min-width: 90px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-product-unit-select:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.2);
}

.add-product-label {
  font-weight: 700;
  font-size: 1.6rem;
  color: #5d4037;
  margin-bottom: 0.5rem;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  text-align: center !important;
  width: 100%;
}

.add-product-input {
  padding: 0.75rem 1rem;
  border: 3px solid #8d6e63;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Verdana', sans-serif;
  background: #ffffff;
  color: #3e2723;
  transition: all 0.2s ease;
  min-height: 50px;
  box-sizing: border-box;
  width: 100%;
  text-align: center !important;
}
.add-product-input.metric-input {
  font-size: 1.2rem;
  font-weight: 600;
  font-family: 'Verdana', sans-serif;
  letter-spacing: 0.4px;
}

.add-product-input::placeholder {
  font-size: 1rem;
  font-weight: 400;
  color: #8d6e63;
  opacity: 0.7;
}

/* Remove number input arrows */
.add-product-input[type="number"] {
  -moz-appearance: textfield;
}

.add-product-input[type="number"]::-webkit-outer-spin-button,
.add-product-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.add-product-input:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.2);
  background: #fafafa;
}

/* Product Name Field - Larger styling */
.add-product-name-field {
  margin-bottom: 0.3rem;
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center !important;
}

.add-product-name-label {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  text-align: center !important;
}

.add-product-name-input {
  font-size: 1.2rem !important;
  padding: 1rem 1.5rem !important;
  min-height: 60px !important;
  font-weight: 600;
  text-align: center !important;
  width: 100% !important;
  max-width: 300px;
  margin: 0 auto;
}

.add-product-input.error {
  border-color: #d32f2f;
  background: #ffebee;
}

.add-product-input::placeholder {
  color: #8d6e63;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.add-product-input:focus::placeholder {
  opacity: 0;
}

.add-product-error {
  color: #d32f2f;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0.25rem;
  text-shadow: none;
}

/* Go Button Section */
.add-product-go-section {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.add-product-go-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  color: white;
  border: 3px solid #0a1a1d;
  border-radius: 9999px;
  padding: 1rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center !important;
  min-width: 120px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.add-product-go-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.add-product-go-btn:disabled {
  background: #95a5a6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Type Selection Buttons */
.add-product-type-selection {
  display: flex;
  gap: 1rem;
  margin: 2rem 0;
  justify-content: center;
}

.add-product-type-btn {
  background: #8d6e63;
  color: #ffffff;
  border: 3px solid #5d4037;
  border-radius: 9999px;
  padding: 1rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  min-width: 120px;
}

.add-product-type-btn:hover:not(:disabled) {
  background: #5d4037;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.add-product-type-btn:disabled {
  background: #cccccc;
  border-color: #999999;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.add-product-type-btn.active {
  background: #14545c;
  border-color: #0d353a;
}

.add-product-type-btn.active:hover {
  background: #0d353a;
  border-color: #0d353a;
}

/* Item button - Green like buying button */
.add-product-type-btn.item-btn {
  background: #2e7d32;
  border-color: #1b5e20;
}

.add-product-type-btn.item-btn:hover:not(:disabled) {
  background: #1b5e20;
  border-color: #0d4a12;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(46, 125, 50, 0.4);
}

/* Section Titles */
.add-product-section-title {
  font-size: 1.3rem;
  font-weight: 900;
  color: #5d4037;
  margin: 1.5rem 0 1rem 0;
  text-align: center !important;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.add-product-name-display {
  text-align: center !important;
  margin-bottom: 1rem;
}

/* Sizes Section */
.add-product-sizes-section {
  margin-bottom: 2rem;
}

.add-product-size-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: flex-end;
  position: relative;
  justify-content: center;
  flex-wrap: wrap;
}

.add-product-size-row .add-product-form-field {
  flex: 1;
  max-width: 150px;
}

.add-product-remove-size-btn {
  background: #d32f2f;
  color: #ffffff;
  border: 2px solid #b71c1c;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
}

.add-product-remove-size-btn:hover:not(:disabled) {
  background: #b71c1c;
  transform: translateY(-50%) scale(1.1);
}

.add-product-remove-size-btn:disabled {
  background: #cccccc;
  border-color: #999999;
  cursor: not-allowed;
  opacity: 0.6;
}

.add-product-add-size-btn {
  background: linear-gradient(135deg, #C8990C 0%, #a67c0a 100%);
  color: #ffffff;
  border: 3px solid #8a6a08;
  border-radius: 9999px;
  padding: 0.8rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  display: block;
}

.add-product-add-size-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #a67c0a 0%, #C8990C 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(200, 153, 12, 0.3);
}

.add-product-add-size-btn:disabled {
  background: #cccccc;
  border-color: #999999;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Tabbed Panel */
.add-product-tabbed-panel {
  margin-bottom: 2rem;
  margin-top: 0.3rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-self: stretch;
  background: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.add-product-tab-buttons {
  display: flex;
  background: #e8e8e8;
  border-bottom: 2px solid #d0d0d0;
}

.add-product-tab-buttons > span {
  display: flex;
  height: 100%;
}

.add-product-tab-btn {
  flex: 1;
  background: #e8e8e8;
  color: #5d4037;
  border: none;
  padding: 1rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center !important;
  border-right: 1px solid #d0d0d0;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-product-tab-btn:last-child {
  border-right: none;
}

/* Remove border from button in last span wrapper */
.add-product-tab-buttons > span:last-child .add-product-tab-btn {
  border-right: none;
}

.add-product-tab-btn:hover:not(:disabled) {
  background: #d8d8d8;
}

/* Recipe Tab - Purple */
.add-product-tab-recipe {
  background: #d4c7e8 !important; /* Desaturated purple */
  color: #8b5a8a !important; /* Desaturated purple text */
}

.add-product-tab-recipe:hover:not(:disabled) {
  background: #c7b5e0 !important; /* Slightly more saturated on hover */
}

.add-product-tab-recipe.active {
  background: #57058a !important; /* Full purple when active */
  color: #ffffff !important;
  border-bottom: 3px solid #57058a;
}

/* Allergens Tab - Red */
.add-product-tab-allergens {
  background: #e8c7c7 !important; /* Desaturated red */
  color: #8b5a5a !important; /* Desaturated red text */
}

.add-product-tab-allergens:hover:not(:disabled) {
  background: #e0b5b5 !important; /* Slightly more saturated on hover */
}

.add-product-tab-allergens.active {
  background: #a31b00 !important; /* Full red when active */
  color: #ffffff !important;
  border-bottom: 3px solid #a31b00;
}

/* Nutrition Tab - Green */
.add-product-tab-nutrition {
  background: #c7e8c7 !important; /* Desaturated green */
  color: #5a8b5a !important; /* Desaturated green text */
}

.add-product-tab-nutrition:hover:not(:disabled) {
  background: #b5e0b5 !important; /* Slightly more saturated on hover */
}

.add-product-tab-nutrition.active {
  background: #00770a !important; /* Full green when active */
  color: #ffffff !important;
  border-bottom: 3px solid #00770a;
}


.add-product-tab-btn:disabled {
  background: #f0f0f0 !important;
  color: #999999 !important;
  cursor: not-allowed;
  opacity: 0.6;
}

.add-product-tab-content {
  padding: 1.5rem;
  min-height: 200px;
}

.add-product-coming-soon {
  text-align: center !important;
  color: #666666;
  font-style: italic;
  margin: 2rem 0;
  font-size: 1.1rem;
}

.add-product-recipe-actions {
  text-align: center !important;
}

.add-product-recipe-info {
  margin-top: 1rem;
  padding: 1rem;
  background: #f0f0f0;
  border-radius: 8px;
  text-align: left;
}

.add-product-recipe-info p {
  margin: 0.5rem 0;
  color: #5d4037;
}

.recipe-name-display {
  text-align: center !important;
  padding: 1rem;
}

.recipe-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #5d4037;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Recipe Section - Match Nutrition Table Style */
.add-product-modal .recipe-section {
  margin-top: 1rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.recipe-table-container {
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 8px;
  overflow: hidden;
}

.recipe-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.recipe-table-header {
  background: #f0f0f0;
  font-weight: 700;
  color: #5d4037;
  font-size: 0.9rem;
}

.recipe-table-row {
  border-bottom: 1px solid #e0e0e0;
  background: #ffffff;
}

.recipe-table-row:last-child {
  border-bottom: none;
}

.recipe-table-cell {
  padding: 0.75rem 1rem;
  text-align: center !important;
  font-size: 0.9rem;
  color: #5d4037;
  border-right: 1px solid #e0e0e0;
  width: 25%;
  vertical-align: middle;
}

.recipe-table-cell:last-child {
  border-right: none;
}

.recipe-table-header .recipe-table-cell {
  font-weight: 700;
  background: #f0f0f0;
  color: #5d4037;
}

.recipe-divider {
  height: 2px;
  background: #5d4037;
  margin: 0.5rem 0;
  width: 100%;
  display: block;
}

/* Recipe Total Section - Separate below table */
.recipe-total-section {
  margin-top: 1rem;
  background: #f8f8f8;
  border: 2px solid #5d4037;
  border-radius: 8px;
  padding: 1rem;
}

.recipe-total-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recipe-total-label {
  font-weight: 700;
  font-size: 1.1rem;
  color: #5d4037;
}

.recipe-total-amount {
  font-weight: 700;
  font-size: 1.3rem;
  color: #5d4037;
  background: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
}

/* Allergens Section - Table Style */
.add-product-allergens-content {
  /* Inherits styles from parent tab content */
}

.allergens-table-container {
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 8px;
  overflow: hidden;
}

.allergens-table {
  width: 100%;
  border-collapse: collapse;
}

.allergens-table-header {
  background: #f0f0f0;
  font-weight: 700;
  color: #5d4037;
  font-size: 0.9rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #d0d0d0;
}

.allergens-table-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #e0e0e0;
  background: #ffffff;
}

.allergens-table-row:last-child {
  border-bottom: none;
}

.allergens-table-cell {
  padding: 0.8rem 1.5rem;
  text-align: center !important;
  font-size: 1.2rem;
  color: #5d4037;
  border-right: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.allergens-table-cell:last-child {
  border-right: none;
}

.allergens-table-header .allergens-table-cell {
  font-weight: 700;
  background: #f0f0f0;
  color: #5d4037;
  font-size: 1.3rem;
}

.allergen-name {
  font-weight: 600;
  text-align: center !important;
  justify-content: center;
  font-size: 1.2rem;
}

.allergen-toggle {
  justify-content: center;
}

.allergen-toggle-btn {
  background: #ffffff;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #8d6e63;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 700;
}

.allergen-toggle-btn:hover {
  background: #f8f8f8;
  border-color: #5d4037;
  color: #5d4037;
}

.allergen-toggle-btn.selected {
  background: #dc2626;
  color: #ffffff;
  border-color: #b91c1c;
}

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

/* Nutrition Optional Message */
.nutrition-optional-message {
  text-align: center;
  color: #8d6e63;
  font-size: 0.9rem;
  font-style: italic;
  margin-bottom: 0.5rem;
  font-family: Verdana, sans-serif;
}

/* Energy Checkbox - Fixed size on all screens */
.energy-checkbox {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  flex-shrink: 0 !important;
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

/* Nutrition Header - matching recipe tables */
/* Nutrition single panel (header + table inside one bordered box) */
.nutrition-panel-compact {
  background: transparent;
  border: 2px solid #8d6e63;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
  width: 100%;
  max-width: 100%;
  box-shadow: 0 2px 8px rgba(93, 64, 55, 0.1);
}

.nutrition-panel-compact .nutrition-header-compact {
  background: linear-gradient(135deg, #14545c, #0a1a1d);
  padding: 0.6rem 1rem;
  text-align: center;
  border-radius: 10px 10px 0 0;
  border-bottom: 2px solid #8d6e63;
}

.nutrition-header-compact {
  background: linear-gradient(135deg, #14545c, #0a1a1d);
  padding: 0.6rem 1rem;
  text-align: center;
  border-radius: 8px 8px 0 0;
}

.nutrition-title-compact {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
}

/* Nutrition Table Compact Wrapper - no border when inside nutrition-panel-compact */
.nutrition-panel-compact .nutrition-table-compact-wrapper {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  box-shadow: none;
  width: 100%;
  max-width: 100%;
}

.nutrition-table-compact-wrapper {
  background: rgba(255, 255, 255, 0.9);
  padding: 0;
  width: 100%;
  max-width: 100%;
}

/* Serving Row Compact */
.nutrition-serving-row-compact {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
  background: transparent;
}

.nutrition-serving-cell-compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.nutrition-serving-cell-compact label {
  font-weight: 600;
  color: #3e2723;
  font-size: 1.1rem;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
}

/* Match IngredientsSelectionModal ingredient-amount-input border style – all nutrition inputs */
.nutrition-input-compact,
.add-product-nutrition-content .nutrition-input-compact {
  padding: 0.5rem;
  border: 2px solid #8d6e63 !important;
  border-radius: 8px;
  font-size: 1.2rem;
  font-family: 'Verdana', sans-serif;
  font-weight: 400;
  width: 120px;
  text-align: center;
  color: #333;
  background: rgba(255, 255, 255, 0.9);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nutrition-input-compact:focus,
.add-product-nutrition-content .nutrition-input-compact:focus {
  outline: none;
  border-color: #5d4037 !important;
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.15);
}

/* Readonly: same border style, greyed out – all nutrition readonly inputs */
.nutrition-readonly-input-compact,
.add-product-nutrition-content .nutrition-readonly-input-compact {
  background: #f5f5f5 !important;
  color: #666 !important;
  cursor: not-allowed !important;
  padding: 0.5rem;
  border: 2px solid #8d6e63 !important;
  border-radius: 8px;
  font-size: 1.2rem;
  font-family: 'Verdana', sans-serif;
  font-weight: 500;
  width: 120px;
  text-align: center;
}

/* Nutrition Table Compact - matching recipe table format */
.nutrition-table-compact {
  border-collapse: collapse;
  margin: 0;
  max-width: 100%;
  width: 100%;
}

.nutrition-table-header-compact {
  display: flex;
  background: rgba(20, 84, 92, 0.1);
  border-bottom: 2px solid rgba(20, 84, 92, 0.3);
  font-weight: bold;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  padding: 0.5rem 0.8rem;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

.nutrition-table-row-compact {
  display: flex;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
  transition: background-color 0.2s ease;
  padding: 0 0.8rem;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

.nutrition-table-row-compact:hover {
  background: rgba(141, 110, 99, 0.05);
}

.nutrition-table-row-compact:last-child {
  border-bottom: none;
}

.nutrition-table-cell-compact {
  flex: 1;
  padding: 0.5rem 1.33rem;
  text-align: center;
  font-size: 1.3rem;
  color: #3e2723;
  min-width: 0;
  font-family: 'The Wanters DEMO', serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nutrition-table-cell-compact:first-child {
  flex: 1.5;
  padding-right: 1.33rem;
  font-weight: 600;
  text-transform: none;
  text-align: center;
}

.nutrition-table-cell-compact:nth-child(2),
.nutrition-table-cell-compact:nth-child(3) {
  flex: 1;
  padding-left: 1.33rem;
  padding-right: 1.33rem;
}

.nutrition-table-cell-compact input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1.1rem;
  font-family: 'Verdana', sans-serif;
  text-align: center;
  color: #333;
}

.nutrition-sub-row-compact {
  background: rgba(141, 110, 99, 0.05);
}

/* Allergens single panel (header + table inside one bordered box) */
.allergens-panel-compact {
  background: transparent;
  border: 2px solid #8d6e63;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
  width: 100%;
  max-width: 100%;
  box-shadow: 0 2px 8px rgba(93, 64, 55, 0.1);
}

/* Allergens Header - inside panel, matching recipe tables */
.allergens-panel-compact .allergens-header-compact {
  background: linear-gradient(135deg, #14545c, #0a1a1d);
  padding: 0.6rem 1rem;
  text-align: center;
  border-radius: 10px 10px 0 0;
  border-bottom: 2px solid #8d6e63;
}

.allergens-header-compact {
  background: linear-gradient(135deg, #14545c, #0a1a1d);
  padding: 0.6rem 1rem;
  text-align: center;
  border-radius: 8px 8px 0 0;
}

.allergens-title-compact {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
}

/* Allergens Table Compact Wrapper - no border (inside allergens-panel-compact) */
.allergens-panel-compact .allergens-table-compact-wrapper {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  box-shadow: none;
  width: 100%;
  max-width: 100%;
}

.allergens-table-compact-wrapper {
  background: rgba(255, 255, 255, 0.9);
  padding: 0;
  width: 100%;
  max-width: 100%;
}

/* Allergens Table Compact - matching recipe table format */
.allergens-table-compact {
  border-collapse: collapse;
  margin: 0;
  max-width: 100%;
  width: 100%;
}

.allergens-table-header-compact {
  display: flex;
  background: rgba(20, 84, 92, 0.1);
  border-bottom: 2px solid rgba(20, 84, 92, 0.3);
  font-weight: bold;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  padding: 0.5rem 0.8rem;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

.allergens-table-row-compact {
  display: flex;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
  transition: background-color 0.2s ease;
  padding: 0 0.8rem;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

.allergens-table-row-compact:hover {
  background: rgba(141, 110, 99, 0.05);
}

.allergens-table-row-compact:last-child {
  border-bottom: none;
}

.allergens-table-cell-compact {
  flex: 1;
  padding: 0.5rem 1.33rem;
  text-align: center;
  font-size: 1.3rem;
  color: #3e2723;
  min-width: 0;
  font-family: 'The Wanters DEMO', serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.allergens-table-cell-compact:first-child {
  flex: 1.5;
  padding-right: 1.33rem;
  font-weight: 600;
  text-transform: capitalize;
  text-align: center;
}

.allergens-table-cell-compact:nth-child(2) {
  flex: 1;
  padding-left: 1.33rem;
  padding-right: 1.33rem;
}

.allergen-name-compact {
  justify-content: center;
}

.allergen-toggle-compact {
  justify-content: center;
}

.allergen-toggle-btn-compact {
  background: #ffffff;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #8d6e63;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 700;
  font-family: 'The Wanters DEMO', serif;
}

.allergen-toggle-btn-compact:hover:not(:disabled) {
  background: #f8f8f8;
  border-color: #5d4037;
  color: #5d4037;
}

.allergen-toggle-btn-compact.selected {
  background: #dc2626;
  color: #ffffff;
  border-color: #b91c1c;
}

/* Add Product modal: red box + white X for "contains" (override other modals’ green) */
.add-product-modal .allergen-toggle-btn-compact.selected,
.add-product-allergens-content .allergen-toggle-btn-compact.selected {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #b91c1c !important;
}

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

/* Nutrition Table Styles */
.nutrition-table {
  border: 2px solid #000;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  margin-top: 1rem;
}

.nutrition-serving-info {
  border-bottom: 2px solid #000;
  padding: 1rem;
  background: #f8f8f8;
}

.nutrition-serving-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.nutrition-serving-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nutrition-serving-item label {
  font-weight: 600;
  color: #333;
  font-size: 0.9rem;
  text-align: center !important;
}

.nutrition-serving-item input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: 'Verdana', sans-serif;
  width: 80px;
  text-align: center !important;
}


.nutrition-table-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: #f0f0f0;
  border-bottom: 2px solid #000;
}

.nutrition-table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid #ccc;
}

.nutrition-sub-row {
  background: #f8f8f8;
}

.nutrition-table-cell {
  padding: 0.75rem;
  border-right: 1px solid #ccc;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: #333;
  font-family: 'Verdana', sans-serif;
}

.nutrition-table-cell:last-child {
  border-right: none;
}

.nutrition-table-cell input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: 'Verdana', sans-serif;
  text-align: center !important;
  color: #333;
}

.nutrition-readonly-input {
  background: #f5f5f5 !important;
  color: #666 !important;
  cursor: not-allowed !important;
  border-color: #ccc !important;
}

/* Recipe Table Styles */
.recipe-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.recipe-table-header {
  display: flex;
  background: #e0e0e0;
  font-weight: bold;
  border-bottom: 2px solid #8d6e63;
}

.recipe-table-row {
  display: flex;
  border-bottom: 1px solid #ddd;
}

.recipe-table-row:hover {
  background: #f9f9f9;
}

.recipe-total-row {
  display: flex;
  background: #f0f0f0;
  border-top: 2px solid #8d6e63;
  font-weight: bold;
}

.recipe-table-cell {
  flex: 1;
  padding: 0.75rem;
  text-align: center !important;
  font-family: 'Verdana', sans-serif;
  color: #333;
  border-right: 1px solid #ddd;
}

.recipe-table-cell:last-child {
  border-right: none;
}

.recipe-table-header .recipe-table-cell {
  font-weight: bold;
  text-align: center !important;
  background: #e0e0e0;
  color: #5d4037;
}

.recipe-yield-info {
  margin-top: 1rem;
  padding: 0.5rem;
  background: #f5f5f5;
  border-radius: 4px;
  text-align: center !important;
}

.recipe-yield-info p {
  margin: 0;
  font-family: 'Verdana', sans-serif;
  color: #333;
}

.nutrition-table-header .nutrition-table-cell {
  font-weight: bold;
  text-align: center !important;
  background: #e0e0e0;
}

.nutrition-table-row .nutrition-table-cell:first-child {
  font-weight: 600;
  background: #f5f5f5;
}

.nutrition-sub-row .nutrition-table-cell:first-child {
  padding-left: 2rem;
  font-style: italic;
}

.add-product-allergens-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
  justify-items: center;
}


.add-product-allergen-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center !important;
}

.allergen-title {
  font-weight: 700;
  color: #5d4037;
  font-size: 1.1rem;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  margin-bottom: 0.5rem;
}

.add-product-allergen-btn {
  background: #dc2626;
  color: #ffffff;
  border: 3px solid #b91c1c;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-product-allergen-btn:hover:not(:disabled) {
  background: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.add-product-allergen-btn:disabled {
  background: #cccccc;
  border-color: #999999;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

.add-product-allergen-btn.selected {
  background: #dc2626;
  color: #ffffff;
  border-color: #b91c1c;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.add-product-allergen-btn.selected:hover {
  background: #b91c1c;
  border-color: #991b1b;
}

/* Save Changes Button Container */
.save-changes-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.25rem 0;
  width: 100%;
}

.save-changes-btn {
  background: linear-gradient(135deg, #4caf50, #45a049);
  color: white;
  border: 2px solid #388e3c;
  border-radius: 20px;
  padding: 0.5rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.save-changes-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #45a049, #388e3c);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.save-changes-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Action Buttons Container */
.add-product-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: -2rem 0 0.5rem 0;
  justify-content: center;
  align-items: center;
}

/* Button Row for Update and Cancel - Vertically Stacked */
.add-product-button-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

/* Size Selection Buttons */
.size-selection-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.size-selection-btn {
  background: #8d6e63;
  color: #ffffff;
  border: 3px solid #5d4037;
  border-radius: 25px;
  padding: 0.6rem 1.2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 60px;
}

.size-selection-btn:hover:not(:disabled) {
  background: #5d4037;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.size-selection-btn.active {
  background: #14545c;
  border-color: #0d353a;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(20, 84, 92, 0.3);
}

.size-selection-btn.active:hover {
  background: #0d353a;
  border-color: #0a1a1d;
}

.size-selection-btn:disabled {
  background: #cccccc;
  border-color: #999999;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

/* Recipe Button - Purple */
.add-product-recipe-btn {
  background: #9333ea;
  color: #ffffff;
  border: 3px solid #6b21a8;
  border-radius: 9999px;
  padding: 0.8rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.add-product-recipe-btn:hover:not(:disabled) {
  background: #a855f7;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.add-product-recipe-btn:disabled {
  background: #cccccc;
  border-color: #999999;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Recipe Pending State - Green with checkmark */
.add-product-recipe-btn.recipe-pending {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #047857;
  color: #ffffff;
  font-weight: 900;
  animation: recipe-pending-pulse 2s ease-in-out infinite;
}

.add-product-recipe-btn.recipe-pending:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 185, 129, 0.4);
}

@keyframes recipe-pending-pulse {
  0%, 100% {
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
  }
  50% {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.6);
  }
}

/* Recipe Summary Styles */
.recipe-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.5rem 0;
  border-bottom: 2px solid rgba(141, 110, 99, 0.2);
}

.recipe-summary-header h4 {
  margin: 0;
  color: #5d4037;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: bold;
}

.recipe-status-badge {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

/* Simple Ingredient List - border matches recipe-cost-breakdown-compact */
.recipe-ingredients-list {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #8d6e63;
  border-radius: 12px;
  padding: 0;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(93, 64, 55, 0.1);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.recipe-ingredient-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
  font-family: Verdana, sans-serif;
  gap: 0.1rem;
  line-height: 1.2;
  transition: background-color 0.2s ease;
  margin: 0;
  background: transparent;
}

.recipe-ingredient-item:last-child {
  border-bottom: none;
}

/* Recipe Table - matching Recipe Cost Breakdown format */
.recipe-table-compact {
  border-collapse: collapse;
  margin: 0;
  max-width: 100%;
  width: 100%;
}

.recipe-table-header-compact {
  display: flex;
  background: rgba(20, 84, 92, 0.1);
  border-bottom: 2px solid rgba(20, 84, 92, 0.3);
  font-weight: bold;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  padding: 0.5rem 0.5rem;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

.recipe-table-row-compact {
  display: flex;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
  transition: background-color 0.2s ease;
  padding: 0.5rem 0.5rem;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

.recipe-table-row-compact:hover {
  background: rgba(141, 110, 99, 0.05);
}

.recipe-table-row-compact:last-child {
  border-bottom: none;
}

.recipe-table-cell-compact {
  flex: 1;
  padding: 0.5rem 0.5rem;
  text-align: center;
  font-size: 1.3rem;
  color: #3e2723;
  min-width: 0;
  font-family: 'The Wanters DEMO', serif;
}

.recipe-table-cell-compact:first-child {
  flex: 1.5;
  padding-right: 0.5rem;
  font-weight: 600;
  text-transform: capitalize;
  text-align: center;
}

.recipe-table-cell-compact:nth-child(2) {
  flex: 1.2;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.recipe-table-cell-compact:nth-child(3),
.recipe-table-cell-compact:nth-child(4) {
  flex: 0.9;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.recipe-table-cell-compact:not(:first-child) {
  text-align: center;
  font-weight: bold;
}

/* Color-coded rows matching Recipe Cost Breakdown */
.recipe-ingredient-row-compact {
  background: rgba(33, 150, 243, 0.1); /* Blue background for ingredients */
  margin-bottom: 0;
}

.recipe-ingredient-row-compact:hover {
  background: rgba(33, 150, 243, 0.15);
}

.recipe-packaging-row-compact {
  background: rgba(76, 175, 80, 0.1); /* Green background for packaging */
  margin-bottom: 0;
}

.recipe-packaging-row-compact:hover {
  background: rgba(76, 175, 80, 0.15);
}

.recipe-appliance-row-compact {
  background: rgba(111, 66, 193, 0.1); /* Purple background for appliances */
  margin-bottom: 0;
}

.recipe-appliance-row-compact:hover {
  background: rgba(111, 66, 193, 0.15);
}

/* Cost colors matching Recipe Cost Breakdown */
.recipe-table-cell-compact.ingredient-cost-compact {
  color: #2196f3; /* Blue - matches ingredients */
  font-size: 1.3rem;
  font-weight: bold;
}

.recipe-table-cell-compact.packaging-cost-compact {
  color: #4caf50; /* Green - matches packaging */
  font-size: 1.3rem;
  font-weight: bold;
}

.recipe-table-cell-compact.electricity-cost-compact {
  color: #6f42c1; /* Purple - matches appliances */
  font-size: 1.3rem;
  font-weight: bold;
}

/* Summary row value colors in merged recipe table (Per item / Per batch) */
.recipe-table-cell-compact.total-cost-compact {
  color: #f44336;
  font-size: 1.3rem;
  font-weight: bold;
}
.recipe-table-cell-compact.product-value-compact {
  color: #2196f3;
  font-size: 1.3rem;
  font-weight: bold;
}
.recipe-table-cell-compact.profit-amount-compact {
  color: #4caf50;
  font-size: 1.3rem;
  font-weight: bold;
}
.recipe-table-cell-compact.profit-margin-compact {
  color: #6f42c1;
  font-size: 1.3rem;
  font-weight: bold;
}
.recipe-table-cell-compact.wasted-cost-compact {
  color: #ff9800;
  font-size: 1.3rem;
  font-weight: bold;
}
.recipe-table-cell-compact.wasted-amount-compact {
  color: #ff9800;
  font-size: 1.1rem;
  font-weight: 600;
}

.ingredient-name-container {
  display: flex;
  align-items: center;
  gap: 0.02rem;
  flex-shrink: 0;
  justify-content: flex-start;
}

.ingredient-name {
  font-weight: 600;
  color: #5d4037;
  font-size: 0.95rem;
  font-family: Verdana, sans-serif;
  transition: none;
}

.ingredient-name:hover {
  color: #5d4037;
  transform: none;
}

/* Category dots */
.category-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ingredient-dot {
  background-color: #1976d2; /* Blue for ingredients */
}

.packaging-dot {
  background-color: #2e7d32; /* Green for packaging */
}

.appliance-dot {
  background-color: #6f42c1; /* Purple for appliances */
}

.ingredient-amount-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  flex-shrink: 0;
  margin-left: auto;
}

.ingredient-amount {
  color: #8d6e63;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: Verdana, sans-serif;
  white-space: nowrap;
}

.ingredient-cost {
  color: #000000;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
}

/* Color-themed cost styling */
.ingredient-cost-color {
  color: #1976d2; /* Blue for ingredients */
}

.packaging-cost-color {
  color: #2e7d32; /* Green for packaging */
}

.appliance-cost-color {
  color: #6f42c1; /* Purple for appliances */
}

.no-ingredients {
  text-align: center !important;
  color: #8d6e63;
  font-style: italic;
  padding: 1rem;
}

.recipe-total-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 0;
  border-top: 2px solid rgba(141, 110, 99, 0.3);
  margin-top: 0.5rem;
  font-weight: bold;
  gap: 0.75rem;
}

.total-label {
  color: #5d4037;
  font-size: 1rem;
  text-align: right;
  min-width: 120px;
}

.total-amount {
  color: #2e7d32;
  font-size: 1.1rem;
  text-align: left;
  min-width: 100px;
}

/* Cost per unit item styling */
.cost-per-unit-item .total-amount {
  color: #5d4037;
  font-weight: 600;
}

/* Cost item styling */
.cost-item .total-amount {
  color: #d32f2f;
}

/* Profit item styling */
.profit-item .total-amount {
  color: #2e7d32;
}

/* Product item styling */
.product-item .total-amount {
  color: #1976d2;
}

/* Recipe divider styling */
.recipe-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #8d6e63, transparent);
  margin: 1rem 0;
  border: none;
}

/* Recipe section divider - bolder divider between ingredients, packaging, and appliances */
.recipe-section-divider {
  height: 2px;
  background: linear-gradient(to right, transparent, #8d6e63, transparent);
  margin: 0.25rem 0;
  border: none;
  opacity: 0.6;
}

/* Recipe title row */
.recipe-title-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 2px solid rgba(141, 110, 99, 0.3);
  margin-bottom: 0.25rem;
  font-weight: bold;
  font-size: 1.1rem;
  color: #5d4037;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
  gap: 0.1rem;
}

.recipe-product-name {
  font-size: 1.4rem;
  font-weight: bold;
  color: #5d4037;
  font-family: 'The Wanters DEMO', serif;
}

/* Recipe title header - styled like Recipe Cost Breakdown */
.recipe-title-header-compact {
  background: linear-gradient(135deg, #14545c, #0a1a1d);
  padding: 0.5rem 1rem;
  text-align: center;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recipe-product-name-compact {
  color: #ffffff;
  font-size: 2rem;
  font-weight: bold;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
}

/* Recipe totals section - closer spacing */
.recipe-totals-section {
  margin-top: 0.5rem;
}

.recipe-totals-section .recipe-total-item {
  margin-top: 0.25rem;
  padding: 0.5rem 0;
}

.recipe-actions {
  margin-top: 1rem;
  text-align: center !important;
}

.edit-recipe-btn {
  background: linear-gradient(135deg, #8e44ad, #9b59b6);
  color: white;
  border: 2px solid #7d3c98;
  border-radius: 25px;
  padding: 0.6rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.edit-recipe-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #9b59b6, #8e44ad);
  border-color: #6c3483;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(142, 68, 173, 0.4);
}

.edit-recipe-btn:disabled {
  background: #cccccc;
  border-color: #999999;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Recipe Loading State */
.recipe-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(141, 110, 99, 0.3);
  border-radius: 8px;
  margin-bottom: 1rem;
}

.recipe-loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(141, 110, 99, 0.2);
  border-top: 4px solid #8d6e63;
  border-radius: 50%;
  animation: recipe-loading-spin 1s linear infinite;
  margin-bottom: 1rem;
}

.recipe-loading-text {
  color: #5d4037;
  font-family: 'The Wanters DEMO', serif;
  font-weight: bold;
  font-size: 1rem;
}

@keyframes recipe-loading-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

/* Nutrition Button - Orange */
.add-product-nutrition-btn {
  background: #ea580c;
  color: #ffffff;
  border: 3px solid #c2410c;
  border-radius: 9999px;
  padding: 0.8rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.add-product-nutrition-btn:hover:not(:disabled) {
  background: #c2410c;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.add-product-nutrition-btn:disabled {
  background: #cccccc;
  border-color: #999999;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Allergens Button - Red */
.add-product-allergens-btn {
  background: #dc2626;
  color: #ffffff;
  border: 3px solid #b91c1c;
  border-radius: 9999px;
  padding: 0.8rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.add-product-allergens-btn:hover:not(:disabled) {
  background: #b91c1c;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.add-product-allergens-btn:disabled {
  background: #cccccc;
  border-color: #999999;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Achievements Button - Green (Inactive) */
.add-product-achievements-btn {
  background: #27ae60;
  color: #ffffff;
  border: 3px solid #1e8449;
  border-radius: 9999px;
  padding: 0.8rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
  font-size: 1rem;
  cursor: not-allowed;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  opacity: 0.6;
}

/* Active tab state for action buttons */
.add-product-recipe-btn.active-tab,
.add-product-nutrition-btn.active-tab,
.add-product-allergens-btn.active-tab {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  border-width: 4px;
}

/* General Error Message in Footer */
.add-product-general-error-footer {
  color: #ff4444;
  font-size: 0.95rem;
  text-align: center !important;
  margin-bottom: 0.5rem;
  padding: 0.8rem;
  background-color: #ffebee;
  border: 1px solid #ffcdd2;
  border-radius: 8px;
  width: 100%;
  max-width: 400px;
  font-weight: 600;
}

/* Modal Footer */
.add-product-modal-footer {
  background: #8d6e63;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0 0 12px 12px;
}

.add-product-cancel-btn {
  background: #dc2626;
  color: #ffffff;
  border: 3px solid #b91c1c;
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-product-cancel-btn:hover {
  background: #b91c1c;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.add-product-delete-btn {
  background: linear-gradient(135deg, #b71c1c, #8b0000);
  color: white;
  border: none;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'The Wanters DEMO', serif;
  margin-left: 0.5rem;
}

.add-product-delete-btn:hover {
  background: linear-gradient(135deg, #8b0000, #660000);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 0, 0, 0.4);
}

.add-product-delete-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.add-product-save-btn {
  background: #2e7d32;
  color: #ffffff;
  border: 3px solid #1b5e20;
  border-radius: 9999px;
  padding: 0.75rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-product-save-btn:hover:not(:disabled) {
  background: #1b5e20;
  border-color: #0d4a12;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(27, 94, 32, 0.4);
}

.add-product-save-btn:disabled {
  background: #cccccc;
  border-color: #999999;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Dark Mode Styles */
.dark-mode .add-product-modal {
  background: #1a1a1a;
  border-color: #8d6e63;
  color: #fff8e1;
}

.dark-mode .add-product-label {
  color: #a1887f;
}

.dark-mode .add-product-input {
  background: #2d2d2d;
  border-color: #8d6e63;
  color: #fff8e1;
  font-family: 'Verdana', sans-serif;
}

.dark-mode .add-product-input:focus {
  background: #3d3d3d;
  border-color: #a1887f;
}

.dark-mode .add-product-input::placeholder {
  color: #8d6e63;
}

.dark-mode .add-product-input.error {
  background: #3d1a1a;
  border-color: #d32f2f;
}

.dark-mode .allergen-title {
  color: #a1887f;
}

/* Dream Mode Styles */
.dream-mode .add-product-modal {
  background: linear-gradient(145deg, #e8f5e8 0%, #f0f4ff 100%);
  border-color: #8d6e63;
}

.dream-mode .add-product-modal-header {
  background: linear-gradient(135deg, #8d6e63 0%, #5d4037 100%);
}

.dream-mode .add-product-modal-footer {
  background: linear-gradient(135deg, #8d6e63 0%, #5d4037 100%);
}

.dream-mode .add-product-label {
  color: #3e2723;
}

.dream-mode .add-product-input {
  background: rgba(255, 255, 255, 0.9);
  border-color: #8d6e63;
  font-family: 'Verdana', sans-serif;
}

.dream-mode .add-product-input:focus {
  background: rgba(255, 255, 255, 1);
  border-color: #5d4037;
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.3);
}

/* Custom styles for AddItemModal improvements */
.add-product-description-textarea {
  resize: none !important;
  min-height: 100px;
  max-height: 120px;
  overflow-y: auto;
  font-family: 'Verdana', sans-serif;
  line-height: 1.4;
}

.add-product-description-input {
  max-width: 300px !important;
  width: 100% !important;
}

.add-product-category-select {
  background: #ffffff;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d6e63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  font-family: 'Verdana', sans-serif;
  font-weight: 500;
}

.add-product-category-select:focus {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d4037' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  border-color: #5d4037;
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.2);
}

.add-product-category-select option {
  background: #ffffff;
  color: #5d4037;
  padding: 8px 12px;
  font-family: 'Verdana', sans-serif;
  font-weight: 500;
}

.add-product-category-select option:hover {
  background: #f5f5dc;
  color: #8d6e63;
}

.add-product-category-select option:checked {
  background: #8d6e63;
  color: #ffffff;
  font-weight: 600;
}

/* Dark mode styles for custom elements */
.dark-mode .add-product-category-select {
  background-color: #2d2d2d;
  color: #fff8e1;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1887f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

.dark-mode .add-product-category-select:focus {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1887f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  border-color: #a1887f;
}

.dark-mode .add-product-category-select option {
  background: #2d2d2d;
  color: #fff8e1;
}

.dark-mode .add-product-category-select option:hover {
  background: #3d3d3d;
  color: #a1887f;
}

.dark-mode .add-product-category-select option:checked {
  background: #8d6e63;
  color: #ffffff;
}

/* Dream mode styles for custom elements */
.dream-mode .add-product-category-select {
  background: rgba(255, 255, 255, 0.9);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d6e63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

.dream-mode .add-product-category-select:focus {
  background: rgba(255, 255, 255, 1);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d4037' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  border-color: #5d4037;
}

.dream-mode .add-product-category-select option {
  background: rgba(255, 255, 255, 0.95);
  color: #5d4037;
}

.dream-mode .add-product-category-select option:hover {
  background: #f5f5dc;
  color: #8d6e63;
}

.dream-mode .add-product-category-select option:checked {
  background: #8d6e63;
  color: #ffffff;
}

/* Responsive Design */
@media (max-width: 768px) {
  .add-product-modal {
    min-width: 90vw;
    max-width: 95vw;
    margin: 0;
  }
  
  .add-product-form-row {
    flex-direction: column;
    gap: 1rem;
  }
  
  .add-product-size-row {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
  
  .add-product-size-row .add-product-form-field {
    max-width: 200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .add-product-remove-size-btn {
    position: static;
    transform: none;
    align-self: center;
    margin-top: 0.5rem;
    width: 20px;
    height: 20px;
    font-size: 0.9rem;
  }
  
  .add-product-type-selection {
    flex-direction: column;
    align-items: center;
  }
  
  .add-product-type-btn {
    width: 100%;
    max-width: 200px;
  }
  
  .add-product-allergens-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .add-product-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .add-product-recipe-btn,
  .add-product-achievements-btn {
    width: 100%;
    max-width: 250px;
  }
  
  /* Ensure consistent input field widths on mobile */
  .add-product-input {
    max-width: 200px !important;
    width: 100% !important;
  }
  
  .add-product-name-input {
    max-width: 300px !important;
  }
  
  .add-product-description-input {
    max-width: 300px !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .add-product-modal-body {
    padding: 1rem;
  }
  
  .add-product-size-row .add-product-form-field {
    max-width: 180px;
  }
  
  .add-product-modal-footer {
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
  }
  
  .add-product-cancel-btn,
  .add-product-save-btn {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
  }
  
  /* Mobile button layout - stack vertically */
  .add-product-actions {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .add-product-button-row {
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }
  
  .add-product-button-row button {
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
  }
  
  .add-product-delete-btn {
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
  }
  
  .add-product-allergens-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  
  /* Ensure perfect alignment on very small screens */
  .add-product-input {
    max-width: 180px !important;
    width: 100% !important;
  }
  
  .add-product-name-input {
    max-width: 300px !important;
  }
  
  .add-product-description-input {
    max-width: 300px !important;
    width: 100% !important;
  }
}

/* Additional responsive breakpoints for better alignment */
@media (min-width: 769px) and (max-width: 1024px) {
  .add-product-input {
    max-width: 200px !important;
    width: 100% !important;
  }
  
  .add-product-name-input {
    max-width: 300px !important;
  }
  
  .add-product-description-input {
    max-width: 300px !important;
    width: 100% !important;
  }
}

@media (min-width: 1025px) {
  .add-product-input {
    max-width: 200px !important;
    width: 100% !important;
  }
  
  .add-product-name-input {
    max-width: 300px !important;
  }
  
  .add-product-description-input {
    max-width: 300px !important;
    width: 100% !important;
  }
}

/* Allergen Confirmation Modal */
.allergen-confirm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10001;
  backdrop-filter: blur(4px);
}

.allergen-confirm-modal {
  background: #f5f5dc;
  border: 3px solid #8d6e63;
  border-radius: 15px;
  padding: 2rem;
  max-width: 450px;
  width: 90%;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(139, 110, 99, 0.2),
    0 0 0 2px rgba(255, 255, 255, 0.1);
  font-family: 'The Wanters DEMO', serif;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.allergen-confirm-message {
  font-size: 1.2rem;
  color: #5d4037;
  text-align: center;
  font-weight: 500;
  line-height: 1.5;
}

.allergen-confirm-bold {
  font-weight: bold;
  font-size: 1.35rem;
}

.allergen-confirm-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  align-items: center;
}

.allergen-confirm-btn {
  padding: 0.75rem 2rem;
  border-radius: 25px;
  border: 2px solid #8d6e63;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 300px;
  text-align: center;
}

.allergen-cancel-btn {
  background: #a31b00;
  color: #ffffff;
  border-color: #a31b00;
}

.allergen-cancel-btn:hover {
  background: #8b1500;
  border-color: #8b1500;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.allergen-confirm-btn:not(.allergen-cancel-btn) {
  background: #2e7d32;
  color: #fff;
  border-color: #2e7d32;
}

.allergen-confirm-btn:not(.allergen-cancel-btn):hover {
  background: #1b5e20;
  border-color: #1b5e20;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Compact Recipe Cost Breakdown - matches IngredientsSelectionModal but smaller */
.recipe-cost-breakdown-compact {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #8d6e63;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(93, 64, 55, 0.1);
  margin-top: 0.5rem;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
}

/* Flush header to top when in cook-size panel (matches IngredientsSelectionModal) */
.cook-size-breakdown-panel .recipe-cost-breakdown-compact {
  padding-top: 0;
}

.recipe-cost-breakdown-header-compact {
  background: linear-gradient(135deg, #14545c, #0a1a1d);
  padding: 0.5rem 1rem;
  text-align: center;
  border-radius: 10px 10px 0 0;
  border-bottom: 2px solid #8d6e63;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recipe-cost-breakdown-title-compact {
  color: #ffffff;
  font-size: 2rem;
  font-weight: bold;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
}

/* Add Product modal: section titles match Allergen/Nutrition (1.5rem) */
.add-product-modal .recipe-title-header-compact .recipe-product-name-compact {
  font-size: 1.5rem !important;
  text-align: center !important;
}
.add-product-modal .recipe-cost-breakdown-header-compact .recipe-cost-breakdown-title-compact {
  font-size: 1.5rem !important;
  text-align: center !important;
}

/* Minimal vertical padding to remove white gap between header and table */
.recipe-cost-breakdown-toggle-container-compact {
  padding: 0.2rem 1rem;
  text-align: center;
  background: rgba(20, 84, 92, 0.05);
  border-bottom: 1px solid rgba(20, 84, 92, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.recipe-cost-breakdown-toggle-btn-compact {
  background: linear-gradient(135deg, #14545c, #0a1a1d);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.1rem;
  font-weight: bold;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-family: 'The Wanters DEMO', serif;
}

.recipe-cost-breakdown-toggle-btn-compact:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(20, 84, 92, 0.4);
  border-color: rgba(255, 255, 255, 0.4);
}

.recipe-cost-breakdown-toggle-btn-compact:active {
  transform: translateY(0);
}

.recipe-cost-breakdown-toggle-btn-compact.detailed {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border-color: #0a1a1d;
  box-shadow: 0 2px 4px rgba(20, 84, 92, 0.3);
}

.recipe-cost-breakdown-toggle-btn-compact.detailed:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.25);
}

.recipe-cost-breakdown-toggle-btn-compact.simple {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border-color: #004d06;
  box-shadow: 0 2px 4px rgba(0, 119, 10, 0.3);
}

.recipe-cost-breakdown-toggle-btn-compact.simple:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.25);
}

/* Compact Simple/Detailed toggle switch (matches IngredientsSelectionModal / theme switch style) */
.recipe-cost-breakdown-view-switch-compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.recipe-cost-breakdown-view-switch-compact:focus-visible {
  outline: 2px solid #14545c;
  outline-offset: 2px;
  border-radius: 8px;
}

.recipe-cost-breakdown-switch-label-single-compact {
  width: 80px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
}

/* Match recipe creation (IngredientsSelectionModal) track and thumb exactly */
.recipe-cost-breakdown-switch-track-compact {
  position: relative;
  height: 36px;
  width: 80px;
  background: #e0e0e0;
  border-radius: 18px;
  border: 2px solid #ccc;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.recipe-cost-breakdown-switch-track-compact:hover {
  background: #d5d5d5;
  border-color: #aaa;
}

.recipe-cost-breakdown-switch-thumb-compact {
  position: absolute;
  top: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.recipe-cost-breakdown-switch-thumb-compact.simple-position {
  left: 2px;
  background: linear-gradient(135deg, #14545c, #0a1a1d);
}

.recipe-cost-breakdown-switch-thumb-compact.detailed-position {
  left: 46px;
  background: linear-gradient(135deg, #6f42c1, #5a32a5);
}

/* Active/Inactive (red-green) toggle – same track/thumb structure as compact switch */
.active-inactive-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.active-inactive-switch:focus-visible {
  outline: 2px solid #14545c;
  outline-offset: 2px;
  border-radius: 10px;
}
.active-inactive-track {
  position: relative;
  height: 36px;
  width: 80px;
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: inherit;
  border: 2px solid transparent;
}
.active-inactive-track-on {
  background: linear-gradient(135deg, #4caf50, #45a049);
  border-color: #388e3c;
}
.active-inactive-track-on:hover {
  background: linear-gradient(135deg, #5bc95f, #45a049);
  border-color: #2e7d32;
}
.active-inactive-track-off {
  background: linear-gradient(135deg, #d32f2f, #b71c1c);
  border-color: #b71c1c;
}
.active-inactive-track-off:hover {
  background: linear-gradient(135deg, #e53935, #b71c1c);
  border-color: #8e0000;
}
.active-inactive-track .recipe-cost-breakdown-switch-thumb-compact {
  background: linear-gradient(135deg, #fafafa, #eee) !important;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.recipe-cost-breakdown-content-wrapper-compact {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.recipe-cost-breakdown-content-compact {
  padding: 0;
  animation: slideUpCompact 0.3s ease-out forwards;
  transform-origin: top;
  overflow-x: visible;
  width: 100%;
  max-width: 100%;
}

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

.recipe-cost-breakdown-table-compact {
  border-collapse: collapse;
  margin: 0;
  max-width: 100%;
  width: 100%;
}

.recipe-cost-breakdown-table-header-compact {
  display: flex !important;
  background: rgba(20, 84, 92, 0.1);
  border-bottom: 2px solid rgba(20, 84, 92, 0.3);
  font-weight: bold;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  padding: 0.5rem 0.5rem;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  grid-template-columns: none !important; /* Override any grid rules from other CSS files */
}

.recipe-cost-breakdown-table-header-compact .recipe-cost-breakdown-table-cell-compact {
  text-align: center !important;
}

.recipe-cost-breakdown-table-row-compact {
  display: flex !important;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
  transition: background-color 0.2s ease;
  padding: 0.5rem 0.5rem;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  animation: rowFadeInCompact 0.2s ease-out forwards;
  grid-template-columns: none !important; /* Override any grid rules from other CSS files */
}

@keyframes rowFadeInCompact {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.recipe-cost-breakdown-table-row-compact:hover {
  background: rgba(141, 110, 99, 0.05);
}

.recipe-cost-breakdown-table-row-compact:last-child {
  border-bottom: none;
}

.recipe-cost-breakdown-table-cell-compact {
  flex: 1;
  padding: 0.5rem 0.5rem;
  text-align: center !important;
  font-size: 1.3rem;
  color: #3e2723;
  min-width: 0;
  font-family: 'The Wanters DEMO', serif;
}

.recipe-cost-breakdown-table-cell-compact:first-child {
  flex: 1.5;
  padding-right: 0.5rem;
  font-weight: 600;
  text-transform: capitalize;
  text-align: center !important;
}

.recipe-cost-breakdown-table-cell-compact:nth-child(2),
.recipe-cost-breakdown-table-cell-compact:nth-child(3) {
  flex: 1;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Hide any 4th column that might appear */
.recipe-cost-breakdown-table-header-compact .recipe-cost-breakdown-table-cell-compact:nth-child(4),
.recipe-cost-breakdown-table-row-compact .recipe-cost-breakdown-table-cell-compact:nth-child(4) {
  display: none;
}

.recipe-cost-breakdown-table-cell-compact:not(:first-child) {
  text-align: center !important;
  font-weight: bold;
}

/* Special row styling – 1px top so Products made and Total cost share same section line weight */
.recipe-cost-breakdown-total-row-compact {
  background: rgba(141, 110, 99, 0.1);
  border-top: 1px solid rgba(141, 110, 99, 0.3);
  font-weight: bold;
}

/* Products made: first row of totals section – grey like table header, distinct from Total cost */
.recipe-products-made-row-compact {
  background: rgba(0, 0, 0, 0.06);
  border-top: 2px solid rgba(141, 110, 99, 0.35);
}

.recipe-products-made-amount-cell {
  color: #3e2723;
}

.recipe-products-made-amount-cell .products-made-amount-prefix {
  font-size: 1rem;
  margin-right: 0.15em;
}

.recipe-products-made-amount-cell .products-made-amount-number {
  font-size: 1.15rem;
  font-weight: 700;
}

/* Products made row: dollar amounts dark brown to match labels */
.recipe-products-made-row-compact .recipe-table-cell-compact.product-value-compact {
  color: #3e2723;
}

.recipe-cost-breakdown-value-row-compact {
  background: rgba(33, 150, 243, 0.1);
  border-top: 1px solid rgba(33, 150, 243, 0.3);
}

.recipe-cost-breakdown-profit-row-compact {
  background: rgba(76, 175, 80, 0.1);
  border-top: 1px solid rgba(76, 175, 80, 0.3);
}

.recipe-cost-breakdown-margin-row-compact {
  background: rgba(111, 66, 193, 0.1);
  border-top: 1px solid rgba(111, 66, 193, 0.3);
}

.recipe-cost-breakdown-wasted-row-compact {
  background: rgba(255, 152, 0, 0.1);
  border-top: 1px solid rgba(255, 152, 0, 0.3);
}

/* Value colors - matching IngredientsSelectionModal */
.recipe-cost-breakdown-table-cell-compact.ingredient-cost-compact {
  color: #2196f3; /* Blue - matches ingredients button */
  font-size: 1.3rem;
  font-weight: bold;
}

.recipe-cost-breakdown-table-cell-compact.packaging-cost-compact {
  color: #4caf50; /* Green - matches packaging button */
  font-size: 1.3rem;
  font-weight: bold;
}

.recipe-cost-breakdown-table-cell-compact.electricity-cost-compact {
  color: #6f42c1; /* Purple - matches appliances button */
  font-size: 1.3rem;
  font-weight: bold;
}

.recipe-cost-breakdown-table-cell-compact.total-cost-compact {
  color: #f44336; /* Red - matches cancel button */
  font-size: 1.3rem;
}

.recipe-cost-breakdown-table-cell-compact.product-value-compact {
  color: #2196f3; /* Blue for product value */
  font-size: 1.3rem;
}

.recipe-cost-breakdown-table-cell-compact.profit-amount-compact {
  color: #4caf50; /* Green for profit */
  font-size: 1.3rem;
}

.recipe-cost-breakdown-table-cell-compact.profit-margin-compact {
  color: #6f42c1; /* Purple for profit margin */
  font-size: 1.3rem;
}

.recipe-cost-breakdown-table-cell-compact.wasted-cost-compact {
  color: #ff9800; /* Orange for wasted cost */
  font-weight: bold;
  font-size: 1.3rem;
}

/* Enhanced orange for better visibility */
.recipe-cost-breakdown-wasted-row-compact .recipe-cost-breakdown-table-cell-compact.wasted-cost-compact {
  color: #f57c00; /* Darker orange for wasted cost */
}

/* AddProductModal: tables to panel edges (override BatchSection/CookPage, minimal padding) */
.add-product-modal .recipe-cost-breakdown-compact {
  padding: 0 !important;
}
.add-product-modal .recipe-cost-breakdown-content-wrapper-compact {
  padding: 0 !important;
}
.add-product-modal .recipe-cost-breakdown-content-compact {
  padding: 0 !important;
}
.add-product-modal .recipe-table-compact {
  padding: 0 !important;
}
.add-product-modal .recipe-cost-breakdown-table-header-compact {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}
.add-product-modal .recipe-cost-breakdown-table-row-compact {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}
.add-product-modal .recipe-cost-breakdown-table-cell-compact {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}
.add-product-modal .recipe-cost-breakdown-table-cell-compact:first-child {
  padding-right: 0.25rem !important;
}
.add-product-modal .recipe-cost-breakdown-table-cell-compact:nth-child(2),
.add-product-modal .recipe-cost-breakdown-table-cell-compact:nth-child(3) {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}
.add-product-modal .recipe-table-header-compact {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}
.add-product-modal .recipe-table-row-compact {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}
.add-product-modal .recipe-table-cell-compact {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}
.add-product-modal .recipe-table-cell-compact:first-child {
  padding-right: 0.25rem !important;
}
.add-product-modal .recipe-table-cell-compact:nth-child(2),
.add-product-modal .recipe-table-cell-compact:nth-child(3),
.add-product-modal .recipe-table-cell-compact:nth-child(4) {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

/* Recipe table in Add Product Modal: component names, amount, and header use brown instead of near-black */
.add-product-modal .recipe-ingredients-list .recipe-table-cell-compact:first-child,
.add-product-modal .recipe-ingredients-list .recipe-table-cell-compact:nth-child(2) {
  color: #5d4037;
}
.add-product-modal .recipe-ingredients-list .recipe-table-header-compact .recipe-table-cell-compact {
  color: #5d4037;
  font-weight: 700;
}
/* Add Pack Modal Styles */

.add-pack-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
  width: 100vw;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.add-pack-modal {
  background: #f5f5dc;
  border: 3px solid #8d6e63;
  border-radius: 15px;
  min-width: 600px;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(139, 110, 99, 0.2),
    0 0 0 2px rgba(255, 255, 255, 0.1);
  font-family: 'The Wanters DEMO', serif;
  position: relative;
  margin: 0;
  left: 0;
  right: 0;
}

/* Hide scrollbar but maintain scroll functionality */
.add-pack-modal::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.add-pack-modal-header {
  background: linear-gradient(135deg, #EB640A 0%, #C95409 100%);
  color: white;
  padding: 1.5rem 2rem;
  border-radius: 12px 12px 0 0;
  text-align: center;
  border-bottom: 3px solid #B84A08;
}

.add-pack-modal-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.add-pack-modal-body {
  padding: 2rem;
  min-height: 400px;
}

.add-pack-form-field {
  margin-bottom: 1.5rem;
}

.add-pack-label {
  display: block;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #5d4037;
  margin-bottom: 0.5rem;
  text-align: center;
}

.add-pack-cost-label {
  font-size: 1.5rem;
  font-weight: 800;
  color: #3e2723;
}

.add-pack-cost-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.add-pack-name-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.add-pack-name-input {
  width: 50% !important;
  max-width: 50%;
}

.add-pack-description-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.add-pack-description-input {
  width: 100%;
  max-width: 360px;
  padding: 0.75rem 1rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
  font-weight: bold;
  background: white;
  color: #5d4037;
  transition: all 0.2s ease;
  text-align: center;
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.add-pack-description-input:focus {
  outline: none;
  border-color: #EB640A;
  box-shadow: 0 0 0 3px rgba(235, 100, 10, 0.2);
}

.add-pack-description-input.error {
  border-color: #d32f2f;
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);
}

.add-pack-input,
.add-pack-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
  font-weight: bold;
  background: white;
  color: #5d4037;
  transition: all 0.2s ease;
  text-align: center;
}

/* Section Divider */
.add-pack-section-divider {
  border-top: 2px solid #d7ccc8;
  margin: 2rem 0;
  width: 100%;
}

/* Product Search Bar - within each panel */
.add-pack-product-search-field {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.add-pack-search-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.add-pack-search-input {
  width: 100%;
  max-width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #8d6e63;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.9);
  color: #3e2723;
  font-size: 1.1rem;
  font-weight: bold;
  transition: all 0.3s ease;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
}

.add-pack-search-input:focus {
  outline: none;
  border-color: #EB640A;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 3px rgba(235, 100, 10, 0.2);
}

.add-pack-search-input::placeholder {
  color: #8d6e63;
  font-style: normal;
}

.add-pack-search-input.error {
  border-color: #d32f2f;
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);
}

/* Selected Product Display - Teal panel with larger text */
.add-pack-selected-product-display {
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.6rem;
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border: 2px solid #0d353a;
  color: white;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 12px rgba(20, 84, 92, 0.3);
}

.add-pack-selected-product-name-text {
  display: block;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.add-pack-selected-product-display.product-type {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border-color: #0d353a;
  color: white;
}

.add-pack-selected-product-display.item-type {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border-color: #0d353a;
  color: white;
}

/* Product Name Dropdown - custom dropdown with styled options */
.add-pack-product-dropdown-container {
  position: relative;
}

.add-pack-product-dropdown-wrapper {
  position: relative;
  width: 100%;
}

.add-pack-product-select-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
  font-weight: bold;
  background: white;
  color: #5d4037;
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  position: relative;
}

.add-pack-product-text {
  flex: 1;
  text-align: center;
}

.add-pack-dropdown-arrow {
  flex-shrink: 0;
  width: 1.5rem;
  text-align: right;
}

.add-pack-product-select-btn:hover:not(:disabled) {
  border-color: #EB640A;
}

.add-pack-product-select-btn:focus {
  outline: none;
  border-color: #EB640A;
  box-shadow: 0 0 0 3px rgba(235, 100, 10, 0.2);
}

.add-pack-product-select-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.add-pack-product-select-btn.error {
  border-color: #d32f2f;
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);
}

.add-pack-dropdown-arrow {
  font-size: 0.8rem;
  color: #8d6e63;
  transition: transform 0.2s ease;
}

.add-pack-product-select-btn:hover .add-pack-dropdown-arrow {
  color: #EB640A;
}

/* Custom dropdown menu */
.add-pack-product-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 2px solid #8d6e63;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 8px;
}

/* Single pack search (metrics-style): 8px radius, show ~4 items with scroll */
.add-pack-search-single {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.add-pack-search-input-metrics {
  border-radius: 8px !important;
  padding: 0.35rem 0.5rem !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

.add-pack-search-input-metrics:focus {
  border-color: #8d6e63 !important;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.2) !important;
}

.add-pack-search-dropdown-metrics {
  border-radius: 0 0 8px 8px !important;
  border-top: none !important;
  margin-top: -6px !important;
  max-height: calc(4 * 2.5em) !important;
}

/* White panel housing the pack accordions */
.add-pack-accordion-panel {
  background: #fff;
  border: 2px solid #8d6e63;
  border-radius: 12px;
  padding: 1rem;
  margin-top: 1rem;
}

.add-pack-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Divider between products and items in the accordion panel */
.add-pack-accordion-divider {
  height: 0;
  border: none;
  border-top: 2px solid #8d6e63;
  margin: 0.5rem 0;
  flex-shrink: 0;
}
.add-pack-accordion-divider-label {
  display: block;
  font-family: 'The Wanters DEMO', serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #5d4037;
  margin: 0.75rem 0 0.5rem 0;
  padding-bottom: 0.25rem;
}

/* Left accent by type: product = purple, item = green */
/* Keep header in one row: remove button on the right of accordion text */
.add-pack-accordion-header {
  display: grid !important;
  grid-template-columns: auto 1fr auto auto !important;
  grid-template-rows: auto !important;
  gap: 0.5rem;
  align-items: center;
}
.add-pack-accordion-header .add-pack-accordion-title-cell {
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
  line-height: 1.3;
}

.add-pack-accordion-header.add-pack-accordion-product {
  border-left: 8px solid #6f42c1 !important;
}

.add-pack-accordion-header.add-pack-accordion-item {
  border-left: 8px solid #2e7d32 !important;
}

.add-pack-dropdown-item {
  display: flex;
  align-items: center;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  min-height: 50px;
}

.add-pack-dropdown-item:last-child {
  border-bottom: none;
}

.add-pack-dropdown-item-name {
  font-weight: 600;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
}

/* Color coding for different item types with accent tabs */
.add-pack-dropdown-item.product-item {
  border-left: 4px solid #6f42c1; /* Purple for products */
}

.add-pack-dropdown-item.item-item {
  border-left: 4px solid #10b981; /* Green for items */
}

.add-pack-dropdown-item.product-item:hover {
  background: rgba(111, 66, 193, 0.1);
}

.add-pack-dropdown-item.item-item:hover {
  background: rgba(16, 185, 129, 0.1);
}

.add-pack-dropdown-item.selected {
  background: rgba(235, 100, 10, 0.1);
}

/* Size dropdown styling with colored accents */
.add-pack-size-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235d4037' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.add-pack-size-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Style size options with colored accent (using optgroup or CSS) */
.add-pack-size-select option {
  padding: 0.75rem 1rem;
  border-left: 4px solid #EB640A;
}

.add-pack-size-select option:hover {
  background: rgba(235, 100, 10, 0.1);
}


.add-pack-price-input {
  width: calc(100% / 3);
  margin: 0 auto;
  text-align: center;
}

.add-pack-price-input::placeholder {
  text-align: center;
  color: #8d6e63;
}

.add-pack-count-input {
  width: 50%;
  max-width: 150px;
}

.add-pack-input:focus,
.add-pack-select:focus {
  outline: none;
  border-color: #EB640A;
  box-shadow: 0 0 0 3px rgba(235, 100, 10, 0.2);
}

.add-pack-input.error,
.add-pack-select.error {
  border-color: #d32f2f;
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);
}

.add-pack-error {
  display: block;
  color: #d32f2f;
  font-size: 0.9rem;
  margin-top: 0.25rem;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
}

.add-pack-general-error {
  background: #ffebee;
  color: #d32f2f;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  border: 2px solid #ffcdd2;
}

/* Pack Size Section */
.pack-size-section {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pack-size-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #f0f0f0;
}

.pack-size-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #5d4037;
  margin: 0;
}

/* Count field with centered label */
.add-pack-count-field {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.add-pack-count-label {
  text-align: center;
}

.add-pack-count-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  justify-content: center;
}

/* Accordion header: 32×32 circular remove button (matches IngredientsSelectionModal) */
.add-pack-accordion-header .add-pack-accordion-remove-btn.remove-item-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #b71c1c;
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(211, 47, 47, 0.3);
  flex-shrink: 0;
}
.add-pack-accordion-header .add-pack-accordion-remove-btn.remove-item-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b71c1c 0%, #9a1616 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(211, 47, 47, 0.4);
}
.add-pack-accordion-header .remove-item-btn-icon {
  font-size: 1.25rem;
  line-height: 1;
  color: #fff;
}

/* Expanded body: line cost / pack price / profit */
.add-pack-line-info {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: rgba(141, 110, 99, 0.08);
  border-radius: 8px;
  font-family: 'The Wanters DEMO', serif;
}
.add-pack-line-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  font-size: 0.95rem;
}
.add-pack-line-info-label {
  color: #5d4037;
  font-weight: 600;
}
.add-pack-line-info-value {
  font-weight: 700;
  color: #3e2723;
}
.add-pack-profit-positive {
  color: #2e7d32;
}
.add-pack-profit-negative {
  color: #c62828;
}

/* Pack summary above accordion list (total value, proposed price, profit %) */
.add-pack-summary {
  margin-bottom: 1rem;
  padding: 1rem 1rem 1rem calc(8px + 1rem);
  background: rgba(141, 110, 99, 0.08);
  border-radius: 8px;
  border: 2px solid #5d4037;
  font-family: 'The Wanters DEMO', serif;
}
.add-pack-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
  font-size: 1rem;
}
.add-pack-summary-label {
  color: #5d4037;
  font-weight: 600;
}
.add-pack-summary-value {
  font-weight: 700;
  color: #3e2723;
}

.remove-pack-size-btn {
  background: #d32f2f;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.remove-pack-size-btn:hover:not(:disabled) {
  background: #b71c1c;
  transform: translateY(-1px);
}

.remove-pack-size-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.pack-size-fields {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Product search half width at top */
.add-pack-product-search-halfwidth {
  width: 100%;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.add-pack-product-search-halfwidth .add-pack-search-wrapper {
  width: 50%;
  max-width: 300px;
}

/* Divider in panel */
.add-pack-panel-divider {
  border-top: 1px solid #e0e0e0;
  margin: 1rem 0;
  width: 100%;
}

/* Size buttons container - pill-shaped buttons */
.add-pack-size-buttons-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
}

.add-pack-size-buttons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 50px;
}

.add-pack-no-sizes-message {
  padding: 0.75rem 1rem;
  color: #8d6e63;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
}

.add-pack-sizes-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  width: 100%;
}

.add-pack-size-button {
  padding: 0.6rem 1.2rem;
  border: 3px solid #5d4037;
  border-radius: 25px;
  background: #8d6e63;
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-width: 60px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.add-pack-size-button:hover:not(:disabled) {
  background: #5d4037;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.add-pack-size-button.selected {
  background: #14545c;
  border-color: #0d353a;
  color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.add-pack-size-button.selected:hover:not(:disabled) {
  background: #0d353a;
  border-color: #0d353a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}

.add-pack-size-button:not(.selected):not(:hover) {
  opacity: 1;
}

.add-pack-size-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.add-pack-size-button.error {
  border-color: #d32f2f;
}

/* Count field - centered below size, narrower */
.add-pack-count-center {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.add-pack-count-center .add-pack-count-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.add-pack-count-narrow {
  width: 100px !important;
  max-width: 100px;
}

/* Actions */
.add-pack-actions {
  display: flex;
  justify-content: center;
  margin: 2rem 0 0.15rem 0;
}

.add-pack-size-btn {
  background: linear-gradient(135deg, #EB640A 0%, #C95409 100%);
  color: white;
  border: 2px solid #B84A08;
  border-radius: 25px;
  padding: 0.75rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(235, 100, 10, 0.3);
  text-align: center;
}

.add-pack-size-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #C95409 0%, #EB640A 100%);
  border-color: #B84A08;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(235, 100, 10, 0.4);
}

.add-pack-size-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Divider Line */
.add-pack-divider {
  border-top: 2px solid #d7ccc8;
  margin: 0.15rem auto;
  width: 80%;
  display: block;
}

/* Modal Footer */
.add-pack-modal-footer {
  background: #8d6e63;
  padding: 1.5rem 2rem;
  border-radius: 0 0 12px 12px;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.add-pack-save-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  color: white;
  border: 2px solid #004d06;
  border-radius: 25px;
  padding: 0.75rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 119, 10, 0.3);
  text-align: center;
}

.add-pack-save-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 119, 10, 0.4);
}

.add-pack-save-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.add-pack-cancel-btn {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
  color: white;
  border: 2px solid #b71c1c;
  border-radius: 25px;
  padding: 0.75rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
  text-align: center;
}

.add-pack-cancel-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #d32f2f 0%, #f44336 100%);
  border-color: #b71c1c;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(244, 67, 54, 0.4);
}

.add-pack-cancel-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .add-pack-modal {
    min-width: 90vw;
    max-width: 95vw;
    margin: 1rem;
  }
  
  .pack-size-fields {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .add-pack-modal-footer {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .add-pack-save-btn,
  .add-pack-cancel-btn {
    width: 100%;
  }
}

/* Pack Savings Breakdown Styles */
.add-pack-savings-breakdown {
  margin: 1.5rem 0;
  background: rgba(245, 245, 220, 0.5);
  border: 2px solid #8d6e63;
  border-radius: 8px;
  padding: 1rem;
}

.add-pack-savings-header {
  margin-bottom: 1rem;
  text-align: center;
}

.add-pack-savings-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #3e2723;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.add-pack-savings-table {
  width: 100%;
  overflow-x: auto;
}

.add-pack-savings-table-header {
  display: flex;
  background: rgba(141, 110, 99, 0.2);
  border-bottom: 2px solid #8d6e63;
  font-weight: bold;
  padding: 0.75rem 0.5rem;
  gap: 0.5rem;
}

.add-pack-savings-table-row {
  display: flex;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
  padding: 0.75rem 0.5rem;
  gap: 0.5rem;
  transition: background-color 0.2s ease;
}

.add-pack-savings-table-row:hover {
  background: rgba(141, 110, 99, 0.05);
}

.add-pack-savings-table-row:last-child {
  border-bottom: none;
}

.add-pack-savings-total-row {
  background: rgba(141, 110, 99, 0.15);
  border-top: 2px solid #8d6e63;
  font-weight: bold;
}

.add-pack-savings-table-cell {
  flex: 1;
  text-align: center;
  font-size: 0.9rem;
  color: #3e2723;
  padding: 0.25rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-pack-savings-table-cell:first-child {
  flex: 1.5;
  text-align: left;
  font-weight: 600;
}

.add-pack-savings-table-cell.loss {
  color: #d32f2f;
  font-weight: bold;
}

.add-pack-savings-table-cell.savings {
  color: #4caf50;
  font-weight: bold;
}

.add-pack-savings-summary {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid #8d6e63;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.add-pack-savings-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  color: #3e2723;
}

.add-pack-savings-summary-row span:first-child {
  font-weight: 600;
}

.add-pack-savings-summary-row span:last-child {
  font-weight: bold;
}

@media (max-width: 480px) {
  .add-pack-modal-body {
    padding: 1rem;
  }
  
  .add-pack-modal-header {
    padding: 1rem;
  }
  
  .add-pack-modal-title {
    font-size: 1.5rem;
  }
  
  .pack-size-header {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}
/* ========================================
   PRODUCT IMAGE UPLOAD MODALS
   Smooth Sales style – matches Add Size, Add Item, Add Stamp Card etc.
   ======================================== */

.product-image-upload {
  background: #f5f5dc;
  border: 3px solid #8d6e63;
  border-radius: 15px;
  min-width: 380px;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  font-family: 'The Wanters DEMO', serif;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Modal Header – teal to match Stock & value header */
.product-image-upload-header {
  background: linear-gradient(135deg, #14545c 0%, #0a1a1d 100%);
  color: #f5f5dc;
  padding: 1rem 1.5rem;
  text-align: center;
  border-radius: 12px 12px 0 0;
  border-bottom: 2px solid #8d6e63;
}

.product-image-upload-header h3 {
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #f5f5dc;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Modal Body */
.product-image-upload-content {
  position: relative;
  padding: 1.5rem 2rem;
  background: #f5f5dc;
  color: #3e2723;
  flex: 1 1 auto;
  overflow-y: auto;
}

.product-image-upload-hint {
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
  color: #5d4037;
  text-align: center;
}

/* Modal Footer – centre-aligned red Close button */
.product-image-upload-footer {
  background: #8d6e63;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 0 12px 12px;
  border-top: 3px solid #5d4037;
}

.product-image-upload-close-btn {
  background: linear-gradient(135deg, #f44336, #d32f2f);
  color: #ffffff;
  border: 3px solid #b71c1c;
  border-radius: 9999px;
  padding: 0.75rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
}

.product-image-upload-close-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #d32f2f, #b71c1c);
  border-color: #b71c1c;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.product-image-upload-close-btn:disabled {
  background: #cccccc;
  border-color: #999999;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

/* Hidden file input */
.file-input-hidden {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* Section blocks – two columns by default, stack vertically on narrow screens */
.product-image-slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
  .product-image-slots {
    grid-template-columns: 1fr;
  }
}

.product-image-slot {
  padding: 1rem;
  background: rgba(141, 110, 99, 0.08);
  border-radius: 12px;
  border: 2px solid #8d6e63;
}

.product-image-slot h4 {
  margin: 0 0 0.75rem 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 600;
  color: #5d4037;
  text-align: center;
}

.slot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  justify-content: center;
}

.current-image-section,
.file-selection-section,
.preview-section {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(141, 110, 99, 0.08);
  border-radius: 12px;
  border: 2px solid #8d6e63;
}

.current-image-section h4,
.file-selection-section h4,
.preview-section h4 {
  margin: 0 0 1rem 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #5d4037;
  text-align: center;
}

/* Image previews – contained in the dashed "image spot" */
.image-preview-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.75rem 0;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  border: 2px dashed #8d6e63;
  width: 100%;
  max-width: 200px;
  height: 180px;
  max-height: 180px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.current-image-preview,
.image-preview,
.image-preview-in-slot {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.image-placeholder {
  min-height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8d6e63;
  font-size: 0.85rem;
  border-radius: 8px;
}

/* Buttons inside body */
.replace-image-button {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid #8d6e63;
  background: #fff8e1;
  color: #5d4037;
}

.replace-image-button:hover:not(:disabled) {
  background: #8d6e63;
  color: #fff8e1;
}

.replace-image-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.upload-button {
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid #005d08;
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  color: #ffffff;
}

.upload-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 93, 8, 0.3);
}

.upload-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.remove-image-button {
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid #b71c1c;
  background: linear-gradient(135deg, #f44336, #d32f2f);
  color: #ffffff;
}

.remove-image-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
}

.remove-image-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.cancel-button {
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid #8d6e63;
  background: #fff8e1;
  color: #5d4037;
}

.cancel-button:hover:not(:disabled) {
  background: rgba(141, 110, 99, 0.2);
}

.cancel-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.preview-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* Messages */
.error-message {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: #ffebee;
  border: 2px solid #d32f2f;
  border-radius: 8px;
  color: #b71c1c;
  font-size: 0.9rem;
  margin: 1rem 0;
  text-align: center;
}

.error-icon {
  font-size: 1.1rem;
}

.success-message {
  padding: 1rem;
  background: rgba(0, 119, 10, 0.1);
  border: 2px solid #00770A;
  border-radius: 8px;
  color: #005d08;
  font-size: 0.9rem;
  text-align: center;
  margin: 1rem 0;
}

/* Loading overlay */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(245, 245, 220, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 12px 12px;
  z-index: 10;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #8d6e63;
  border-top-color: #14545c;
  border-radius: 50%;
  animation: product-image-spin 1s linear infinite;
  margin-bottom: 1rem;
}

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

.loading-overlay p {
  color: #5d4037;
  font-size: 0.95rem;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
}

/* Responsive – tablet */
@media (max-width: 768px) {
  .product-image-upload {
    min-width: 90vw;
    max-width: 95vw;
    padding: 0;
  }

  .product-image-upload-content {
    padding: 1rem;
  }

  .product-image-upload-header h3 {
    font-size: 1.2rem;
  }

  .image-preview-container {
    max-width: 160px;
    height: 140px;
    max-height: 140px;
  }

  .preview-actions {
    flex-direction: column;
    align-items: center;
  }
}

/* Narrow screens: shrink container and panels so nothing crops */
@media (max-width: 640px) {
  .product-image-upload {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    border-radius: 10px;
    border-width: 2px;
  }

  .product-image-upload-header {
    padding: 0.5rem 0.75rem;
  }

  .product-image-upload-header h3 {
    font-size: 1rem;
  }

  .product-image-upload-content {
    padding: 0.5rem 0.75rem;
    overflow-x: hidden;
    min-width: 0;
  }

  .product-image-slots {
    gap: 0.75rem;
    margin-bottom: 1rem;
    min-width: 0;
  }

  .product-image-slot {
    padding: 0.5rem 0.6rem;
    min-width: 0;
    max-width: 100%;
  }

  .product-image-slot h4 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }

  .image-preview-container {
    max-width: 100%;
    width: 100%;
    height: 140px;
    max-height: 140px;
    margin: 0.4rem 0;
    padding: 0.4rem;
  }

  .slot-actions {
    margin-top: 0.5rem;
    gap: 0.35rem;
  }

  .replace-image-button,
  .remove-image-button,
  .upload-button,
  .cancel-button {
    padding: 0.4rem 0.65rem;
    font-size: 0.8rem;
  }

  .product-image-upload-footer {
    padding: 0.5rem 0.75rem;
  }

  .product-image-upload-close-btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    min-width: 90px;
  }
}
.recipe-export-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
  width: 100vw;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.recipe-export-modal {
  background: #f5f5dc;
  border: 3px solid #8d6e63;
  border-radius: 15px;
  min-width: 500px;
  max-width: 600px;
  max-height: 95vh;
  overflow-y: auto;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(139, 110, 99, 0.2),
    0 0 0 2px rgba(255, 255, 255, 0.1);
  font-family: 'The Wanters DEMO', serif;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Hide scrollbar but maintain scroll functionality */
.recipe-export-modal::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.recipe-export-modal::-webkit-scrollbar-track {
  background: transparent;
}

.recipe-export-modal::-webkit-scrollbar-thumb {
  background: transparent;
}

/* Header - Unique color for Export Recipe modal */
.recipe-export-modal-header {
  background: linear-gradient(135deg, #ff6b35 0%, #d84315 100%);
  color: #ffffff;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
  position: relative;
  border-bottom: 3px solid #bf360c;
}

.recipe-export-modal-title {
  font-size: 3rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: 1px;
  text-align: center !important;
  width: 100%;
  position: relative;
  padding: 1rem 0;
  z-index: 2;
  text-transform: capitalize;
}

/* Modal Body */
.recipe-export-modal-body {
  padding: 1.5rem;
  text-align: center;
}

/* Search Section */
.recipe-export-search-section {
  margin-bottom: 1.5rem;
  text-align: center;
}

.recipe-export-search-input {
  width: 100%;
  max-width: 100%;
  padding: 1rem 1.5rem;
  border: 2px solid #8d6e63;
  border-radius: 50px;
  font-size: 1.2rem;
  background: #ffffff;
  color: #5d4037;
  transition: all 0.3s ease;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
  box-sizing: border-box;
}

.recipe-export-search-input:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.2);
  background-color: #fafafa;
}

.recipe-export-search-input::placeholder {
  text-align: center;
  color: #999;
}

/* Content */
.recipe-export-content {
  flex: 1;
  overflow-y: auto;
}

.recipe-export-loading,
.recipe-export-empty {
  text-align: center;
  padding: 2rem;
  color: #5d4037;
  font-size: 1.2rem;
}

/* Recipe List */
.recipe-export-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

/* Simple Horizontal Recipe Panel */
.recipe-item-panel {
  background: #ffffff;
  border: 2px solid #8d6e63;
  border-radius: 50px;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  text-align: center;
}

.recipe-item-panel:hover {
  box-shadow: 0 4px 12px rgba(141, 110, 99, 0.2);
  border-color: #5d4037;
}

.recipe-item-name {
  font-size: 1.4rem;
  font-weight: bold;
  color: #5d4037;
  font-family: 'The Wanters DEMO', serif;
  text-transform: capitalize;
  flex: 1;
  text-align: left;
  padding-left: 1rem;
}

/* Export Button - Pill Shaped */
.recipe-export-btn {
  background: linear-gradient(135deg, #ff6b35, #d84315);
  color: #ffffff;
  border: 2px solid #bf360c;
  border-radius: 50px;
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'The Wanters DEMO', serif;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  flex-shrink: 0;
}

.recipe-export-btn:hover {
  background: linear-gradient(135deg, #d84315, #bf360c);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(255, 107, 53, 0.4);
}

.recipe-export-btn:active {
  transform: translateY(0);
}

/* Footer */
.recipe-export-modal-footer {
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 2px solid rgba(141, 110, 99, 0.2);
}

.recipe-export-close-btn {
  background: linear-gradient(135deg, #8d6e63, #6d4c41);
  color: #ffffff;
  border: 2px solid #5d4037;
  border-radius: 50px;
  padding: 0.75rem 2.5rem;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'The Wanters DEMO', serif;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  min-width: 120px;
}

.recipe-export-close-btn:hover {
  background: linear-gradient(135deg, #6d4c41, #5d4037);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(141, 110, 99, 0.4);
}

.recipe-export-close-btn:active {
  transform: translateY(0);
}

/* Dark Mode Support */
.recipe-export-modal-overlay.dark-mode {
  background: rgba(0, 0, 0, 0.8);
}

.recipe-export-modal.dark-mode {
  background: #2d2d2d;
  border-color: #5d4037;
}

.dark-mode .recipe-export-modal-title {
  color: #ffffff;
}

.dark-mode .recipe-item-panel {
  background: #3d3d3d;
  border-color: #5d4037;
}

.dark-mode .recipe-item-name {
  color: #ffffff;
}

.dark-mode .recipe-export-search-input {
  background: #3d3d3d;
  color: #ffffff;
  border-color: #5d4037;
}

.dark-mode .recipe-export-loading,
.dark-mode .recipe-export-empty {
  color: #d3d3d3;
}

/* Responsive Design */
@media (max-width: 768px) {
  .recipe-export-modal {
    width: 95%;
    min-width: unset;
    max-width: 95%;
  }

  .recipe-export-modal-title {
    font-size: 2rem;
  }

  .recipe-item-panel {
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
  }

  .recipe-item-name {
    text-align: center;
    padding-left: 0;
  }

  .recipe-export-btn {
    width: 100%;
  }
}







.recipe-export-type-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.recipe-export-type-modal {
  background: #f5f5dc;
  border: 3px solid #8d6e63;
  border-radius: 15px;
  min-width: 500px;
  max-width: 600px;
  width: 90%;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(139, 110, 99, 0.2);
  font-family: 'The Wanters DEMO', serif;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Header */
.recipe-export-type-modal-header {
  background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
  color: #ffffff;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
  border-bottom: 3px solid #5d4037;
}

.recipe-export-type-modal-title {
  font-size: 2rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Body */
.recipe-export-type-modal-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Button Selection */
.recipe-export-type-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.recipe-export-type-btn {
  flex: 1;
  padding: 1.5rem 2rem;
  font-size: 1.3rem;
  font-weight: 700;
  border: 3px solid #8d6e63;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'The Wanters DEMO', serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #f5f5dc;
  color: #5d4037;
}

.recipe-export-type-btn.simple {
  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
  color: #ffffff;
  border-color: #388e3c;
}

.recipe-export-type-btn.detailed {
  background: linear-gradient(135deg, #8b45d1 0%, #7b3fa0 100%);
  color: #ffffff;
  border-color: #6a1b9a;
}

.recipe-export-type-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.recipe-export-type-btn.selected {
  box-shadow: 0 0 0 4px rgba(139, 110, 99, 0.3);
  transform: scale(1.05);
}

/* Description */
.recipe-export-type-description {
  padding: 1.5rem;
  background: #ffffff;
  border: 2px solid #8d6e63;
  border-radius: 15px;
  text-align: center;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recipe-export-type-description p {
  margin: 0;
  font-size: 1.1rem;
  color: #5d4037;
  line-height: 1.6;
  font-family: 'Verdana', sans-serif;
}

/* Export Button */
.recipe-export-type-actions {
  display: flex;
  justify-content: center;
}

.recipe-export-type-export-btn {
  background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
  color: #ffffff;
  border: 3px solid #5d4037;
  border-radius: 20px;
  padding: 1rem 3rem;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'The Wanters DEMO', serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  min-width: 200px;
}

.recipe-export-type-export-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #654321 0%, #8B4513 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.recipe-export-type-export-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}










/* Batch Edit Modal – matches Batch Cost Breakdown layout and styling */

.batch-edit-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.batch-edit-modal {
  width: 100%;
  max-width: 980px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.98);
  border: 2px solid #5d4037;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Main header – same as Batch Cost Breakdown */
.batch-edit-modal .batch-edit-modal-header {
  padding: 0.6rem 1rem;
  background: linear-gradient(135deg, #14545c 0%, #0a1a1d 100%);
  border-bottom: 2px solid #5d4037;
  text-align: center;
}

.batch-edit-modal .batch-edit-modal-title {
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.85rem;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.02em;
}

.batch-edit-modal .batch-edit-modal-subtitle {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0.25rem 0 0;
}

/* Tab bar – same design as Ingredients Selection product-size-buttons-container (fit around buttons, not full width) */
.batch-edit-modal .batch-edit-modal-tabs.pool-view-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 0.5rem;
  padding: 0.5rem 0.25rem;
  background: #ffffff;
  border: 2px solid #3e2723;
  border-radius: 25px;
  flex-wrap: wrap;
  flex-shrink: 0;
  box-sizing: border-box;
}

.batch-edit-modal .pool-view-btn.batch-edit-recipe-tab {
  flex: 0 0 auto;
  min-width: 120px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid #5d4037;
  background: linear-gradient(135deg, #8d6e63 0%, #6d4c41 100%);
  color: rgba(255, 255, 255, 0.9);
}

.batch-edit-modal .pool-view-btn.batch-edit-recipe-tab:hover {
  background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.batch-edit-modal .pool-view-btn.batch-edit-recipe-tab.active {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border-color: #0a1a1d;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.batch-edit-modal .pool-view-btn.batch-edit-recipe-tab.active:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Content area */
.batch-edit-modal .batch-edit-modal-body {
  padding: 1rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Section blocks – same header style as Batch Cost Breakdown */
.batch-edit-modal .batch-edit-section {
  margin-bottom: 1.25rem;
  border: 2px solid #8d6e63;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
}

.batch-edit-modal .batch-edit-section-header {
  padding: 0.5rem 0.75rem;
  background: linear-gradient(135deg, #14545c 0%, #0a1a1d 100%);
  border-bottom: 2px solid #8d6e63;
  text-align: center;
}

.batch-edit-modal .batch-edit-section-title {
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.03em;
}

.batch-edit-modal .batch-edit-section-content {
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Table inside modal – full width, no outer gap */
.batch-edit-modal .recipe-cost-breakdown-table-compact {
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.batch-edit-modal .recipe-cost-breakdown-table-header-compact {
  display: grid;
  padding: 0.4rem 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  gap: 0.25rem;
  text-align: center;
  background: rgba(20, 84, 92, 0.08);
  border-bottom: 1px solid rgba(141, 110, 99, 0.3);
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
}

.batch-edit-modal .recipe-cost-breakdown-table-row-compact {
  display: grid;
  padding: 0.35rem 0.5rem;
  font-size: 1rem;
  gap: 0.25rem;
  align-items: center;
  border-bottom: 1px solid rgba(141, 110, 99, 0.15);
}

.batch-edit-modal .recipe-cost-breakdown-table-row-compact:nth-child(even) {
  background: rgba(241, 241, 241, 0.8);
}

.batch-edit-modal .recipe-cost-breakdown-table-row-compact:nth-child(odd) {
  background: #ffffff;
}

.batch-edit-modal .recipe-cost-breakdown-table-cell-compact {
  font-size: 1rem;
  padding: 0.3rem 0.4rem;
  text-align: center;
}

.batch-edit-modal .recipe-cost-breakdown-table-cell-compact:first-child {
  text-align: left;
}

/* 5-column grid (Name, Cost, Quantity, Unit, Total cost) – ingredients/packaging/appliances */
.batch-edit-modal .batch-edit-table-5col-cost .recipe-cost-breakdown-table-header-compact,
.batch-edit-modal .batch-edit-table-5col-cost .recipe-cost-breakdown-table-row-compact {
  grid-template-columns: 2fr 1.2fr 1fr 0.75fr 1fr;
}

/* 4-column grid for Staff (Name, Hours, Rate/hr, Total cost) */
.batch-edit-modal .batch-edit-table-4col-staff .recipe-cost-breakdown-table-header-compact,
.batch-edit-modal .batch-edit-table-4col-staff .recipe-cost-breakdown-table-row-compact {
  grid-template-columns: 2fr 1fr 1fr 1fr;
}

.batch-edit-modal .recipe-cost-breakdown-table-cell-compact .remove-staff-link {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.4rem;
  font-size: 0.8rem;
  color: #c62828;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

.batch-edit-modal .recipe-cost-breakdown-table-cell-compact .remove-staff-link:hover {
  color: #b71c1c;
}

/* Cost color coding – same as Batch Cost Breakdown */
.batch-edit-modal .recipe-cost-breakdown-table-cell-compact.ingredient-cost-compact,
.batch-edit-modal .recipe-cost-breakdown-table-cell-compact.packaging-cost-compact,
.batch-edit-modal .recipe-cost-breakdown-table-cell-compact.electricity-cost-compact,
.batch-edit-modal .recipe-cost-breakdown-table-cell-compact.staff-cost-compact {
  color: #2196f3;
  font-weight: 600;
}

.batch-edit-modal .recipe-cost-breakdown-table-cell-compact.total-cost-compact {
  color: #e74c3c;
  font-weight: 700;
  font-size: 1.05rem;
  min-width: 4rem;
}

.batch-edit-modal .recipe-cost-breakdown-table-row-compact.recipe-cost-breakdown-total-row-compact {
  background: rgba(231, 76, 60, 0.06) !important;
  border-top: 2px solid #8d6e63;
  font-weight: 700;
}

.batch-edit-modal .recipe-cost-breakdown-table-row-compact.recipe-cost-breakdown-total-row-compact .recipe-cost-breakdown-table-cell-compact {
  color: #e74c3c;
}

/* Add row (ingredients, packaging, appliances, staff): Add button LEFT of search, same row */
.batch-edit-modal .batch-edit-add-row {
  position: relative;
  z-index: 1;
  background: rgba(26, 107, 117, 0.06);
  border-bottom: 1px solid rgba(141, 110, 99, 0.25);
}

.batch-edit-modal .batch-edit-add-row .batch-edit-add-name-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

/* Add button: green circular with white plus icon */
.batch-edit-modal .batch-edit-add-row .batch-edit-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #2e7d32;
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
  color: #fff;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.batch-edit-modal .batch-edit-add-row .batch-edit-add-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

.batch-edit-modal .batch-edit-add-row .batch-edit-add-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.batch-edit-modal .batch-edit-add-row .batch-edit-add-btn-icon {
  font-size: 1.2rem;
  line-height: 1;
  color: #fff;
}

.batch-edit-modal .batch-edit-add-row .batch-edit-add-rate {
  font-size: 0.95rem;
  font-weight: 600;
  color: #3e2723;
}

.batch-edit-modal .batch-edit-add-row .batch-edit-add-qty-input,
.batch-edit-modal .batch-edit-add-row .batch-edit-add-staff-hours-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.6rem;
  text-align: center;
  border: 2px solid rgba(141, 110, 99, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: #3e2723;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.3s ease;
  -moz-appearance: textfield;
}
.batch-edit-modal .batch-edit-add-row .batch-edit-add-qty-input::-webkit-outer-spin-button,
.batch-edit-modal .batch-edit-add-row .batch-edit-add-qty-input::-webkit-inner-spin-button,
.batch-edit-modal .batch-edit-add-row .batch-edit-add-staff-hours-input::-webkit-outer-spin-button,
.batch-edit-modal .batch-edit-add-row .batch-edit-add-staff-hours-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.batch-edit-modal .batch-edit-add-row .batch-edit-add-qty-input:focus,
.batch-edit-modal .batch-edit-add-row .batch-edit-add-staff-hours-input:focus {
  outline: none;
  border-color: #14545c;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.1);
}

.batch-edit-modal .batch-edit-add-row .batch-edit-add-staff-total {
  font-weight: 600;
}

/* ========== Z-layering (copy Ingredients Selection modal exactly) ========== */
/* When table has dropdown open, wrapper must not clip */
.batch-edit-modal .batch-edit-unified-table-wrapper:has(.unit-dropdown-open),
.batch-edit-modal .batch-edit-unified-table-wrapper:has(.dropdown-open) {
  overflow: visible;
}

.batch-edit-modal .batch-edit-unified-table tbody {
  position: relative;
  z-index: 0;
}

/* When this add row's dropdown is open, stack the entire row and cells on top */
.batch-edit-modal .batch-edit-add-row.dropdown-open {
  position: relative !important;
  z-index: 2147483647 !important;
}

.batch-edit-modal .batch-edit-add-row.dropdown-open td {
  position: relative !important;
  z-index: 2147483647 !important;
}

.batch-edit-modal .batch-edit-add-row .batch-edit-search-wrap.dropdown-open {
  z-index: 2147483647;
}

/* When any add row has dropdown open, other add rows get lower z-index */
.batch-edit-modal .batch-edit-modal-body:has(.batch-edit-add-row.dropdown-open) .batch-edit-add-row:not(.dropdown-open) {
  position: relative !important;
  z-index: 0 !important;
}

/* When a data row has unit dropdown open, stack it on top */
.batch-edit-modal .batch-edit-data-row.unit-dropdown-open {
  position: relative !important;
  z-index: 2147483647 !important;
}

.batch-edit-modal .batch-edit-data-row.unit-dropdown-open td {
  position: relative !important;
  z-index: 2147483647 !important;
}

.batch-edit-modal .batch-edit-modal-body:has(.batch-edit-data-row.unit-dropdown-open) .batch-edit-data-row:not(.unit-dropdown-open) {
  position: relative !important;
  z-index: 0 !important;
}

.batch-edit-modal .batch-edit-modal-body:has(.batch-edit-data-row.unit-dropdown-open) .batch-edit-add-row {
  position: relative !important;
  z-index: 0 !important;
}

/* Search wrap + input + dropdown */
.batch-edit-modal .batch-edit-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  z-index: 1;
  isolation: isolate;
}

/* Prevent table/cells from clipping dropdowns */
.batch-edit-modal .batch-edit-add-row .name-col,
.batch-edit-modal .batch-edit-add-row .unit-col {
  overflow: visible !important;
}
.batch-edit-modal .batch-edit-add-row td {
  overflow: visible !important;
}
.batch-edit-modal .batch-edit-add-row.dropdown-open,
.batch-edit-modal .batch-edit-data-row.unit-dropdown-open {
  overflow: visible !important;
}
.batch-edit-modal .batch-edit-data-row.unit-dropdown-open td.unit-col {
  overflow: visible !important;
}

/* Name search input – same as Ingredients add row: 180px, brown border, 8px radius, teal focus */
.batch-edit-modal .batch-edit-add-row .batch-edit-search-input {
  width: 180px;
  min-width: 180px;
  max-width: 180px;
  padding: 0.35rem 0.5rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  background: #fff;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  box-sizing: border-box;
  transition: all 0.3s ease;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.batch-edit-modal .batch-edit-add-row .batch-edit-search-input:focus {
  outline: none;
  border-color: #14545c;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.1);
}

.batch-edit-modal .batch-edit-search-input {
  width: 180px;
  min-width: 180px;
  max-width: 180px;
  padding: 0.35rem 0.5rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-size: 0.95rem;
  background: #fff;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  box-sizing: border-box;
}

/* Search dropdown – same as Ingredients: ~4 items visible, attached under input */
.batch-edit-modal .batch-edit-search-dropdown {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  min-width: 180px;
  max-width: 180px;
  top: 100%;
  margin-top: -6px;
  max-height: 116px;
  overflow-y: auto;
  background: #fff;
  border: 2px solid #8d6e63;
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 2147483647 !important;
  box-sizing: border-box;
}

.batch-edit-modal .batch-edit-search-dropdown-item {
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  color: #3e2723;
  text-align: center;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
}

.batch-edit-modal .batch-edit-search-dropdown-item:last-child {
  border-bottom: none;
}

.batch-edit-modal .batch-edit-search-dropdown-item:hover {
  background: rgba(26, 107, 117, 0.12);
}

.batch-edit-modal .batch-edit-search-dropdown-item.batch-edit-search-dropdown-empty {
  cursor: default;
  color: #8d6e63;
  font-style: italic;
  font-weight: normal;
}
.batch-edit-modal .batch-edit-search-dropdown-item.batch-edit-search-dropdown-empty:hover {
  background: transparent;
}

/* ========== Unit dropdown – same as Ingredients Selection modal (button + list, not select) ========== */
.batch-edit-modal .ingredient-unit-dropdown-wrap {
  position: relative;
  display: inline-block;
  width: 80px;
  margin-left: auto;
  margin-right: auto;
}

.batch-edit-modal .ingredient-unit-dropdown-wrap.unit-dropdown-open {
  z-index: 2147483647 !important;
  position: relative;
}

.batch-edit-modal .ingredient-unit-dropdown-trigger {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  background: #fff;
  color: #3e2723;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  appearance: none;
}

.batch-edit-modal .ingredient-unit-dropdown-trigger:hover,
.batch-edit-modal .ingredient-unit-dropdown-trigger:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.2);
}

.batch-edit-modal .ingredient-unit-dropdown-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: -6px;
  background: #fff;
  border: 2px solid #8d6e63;
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 2147483647 !important;
  max-height: 76px;
  overflow-y: auto;
  box-sizing: border-box;
}

.batch-edit-modal .ingredient-unit-dropdown-item {
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  color: #3e2723;
  text-align: center;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
}

.batch-edit-modal .ingredient-unit-dropdown-item:last-child {
  border-bottom: none;
}

.batch-edit-modal .ingredient-unit-dropdown-item:hover {
  background: rgba(141, 110, 99, 0.12);
}

/* Name cell: remove button left-aligned, name center-aligned in column */
.batch-edit-modal .batch-edit-name-with-remove {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2rem;
}

.batch-edit-modal .batch-edit-name-with-remove .batch-edit-name-center {
  flex: 1;
  text-align: center;
}

.batch-edit-modal .batch-edit-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #c62828;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.batch-edit-modal .batch-edit-remove-btn:hover {
  background: #b71c1c;
}

.batch-edit-modal .batch-edit-remove-btn:active {
  background: #8b0000;
}

/* Footer – brown like other modals, pill buttons */
.batch-edit-modal .batch-edit-modal-footer {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  padding: 1rem 2.5rem;
  border-top: 2px solid #5d4037;
  background: linear-gradient(135deg, #8d6e63 0%, #6d4c41 100%);
  flex-shrink: 0;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
}

.batch-edit-modal .batch-edit-modal-footer button {
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s ease;
  border: none;
}

.batch-edit-modal .batch-edit-btn-cancel {
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  color: #fff;
}

.batch-edit-modal .batch-edit-btn-cancel:hover {
  background: linear-gradient(135deg, #b71c1c 0%, #8d0000 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.batch-edit-modal .batch-edit-btn-save {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
  color: #fff;
}

.batch-edit-modal .batch-edit-btn-save:hover {
  background: linear-gradient(135deg, #1b5e20 0%, #0d3e0d 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Inputs inside table cells – match Ingredients Selection modal */
.batch-edit-modal .recipe-cost-breakdown-table-cell-compact input[type="number"] {
  width: 72px;
  padding: 0.3rem 0.35rem;
  text-align: center;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  color: #3e2723;
}

.batch-edit-modal .recipe-cost-breakdown-table-cell-compact .remove-staff-btn {
  padding: 0.2rem 0.4rem;
  border: 1px solid #8d6e63;
  border-radius: 6px;
  background: rgba(200, 150, 150, 0.25);
  color: #3e2723;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
}

.batch-edit-modal .recipe-cost-breakdown-table-cell-compact .remove-staff-btn:hover {
  background: rgba(231, 76, 60, 0.2);
}

/* ========== Unified table (match Ingredients Selection Modal style) ========== */
/* Table wrapper: scroll horizontally on narrow screens (like Ingredients Selection Modal) */
.batch-edit-modal .batch-edit-unified-table-wrapper {
  width: 100%;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.98);
  border: 2px solid #8d6e63;
  border-radius: 10px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 0;
  box-sizing: border-box;
}

.batch-edit-modal .batch-edit-unified-table {
  width: 100%;
  min-width: 720px; /* Prevents squashing on narrow screens; wrapper scrolls instead */
  border-collapse: collapse;
  table-layout: fixed;
  font-family: 'The Wanters DEMO', serif;
  box-sizing: border-box;
}

/* Column widths via colgroup – same as Ingredients Selection Modal (Name, Cost, Quantity, Unit, Total, Action) */
.batch-edit-modal .batch-edit-unified-table col.col-name {
  width: 32%;
}
.batch-edit-modal .batch-edit-unified-table col.col-cost {
  width: 15%;
}
.batch-edit-modal .batch-edit-unified-table col.col-quantity {
  width: 16%;
}
.batch-edit-modal .batch-edit-unified-table col.col-unit {
  width: 11%;
}
.batch-edit-modal .batch-edit-unified-table col.col-total {
  width: 16%;
}
.batch-edit-modal .batch-edit-unified-table col.col-action {
  width: 10%;
}

.batch-edit-modal .batch-edit-section-divider-header {
  background: linear-gradient(135deg, #14545c 0%, #0a1a1d 100%);
  color: #f5f5dc !important;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid #8d6e63;
  letter-spacing: 0.03em;
  text-align: center;
}

.batch-edit-modal .batch-edit-section-divider-header td {
  color: #f5f5dc !important;
  border-right: 1px solid rgba(141, 110, 99, 0.35);
  box-sizing: border-box;
}

.batch-edit-modal .batch-edit-section-header-row th {
  background: rgba(20, 84, 92, 0.08);
  border-bottom: 1px solid rgba(141, 110, 99, 0.3);
  color: #3e2723;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.4rem 0.5rem;
  border-right: 1px solid rgba(141, 110, 99, 0.2);
  text-align: center;
  box-sizing: border-box;
}

.batch-edit-modal .batch-edit-section-header-row th.name-col {
  text-align: center;
}

.batch-edit-modal .batch-edit-data-row {
  background: #ffffff;
  border-bottom: 1px solid rgba(141, 110, 99, 0.15);
}

/* Alternate consecutive data rows */
.batch-edit-modal .batch-edit-data-row + .batch-edit-data-row {
  background: rgba(241, 241, 241, 0.8);
}

.batch-edit-modal .batch-edit-data-row + .batch-edit-data-row + .batch-edit-data-row {
  background: #ffffff;
}

.batch-edit-modal .batch-edit-unified-table td {
  padding: 0.35rem 0.5rem;
  border-right: 1px solid rgba(141, 110, 99, 0.15);
  color: #3e2723;
  font-size: 1rem;
  box-sizing: border-box;
}


.batch-edit-modal .batch-edit-unified-table .name-col {
  text-align: center;
  font-size: 1.12rem;
  font-weight: 600;
  min-width: 120px;
  width: 32%;
}

/* Action column – narrow, fits green tick and red X (colgroup sets 10%) */
.batch-edit-modal .batch-edit-unified-table .action-column {
  text-align: center;
  vertical-align: middle;
  overflow: visible;
}

/* Add row: circular green tick button (same as Ingredients Selection Modal) */
.batch-edit-modal .batch-edit-add-row .add-row-confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #2e7d32;
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
  transition: all 0.2s ease;
}
.batch-edit-modal .batch-edit-add-row .add-row-confirm-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(76, 175, 80, 0.4);
}
.batch-edit-modal .batch-edit-add-row .add-row-confirm-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.batch-edit-modal .batch-edit-add-row .add-row-confirm-btn-icon {
  font-size: 1.25rem;
  line-height: 1;
  color: #fff;
}

/* Remove button: same style as Add but red circular with white × */
.batch-edit-modal .batch-edit-unified-table .remove-item-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #b71c1c;
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  color: #fff;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(211, 47, 47, 0.3);
}

.batch-edit-modal .batch-edit-unified-table .remove-item-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b71c1c 0%, #9a1616 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(211, 47, 47, 0.4);
}

.batch-edit-modal .batch-edit-unified-table .remove-item-btn-icon {
  font-size: 1.25rem;
  line-height: 1;
  color: #fff;
}

.batch-edit-modal .batch-edit-unified-table .cost-col,
.batch-edit-modal .batch-edit-unified-table .quantity-col,
.batch-edit-modal .batch-edit-unified-table .unit-col,
.batch-edit-modal .batch-edit-unified-table .total-col {
  text-align: center;
}

/* Unit column – metric selector dropdown (match Ingredients Selection Modal) */
.batch-edit-modal .batch-edit-unified-table .unit-col {
  vertical-align: middle;
}

/* Unit select – exact same style as Ingredients ingredient-unit-dropdown-trigger (brown border, 8px radius, centered text) */
.batch-edit-modal .batch-edit-unit-select,
.batch-edit-modal .ingredient-unit-select {
  width: 80px;
  max-width: 100%;
  padding: 0.35rem 0.5rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  background: #fff;
  color: #3e2723;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align: center;
  text-align-last: center;
  font-family: 'The Wanters DEMO', serif;
  box-sizing: border-box;
}

.batch-edit-modal .batch-edit-unit-select:focus,
.batch-edit-modal .ingredient-unit-select:focus {
  outline: none;
  border-color: #8d6e63;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.2);
}

.batch-edit-modal .batch-edit-unit-select option,
.batch-edit-modal .ingredient-unit-select option {
  text-align: center;
  font-weight: 700;
  background: #fff;
  color: #3e2723;
}

/* Number inputs in table – match Ingredients Selection Modal (same width/style) */
.batch-edit-modal .batch-edit-number-input {
  width: 72px;
  min-width: 0;
  max-width: 100%;
  padding: 0.35rem 0.4rem;
  text-align: center;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  color: #3e2723;
  background: rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
}

.batch-edit-modal .batch-edit-number-input:focus {
  outline: none;
  border-color: #14545c;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.1);
}

/* Cost and quantity columns: just the input, centered */
.batch-edit-modal .batch-edit-cost-cell,
.batch-edit-modal .batch-edit-qty-unit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.batch-edit-modal .batch-edit-unified-table .cost-value {
  color: #2196f3;
  font-weight: 600;
}

.batch-edit-modal .batch-edit-unified-table .total-value {
  color: #e74c3c;
  font-weight: 700;
  font-size: 1.05rem;
}

/* Section total rows: match Batch Cost Breakdown (alternating row colors) */
.batch-edit-modal .batch-edit-total-row {
  border-top: 2px solid #8d6e63;
  font-weight: 700;
}

.batch-edit-modal .batch-edit-total-row-ingredients {
  background: rgba(33, 150, 243, 0.1) !important;
}
.batch-edit-modal .batch-edit-total-row-packaging {
  background: rgba(76, 175, 80, 0.1) !important;
}
.batch-edit-modal .batch-edit-total-row-appliances {
  background: rgba(111, 66, 193, 0.1) !important;
}
.batch-edit-modal .batch-edit-total-row-staff {
  background: rgba(10, 93, 122, 0.1) !important;
}

.batch-edit-modal .batch-edit-total-row .total-value {
  color: #e74c3c;
}

/* Recipe summary rows (Total product made, Difference, Total profit): like Batch Cost Breakdown summary */
.batch-edit-modal .batch-edit-recipe-total-row.batch-edit-recipe-summary-row {
  background: rgba(231, 76, 60, 0.06) !important;
  border-top: 1px solid rgba(141, 110, 99, 0.3);
  font-weight: 700;
}
.batch-edit-modal .batch-edit-recipe-total-row.batch-edit-recipe-summary-row .total-value {
  color: #e74c3c;
}
.batch-edit-modal .batch-edit-recipe-total-row:not(.batch-edit-recipe-summary-row) {
  background: rgba(231, 76, 60, 0.12) !important;
}

/* Text boxes: same size and style as Ingredients Selection Modal */
.batch-edit-modal .batch-edit-unified-table input[type="number"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.6rem;
  text-align: center;
  border: 2px solid rgba(141, 110, 99, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: #3e2723;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.3s ease;
  -moz-appearance: textfield;
}
.batch-edit-modal .batch-edit-unified-table input[type="number"]::-webkit-outer-spin-button,
.batch-edit-modal .batch-edit-unified-table input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.batch-edit-modal .batch-edit-unified-table input[type="number"]:focus {
  outline: none;
  border-color: #14545c;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.1);
}

.batch-edit-modal .batch-edit-add-row td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
  background: rgba(20, 84, 92, 0.04);
}

/* Staff rows: same table layout as appliances (4 cols: Name | Rate/hr | Hours | Total).
   Override AdminPanel.css .staff-item (display:grid) so rows stay proper table layout. */
.batch-edit-modal .batch-edit-data-row.staff-item {
  display: table-row !important;
  grid-template-columns: unset !important;
  gap: unset !important;
  padding: 0 !important;
  margin: 0 !important;
  border-left: none !important;
  border-radius: 0 !important;
  cursor: default !important;
  position: static !important;
  box-shadow: none !important;
  transform: none !important;
}

.batch-edit-modal .batch-edit-data-row.staff-item:hover {
  background: inherit !important;
  box-shadow: none !important;
  transform: none !important;
}

.batch-edit-modal .batch-edit-data-row.staff-item td {
  display: table-cell !important;
  vertical-align: middle;
  padding: 0.35rem 0.5rem;
  border-right: 1px solid rgba(141, 110, 99, 0.15);
}

.batch-edit-modal .batch-edit-placeholder-row .batch-edit-empty-cell {
  text-align: center;
  padding: 0.75rem;
  color: #7a675c;
  font-style: italic;
  background: rgba(20, 84, 92, 0.04);
}

.batch-edit-modal .batch-edit-no-data {
  text-align: center;
  color: #7a675c;
  padding: 1rem;
  margin: 0;
}

/* Batch add-product search on AdminProductsPage (same look as modal search) */
.batch-add-product-search .batch-edit-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
  width: 100%;
  z-index: 100;
}

.batch-add-product-search .batch-edit-search-input {
  width: 100%;
  min-width: 120px;
  padding: 0.35rem 0.5rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-size: 0.95rem;
  background: #fff;
  color: #3e2723;
  box-sizing: border-box;
}

.batch-add-product-search .batch-edit-search-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 2px;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 99999999;
}

.batch-add-product-search .batch-edit-search-dropdown-item {
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: #3e2723;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
}

.batch-add-product-search .batch-edit-search-dropdown-item:last-child {
  border-bottom: none;
}

.batch-add-product-search .batch-edit-search-dropdown-item:hover {
  background: rgba(26, 107, 117, 0.12);
}

/* Reports search dropdown (BusinessPage): larger text */
.production-search-dropdown .batch-edit-search-dropdown-item {
  font-size: 1.1rem;
}
.production-search-dropdown .batch-edit-search-dropdown-item.batch-edit-search-dropdown-empty {
  font-size: 1.1rem;
}

/* ========== Responsive: narrow screens (match Ingredients Selection Modal behavior) ========== */
@media (max-width: 768px) {
  .batch-edit-modal-overlay {
    padding: 0.5rem;
    align-items: flex-start;
  }

  .batch-edit-modal {
    max-width: 98vw;
    width: 98vw;
    max-height: 95vh;
  }

  .batch-edit-modal .batch-edit-modal-body {
    padding: 0.75rem;
  }

  .batch-edit-modal .batch-edit-unified-table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }

  .batch-edit-modal .batch-edit-unified-table {
    min-width: 680px;
  }

  .batch-edit-modal .batch-edit-unified-table td,
  .batch-edit-modal .batch-edit-unified-table th {
    padding: 0.3rem 0.4rem;
    font-size: 0.9rem;
  }

  .batch-edit-modal .batch-edit-unified-table .name-col {
    min-width: 100px;
  }

  .batch-edit-modal .batch-edit-add-row .batch-edit-search-input,
  .batch-edit-modal .batch-edit-add-row .batch-edit-add-qty-input,
  .batch-edit-modal .batch-edit-add-row .batch-edit-add-staff-hours-input {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .batch-edit-modal-overlay {
    padding: 0;
  }

  .batch-edit-modal {
    max-width: 100vw;
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .batch-edit-modal .batch-edit-modal-body {
    padding: 0.5rem;
  }

  .batch-edit-modal .batch-edit-unified-table {
    min-width: 600px;
  }

  .batch-edit-modal .batch-edit-unified-table td,
  .batch-edit-modal .batch-edit-unified-table th {
    padding: 0.25rem 0.3rem;
    font-size: 0.85rem;
  }

  .batch-edit-modal .batch-edit-unified-table input[type="number"] {
    font-size: 0.85rem;
    padding: 0.35rem 0.5rem;
  }

  .batch-edit-modal .batch-edit-add-row .batch-edit-search-input,
  .batch-edit-modal .batch-edit-add-row .batch-edit-add-qty-input,
  .batch-edit-modal .batch-edit-add-row .batch-edit-add-staff-hours-input {
    font-size: 0.85rem;
    padding: 0.35rem 0.5rem;
  }

  .batch-edit-modal .batch-edit-modal-title {
    font-size: 1.5rem;
  }

  .batch-edit-modal .batch-edit-modal-subtitle {
    font-size: 0.8rem;
  }

  .batch-edit-modal .pool-view-btn.batch-edit-recipe-tab {
    min-width: 100px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
}

/* Report Recipe Export Modal – pill buttons, full-bleed header/footer */
.batch-edit-modal .report-recipe-export-footer {
  flex-wrap: wrap;
}

.batch-edit-modal .report-recipe-export-footer .report-export-pill-btn {
  padding: 0.6rem 1.25rem;
  border-radius: 9999px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.batch-edit-modal .report-recipe-export-footer .report-export-pill-cancel {
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  color: #fff;
}

.batch-edit-modal .report-recipe-export-footer .report-export-pill-cancel:hover {
  background: linear-gradient(135deg, #b71c1c 0%, #8d0000 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.batch-edit-modal .report-recipe-export-footer .report-export-pill-cool {
  background: linear-gradient(135deg, #8d6e63 0%, #6d4c41 100%);
  color: rgba(255, 255, 255, 0.95);
}

.batch-edit-modal .report-recipe-export-footer .report-export-pill-cool:hover,
.batch-edit-modal .report-recipe-export-footer .report-export-pill-cool.active {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.batch-edit-modal .report-recipe-export-footer .report-export-pill-boring {
  background: linear-gradient(135deg, #8d6e63 0%, #6d4c41 100%);
  color: rgba(255, 255, 255, 0.95);
}

.batch-edit-modal .report-recipe-export-footer .report-export-pill-boring:hover,
.batch-edit-modal .report-recipe-export-footer .report-export-pill-boring.active {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.batch-edit-modal .report-recipe-export-footer .report-export-pill-export {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
  color: #fff;
}

.batch-edit-modal .report-recipe-export-footer .report-export-pill-export:hover {
  background: linear-gradient(135deg, #1b5e20 0%, #0d3e0d 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Report export choice buttons (before variant selected) – same pill style */
.report-export-pill-btn.report-export-pill-cool,
.report-export-pill-btn.report-export-pill-boring {
  padding: 0.6rem 1.25rem;
  border-radius: 9999px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.report-export-pill-btn.report-export-pill-cool {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  color: #fff;
}

.report-export-pill-btn.report-export-pill-cool:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.report-export-pill-btn.report-export-pill-boring {
  background: linear-gradient(135deg, #5d4037 0%, #4e342e 100%);
  color: #fff;
}

.report-export-pill-btn.report-export-pill-boring:hover {
  background: linear-gradient(135deg, #4e342e 0%, #3e2723 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Cool/Boring toggle: Boring side uses brown thumb (not purple) */
.report-export-variant-switch .recipe-cost-breakdown-switch-thumb-compact.detailed-position {
  background: linear-gradient(135deg, #5d4037, #4e342e);
}

/* Report export modal: taller initial size */
.report-recipe-export-modal.batch-edit-modal {
  min-height: 75vh;
  height: 80vh;
}

/* Hide scrollbar on export preview, keep scroll */
.report-export-preview-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.report-export-preview-scroll::-webkit-scrollbar {
  display: none;
}
/* Pool View Toggle Buttons */
.pool-view-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.25rem;
  background: #ffffff;
  border: 2px solid #3e2723;
  border-radius: 25px;
  padding: 0.5rem;
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
}

/* Ensure all buttons in the button bar have consistent sizing on all screen sizes */
.pool-view-buttons .pool-view-btn.setup-btn,
.pool-view-buttons .pool-view-btn.customer-details-btn,
.pool-view-buttons .pool-view-btn.loyalty-btn,
.pool-view-buttons .pool-view-btn.achievements-btn,
.pool-view-buttons .pool-view-btn.promo-codes-btn,
.pool-view-buttons .pool-view-btn.costs-btn,
.pool-view-buttons .pool-view-btn.products-btn,
.pool-view-buttons .pool-view-btn.business-btn,
.pool-view-buttons .pool-view-btn.items-tab,
.pool-view-buttons .pool-view-btn.levels-btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 120px;
  box-sizing: border-box;
  height: auto;
  min-height: auto;
  padding: 0.75rem 1.5rem;
  line-height: 1.5;
  font-size: 1rem;
  text-align: center;
  border-radius: 9999px !important;
}

/* Inventory Management buttons - same styling as loyalty management buttons */
.pool-view-buttons .pool-view-btn.setup-btn,
.pool-view-buttons .pool-view-btn.breakdown-tab,
.pool-view-buttons .pool-view-btn.ingredients-btn,
.pool-view-buttons .pool-view-btn.warehouse-btn,
.pool-view-buttons .pool-view-btn.packaging-btn,
.pool-view-buttons .pool-view-btn.appliances-btn,
.pool-view-buttons .pool-view-btn.costs-btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 120px;
  box-sizing: border-box;
  height: auto;
  min-height: auto;
  padding: 0.75rem 1.5rem;
  line-height: 1.5;
  font-size: 1rem;
  text-align: center;
  border-radius: 25px !important;
}

/* Products Management buttons - same styling as loyalty management buttons */
.pool-view-buttons .pool-view-btn.setup-btn,
.pool-view-buttons .pool-view-btn.inventory-tab,
.pool-view-buttons .pool-view-btn.items-tab,
.pool-view-buttons .pool-view-btn.products-tab,
.pool-view-buttons .pool-view-btn.packs-tab,
.pool-view-buttons .pool-view-btn.batch-tab {
  flex: 0 0 auto;
  width: auto;
  min-width: 120px;
  box-sizing: border-box;
  height: auto;
  min-height: auto;
  padding: 0.75rem 1.5rem;
  line-height: 1.5;
  font-size: 1rem;
  text-align: center;
  border-radius: 9999px !important;
}

/* Business Management buttons - same styling as loyalty management buttons */
.pool-view-buttons .pool-view-btn.setup-btn,
.pool-view-buttons .pool-view-btn.admin-analytics-tab,
.pool-view-buttons .pool-view-btn.admin-profile-tab,
.pool-view-buttons .pool-view-btn.admin-management-tab,
.pool-view-buttons .pool-view-btn.admin-customers-tab,
.pool-view-buttons .pool-view-btn.admin-orders-tab,
.pool-view-buttons .pool-view-btn.admin-subscriptions-tab,
.pool-view-buttons .pool-view-btn.admin-contact-tab,
.pool-view-buttons .pool-view-btn.admin-admin-tab,
.pool-view-buttons .pool-view-btn.admin-staff-tab {
  flex: 0 0 auto;
  width: auto;
  min-width: 120px;
  box-sizing: border-box;
  height: auto;
  min-height: auto;
  padding: 0.75rem 1.5rem;
  line-height: 1.5;
  font-size: 1rem;
  text-align: center;
  border-radius: 25px !important;
}

/* Medium screens - ensure consistent font-size */
@media (min-width: 768px) and (max-width: 1023px) {
  .pool-view-buttons .pool-view-btn.customer-details-btn,
  .pool-view-buttons .pool-view-btn.loyalty-btn,
  .pool-view-buttons .pool-view-btn.achievements-btn,
  .pool-view-buttons .pool-view-btn.promo-codes-btn,
  .pool-view-buttons .pool-view-btn.costs-btn,
  .pool-view-buttons .pool-view-btn.products-btn,
  .pool-view-buttons .pool-view-btn.business-btn,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.levels-btn {
    font-size: 1rem !important;
    padding: 0.75rem 1.5rem;
    min-width: 130px;
    height: auto;
    line-height: 1.5;
    border-radius: 9999px !important;
  }
  
  /* Inventory Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.breakdown-tab,
  .pool-view-buttons .pool-view-btn.ingredients-btn,
  .pool-view-buttons .pool-view-btn.packaging-btn,
  .pool-view-buttons .pool-view-btn.appliances-btn,
  .pool-view-buttons .pool-view-btn.costs-btn {
    font-size: 1rem !important;
    padding: 0.75rem 1.5rem;
    min-width: 130px;
    height: auto;
    line-height: 1.5;
    border-radius: 25px !important;
  }
  
  /* Products Management buttons */
  .pool-view-buttons .pool-view-btn.inventory-tab,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.products-tab,
  .pool-view-buttons .pool-view-btn.packs-tab,
  .pool-view-buttons .pool-view-btn.batch-tab,
  .pool-view-buttons .pool-view-btn.products-btn,
  .pool-view-buttons .pool-view-btn.business-btn,
  .pool-view-buttons .pool-view-btn.levels-btn {
    font-size: 1rem !important;
    padding: 0.75rem 1.5rem;
    min-width: 130px;
    height: auto;
    line-height: 1.5;
    border-radius: 9999px !important;
  }
  
  /* Business Management buttons */
  .pool-view-buttons .pool-view-btn.admin-analytics-tab,
  .pool-view-buttons .pool-view-btn.admin-profile-tab,
  .pool-view-buttons .pool-view-btn.admin-management-tab,
  .pool-view-buttons .pool-view-btn.admin-customers-tab,
  .pool-view-buttons .pool-view-btn.admin-orders-tab,
  .pool-view-buttons .pool-view-btn.admin-subscriptions-tab,
  .pool-view-buttons .pool-view-btn.admin-contact-tab,
  .pool-view-buttons .pool-view-btn.admin-admin-tab,
  .pool-view-buttons .pool-view-btn.admin-staff-tab {
    font-size: 1rem !important;
    padding: 0.75rem 1.5rem;
    min-width: 130px;
    height: auto;
    line-height: 1.5;
    border-radius: 25px !important;
  }
}

/* On wider screens, ensure all buttons have the same width and height */
@media (min-width: 1024px) {
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.customer-details-btn,
  .pool-view-buttons .pool-view-btn.loyalty-btn,
  .pool-view-buttons .pool-view-btn.achievements-btn,
  .pool-view-buttons .pool-view-btn.promo-codes-btn,
  .pool-view-buttons .pool-view-btn.costs-btn,
  .pool-view-buttons .pool-view-btn.products-btn,
  .pool-view-buttons .pool-view-btn.business-btn,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.levels-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 140px;
    max-width: none;
    font-size: 1rem !important;
    text-align: center;
    padding: 0.75rem 1.5rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    border-radius: 25px !important;
  }
  
  /* Inventory Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.breakdown-tab,
  .pool-view-buttons .pool-view-btn.ingredients-btn,
  .pool-view-buttons .pool-view-btn.warehouse-btn,
  .pool-view-buttons .pool-view-btn.packaging-btn,
  .pool-view-buttons .pool-view-btn.appliances-btn,
  .pool-view-buttons .pool-view-btn.costs-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 140px;
    max-width: none;
    font-size: 1rem !important;
    text-align: center;
    padding: 0.75rem 1.5rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    border-radius: 25px !important;
  }
  
  /* Products Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.inventory-tab,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.products-tab,
  .pool-view-buttons .pool-view-btn.packs-tab,
  .pool-view-buttons .pool-view-btn.batch-tab {
    flex: 0 0 auto;
    width: auto;
    min-width: 140px;
    max-width: none;
    font-size: 1rem !important;
    text-align: center;
    padding: 0.75rem 1.5rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    border-radius: 25px !important;
  }
  
  /* Business Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.admin-analytics-tab,
  .pool-view-buttons .pool-view-btn.admin-profile-tab,
  .pool-view-buttons .pool-view-btn.admin-management-tab,
  .pool-view-buttons .pool-view-btn.admin-customers-tab,
  .pool-view-buttons .pool-view-btn.admin-orders-tab,
  .pool-view-buttons .pool-view-btn.admin-subscriptions-tab,
  .pool-view-buttons .pool-view-btn.admin-contact-tab,
  .pool-view-buttons .pool-view-btn.admin-admin-tab,
  .pool-view-buttons .pool-view-btn.admin-staff-tab {
    flex: 0 0 auto;
    width: auto;
    min-width: 140px;
    max-width: none;
    font-size: 1rem !important;
    text-align: center;
    padding: 0.75rem 1.5rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    border-radius: 25px !important;
  }
}

/* On very wide screens, set a consistent width and height for all buttons */
@media (min-width: 1200px) {
  .pool-view-buttons {
    justify-content: center;
  }
  
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.customer-details-btn,
  .pool-view-buttons .pool-view-btn.loyalty-btn,
  .pool-view-buttons .pool-view-btn.achievements-btn,
  .pool-view-buttons .pool-view-btn.promo-codes-btn,
  .pool-view-buttons .pool-view-btn.costs-btn,
  .pool-view-buttons .pool-view-btn.products-btn,
  .pool-view-buttons .pool-view-btn.business-btn,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.levels-btn {
    flex: 0 0 auto;
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    font-size: 1rem !important;
    text-align: center;
    padding: 0.75rem 1.5rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    border-radius: 9999px !important;
  }
  
  /* Inventory Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.breakdown-tab,
  .pool-view-buttons .pool-view-btn.ingredients-btn,
  .pool-view-buttons .pool-view-btn.warehouse-btn,
  .pool-view-buttons .pool-view-btn.packaging-btn,
  .pool-view-buttons .pool-view-btn.appliances-btn,
  .pool-view-buttons .pool-view-btn.costs-btn {
    flex: 0 0 auto;
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    font-size: 1rem !important;
    text-align: center;
    padding: 0.75rem 1.5rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    border-radius: 25px !important;
  }
  
  /* Products Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.inventory-tab,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.products-tab,
  .pool-view-buttons .pool-view-btn.packs-tab,
  .pool-view-buttons .pool-view-btn.batch-tab,
  .pool-view-buttons .pool-view-btn.products-btn,
  .pool-view-buttons .pool-view-btn.business-btn,
  .pool-view-buttons .pool-view-btn.levels-btn {
    flex: 0 0 auto;
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    font-size: 1rem !important;
    text-align: center;
    padding: 0.75rem 1.5rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    border-radius: 9999px !important;
  }
  
  /* Business Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.admin-analytics-tab,
  .pool-view-buttons .pool-view-btn.admin-profile-tab,
  .pool-view-buttons .pool-view-btn.admin-management-tab,
  .pool-view-buttons .pool-view-btn.admin-customers-tab,
  .pool-view-buttons .pool-view-btn.admin-orders-tab,
  .pool-view-buttons .pool-view-btn.admin-subscriptions-tab,
  .pool-view-buttons .pool-view-btn.admin-contact-tab,
  .pool-view-buttons .pool-view-btn.admin-admin-tab,
  .pool-view-buttons .pool-view-btn.admin-staff-tab {
    flex: 0 0 auto;
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    font-size: 1rem !important;
    text-align: center;
    padding: 0.75rem 1.5rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    border-radius: 25px !important;
  }
}

/* Narrow screens - wrap buttons to multiple rows, make them compact but uniform size */
@media (max-width: 767px) {
  .pool-view-buttons {
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.customer-details-btn,
  .pool-view-buttons .pool-view-btn.loyalty-btn,
  .pool-view-buttons .pool-view-btn.achievements-btn,
  .pool-view-buttons .pool-view-btn.promo-codes-btn,
  .pool-view-buttons .pool-view-btn.costs-btn,
  .pool-view-buttons .pool-view-btn.products-btn,
  .pool-view-buttons .pool-view-btn.business-btn,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.levels-btn {
    flex: 0 0 auto;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    font-size: 0.95rem !important;
    padding: 0.65rem 1rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    text-align: center;
    border-radius: 9999px !important;
  }
  
  /* Inventory Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.breakdown-tab,
  .pool-view-buttons .pool-view-btn.ingredients-btn,
  .pool-view-buttons .pool-view-btn.warehouse-btn,
  .pool-view-buttons .pool-view-btn.packaging-btn,
  .pool-view-buttons .pool-view-btn.appliances-btn,
  .pool-view-buttons .pool-view-btn.costs-btn {
    flex: 0 0 auto;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    font-size: 0.95rem !important;
    padding: 0.65rem 1rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    text-align: center;
    border-radius: 25px !important;
  }
  
  /* Products Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.inventory-tab,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.products-tab,
  .pool-view-buttons .pool-view-btn.packs-tab,
  .pool-view-buttons .pool-view-btn.batch-tab,
  .pool-view-buttons .pool-view-btn.products-btn,
  .pool-view-buttons .pool-view-btn.business-btn,
  .pool-view-buttons .pool-view-btn.levels-btn {
    flex: 0 0 auto;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    font-size: 0.95rem !important;
    padding: 0.65rem 1rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    text-align: center;
    border-radius: 9999px !important;
  }
  
  /* Business Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.admin-analytics-tab,
  .pool-view-buttons .pool-view-btn.admin-profile-tab,
  .pool-view-buttons .pool-view-btn.admin-management-tab,
  .pool-view-buttons .pool-view-btn.admin-customers-tab,
  .pool-view-buttons .pool-view-btn.admin-orders-tab,
  .pool-view-buttons .pool-view-btn.admin-subscriptions-tab,
  .pool-view-buttons .pool-view-btn.admin-contact-tab,
  .pool-view-buttons .pool-view-btn.admin-admin-tab,
  .pool-view-buttons .pool-view-btn.admin-staff-tab {
    flex: 0 0 auto;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    font-size: 0.95rem !important;
    padding: 0.65rem 1rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    text-align: center;
    border-radius: 25px !important;
  }
}

/* Very narrow screens - make buttons compact but still uniform */
@media (max-width: 480px) {
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.customer-details-btn,
  .pool-view-buttons .pool-view-btn.loyalty-btn,
  .pool-view-buttons .pool-view-btn.achievements-btn,
  .pool-view-buttons .pool-view-btn.promo-codes-btn,
  .pool-view-buttons .pool-view-btn.costs-btn,
  .pool-view-buttons .pool-view-btn.products-btn,
  .pool-view-buttons .pool-view-btn.business-btn,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.levels-btn {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    font-size: 0.85rem !important;
    padding: 0.6rem 0.8rem;
    border-radius: 9999px !important;
  }
  
  /* Inventory Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.breakdown-tab,
  .pool-view-buttons .pool-view-btn.ingredients-btn,
  .pool-view-buttons .pool-view-btn.warehouse-btn,
  .pool-view-buttons .pool-view-btn.packaging-btn,
  .pool-view-buttons .pool-view-btn.appliances-btn,
  .pool-view-buttons .pool-view-btn.costs-btn {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    font-size: 0.85rem !important;
    padding: 0.6rem 0.8rem;
  }
  
  /* Products Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.inventory-tab,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.products-tab,
  .pool-view-buttons .pool-view-btn.packs-tab,
  .pool-view-buttons .pool-view-btn.batch-tab,
  .pool-view-buttons .pool-view-btn.products-btn,
  .pool-view-buttons .pool-view-btn.business-btn,
  .pool-view-buttons .pool-view-btn.levels-btn {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    font-size: 0.85rem !important;
    padding: 0.6rem 0.8rem;
    border-radius: 9999px !important;
  }
  
  /* Business Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.admin-analytics-tab,
  .pool-view-buttons .pool-view-btn.admin-profile-tab,
  .pool-view-buttons .pool-view-btn.admin-management-tab,
  .pool-view-buttons .pool-view-btn.admin-customers-tab,
  .pool-view-buttons .pool-view-btn.admin-orders-tab,
  .pool-view-buttons .pool-view-btn.admin-subscriptions-tab,
  .pool-view-buttons .pool-view-btn.admin-contact-tab,
  .pool-view-buttons .pool-view-btn.admin-admin-tab,
  .pool-view-buttons .pool-view-btn.admin-staff-tab {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    font-size: 0.85rem !important;
    padding: 0.6rem 0.8rem;
  }
}

.pool-view-btn {
  background: transparent;
  color: #5d4037;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  min-width: 120px;
  flex: 0 0 auto;
  white-space: nowrap;
  opacity: 0.6;
  position: relative;
  z-index: 10;
  height: auto;
  min-height: auto;
  line-height: 1.5;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pool-view-btn:hover:not(:disabled) {
  background: rgba(93, 64, 55, 0.1);
  color: #3e2723;
}

/* Management and Overview buttons - styled like admin dashboard buttons */
.pool-view-btn.management-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%) !important;
  border: 3px solid #36034d !important;
  color: white !important;
  opacity: 0.6 !important;
}

.pool-view-btn.management-btn:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.management-btn.active {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  border-color: #2d0a3d !important;
  box-shadow: 0 4px 12px rgba(87, 5, 138, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.overview-btn {
  background: #696969 !important;
  border: 3px solid #2f2f2f !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.overview-btn:hover {
  background: #808080 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.overview-btn.active {
  background: #696969 !important;
  border-color: #1a1a1a !important;
  box-shadow: 0 4px 12px rgba(105, 105, 105, 0.4);
  opacity: 1 !important;
}

/* Businesses and Customers buttons - styled like admin dashboard buttons */
.pool-view-btn.businesses-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%) !important;
  border: 3px solid #0a1a1d !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.businesses-btn:hover {
  background: linear-gradient(135deg, #0e3a40 0%, #14545c 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.businesses-btn.active {
  background: linear-gradient(135deg, #0e3a40 0%, #14545c 100%) !important;
  border-color: #06292b !important;
  box-shadow: 0 4px 12px rgba(20, 84, 92, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.customers-btn {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%) !important;
  border: 3px solid #1b5e20 !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.customers-btn:hover {
  background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.customers-btn.active {
  background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%) !important;
  border-color: #155724 !important;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.fired-staff-btn {
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%) !important;
  border: 3px solid #8b0000 !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.fired-staff-btn:hover {
  background: linear-gradient(135deg, #b71c1c 0%, #d32f2f 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.fired-staff-btn.active {
  background: linear-gradient(135deg, #b71c1c 0%, #d32f2f 100%) !important;
  border-color: #8b0000 !important;
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.4);
  opacity: 1 !important;
}

/* Business Profile Page Button Styles */
.pool-view-btn.profile-btn {
  background: #696969 !important;
  border: 3px solid #2f2f2f !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.profile-btn:hover {
  background: #808080 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.profile-btn.active {
  background: #808080 !important;
  border-color: #1a1a1a !important;
  box-shadow: 0 4px 12px rgba(105, 105, 105, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.manage-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%) !important;
  border: 3px solid #36034d !important;
  color: white !important;
  opacity: 0.6 !important;
}

.pool-view-btn.manage-btn:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.manage-btn.active {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  border-color: #2d0a3d !important;
  box-shadow: 0 4px 12px rgba(87, 5, 138, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.admin-btn {
  background: #007bff !important;
  border: 3px solid #004085 !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.admin-btn:hover {
  background: #0056b3 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.admin-btn.active {
  background: #0056b3 !important;
  border-color: #003d82 !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.staff-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%) !important;
  border: 3px solid #36034d !important;
  color: white !important;
  opacity: 0.6 !important;
}

.pool-view-btn.staff-btn:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.staff-btn.active {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  border-color: #36034d !important;
  box-shadow: 0 4px 12px rgba(87, 5, 138, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.customers-btn {
  background: #28a745 !important;
  border: 3px solid #155724 !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.customers-btn:hover {
  background: #1e7e34 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(40, 167, 69, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.customers-btn.active {
  background: #1e7e34 !important;
  border-color: #155724 !important;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
  opacity: 1 !important;
}

/* Setup button - Pink */
.pool-view-btn.setup-btn {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
  border: 3px solid #be185d !important;
  color: white !important;
  opacity: 1 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.setup-btn:hover {
  background: linear-gradient(135deg, #db2777 0%, #ec4899 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(236, 72, 153, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.setup-btn.active {
  background: linear-gradient(135deg, #db2777 0%, #ec4899 100%) !important;
  border-color: #9f1239 !important;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.5);
  opacity: 1 !important;
}

.pool-view-btn.message-btn {
  background: #007bff !important;
  border: 3px solid #004085 !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.message-btn:hover {
  background: #0056b3 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.message-btn.active {
  background: #0056b3 !important;
  border-color: #003d82 !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
  opacity: 1 !important;
}

/* General active state - only applies when no specific button class is present */
.pool-view-btn.active:not(.products-tab):not(.breakdown-tab):not(.items-tab):not(.inventory-tab):not(.packs-tab):not(.batch-tab):not(.ingredients-btn):not(.packaging-btn):not(.warehouse-btn):not(.costs-btn):not(.appliances-btn):not(.customer-details-btn):not(.promo-codes-btn):not(.loyalty-btn):not(.admin-analytics-tab):not(.admin-management-tab):not(.admin-admin-tab):not(.admin-staff-tab):not(.admin-qr-tab):not(.admin-subscriptions-tab):not(.admin-contact-tab):not(.admin-customers-tab):not(.admin-orders-tab) {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  opacity: 1;
}

/* General active hover state - only applies when no specific button class is present */
.pool-view-btn.active:hover:not(.products-tab):not(.breakdown-tab):not(.items-tab):not(.inventory-tab):not(.packs-tab):not(.batch-tab):not(.ingredients-btn):not(.packaging-btn):not(.warehouse-btn):not(.costs-btn):not(.appliances-btn):not(.customer-details-btn):not(.promo-codes-btn):not(.loyalty-btn):not(.admin-analytics-tab):not(.admin-management-tab):not(.admin-admin-tab):not(.admin-staff-tab):not(.admin-qr-tab):not(.admin-subscriptions-tab):not(.admin-contact-tab):not(.admin-customers-tab):not(.admin-orders-tab):not(.business-profile-btn):not(.business-btn):not(.products-btn):not(.achievements-btn):not(.current-business-btn):not(.all-carts-btn):not(.business-cart-btn) {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Products button - orange (like Costs) */
/* Products button - Purple (matching admin-products-btn) */
.pool-view-btn.products-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%) !important;
  border: 3px solid #36034d !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.products-btn:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4);
  opacity: 0.8 !important;
  color: #3e2723 !important;
}

.pool-view-btn.products-btn.active {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%) !important;
  border-color: #36034d !important;
  box-shadow: 0 6px 16px rgba(87, 5, 138, 0.4);
  opacity: 1 !important;
}

/* Business button - teal (like Warehouse) */
.pool-view-btn.business-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%) !important;
  border: 3px solid #0a1a1d !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.business-btn:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.business-btn.active {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%) !important;
  border-color: #0a1a1d !important;
  box-shadow: 0 4px 12px rgba(20, 84, 92, 0.4);
  opacity: 1 !important;
}

/* Loyalty button - green by default (other pages) */
.pool-view-btn.loyalty-btn {
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%) !important;
  border: 2px solid #2e7d32 !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.loyalty-btn:hover {
  background: linear-gradient(135deg, #388e3c 0%, #4caf50 100%) !important;
  border: 2px solid #2e7d32 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4);
  opacity: 0.8 !important;
  color: #3e2723 !important;
}

.pool-view-btn.loyalty-btn.active {
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%) !important;
  border: 2px solid #2e7d32 !important;
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4), inset 0 0 8px rgba(76, 175, 80, 0.2);
  opacity: 1 !important;
  transform: scale(1.02);
}

.pool-view-btn.loyalty-btn.active:hover {
  background: linear-gradient(135deg, #388e3c 0%, #4caf50 100%) !important;
  border: 2px solid #2e7d32 !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.5);
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Loyalty Management page: Loyalty button uses Inventory blue (same as Admin Dashboard Inventory button) */
.loyalty-management-tabs .pool-view-btn.loyalty-btn {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%) !important;
  border: 2px solid #0a5d7a !important;
  color: #fff !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 8px rgba(16, 142, 188, 0.3);
}

.loyalty-management-tabs .pool-view-btn.loyalty-btn:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%) !important;
  border: 2px solid #0a5d7a !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
  opacity: 0.8 !important;
  color: #3e2723 !important;
}

.loyalty-management-tabs .pool-view-btn.loyalty-btn.active {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%) !important;
  border: 2px solid #0a5d7a !important;
  box-shadow: 0 6px 16px rgba(16, 142, 188, 0.4), inset 0 0 8px rgba(16, 142, 188, 0.2);
  opacity: 1 !important;
  transform: scale(1.02);
}

.loyalty-management-tabs .pool-view-btn.loyalty-btn.active:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%) !important;
  border: 2px solid #0a5d7a !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(16, 142, 188, 0.5);
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Achievements button - purple */
.pool-view-btn.achievements-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%) !important;
  border: 2px solid #36034d !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.achievements-btn:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  border: 2px solid #36034d !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4);
  opacity: 0.8 !important;
  color: #3e2723 !important;
}

.pool-view-btn.achievements-btn.active {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%) !important;
  border: 2px solid #36034d !important;
  box-shadow: 0 6px 16px rgba(87, 5, 138, 0.4), inset 0 0 8px rgba(87, 5, 138, 0.2);
  opacity: 1 !important;
  transform: scale(1.02);
}

.pool-view-btn.achievements-btn.active:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  border: 2px solid #36034d !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(87, 5, 138, 0.5);
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Current Business button - orange (like Products) */
.pool-view-btn.current-business-btn {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%) !important;
  border: 3px solid #d35400 !important;
  color: white !important;
  opacity: 0.6 !important;
}

.pool-view-btn.current-business-btn:hover {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.current-business-btn.active {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%) !important;
  border-color: #b8460a !important;
  box-shadow: 0 4px 12px rgba(230, 126, 34, 0.4);
  opacity: 1 !important;
}

/* All Carts button - purple (like Loyalty) */
.pool-view-btn.all-carts-btn {
  background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%) !important;
  border: 3px solid #7d3c98 !important;
  color: white !important;
  opacity: 0.6 !important;
}

.pool-view-btn.all-carts-btn:hover {
  background: linear-gradient(135deg, #7d3c98 0%, #8e44ad 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.all-carts-btn.active {
  background: linear-gradient(135deg, #7d3c98 0%, #8e44ad 100%) !important;
  border-color: #6a2c93 !important;
  box-shadow: 0 4px 12px rgba(142, 68, 173, 0.4);
  opacity: 1 !important;
}

/* Business Cart buttons - teal (like Business) */
.pool-view-btn.business-cart-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%) !important;
  border: 3px solid #0a1a1d !important;
  color: white !important;
  opacity: 0.6 !important;
}

.pool-view-btn.business-cart-btn:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.business-cart-btn.active {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%) !important;
  border-color: #0a1a1d !important;
  box-shadow: 0 4px 12px rgba(20, 84, 92, 0.4);
  opacity: 1 !important;
}

.pool-view-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Disabled state for loyalty, achievements, and levels buttons when unlinked */
.pool-view-btn.loyalty-btn.disabled,
.pool-view-btn.achievements-btn.disabled,
.pool-view-btn.levels-btn.disabled {
  background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%) !important;
  border: 2px solid #7f8c8d !important;
  color: #7f8c8d !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
  pointer-events: auto !important; /* Allow pointer events for tooltips */
  border-radius: 9999px !important;
}

.pool-view-btn.loyalty-btn.disabled:hover,
.pool-view-btn.achievements-btn.disabled:hover,
.pool-view-btn.levels-btn.disabled:hover {
  background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%) !important;
  border: 2px solid #7f8c8d !important;
  color: #7f8c8d !important;
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.6 !important;
}

/* Profile button - teal (like Business) */
.pool-view-btn.profile-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%) !important;
  border: 2px solid #0a1a1d !important;
  color: #ffffff !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.profile-btn:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%) !important;
  border-color: #0a1a1d !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.4);
  opacity: 0.8 !important;
  color: #3e2723 !important;
}

.pool-view-btn.profile-btn.active {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%) !important;
  border-color: #0a1a1d !important;
  box-shadow: 0 6px 16px rgba(20, 84, 92, 0.4), inset 0 0 8px rgba(20, 84, 92, 0.2);
  opacity: 1 !important;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.profile-btn.active:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%) !important;
  border-color: #0a1a1d !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(20, 84, 92, 0.5);
  opacity: 1 !important;
  color: #3e2723 !important;
}

/* Tools button - Light Blue (like Warehouse/Inventory) */
.pool-view-btn.tools-btn {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%) !important;
  border: 2px solid #0a5d7a !important;
  color: #ffffff !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.tools-btn:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%) !important;
  border-color: #0a5d7a !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
  opacity: 0.8 !important;
  color: #3e2723 !important;
}

.pool-view-btn.tools-btn.active {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%) !important;
  border-color: #0a5d7a !important;
  box-shadow: 0 6px 16px rgba(16, 142, 188, 0.4), inset 0 0 8px rgba(16, 142, 188, 0.2);
  opacity: 1 !important;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.tools-btn.active:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%) !important;
  border-color: #0a5d7a !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(16, 142, 188, 0.5);
  opacity: 1 !important;
  color: #3e2723 !important;
}

/* Pool Overview Content */
.pool-overview-content {
  padding: 1rem;
  background: #ffffff;
  border: 2px solid #8d6e63;
  border-radius: 12px;
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-height: auto;
  overflow: visible;
}

@media (max-width: 768px) {
  .pool-overview-content {
    align-items: center;
  }
}

.pool-overview-header {
  text-align: center;
  margin-bottom: 2rem;
}

.pool-overview-header h3 {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.pool-overview-header p {
  color: #5d4037;
  font-family: 'Verdana', sans-serif;
  font-size: 1rem;
}

.templates-list {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

@media (max-width: 768px) {
  .templates-list {
    align-items: center;
    padding: 0.75rem;
  }
}

/* Template items styled like inventory horizontal panels */
.template-item {
  display: grid;
  grid-template-columns: 50px 2fr 120px;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
  background: rgba(245, 245, 220, 0.9);
  border: 2px solid #8d6e63;
  border-left: 8px solid #007bff; /* Blue accent like ingredients section */
  border-radius: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

@media (min-width: 769px) {
  .template-item {
    gap: 8rem;
  }
}

@media (max-width: 768px) {
  .template-item {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 0.75rem;
    padding: 1rem;
  }
  
  .template-item-cell.number-cell {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding-left: 0;
  }
  
  .template-item-cell.info-cell {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }
  
  .template-item-cell.action-cell {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding-left: 0;
  }
}

/* Template item hover - blue glow effect (like ingredients section) */
.template-item:hover:not(.editing) {
  background-color: #f3e5f5 !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* Template item cells - matching inventory table cell styling */
.template-item-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.template-item-cell.number-cell {
  justify-content: center;
  align-items: center;
}

.template-item-cell.icon-cell {
  justify-content: center;
}

.template-item-cell.info-cell {
  justify-content: flex-start;
  text-align: left;
  padding-left: 0px;
}

.template-item-cell.status-cell {
  justify-content: center;
  text-align: center;
}

.template-item-cell.action-cell {
  justify-content: center;
  text-align: center;
}

.template-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-status-icon {
  font-size: 1.5rem;
  color: #007bff;
}

.template-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.template-number {
  font-weight: 700;
  color: #3e2723;
  font-size: 1.2rem;
  font-family: 'Verdana', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.template-name {
  font-weight: 700;
  color: #3e2723;
  font-size: 2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-id {
  font-style: italic;
  color: #8d6e63;
  font-size: 0.9rem;
}

.template-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.available {
  background-color: #e8f5e8;
  color: #2e7d32;
  border: 1px solid #4caf50;
}

.template-delete-btn {
  background: #c0392b;
  color: white;
  border: 2px solid #8b0000;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Verdana', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  min-width: 50px;
  text-align: center;
  line-height: 1.2;
}

.template-delete-btn:hover {
  background: #e74c3c;
  border-color: #8b0000;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.no-templates {
  text-align: center;
  padding: 2rem;
  color: #5d4037;
  font-family: 'Verdana', sans-serif;
}

.loading-templates {
  text-align: center;
  padding: 2rem;
  color: #5d4037;
  font-family: 'Verdana', sans-serif;
}

/* Inventory Management Button Colors */
/* Permissions button - Red (matching site map button) */
.pool-view-btn.ingredients-btn {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border: 2px solid #0a5d7a;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.ingredients-btn:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.ingredients-btn.active {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border-color: #0a5d7a;
  box-shadow: 0 6px 16px rgba(16, 142, 188, 0.4), inset 0 0 8px rgba(16, 142, 188, 0.2);
  opacity: 1;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.ingredients-btn.active:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(16, 142, 188, 0.5);
  opacity: 1;
  color: #3e2723 !important;
}

.pool-view-btn.packaging-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border: 2px solid #004d06;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.packaging-btn:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.25);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.packaging-btn.active {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border-color: #004d06;
  box-shadow: 0 6px 16px rgba(0, 119, 10, 0.4), inset 0 0 8px rgba(0, 119, 10, 0.2);
  opacity: 1;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.packaging-btn.active:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 119, 10, 0.5);
  opacity: 1;
  color: #3e2723 !important;
}

/* Work button - Light Blue (matching permissions/admin-management-tab) */
.pool-view-btn.warehouse-btn {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border: 2px solid #0a5d7a;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.warehouse-btn:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.warehouse-btn.active {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border-color: #0a5d7a;
  box-shadow: 0 6px 16px rgba(16, 142, 188, 0.4), inset 0 0 8px rgba(16, 142, 188, 0.2);
  opacity: 1;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.warehouse-btn.active:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(16, 142, 188, 0.5);
  opacity: 1;
  color: #3e2723 !important;
}

.pool-view-btn.costs-btn {
  background: linear-gradient(135deg, #EB640A 0%, #C95409 100%);
  border: 2px solid #B84A08;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.costs-btn:hover {
  background: linear-gradient(135deg, #C95409 0%, #EB640A 100%);
  border-color: #B84A08;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(235, 100, 10, 0.4);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.costs-btn.active {
  background: linear-gradient(135deg, #EB640A 0%, #C95409 100%) !important;
  border-color: #B84A08 !important;
  box-shadow: 0 6px 16px rgba(235, 100, 10, 0.4), inset 0 0 8px rgba(235, 100, 10, 0.2);
  opacity: 1 !important;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.costs-btn.active:hover {
  background: linear-gradient(135deg, #C95409 0%, #EB640A 100%) !important;
  border-color: #B84A08 !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(235, 100, 10, 0.5);
  color: #3e2723 !important;
}

.pool-view-btn.appliances-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border: 2px solid #36034d;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.appliances-btn:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #36034d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.25);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.appliances-btn.active {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border-color: #36034d;
  box-shadow: 0 6px 16px rgba(87, 5, 138, 0.4), inset 0 0 8px rgba(87, 5, 138, 0.2);
  opacity: 1;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.appliances-btn.active:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #36034d;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(87, 5, 138, 0.5);
  opacity: 1;
  color: #3e2723 !important;
}

/* Products Management Button Colors - Master Purple for Appliances */
.pool-view-btn.products-tab {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border: 2px solid #36034d;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.products-tab:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #36034d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4);
  color: #3e2723 !important;
}

.pool-view-btn.products-tab.active:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #36034d;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(87, 5, 138, 0.5);
  color: #3e2723 !important;
}

.pool-view-btn.products-tab.active {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border-color: #36034d;
  box-shadow: 0 6px 16px rgba(87, 5, 138, 0.4);
  opacity: 1;
  color: #ffffff !important;
}

/* Profile button - Teal (matching admin-profile-tab) */
.pool-view-btn.breakdown-tab {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border: 2px solid #0a1a1d;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.breakdown-tab:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  border-color: #0a1a1d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.25);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.breakdown-tab.active {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border-color: #0a1a1d;
  box-shadow: 0 6px 16px rgba(20, 84, 92, 0.4), inset 0 0 8px rgba(20, 84, 92, 0.2);
  opacity: 1;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.breakdown-tab.active:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  border-color: #0a1a1d;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(20, 84, 92, 0.5);
  opacity: 1;
  color: #ffffff !important;
}

/* Items Tab Button Colors - Master Green for Packaging */
.pool-view-btn.items-tab {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border: 2px solid #004d06;
  color: #ffffff;
  opacity: 0.6;
  border-radius: 9999px !important;
}

.pool-view-btn.items-tab:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4);
  color: #3e2723 !important;
}

.pool-view-btn.items-tab.active {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border-color: #004d06;
  box-shadow: 0 6px 16px rgba(0, 119, 10, 0.4);
  opacity: 1;
  color: #ffffff !important;
}

.pool-view-btn.items-tab.active:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 119, 10, 0.5);
  opacity: 1;
  color: #ffffff !important;
}

/* Levels button - Greyed out when disabled, requires linking */
.pool-view-btn.levels-btn {
  background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
  border: 2px solid #5d6d7e;
  color: #ffffff;
  opacity: 0.5;
  border-radius: 9999px !important;
}

.pool-view-btn.levels-btn:hover:not(.disabled) {
  background: linear-gradient(135deg, #7f8c8d 0%, #95a5a6 100%);
  border-color: #5d6d7e;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(149, 165, 166, 0.4);
  opacity: 0.8;
}

.pool-view-btn.levels-btn.active:not(.disabled) {
  background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
  border-color: #5d6d7e;
  box-shadow: 0 6px 16px rgba(149, 165, 166, 0.4);
  opacity: 1;
}

.pool-view-btn.levels-btn.disabled {
  background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
  border-color: #5d6d7e;
  opacity: 0.5;
  cursor: not-allowed;
}

.pool-view-btn.levels-btn.disabled:hover {
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

/* Inventory Tab Button Colors - Master Blue for Ingredients */
.pool-view-btn.inventory-tab {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border: 2px solid #36034d;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.inventory-tab:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #36034d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.inventory-tab.active {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border-color: #36034d;
  box-shadow: 0 6px 16px rgba(87, 5, 138, 0.4), inset 0 0 8px rgba(87, 5, 138, 0.2);
  opacity: 1;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.inventory-tab.active:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #36034d;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(87, 5, 138, 0.5);
  opacity: 1;
  color: #ffffff !important;
}

/* Packs Tab Button Colors - Master Yellow for Packs */
.pool-view-btn.packs-tab {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border: 2px solid #004d06;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.packs-tab:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.packs-tab.active {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%) !important;
  border-color: #004d06 !important;
  box-shadow: 0 6px 16px rgba(0, 119, 10, 0.4), inset 0 0 8px rgba(0, 119, 10, 0.2);
  opacity: 1 !important;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.packs-tab.active:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%) !important;
  border-color: #004d06 !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 119, 10, 0.5);
  color: #ffffff !important;
}

.pool-view-btn.recipes-tab {
  background: linear-gradient(135deg, #a31b00 0%, #d32f2f 100%);
  border: 2px solid #8b0000;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.recipes-tab:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #a31b00 100%);
  border-color: #8b0000;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(163, 27, 0, 0.4);
  opacity: 0.8;
}

.pool-view-btn.recipes-tab.active {
  background: linear-gradient(135deg, #a31b00 0%, #d32f2f 100%) !important;
  border-color: #8b0000 !important;
  box-shadow: 0 6px 16px rgba(163, 27, 0, 0.4), inset 0 0 8px rgba(163, 27, 0, 0.2);
  opacity: 1 !important;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.recipes-tab.active:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #a31b00 100%) !important;
  border-color: #8b0000 !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(163, 27, 0, 0.5);
}

/* Batch tab button - red (matching recipes-tab) */
/* Override CookPage.css batch-tab styles for AdminProductsPage */
.pool-view-btn.batch-tab {
  background: linear-gradient(135deg, #a31b00 0%, #d32f2f 100%) !important;
  border: 2px solid #8b0000 !important;
  color: #ffffff !important;
  opacity: 0.6 !important;
}

.pool-view-btn.batch-tab:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #a31b00 100%) !important;
  border-color: #8b0000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(163, 27, 0, 0.4) !important;
  opacity: 0.8 !important;
  color: #3e2723 !important;
}

.pool-view-btn.batch-tab.active,
.pool-view-btn.batch-tab.active:focus {
  background: linear-gradient(135deg, #a31b00 0%, #d32f2f 100%) !important;
  border-color: #8b0000 !important;
  box-shadow: 0 6px 16px rgba(163, 27, 0, 0.4), inset 0 0 8px rgba(163, 27, 0, 0.2) !important;
  opacity: 1 !important;
  transform: scale(1.02) !important;
  color: #ffffff !important;
}

.pool-view-btn.batch-tab.active:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #a31b00 100%) !important;
  border-color: #8b0000 !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 8px 20px rgba(163, 27, 0, 0.5) !important;
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Business Page Button Colors */
.pool-view-btn.admin-management-tab {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border: 2px solid #0a5d7a;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.admin-management-tab:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
  opacity: 0.8;
}

.pool-view-btn.admin-management-tab.active {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border-color: #0a5d7a;
  box-shadow: 0 6px 16px rgba(16, 142, 188, 0.4), inset 0 0 8px rgba(16, 142, 188, 0.2);
  opacity: 1;
  transform: scale(1.02);
}

.pool-view-btn.admin-admin-tab {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border: 3px solid #36034d;
  color: #ffffff;
  opacity: 0.6;
  box-shadow: 0 4px 8px rgba(87, 5, 138, 0.3);
}

.pool-view-btn.admin-admin-tab:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #2d023a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4);
  opacity: 0.8;
}

.pool-view-btn.admin-admin-tab.active {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border-color: #36034d;
  box-shadow: 0 6px 16px rgba(87, 5, 138, 0.4), inset 0 0 8px rgba(87, 5, 138, 0.2);
  opacity: 1;
  transform: scale(1.02);
}

.pool-view-btn.admin-staff-tab {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  border: 2px solid #374151;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.admin-staff-tab:hover {
  background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
  border-color: #374151;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(107, 114, 128, 0.4);
  opacity: 0.8;
}

.pool-view-btn.admin-staff-tab.active {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  border-color: #374151;
  box-shadow: 0 6px 16px rgba(107, 114, 128, 0.4), inset 0 0 8px rgba(107, 114, 128, 0.2);
  opacity: 1;
  transform: scale(1.02);
}

/* Reports tab - brown/amber (documents, reports) */
/* Analytics tab - green (like Customers button) */
.pool-view-btn.admin-analytics-tab {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border: 2px solid #004d06;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.admin-analytics-tab:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4);
  opacity: 0.8;
}

.pool-view-btn.admin-analytics-tab.active {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border-color: #004d06;
  box-shadow: 0 6px 16px rgba(0, 119, 10, 0.4), inset 0 0 8px rgba(0, 119, 10, 0.2);
  opacity: 1;
  transform: scale(1.02);
}

.pool-view-btn.admin-profile-tab {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border: 2px solid #0a1a1d;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.admin-profile-tab:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  border-color: #0a1a1d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.4);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.admin-profile-tab.active {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border-color: #0a1a1d;
  box-shadow: 0 6px 16px rgba(20, 84, 92, 0.4);
  opacity: 1;
}

.pool-view-btn.admin-qr-tab {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
  border: 2px solid #d35400;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.admin-qr-tab:hover {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  border-color: #d68910;
}

.pool-view-btn.admin-qr-tab.active {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
  border-color: #d35400;
  box-shadow: 0 6px 16px rgba(230, 126, 34, 0.4);
  opacity: 1;
}

.pool-view-btn.admin-subscriptions-tab {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border: 2px solid #36034d;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.admin-subscriptions-tab:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #36034d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4);
  opacity: 0.8;
}

.pool-view-btn.admin-subscriptions-tab.active {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border-color: #36034d;
  box-shadow: 0 6px 16px rgba(87, 5, 138, 0.4), inset 0 0 8px rgba(87, 5, 138, 0.2);
  opacity: 1;
  transform: scale(1.02);
}

/* Customers Tab Button Colors - Master Green for Packaging */
.pool-view-btn.admin-customers-tab {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border: 2px solid #004d06;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.admin-customers-tab:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4);
}

.pool-view-btn.admin-customers-tab.active {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border-color: #004d06;
  box-shadow: 0 6px 16px rgba(0, 119, 10, 0.4);
  opacity: 1;
}

.pool-view-btn.admin-customers-tab.active:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  box-shadow: 0 8px 20px rgba(0, 119, 10, 0.5);
  transform: translateY(-1px);
}

.pool-view-btn.admin-orders-tab {
  background: linear-gradient(135deg, #EB640A 0%, #c95208 100%);
  border: 2px solid #a84307;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.admin-orders-tab:hover {
  background: linear-gradient(135deg, #c95208 0%, #EB640A 100%);
  border-color: #a84307;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(235, 100, 10, 0.4);
}

.pool-view-btn.admin-orders-tab.active {
  background: linear-gradient(135deg, #EB640A 0%, #c95208 100%);
  border-color: #a84307;
  box-shadow: 0 6px 16px rgba(235, 100, 10, 0.4);
  opacity: 1;
}

.pool-view-btn.admin-orders-tab.active:hover {
  background: linear-gradient(135deg, #c95208 0%, #EB640A 100%);
  border-color: #a84307;
  box-shadow: 0 8px 20px rgba(235, 100, 10, 0.5);
  transform: translateY(-1px);
}

/* Fired Staff Filter Buttons - Matching Business Management Style */
.pool-view-btn.fired-staff-all-btn {
  background: linear-gradient(135deg, #696969 0%, #4b5563 100%);
  border: 2px solid #2f2f2f;
  color: #ffffff;
  opacity: 0.6;
  border-radius: 9999px !important;
}

.pool-view-btn.fired-staff-all-btn:hover {
  background: linear-gradient(135deg, #4b5563 0%, #696969 100%);
  border-color: #2f2f2f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(105, 105, 105, 0.4);
  opacity: 0.8;
}

.pool-view-btn.fired-staff-all-btn.active {
  background: linear-gradient(135deg, #696969 0%, #4b5563 100%);
  border-color: #1a1a1a;
  box-shadow: 0 6px 16px rgba(105, 105, 105, 0.4);
  opacity: 1;
}

.pool-view-btn.fired-staff-pending-btn {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  border: 2px solid #e65100;
  color: #ffffff;
  opacity: 0.6;
  border-radius: 9999px !important;
}

.pool-view-btn.fired-staff-pending-btn:hover {
  background: linear-gradient(135deg, #f57c00 0%, #ff9800 100%);
  border-color: #e65100;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(255, 152, 0, 0.4);
  opacity: 0.8;
}

.pool-view-btn.fired-staff-pending-btn.active {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  border-color: #bf360c;
  box-shadow: 0 6px 16px rgba(255, 152, 0, 0.4);
  opacity: 1;
}

.pool-view-btn.fired-staff-deleted-btn {
  background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
  border: 2px solid #155724;
  color: #ffffff;
  opacity: 0.6;
  border-radius: 9999px !important;
}

.pool-view-btn.fired-staff-deleted-btn:hover {
  background: linear-gradient(135deg, #1e7e34 0%, #28a745 100%);
  border-color: #155724;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(40, 167, 69, 0.4);
  opacity: 0.8;
}

.pool-view-btn.fired-staff-deleted-btn.active {
  background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
  border-color: #0d3e1a;
  box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
  opacity: 1;
}

.pool-view-btn.admin-contact-tab {
  background: linear-gradient(135deg, #EB640A 0%, #C95409 100%);
  border: 2px solid #B84A08;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.admin-contact-tab:hover {
  background: linear-gradient(135deg, #C95409 0%, #EB640A 100%);
  border-color: #B84A08;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(235, 100, 10, 0.4);
  opacity: 0.8;
}

.pool-view-btn.admin-contact-tab.active {
  background: linear-gradient(135deg, #EB640A 0%, #C95409 100%);
  border-color: #B84A08;
  box-shadow: 0 6px 16px rgba(235, 100, 10, 0.4), inset 0 0 8px rgba(235, 100, 10, 0.2);
  opacity: 1;
  transform: scale(1.02);
}

/* Customer Management Button Colors - Purple (like products) */
.pool-view-btn.customer-details-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border: 2px solid #0a1a1d;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.customer-details-btn:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  border: 2px solid #0a1a1d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.4);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.customer-details-btn.active {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border: 2px solid #0a1a1d;
  box-shadow: 0 6px 16px rgba(20, 84, 92, 0.4), inset 0 0 8px rgba(20, 84, 92, 0.2);
  opacity: 1;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.customer-details-btn.active:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  border: 2px solid #0a1a1d;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(20, 84, 92, 0.5);
  opacity: 1;
  color: #ffffff !important;
}

.pool-view-btn.promo-codes-btn {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
  border: 2px solid #d35400;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.promo-codes-btn:hover {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
  border: 2px solid #b8460a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(230, 126, 34, 0.4);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.promo-codes-btn.active {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
  border: 2px solid #b8460a;
  box-shadow: 0 6px 16px rgba(230, 126, 34, 0.4), inset 0 0 8px rgba(230, 126, 34, 0.2);
  opacity: 1;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.promo-codes-btn.active:hover {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
  border: 2px solid #b8460a;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(230, 126, 34, 0.5);
  opacity: 1;
  color: #ffffff !important;
}


.pool-view-btn.achievements-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border: 2px solid #004d06;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.achievements-btn:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border: 2px solid #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4);
  color: #3e2723 !important;
}

.pool-view-btn.achievements-btn.active {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border: 2px solid #004d06;
  box-shadow: 0 6px 16px rgba(0, 119, 10, 0.4), inset 0 0 8px rgba(0, 119, 10, 0.2);
  opacity: 1;
  color: #ffffff !important;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #8d6e63;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem auto;
}

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

/* Packs Section Styles */
.packs-section {
  padding: 0;
}

.packs-section-header {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.packs-section-title-panel {
  background-color: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
  width: 100%;
}

.packs-section-title {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  text-shadow: -1px -1px 0 #0a1a1d, 1px -1px 0 #0a1a1d, -1px 1px 0 #0a1a1d, 1px 1px 0 #0a1a1d;
}

.packs-section-subtitle {
  color: #ffffff;
  font-size: 1.1rem;
  margin: 0;
  opacity: 0.9;
  font-weight: 500;
  line-height: 1.4;
}

.add-packs-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  color: white;
  border: 2px solid #004d06;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  display: block;
  margin: 0 auto;
  min-width: 120px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.add-packs-btn:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 0 20px rgba(0, 119, 10, 0.4);
  color: #3e2723 !important;
}

.packs-content {
  margin-top: 2rem;
}

.packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}


.packs-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  background: #f8f8f8;
  border-radius: 12px;
  border: 2px dashed #ddd;
}

.packs-empty-state p {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
  color: #666;
  margin: 0;
  font-style: italic;
}

/* Templates Count Message */
.templates-count-message {
  background: linear-gradient(135deg, #8d6e63, #5d4037);
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* User Management Filter Buttons */
.pool-view-btn.inactive-btn {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
  border: 3px solid #495057 !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.inactive-btn:hover {
  background: linear-gradient(135deg, #5a6268 0%, #6c757d 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(108, 117, 125, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.inactive-btn.active {
  background: linear-gradient(135deg, #5a6268 0%, #6c757d 100%) !important;
  border-color: #495057 !important;
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.new-btn {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
  border: 3px solid #004085 !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.new-btn:hover {
  background: linear-gradient(135deg, #0056b3 0%, #007bff 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 123, 255, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.new-btn.active {
  background: linear-gradient(135deg, #0056b3 0%, #007bff 100%) !important;
  border-color: #003d82 !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.active-btn {
  background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
  border: 3px solid #155724 !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.active-btn:hover {
  background: linear-gradient(135deg, #1e7e34 0%, #28a745 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(40, 167, 69, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.active-btn.active {
  background: linear-gradient(135deg, #1e7e34 0%, #28a745 100%) !important;
  border-color: #155724 !important;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.veteran-btn {
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%) !important;
  border: 3px solid #b8460a !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.veteran-btn:hover {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(230, 126, 34, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.veteran-btn.active {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%) !important;
  border-color: #b8460a !important;
  box-shadow: 0 4px 12px rgba(230, 126, 34, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.vip-btn {
  background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%) !important;
  border: 3px solid #ff8f00 !important;
  color: #3e2723 !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.vip-btn:hover {
  background: linear-gradient(135deg, #ffb300 0%, #ffd700 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(255, 215, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.vip-btn.active {
  background: linear-gradient(135deg, #ffb300 0%, #ffd700 100%) !important;
  border-color: #ff8f00 !important;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
  opacity: 1 !important;
}

/* Override CookPage.css batch-tab.active rule - ensure red color for AdminProductsPage */
/* This must come after CookPage.css import to override the teal color */
.pool-view-btn.batch-tab.active {
  background: linear-gradient(135deg, #a31b00 0%, #d32f2f 100%) !important;
  border-color: #8b0000 !important;
  box-shadow: 0 6px 16px rgba(163, 27, 0, 0.4), inset 0 0 8px rgba(163, 27, 0, 0.2) !important;
  opacity: 1 !important;
  transform: scale(1.02) !important;
  color: #ffffff !important;
}

.pool-view-btn.batch-tab.active:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #a31b00 100%) !important;
  border-color: #8b0000 !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 8px 20px rgba(163, 27, 0, 0.5) !important;
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Mobile / small screens: ensure active tab and button text stays white (touch and narrow viewports) */
@media (max-width: 767px) {
  .pool-view-btn.breakdown-tab.active,
  .pool-view-btn.breakdown-tab.active:hover,
  .pool-view-btn.inventory-tab.active,
  .pool-view-btn.inventory-tab.active:hover,
  .pool-view-btn.packs-tab.active,
  .pool-view-btn.packs-tab.active:hover,
  .pool-view-btn.batch-tab.active,
  .pool-view-btn.batch-tab.active:hover,
  .pool-view-btn.items-tab.active,
  .pool-view-btn.items-tab.active:hover,
  .pool-view-btn.products-tab.active,
  .pool-view-btn.customer-details-btn.active,
  .pool-view-btn.customer-details-btn.active:hover,
  .pool-view-btn.promo-codes-btn.active,
  .pool-view-btn.promo-codes-btn.active:hover,
  .pool-view-btn.loyalty-btn.active,
  .pool-view-btn.loyalty-btn.active:hover,
  .pool-view-btn.achievements-btn.active,
  .pool-view-btn.achievements-btn.active:hover {
    color: #ffffff !important;
  }
}

/* Touch devices: same guarantee when hover is unreliable (sticky hover) */
@media (hover: none) and (pointer: coarse) {
  .pool-view-btn.breakdown-tab.active,
  .pool-view-btn.inventory-tab.active,
  .pool-view-btn.packs-tab.active,
  .pool-view-btn.batch-tab.active,
  .pool-view-btn.items-tab.active,
  .pool-view-btn.products-tab.active,
  .pool-view-btn.customer-details-btn.active,
  .pool-view-btn.promo-codes-btn.active,
  .pool-view-btn.loyalty-btn.active,
  .pool-view-btn.achievements-btn.active {
    color: #ffffff !important;
  }
}
.main-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0;
  background-color: #f5f5dc; /* Light beige background for light mode */
  background-image: url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-blend-mode: soft-light;
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  /* Allow vertical scroll to pass to body - finger scroll works anywhere */
  overflow-y: visible;
  touch-action: pan-y;
}

.main-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
  pointer-events: none;
}

.main-menu::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}

.products-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  margin: 0;
  color: #14545c !important; /* Force teal color in all themes */
  position: relative;
  z-index: 1;
  text-align: center;
  text-shadow: none; /* No outline in light mode */
  cursor: default;
  transition: none;
  pointer-events: none;
}

/* Light mode specific teal color enforcement */
.light-mode .products-title,
.main-menu:not(.dark-mode):not(.dream-mode) .products-title {
  color: #14545c !important;
}

/* NUCLEAR override: absolutely no hover/focus/active effect for products-title in any mode */
.products-title:hover,
.products-title:focus,
.products-title:active,
.light-mode .products-title:hover,
.light-mode .products-title:focus,
.light-mode .products-title:active,
.dark-mode .products-title:hover,
.dark-mode .products-title:focus,
.dark-mode .products-title:active {
  color: #14545c !important; /* Force teal color on hover too */
  cursor: default !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  text-shadow: none !important;
  background: none !important;
  background-color: transparent !important;
  opacity: 1 !important;
  pointer-events: none !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Dream mode specific hover overrides - keep the animation */
.dream-mode .products-title:hover,
.dream-mode .products-title:focus,
.dream-mode .products-title:active,
.dream-mode .title-panel .products-title:hover,
.dream-mode .title-panel .products-title:focus,
.dream-mode .title-panel .products-title:active,
.dream-mode .main-menu .products-title:hover,
.dream-mode .main-menu .products-title:focus,
.dream-mode .main-menu .products-title:active {
  color: inherit !important;
  cursor: default !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  animation: dreamText 20s infinite linear !important;
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important;
  background: none !important;
  background-color: transparent !important;
  opacity: 1 !important;
  pointer-events: none !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Force solid background for title panel - MAIN MENU PAGE ONLY */
body .main-menu .title-panel,
.main-menu .title-panel,
.main-menu.light-mode .title-panel,
div.title-panel {
  background-color: #f5f5dc !important;
  background-image: none !important;
  background: #f5f5dc !important;
  border: 3px solid #3e2723 !important;
  border-radius: 20px;
  padding: 2rem 3rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 100 !important;
  transition: none;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
  cursor: default;
  pointer-events: none;
}

/* Title panel as button - navigate to admin dashboard (Business, Customer, Inventory, Products pages) */
button.title-panel.title-panel-dashboard-link,
.main-menu .title-panel.title-panel-dashboard-link {
  width: 100%;
  max-width: 800px;
  cursor: pointer !important;
  pointer-events: auto !important;
  font: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align: center;
}

.main-menu .title-panel.title-panel-dashboard-link:hover {
  filter: brightness(0.97);
}

.main-menu .title-panel.title-panel-dashboard-link:active {
  filter: brightness(0.94);
}

/* Dark/dream mode: allow click on dashboard-link title panel */
body .main-menu.dark-mode .title-panel.title-panel-dashboard-link,
.main-menu.dark-mode .title-panel.title-panel-dashboard-link,
.dark-mode .main-menu .title-panel.title-panel-dashboard-link,
.dark-mode button.title-panel.title-panel-dashboard-link,
.main-menu.dream-mode .title-panel.title-panel-dashboard-link,
.dream-mode .main-menu .title-panel.title-panel-dashboard-link {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Home button at bottom of main content (Business, Customer, Inventory, Products pages) */
.main-menu .admin-session-return-button.admin-teal {
  cursor: pointer;
  pointer-events: auto;
}

.home-button-container {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.home-button {
  display: inline-block;
  background-color: #8d6e63;
  color: white;
  font-weight: 600;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 9999px;
  transition: all 0.3s ease;
  font-size: 1.6rem;
  font-family: var(--font-family);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
}

.home-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  color: white;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Light mode home button - ensure pill shape */
.main-menu:not(.dark-mode):not(.dream-mode) .home-button {
  border-radius: 9999px !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  display: inline-block !important;
  text-decoration: none !important;
  border: 3px solid #3e2723 !important;
  background-color: #8d6e63 !important;
  color: white !important;
}

.main-menu:not(.dark-mode):not(.dream-mode) .home-button:hover {
  background-color: #a1887f !important;
  color: white !important;
  text-decoration: none !important;
}

/* New brown border panel behind the main content panel */
.main-content-border-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #3e2723;
  border-radius: 16px;
  padding: 1.5rem;
  margin: 0 auto 2rem auto;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}

.main-content-panel {
  background-color: #ffffff;
  border: 3px solid #3e2723;
  border-radius: 16px;
  padding: 2.5rem;
  margin: 0 auto 1.5rem auto;
  position: relative;
  z-index: 2;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 100%;
  overflow: visible;
  touch-action: pan-y;
}

/* Dark mode styling for the brown border panel */
.dark-mode .main-content-border-panel {
  background-color: #1a1a1a;
  border: 3px solid #000000;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Dream mode styling for the brown border panel */
.dream-mode .main-content-border-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 380px));
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 2rem;
  /* Ensure no overlap */
  overflow: hidden;
  box-sizing: border-box;
  justify-items: center;
  align-items: start;
  justify-content: center;
}

/* Admin products grid - ensure it overrides other styles */
.admin-products-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 380px)) !important;
  gap: 1.5rem !important;
  width: 100% !important;
  margin-bottom: 2rem !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  justify-items: center !important;
  align-items: start !important;
  justify-content: center !important;
  padding: 1rem !important;
}

/* Desktop and large tablets - allow more businesses side by side */
@media (min-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 400px));
    gap: 2rem;
  }
  
  .admin-products-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 400px)) !important;
    gap: 2rem !important;
  }
}

/* Extra wide screens - even more businesses side by side */
@media (min-width: 1400px) {
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 380px));
    gap: 1.8rem;
  }
}

/* Ultra wide screens - maximum businesses side by side */
@media (min-width: 1800px) {
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 380px));
    gap: 1.5rem;
  }
}

/* Medium tablets - maintain good panel size */
@media (min-width: 768px) and (max-width: 1023px) {
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 380px));
    gap: 1.5rem;
  }
}

.product-card-container {
  cursor: pointer;
  transition: all 0.3s ease;
  /* Prevent overlap and ensure proper sizing */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}


.product-card-container:hover {
transform: translateY(-1px);
}

.product-card-background {
  background-color: #8d6e63;
  border: 3px solid #3e2723;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* Portrait shape - taller than wide */
  min-height: 420px;
  max-height: 500px;
  /* Ensure proper sizing and no overlap */
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.product-card-container:hover .product-card-background {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  border-color: #3e2723;
  background-color: #8d6e63;
}

.product-name-panel {
  text-align: center;
  padding: 0.75rem;
  background-color: #14545c;
  border: 3px solid #0a1a1d;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-card-container:hover .product-name-panel {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  border-color: #0a1a1d;
  background-color: #1a6b6b;
}

.product-name {
  font-size: 1rem;
  font-weight: 700;
  color: #f5f5dc;
  font-family: 'The Wanters DEMO', serif;
  display: block;
  line-height: 1.2;
}

.product-image-card {
  background-color: #f5f5dc;
  border: 3px solid #000000;
  border-radius: 8px;
  padding: 0.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* Ensure container can accommodate full square image */
  min-height: 0;
  flex: 1;
  /* Force container to allow full image display */
  overflow: visible;
}

.product-card-container:hover .product-image-card {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  border-color: #000000;
  background-color: rgba(250, 250, 240, 0.95);
}

.product-image-card img {
  width: 100%;
  height: auto;
  object-fit: contain; /* Changed from cover to contain to prevent clipping */
  border-radius: 4px;
  transition: transform 0.3s ease;
  /* Force full square image display */
  max-width: 100%;
  /* Ensure square aspect ratio is maintained */
  aspect-ratio: 1 / 1;
  /* Force image to display completely */
  object-position: center;
}

/* Admin products: inventory display label */
.inv-display {
  display: inline-block;
  min-width: 64px;
  padding: 0.25rem 0.5rem;
  background: #f5f5dc;
  border: 3px solid #3e2723;
  border-radius: 10px;
  color: #3e2723;
  font-weight: 800;
  text-align: center;
}

/* Admin products: enhanced price input fields */
.admin-price-input {
  padding: 0.6rem 1rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-align: center;
  background: #ffffff;
  color: #3e2723;
  transition: all 0.2s ease;
  min-width: 100px;
  box-sizing: border-box;
}

.admin-price-input:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 2px rgba(93, 64, 55, 0.2);
  background: #fafafa;
}

.admin-price-input::placeholder {
  color: #8d6e63;
  opacity: 0.7;
}

/* Admin Add Product Button Styling */
.admin-add-product-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 1rem 0;
  pointer-events: auto !important;
  position: relative;
  z-index: 1000;
}

.admin-add-product-btn {
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #000000;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  min-width: 220px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  white-space: nowrap;
  background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
  color: #ffffff;
  border-color: #7d3c98;
  pointer-events: auto !important;
  position: relative;
  z-index: 1000;
}

.admin-add-product-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
  border-color: #6c3483;
}

/* Admin products: themed save button */
.admin-product-save-btn {
  background-color: #27ae60;
  color: #ffffff;
  border: 3px solid #1e8449;
  border-radius: 9999px;
  padding: 0.8rem 2.2rem;
  font-weight: 900;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.admin-product-save-btn:hover:not(:disabled) {
  background-color: #2ecc71;
  transform: translateY(-2px);
}
.admin-product-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Admin products: centered Back button under title */
.admin-product-back-btn {
  background-color: #6b7280;
  color: #ffffff;
  border: 3px solid #374151;
  border-radius: 9999px;
  padding: 0.5rem 1.5rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}
.admin-product-back-btn:hover {
  background-color: #818b9b;
  transform: translateY(-2px);
}

.product-card-container:hover .product-image-card img {
  transform: scale(1.02);
}

/* Product Image Placeholder Button */
.product-image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 120px;
  background-color: #14545c;
  border: 3px solid #0a1a1d;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.product-image-placeholder:hover {
  background-color: #0d353a;
  border-color: #06292b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.product-image-button-text {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.5px;
}

/* Dark mode styles */
.dark-mode .product-image-placeholder {
  background-color: #8d6e63;
  border-color: #000000;
}

.dark-mode .product-image-placeholder:hover {
  background-color: #a1887f;
}

/* Dream mode styles */
.dream-mode .product-image-placeholder {
  background-color: #dc2626;
  border-color: #000000;
}

.dream-mode .product-image-placeholder:hover {
  background-color: #b91c1c;
}

.view-cart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  width: 100%;
}

.view-cart-button {
  display: inline-block;
  background-color: #5d4037;
  color: white;
  font-weight: 600;
  text-decoration: none;
  padding: 0.8rem 2rem;
  border-radius: 9999px;
  transition: all 0.2s ease;
  font-size: 1.2rem;
  font-family: var(--font-family);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723;
}

.view-cart-button:hover {
  background-color: #795548;
  transform: translateY(-2px);
  color: white;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Dark mode specific styles */
.main-menu.dark-mode {
  background-color: #3e2723; /* Dark brown background */
  background-image: url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 84 48'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23412f2a' fill-opacity='0.25'%3E%3Cpath d='M42 48c23.196 0 42-10.745 42-24S65.196 0 42 0 0 10.745 0 24s18.804 24 42 24zm0-5c19.33 0 35-8.954 35-19s-15.67-19-35-19S7 13.954 7 24s15.67 19 35 19z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 120px 120px;
  background-position: center, center;
  background-blend-mode: multiply;
  position: relative;
  min-height: 100vh;
}

.main-menu.dark-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
  pointer-events: none;
}

.main-menu.dark-mode::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}

.dark-mode .products-title {
  color: #14545c !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* Dark mode title hover effect removed - no hover effects on title */

body .main-menu.dark-mode .title-panel,
.main-menu.dark-mode .title-panel,
.dark-mode .main-menu .title-panel,
.dark-mode div.title-panel {
  background-color: #3e2723 !important;
  background-image: none !important;
  background: #3e2723 !important;
  border: 3px solid #000000 !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  z-index: 100 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
  cursor: default;
  pointer-events: none;
}

.dark-mode .main-content-panel {
  background-color: #3e2723;
  border: 3px solid #8d6e63 !important;
}

/* Additional high-specificity selectors for dark mode main content panel */
body.dark-mode .main-content-panel,
html.dark-mode .main-content-panel,
.main-menu.dark-mode .main-content-panel {
  border: 3px solid #8d6e63 !important;
}

.dark-mode .product-card-background {
  background-color: #1a1a1a;
  border: 3px solid #000000;
}

.dark-mode .product-card-container:hover .product-card-background {
  background-color: #1a1a1a;
  border-color: #000000;
}

.dark-mode .product-image-card {
  background-color: #8d6e63;
  border: 3px solid #000000;
}

.dark-mode .product-name-panel {
  background-color: #8d6e63;
  border: 3px solid #000000;
}

.dark-mode .product-card-container:hover .product-image-card {
  background-color: #a1887f;
  border-color: #000000;
}

.dark-mode .product-card-container:hover .product-name-panel {
  border-color: #000000;
}

.dark-mode .product-name {
  color: #fff8e1;
}

/* Dark mode home button with ultra-high specificity - matching dream mode shape */
body.dark-mode .main-menu .home-button,
.dark-mode.main-menu .home-button,
.dark-mode .main-menu .home-button,
.dark-mode .home-button {
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  border-radius: 9999px !important;
  background-color: #8d6e63 !important;
  font-weight: 900 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.5px !important;
  padding: 1rem 2rem !important;
  max-width: none !important;
  min-width: 0 !important;
  width: auto !important;
  display: inline-block !important;
  text-align: center !important;
  text-decoration: none !important;
}

/* Dark mode home button hover with ultra-high specificity */
body.dark-mode .main-menu .home-button:hover,
.dark-mode.main-menu .home-button:hover,
.dark-mode .main-menu .home-button:hover,
.dark-mode .home-button:hover {
  color: #000000 !important;
  background-color: #a1887f !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-4px) !important;
  text-decoration: none !important;
}

.dark-mode .view-cart-button {
  border: 3px solid #000000;
}

/* Dream mode specific styles */
.main-menu.dream-mode {
  background-color: #0d0d0d;
  background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  position: relative;
  min-height: 100vh;
}

.main-menu.dream-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(13, 13, 13, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
  pointer-events: none;
}

.main-menu.dream-mode::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
}

.dream-mode .product-card-background {
  background-color: rgba(190, 190, 190, 1);
  border: 3px solid #000000;
}

.dream-mode .product-card-container:hover .product-card-background {
  background-color: rgba(210, 210, 210, 1);
  border-color: #000000;
}

.dream-mode .product-image-card,
.dream-mode .product-name-panel {
  border: 3px solid #000000;
}

/* Dream mode product image card styling */
.dream-mode .product-image-card {
  background-color: #8d6e63 !important; /* Brown background */
}

/* Dream mode product name panel styling */
.dream-mode .product-name-panel {
  background-color: #ffffff !important; /* White background */
}

/* Dream mode product name text styling - with color-changing animation */
.dream-mode .product-name {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Dream mode panel styling */
.dream-mode .main-content-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

body .main-menu.dream-mode .title-panel,
.main-menu.dream-mode .title-panel,
.dream-mode .main-menu .title-panel,
.dream-mode div.title-panel {
  background-color: #1a0d23 !important;
  background-image: none !important;
  background: #1a0d23 !important;
  border: 3px solid #000000 !important;
  border-radius: 20px;
  position: relative;
  z-index: 100 !important;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
  cursor: default;
  pointer-events: none;
}

/* Dream mode title with color-changing animation and black border */
.dream-mode .products-title {
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important; /* Only black border, no glow */
  cursor: default !important; /* Remove pointer cursor */
  transition: none !important; /* Remove all transitions */
  pointer-events: none !important; /* Disable all pointer events */
}

/* Force teal color for all dream mode title variations */
.dream-mode .main-menu .products-title,
.dream-mode .title-panel .products-title,
.main-menu.dream-mode .products-title {
  color: #14545c !important;
}

/* Override global dream mode text glow for products title specifically */
.dream-mode .main-menu .products-title,
.dream-mode .title-panel .products-title,
.main-menu.dream-mode .products-title {
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important; /* Override global glow with only black border */
  animation: dreamText 20s infinite linear !important; /* Keep the color animation */
  cursor: default !important; /* Remove pointer cursor */
  transition: none !important; /* Remove all transitions */
  pointer-events: none !important; /* Disable all pointer events */
}

/* Completely disable ALL hover effects for dream mode main menu title */
.dream-mode .products-title:hover,
.dream-mode .title-panel .products-title:hover,
.dream-mode .main-menu .products-title:hover {
  color: inherit !important; /* Keep the animated color exactly the same */
  cursor: default !important; /* No pointer cursor */
  transition: none !important; /* No transitions */
  transform: none !important; /* No transforms */
  filter: none !important; /* No filters */
  animation: dreamText 20s infinite linear !important; /* Keep the same animation */
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important; /* Keep the same text-shadow */
  background: none !important; /* No background changes */
  background-color: transparent !important; /* No background color */
  opacity: 1 !important; /* No opacity changes */
}

/* Dream mode button text styling - clean bold black text */
.dream-mode .home-button,
.dream-mode .view-cart-button {
  border: 3px solid #000000;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Override any global dream mode text effects for main menu buttons */
.dream-mode .home-button:not(:hover),
.dream-mode .view-cart-button:not(:hover) {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Dream mode button hover effects with white text and glow animation */
.dream-mode .home-button:hover,
.dream-mode .view-cart-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleMainMenu 1.5s ease-in-out infinite alternate !important;
}

@keyframes dreamSparkleMainMenu {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

/* Legacy responsive rules - kept for non-iOS devices */
@media (max-width: 1200px) {
  .products-grid:not(.ios-device) {
    grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
    gap: 1.5rem;
  }
}

@media (max-width: 992px) {
  .products-grid:not(.ios-device) {
    grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
    gap: 1.2rem;
  }

  .product-card-background {
    min-height: 260px;
    max-height: 300px;
  }

  .product-image-card img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
  }
}

@media (max-width: 820px) {
  .products-grid:not(.ios-device) {
    grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
    gap: 1.2rem;
  }
  
  .product-card-background {
    min-height: 280px;
    max-height: 320px;
  }
}

@media (max-width: 768px) {
  .main-menu {
    padding: 0.75rem 0;
    width: 100%;
    min-width: 100%;
    margin: 0;
    left: 0;
    right: 0;
  }
  
  .products-title {
    font-size: 3.5rem;
  }
  
  .title-panel {
    padding: 0.5rem 0.4rem;
    margin-bottom: 0.5rem;
    max-width: 99%;
    width: 99%;
    border-width: 1px;
  }
  
  .main-content-border-panel {
    width: 99%;
    padding: 0.5rem;
    border-width: 1px;
  }
  
  .main-content-panel {
    padding: 1rem;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    border-width: 1px;
    overflow: visible;
    touch-action: pan-y;
  overscroll-behavior-y: auto;
  }

/* Keep page scroll responsive when pointer/finger is over inner business panels. */
.main-content-border-panel,
.main-content-panel,
.business-widget-content,
.business-widget-section {
  touch-action: pan-y;
  overscroll-behavior-y: auto;
}
  
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
    gap: 1.2rem;
    width: 100%;
    justify-content: center;
    /* Allow document scroll - finger scroll works on product page */
    overflow: visible;
  }
  
  .admin-products-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px)) !important;
    gap: 1.2rem !important;
    width: 100% !important;
    padding: 0.5rem !important;
    overflow: visible !important;
    justify-content: center !important;
  }

  .product-name {
    font-size: 1.2rem;
    line-height: 1.3;
  }

  .product-card-background {
    padding: 0.8rem;
    width: 100%;
    border-width: 2px;
    gap: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Maintain proper proportions */
    min-height: 380px;
    max-height: 420px;
  }

  .product-name-panel {
    padding: 0.5rem;
    border-width: 2px;
    order: -1;
    width: 100%;
    flex-shrink: 0;
  }

  .product-image-card {
    padding: 0.4rem;
    border-width: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 2;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
  }

  .product-image-card img {
    width: 100%;
    height: auto;
    max-width: 100%;
    /* Remove max-height constraint to allow full image display */
    object-fit: contain;
    border-radius: 4px;
    /* Ensure full square image is displayed */
  }
}

@media (max-width: 600px) {
  .main-content-border-panel {
    width: 99.5%;
    padding: 0.25rem;
  }
  
  .main-content-panel {
    padding: 0.5rem;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 300px));
    gap: 1rem;
    justify-content: center;
    overflow: visible;
  }
  
  .admin-products-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 300px)) !important;
    gap: 1rem !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .product-name {
    font-size: 1.1rem;
    line-height: 1.2;
  }

  .product-card-background {
    padding: 0.6rem;
    gap: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Portrait shape - taller than wide */
    min-height: 260px;
    max-height: 300px;
  }

  .product-name-panel {
    padding: 0.25rem;
    order: -1;
    width: 100%;
    flex-shrink: 0;
  }
  
  .product-image-card {
    padding: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 2;
    flex: 1;
    width: 100%;
    min-height: 0;
  }

  .product-image-card img {
    width: 100%;
    height: auto;
    max-width: 100%;
    /* Remove max-height constraint to allow full image display */
    object-fit: contain;
    border-radius: 4px;
    /* Ensure full square image is displayed */
  }
}

@media (max-width: 480px) {
  .main-menu {
    padding: 0.25rem 0;
    width: 100%;
    min-width: 100%;
    margin: 0;
    left: 0;
    right: 0;
  }
  
  .products-title {
    font-size: 3rem;
    /* Ensure consistent text rendering across themes */
    text-shadow: none !important;
  }
  
  .product-name {
    font-size: 1.1rem;
    /* Ensure consistent text rendering across themes */
    text-shadow: none !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Theme-specific overrides for mobile consistency */
  .dark-mode .products-title,
  .dark-mode .product-name {
    text-shadow: none !important;
  }
  
  .dream-mode .products-title,
  .dream-mode .product-name {
    text-shadow: none !important;
  }
  
  .title-panel {
    padding: 0.4rem 0.3rem;
    margin-bottom: 0.4rem;
    max-width: 99.5%;
    width: 99.5%;
    margin-left: auto;
    margin-right: auto;
    border-width: 1px;
  }
  
  .main-content-border-panel {
    width: 99.8%;
    padding: 0.15rem;
    border-width: 1px;
  }
  
  .main-content-panel {
    padding: 0.1rem;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    border-width: 1px;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
    gap: 1rem;
    width: 100%;
    justify-content: center;
  }
  
  .admin-products-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 280px)) !important;
    gap: 1rem !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .product-name {
    font-size: 1.1rem;
  }

  .product-card-background {
    padding: 0.5rem;
    width: 100%;
    border-width: 2px;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Maintain proper proportions */
    min-height: 340px;
    max-height: 380px;
  }

  .product-name-panel {
    padding: 0.2rem;
    border-width: 1px;
    order: -1;
    width: 100%;
    flex-shrink: 0;
  }

  .product-image-card {
    padding: 0.15rem;
    border-width: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 2;
    flex: 1;
    width: 100%;
    min-height: 0;
  }

  .product-image-card img {
    width: 100%;
    height: auto;
    max-width: 100%;
    /* Remove max-height constraint to allow full image display */
    object-fit: contain;
    border-radius: 4px;
    /* Ensure full square image is displayed */
  }
}

@media (max-width: 360px) {
  .main-menu {
    padding: 0.125rem 0;
    width: 100%;
    min-width: 100%;
    margin: 0;
    left: 0;
    right: 0;
  }
  
  .products-title {
    font-size: 2.5rem;
  }
  
  .title-panel {
    padding: 0.3rem 0.2rem;
    margin-bottom: 0.3rem;
    max-width: 99.8%;
    width: 99.8%;
  }
  
  .main-content-border-panel {
    width: 99.9%;
    padding: 0.1rem;
  }
  
  .main-content-panel {
    padding: 0.05rem;
  }
  
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }

  .product-name {
    font-size: 1rem;
  }

  .product-card-background {
    padding: 0.2rem;
    gap: 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Portrait shape - taller than wide */
    min-height: 180px;
    max-height: 220px;
  }

  .product-name-panel {
    padding: 0.15rem;
    order: -1;
    width: 100%;
    flex-shrink: 0;
  }

  .product-image-card {
    padding: 0.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 2;
    flex: 1;
    width: 100%;
    min-height: 0;
  }

  .product-image-card img {
    width: 100%;
    height: auto;
    max-width: 100%;
    /* Remove max-height constraint to allow full image display */
    object-fit: contain;
    border-radius: 4px;
    /* Ensure full square image is displayed */
  }
}

/* Very narrow screens - single column layout */
@media (max-width: 280px) {
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 160px));
    gap: 0.5rem;
    width: 100%;
  }

  .product-card-background {
    min-height: 240px;
    max-height: 280px;
    padding: 0.3rem;
    width: 100%;
    max-width: 100%;
  }

  .product-name {
    font-size: 0.9rem;
  }

  .main-content-panel {
    padding: 0.1rem;
  }

  .main-content-border-panel {
    width: 100%;
    padding: 0.1rem;
  }
  
  .title-panel {
    padding: 0.2rem 0.1rem;
    margin-bottom: 0.2rem;
    max-width: 100%;
    width: 100%;
  }
}

/* Light mode hover/active for product name panel */
.product-card-container:hover .product-name-panel,
.product-card-container:active .product-name-panel {
  background-color: rgba(196, 166, 144, 0.8);
  border-color: #3e2723;
}
.product-card-container:hover .product-name,
.product-card-container:active .product-name {
  color: #3e2723;
}

/* Dark mode hover/active for product name panel */
.dark-mode .product-card-container:hover .product-name-panel,
.dark-mode .product-card-container:active .product-name-panel {
  background-color: #a1887f;
  border-color: #000;
}
.dark-mode .product-card-container:hover .product-name,
.dark-mode .product-card-container:active .product-name {
  color: #8d6e63;
}

/* Dream mode hover/active for product name panel */
.dream-mode .product-card-container:hover .product-name-panel,
.dream-mode .product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #1565c0 0%, #002171 100%); /* blue to much darker blue, top to bottom */
}
/* .dream-mode .product-card-container:hover .product-name, .dream-mode .product-card-container:active .product-name - no color override, keep animation running */

/* Dream mode: unique highlight for each flavour (more distinct colors, black text) */
.dream-mode .flavour-barbecue.product-card-container:hover .product-name-panel,
.dream-mode .flavour-barbecue.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #1565c0 0%, #002171 100%); /* blue to much darker blue, top to bottom */
}
.dream-mode .flavour-smokey-barbecue.product-card-container:hover .product-name-panel,
.dream-mode .flavour-smokey-barbecue.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #00e676 0%, #512da8 100%); /* bright green to indigo, top to bottom */
}
.dream-mode .flavour-teriyaki.product-card-container:hover .product-name-panel,
.dream-mode .flavour-teriyaki.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #ff69b4 0%, #1a1a1a 100%); /* pink to dark grey, top to bottom */
}
.dream-mode .flavour-korean-bbq.product-card-container:hover .product-name-panel,
.dream-mode .flavour-korean-bbq.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #7c4dff 0%, #8e24aa 100%); /* purple, top to bottom */
}
.dream-mode .flavour-sweet-chilli.product-card-container:hover .product-name-panel,
.dream-mode .flavour-sweet-chilli.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #ff9800 0%, #2e7d32 100%); /* orange to dark green, top to bottom */
}
.dream-mode .flavour-exotic-spice.product-card-container:hover .product-name-panel,
.dream-mode .flavour-exotic-spice.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #00bfae 0%, #ff3d00 100%); /* teal to orange-red, top to bottom */
}
.dream-mode .flavour-hot-chilli.product-card-container:hover .product-name-panel,
.dream-mode .flavour-hot-chilli.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #d32f2f 0%, #1a1a1a 100%); /* red to dark grey, top to bottom */
}
.dream-mode .flavour-roast-lamb.product-card-container:hover .product-name-panel,
.dream-mode .flavour-roast-lamb.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #cddc39 0%, #388e3c 100%); /* lime to green, top to bottom */
}
/* Animation is already applied to .dream-mode .product-name - no override needed on hover */

/* ===============================================================================
                      DREAM MODE: DISABLE PRODUCT HOVER EFFECTS
=============================================================================== */

/* Disable card transform on hover in dream mode */
.dream-mode .product-card-container:hover {
  transform: none !important;
}

/* Disable background changes on hover in dream mode */
.dream-mode .product-card-container:hover .product-card-background {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border-color: #000000 !important;
  background-color: rgba(190, 190, 190, 1) !important;
}

/* Disable image card changes on hover in dream mode */
.dream-mode .product-card-container:hover .product-image-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  border-color: #000000 !important;
}

/* Enable image scaling on hover in dream mode */
.dream-mode .product-card-container:hover .product-image-card img {
  transform: scale(1.05) !important;
}

/* Global Square Image Fix for All Breakpoints */
@media (max-width: 768px) {
  .product-image-card {
    aspect-ratio: 1/1 !important;
    overflow: hidden !important;
  }
  
  /* Mobile product card optimization */
  .product-card-container {
    margin-bottom: 1rem;
  }
  
  .product-card-background {
    padding: 0.5rem;
  }
  
  .product-name-panel {
    padding: 0.5rem;
  }
  
  .product-name {
    font-size: 0.9rem;
  }
  
  .product-image-card {
    display: none !important;
  }
  
  .product-image-placeholder {
    display: none !important;
  }
  
  .product-image-section {
    display: none !important;
  }
  
  /* Mobile action buttons optimization */
  .admin-product-edit-btn,
  .admin-product-copy-btn,
  .admin-product-sizes-btn {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.7rem !important;
    min-width: 60px !important;
    height: 28px !important;
  }
  
  /* Mobile sizes display optimization */
  .product-card-container .sizes-display {
    font-size: 0.7rem !important;
    gap: 0.5rem !important;
    margin: 0.25rem 0 !important;
  }
  
  .product-card-container .size-item {
    min-width: 60px !important;
    padding: 0.25rem !important;
  }
  
  .product-card-container .size-weight {
    font-size: 0.6rem !important;
    margin-bottom: 1px !important;
  }
  
  .product-card-container .size-price {
    font-size: 0.7rem !important;
  }
  
  .product-image-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 1/1 !important;
  }
}

@media (max-width: 600px) {
  .product-image-card {
    display: none !important;
  }
  
  .product-image-card img {
    display: none !important;
  }
  
  .product-image-section {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .product-image-card {
    display: none !important;
  }
  
  .product-image-card img {
    display: none !important;
  }
  
  .product-image-section {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .product-image-card {
    display: none !important;
  }
  
  .product-image-card img {
    display: none !important;
  }
  
  .product-image-section {
    display: none !important;
  }
}

/* Dream mode color-changing text animation - now defined in global.css */

/* Sold Out Product Styles */
.product-card-container.sold-out {
  position: relative;
}

.product-image-card {
  position: relative;
  overflow: hidden;
}

.sold-out-image {
  filter: brightness(0.4) saturate(0.6);
  transition: filter 0.3s ease;
}

.sold-out-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.sold-out-text {
  color: #ff0000;
  font-family: 'The Wanters DEMO', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  line-height: 1.4;
  padding: 10px;
}

/* Sold Out overlay main and subtext styling */
.sold-out-main {
  display: block;
  font-size: 2.1rem;
  font-weight: 900;
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', sans-serif !important;
  text-align: center;
  line-height: 1.1;
  margin-bottom: 0.2em;
}

.dark-mode .sold-out-main {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-family: 'The Wanters DEMO', sans-serif !important;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.light-mode .sold-out-main {
  text-shadow: none !important;
}

.sold-out-sub {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: #d32f2f;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  opacity: 0.95;
}

.dark-mode .sold-out-sub {
  color: #d32f2f !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.light-mode .sold-out-sub {
  color: #d32f2f !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.product-card-container.sold-out .product-name-panel {
  background-color: #4a3a2a !important; /* dark brown for dimming */
  opacity: 0.7;
  transition: background 0.3s, background-color 0.3s, opacity 0.3s;
}

.dark-mode .product-card-container.sold-out .product-name-panel {
  background-color: #18100a !important;
  opacity: 0.7;
}

.dream-mode .product-card-container.sold-out .product-name-panel {
  background-color: #222 !important;
  opacity: 0.7;
}

.dream-mode .sold-out-main, .dream-mode .sold-out-sub {
  color: #d32f2f !important;
  font-family: 'The Wanters DEMO', Tahoma, sans-serif !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-weight: 900;
  letter-spacing: 0.5px;
}

/* Remove all product card hover effects in dream mode */
.dream-mode .product-card-container:hover,
.dream-mode .product-card-container:focus,
.dream-mode .product-card-container:active,
.dream-mode .product-card-background:hover,
.dream-mode .product-card-background:focus,
.dream-mode .product-card-background:active {
  background: none !important;
  background-color: inherit !important;
  color: inherit !important;
  box-shadow: none !important;
  border-color: inherit !important;
  filter: none !important;
  outline: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
} 

.light-mode .product-card-container:hover .product-name-panel {
  background-color: #fafaf0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-color: #3e2723;
}

/* Inventory table styles */
.inventory-table-container {
  background: #f5f5dc;
  border: 3px solid #3e2723;
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 1000px;
  width: 100%;
}

.inventory-table-wrapper {
  overflow-x: auto;
  border: 2px solid #5d4037;
  border-radius: 8px;
}

.inventory-table {
  width: 100%;
  min-width: 600px;
}

.inventory-table-row {
  display: grid;
  grid-template-columns: 40px 2fr 100px 100px 100px 120px;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 2px solid #d7ccc8;
  transition: all 0.2s ease;
  cursor: pointer;
}

.inventory-table-row.header {
  grid-template-columns: 2fr 1fr 120px;
}

.inventory-table-row.product-row,
.inventory-table-row.item-row {
  grid-template-columns: 2fr 1fr 120px;
}

/* Ingredients and Packaging grid layout - Name, Cost, Unit, Supplier, Actions */
.inventory-table-row.ingredients-section,
.inventory-table-row.packaging-section {
  grid-template-columns: 2fr 100px 100px 1.5fr 150px;
  gap: 1rem;
}

.inventory-table-row.header.ingredients-section,
.inventory-table-row.header.packaging-section {
  grid-template-columns: 2fr 100px 100px 1.5fr 150px;
  gap: 1rem;
}

/* Appliances-specific grid layout - Name, Cost per hour, Watts, Supplier, Actions */
.inventory-table-row.appliances-section {
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr 150px;
  gap: 20px;
}

/* Appliances header row alignment */
.inventory-table-row.header.appliances-section {
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr 150px;
  gap: 20px;
}

/* Mobile label styling - ensure black text on all screen sizes */
.mobile-label {
  color: #000000 !important;
  font-weight: 700;
}

/* Default left accent bars for each section */
.inventory-table-row.ingredients-section {
  border-left: 8px solid #007bff;
}

.inventory-table-row.packaging-section {
  border-left: 8px solid #28a745;
}

.inventory-table-row.appliances-section {
  border-left: 8px solid #6f42c1;
}

.inventory-table-row.costs-section {
  border-left: 8px solid #fd7e14;
}

.inventory-table-row:hover:not(.expanded):not(.header) {
  background-color: #efebe9;
}

/* Product row hover - purple glow effect (only when not expanded) */
.inventory-table-row.product-row:hover:not(.expanded):not(.header) {
  background-color: #f3e5f5 !important;
  box-shadow: inset 0 0 8px rgba(139, 69, 209, 0.2) !important;
  transform: scale(1.01) !important;
}

/* Item row hover - green glow effect (only when not expanded) */
.inventory-table-row.item-row:hover:not(.expanded):not(.header) {
  background-color: #e8f5e8 !important;
  box-shadow: inset 0 0 8px rgba(76, 175, 80, 0.2) !important;
  transform: scale(1.01) !important;
}

/* Ingredients section hover - blue glow effect (only when not editing) */
.inventory-table-row.ingredients-section:hover:not(.editing) {
  background-color: #d4c4b0;
  box-shadow: inset 0 0 8px rgba(0, 123, 255, 0.2), 0 0 15px rgba(0, 123, 255, 0.3);
  transform: scale(1.01);
}

/* Packaging section hover - green glow effect (only when not editing) */
.inventory-table-row.packaging-section:hover:not(.editing) {
  background-color: #d4c4b0;
  box-shadow: inset 0 0 8px rgba(40, 167, 69, 0.2), 0 0 15px rgba(40, 167, 69, 0.3);
  transform: scale(1.01);
}

/* Appliances section hover - purple glow effect (only when not editing) */
.inventory-table-row.appliances-section:hover:not(.editing) {
  background-color: #d4c4b0;
  box-shadow: inset 0 0 8px rgba(111, 66, 193, 0.2), 0 0 15px rgba(111, 66, 193, 0.3);
  transform: scale(1.01);
}

/* Costs section hover - orange glow effect (only when not editing) */
.inventory-table-row.costs-section:hover:not(.editing) {
  background-color: #d4c4b0;
  box-shadow: inset 0 0 8px rgba(253, 126, 20, 0.2), 0 0 15px rgba(253, 126, 20, 0.3);
  transform: scale(1.01);
}

/* Maintain hover effect when expanded */
.inventory-table-row.product-row.expanded {
  background-color: #f3e5f5;
  box-shadow: inset 0 0 8px rgba(139, 69, 209, 0.2);
  transform: scale(1.01);
}

/* Hover effect for expanded product rows - maintain same visual effect */
.inventory-table-row.product-row.expanded:hover {
  background-color: #f3e5f5 !important;
  box-shadow: inset 0 0 8px rgba(139, 69, 209, 0.2) !important;
  transform: scale(1.01) !important;
}

.inventory-table-row.item-row.expanded {
  background-color: #e8f5e8;
  box-shadow: inset 0 0 8px rgba(76, 175, 80, 0.2);
  transform: scale(1.01);
}

/* Hover effect for expanded item rows - maintain same visual effect */
.inventory-table-row.item-row.expanded:hover {
  background-color: #e8f5e8 !important;
  box-shadow: inset 0 0 8px rgba(76, 175, 80, 0.2) !important;
  transform: scale(1.01) !important;
}

.inventory-table-row.header {
  background-color: #8d6e63;
  color: #000000;
  font-weight: 700;
  border-bottom: 3px solid #3e2723;
  cursor: default;
}

.inventory-table-row.header:hover {
  background-color: #8d6e63;
}

.inventory-table-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.inventory-table-cell.checkbox-cell {
  justify-content: center;
}

.inventory-table-cell.name-cell {
  justify-content: flex-start;
  text-align: left;
  padding-left: 0px; /* Align perfectly with header title */
}

.inventory-table-item-name {
  font-weight: 700;
  color: #3e2723;
  font-size: 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 1rem;
}

.inventory-table-item-category {
  font-style: italic;
  color: #8d6e63;
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

.inventory-table-item-cost,
.inventory-table-item-quantity,
.inventory-table-item-value,
.inventory-table-item-stock {
  font-weight: 600;
  font-size: 1rem;
}

.inventory-table-item-cost {
  color: #d32f2f;
}

.inventory-table-item-quantity {
  color: #f57c00;
}

.inventory-table-item-value {
  color: #1976d2;
}

.inventory-table-item-stock {
  color: #ff9800;
  font-weight: 600;
  font-size: 1rem;
}

.expand-arrow {
  display: inline-block;
  font-size: 1rem;
  color: #495057;
  transition: transform 0.2s ease;
  cursor: pointer;
}

.expand-arrow.expanded {
  transform: rotate(0deg);
}

.size-stock-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.85rem;
  line-height: 1.2;
}

.size-stock-list-item {
  color: #495057;
  font-weight: 500;
  white-space: nowrap;
}

.inventory-table-item-hint {
  font-style: italic;
  color: #8d6e63;
}

/* Cost cell styling - left align to match other sections */
.inventory-table-cell.cost-cell {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 0px !important;
  margin-left: 0px !important;
  align-items: flex-start !important;
}

/* Watts cell styling for appliances */
.inventory-table-cell.watts-cell {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 0px !important;
  margin-left: 0px !important;
  align-items: flex-start !important;
}

/* Appliances section specific overrides - more specific targeting */
.inventory-table-row.appliances-section .inventory-table-cell.cost-cell {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 0px !important;
  margin-left: 0px !important;
  align-items: flex-start !important;
}

.inventory-table-row.appliances-section .inventory-table-cell.watts-cell {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 0px !important;
  margin-left: 0px !important;
  align-items: flex-start !important;
}

/* Ultra-specific override for appliances - should override everything */
.inventory-table-row.appliances-section .inventory-table-cell.cost-cell,
.inventory-table-row.appliances-section .inventory-table-cell.watts-cell {
  justify-content: flex-start !important;
  text-align: left !important;
  align-items: flex-start !important;
  padding-left: 0px !important;
  margin-left: 0px !important;
}

/* Target the actual content inside the cells */
.inventory-table-row.appliances-section .inventory-table-cell.cost-cell *,
.inventory-table-row.appliances-section .inventory-table-cell.watts-cell * {
  text-align: left !important;
}

/* Supplier display styling */
.inventory-table-item-supplier {
  color: #3e2723;
  font-weight: 500;
  font-size: 0.95rem;
  font-family: 'The Wanters DEMO', serif;
}

/* Button cell styling for inline Save/Delete buttons */
.inventory-table-cell.button-cell {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  flex-direction: row; /* Side by side on wide screens */
  flex-wrap: nowrap; /* Prevent wrapping */
}

/* Ensure proper button order: Save on left, Delete on right */
.inventory-table-cell.button-cell .inventory-edit-save-btn {
  order: 1; /* Save button first (left) */
}

.inventory-table-cell.button-cell .inventory-edit-delete-btn {
  order: 2; /* Delete button second (right) */
}

/* Hide button cell on mobile and show actions below */
@media (max-width: 768px) {
  .inventory-table-cell.button-cell {
    display: none;
  }
  
  .inventory-table-row {
    grid-template-columns: 2fr 1.5fr 1.5fr;
    gap: 15px;
  }
  
  .inventory-table-row.appliances-section {
    grid-template-columns: 1.5fr 1fr 1.5fr;
    gap: 15px;
  }
  
  .inventory-table-row.header.appliances-section {
    grid-template-columns: 1.5fr 1fr 1.5fr;
    gap: 15px;
  }
}

.inventory-table-item-watts {
  font-weight: 600;
  color: #6f42c1;
  font-size: 1rem;
}

/* Button Group for Management Cell */
.button-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.sizes-btn {
  background: #8b45d1;
  color: white;
  border: none;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.sizes-btn:hover {
  background: #7c3ed1;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(139, 69, 209, 0.3);
}

.sizes-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(139, 69, 209, 0.3);
}

/* Expandable Product Rows */
.product-row-container {
  border-bottom: 2px solid #d7ccc8;
}

.product-row-container:last-child {
  border-bottom: none;
}

.inventory-table-row.product-row {
  cursor: pointer;
  position: relative;
}

/* Product Sizes Container */
.product-sizes-container {
  background: #f5f5f5;
  border-left: 8px solid #8b45d1;
  border-radius: 8px;
  margin: 0.5rem 1rem;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: expandDown 0.3s ease-out;
  overflow: hidden;
}

@keyframes expandDown {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 500px;
    opacity: 1;
  }
}

/* Size breakdown header columns */
.product-size-columns-header {
  display: grid;
  grid-template-columns: 0.8fr 180px 110px 110px;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: #ede7f6;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #4a148c;
  letter-spacing: 0.5px;
}

.size-column-label {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-size-columns-header .size-column-label:nth-child(2) {
  justify-content: flex-start;
  padding-left: 1.5rem;
}

/* Individual Size Rows - Match parent table grid structure */
.product-size-row {
  display: grid;
  grid-template-columns: 0.8fr 180px 110px 110px;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #dee2e6;
  background: white;
  transition: all 0.2s ease;
  align-items: center;
}

.product-size-row:last-child {
  border-bottom: none;
}

.size-name-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0;
}

.size-stock-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 0;
}

.size-name {
  font-weight: 600;
  color: #495057;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  min-width: auto;
  white-space: nowrap;
  margin-right: 0;
}

.size-cost,
.size-value {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.size-management {
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-stocktake-btn {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
  color: white;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.size-stocktake-btn:hover {
  background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.size-stocktake-btn:active {
  transform: translateY(0);
}

/* Size Stock Controls */
.size-stock-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
}

.size-stock-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.size-stock-btn:active {
  transform: scale(0.9);
  transition: transform 0.1s ease;
}

.size-stock-btn.holding {
  opacity: 0.8;
  transform: scale(0.85);
  transition: all 0.2s ease;
}

.size-stock-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.size-stock-btn-minus {
  background: #ff4757;
  color: white;
  border-color: #ff3742;
}

.size-stock-btn-minus:hover:not(:disabled) {
  background: #ff3742;
  border-color: #ff2f3a;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}

.size-stock-btn-plus {
  background: #2ed573;
  color: white;
  border-color: #26d065;
}

.size-stock-btn-plus:hover:not(:disabled) {
  background: #26d065;
  border-color: #1dd15a;
  box-shadow: 0 2px 8px rgba(46, 213, 115, 0.3);
}

/* Stock tab bar: square − / + buttons, smaller and darker, fixed size */
.size-stock-controls-bar .size-stock-btn {
  border-radius: 6px;
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  font-size: 14px;
  padding: 0;
  box-sizing: border-box;
}

.size-stock-controls-bar .size-stock-btn-minus {
  background: #b71c1c;
  border-color: #8b0000;
}

.size-stock-controls-bar .size-stock-btn-minus:hover:not(:disabled) {
  background: #8b0000;
  border-color: #6b0000;
  box-shadow: 0 2px 6px rgba(139, 0, 0, 0.4);
}

.size-stock-controls-bar .size-stock-btn-plus {
  background: #1b5e20;
  border-color: #004d00;
}

.size-stock-controls-bar .size-stock-btn-plus:hover:not(:disabled) {
  background: #004d00;
  border-color: #003300;
  box-shadow: 0 2px 6px rgba(0, 77, 0, 0.4);
}

.size-stock-controls-bar .size-stock-input {
  height: 24px;
  width: 56px;
  font-size: 12px;
}

.size-stock-input {
  width: 50px;
  height: 28px;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  background: white;
  transition: border-color 0.2s ease;
  flex-shrink: 0;
}

.size-stock-input:focus {
  outline: none;
  border-color: #8b45d1;
  box-shadow: 0 0 0 2px rgba(139, 69, 209, 0.2);
}

/* Size Actions Row */
.size-actions-row {
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid #e0e0e0;
}

.size-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.size-save-btn {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.size-save-btn:hover {
  background: linear-gradient(135deg, #229954 0%, #27ae60 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(39, 174, 96, 0.3);
}

.size-cancel-btn {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.size-cancel-btn:hover {
  background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
}

/* Item Expandable Rows */
.item-row-container {
  border-bottom: 2px solid #d7ccc8;
}

.item-row-container:last-child {
  border-bottom: none;
}

/* Item Details Container */
.item-details-container {
  background: #f5f5f5;
  border-left: 8px solid #4caf50;
  border-radius: 8px;
  margin: 0.5rem 0;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: expandDown 0.3s ease-out;
  overflow: hidden;
}

/* Item Size Row - matches product size row layout */
.item-size-row {
  display: grid;
  grid-template-columns: 4fr 100px 100px 100px;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #dee2e6;
  background: white;
  transition: all 0.2s ease;
  border-radius: 6px;
}

.item-size-row:last-child {
  border-bottom: none;
}


.item-size-name {
  font-weight: 600;
  color: #333;
  font-size: 1rem;
  display: flex;
  align-items: center;
  padding-left: 1rem;
}

.item-size-stock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.item-size-stock-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-top: 0.25rem;
  flex-wrap: nowrap;
  min-width: 0;
}

.item-size-stock-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.item-size-stock-btn:active {
  transform: scale(0.9);
  transition: transform 0.1s ease;
}

.item-size-stock-btn.holding {
  opacity: 0.8;
  transform: scale(0.85);
  transition: all 0.2s ease;
}

.item-size-stock-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.item-size-stock-btn-minus {
  background: #ff4757;
  color: white;
  border-color: #ff3742;
}

.item-size-stock-btn-minus:hover:not(:disabled) {
  background: #ff3742;
  border-color: #ff2f3a;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}

.item-size-stock-btn-plus {
  background: #2ed573;
  color: white;
  border-color: #26d065;
}

.item-size-stock-btn-plus:hover:not(:disabled) {
  background: #26d065;
  border-color: #1dd15a;
  box-shadow: 0 2px 8px rgba(46, 213, 115, 0.3);
}

.item-size-stock-input {
  width: 50px;
  height: 28px;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  background: white;
  transition: border-color 0.2s ease;
  flex-shrink: 0;
}

.item-size-stock-input:focus {
  outline: none;
  border-color: #4caf50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.item-size-cost,
.item-size-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.item-size-management {
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-details-header {
  background: #4caf50;
  color: white;
  padding: 0.4rem 0.8rem;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  border-radius: 6px 6px 0 0;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}


/* Item Actions Row */
.item-actions-row {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid #e0e0e0;
}

.item-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.item-save-btn {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.item-save-btn:hover {
  background: linear-gradient(135deg, #229954 0%, #27ae60 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(39, 174, 96, 0.3);
}

.item-cancel-btn {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.item-cancel-btn:hover {
  background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
}

/* Pulse animation for save confirmation */
@keyframes pulseSaved {
  0% {
    box-shadow: inset 0 0 8px rgba(76, 175, 80, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: inset 0 0 12px rgba(76, 175, 80, 0.4);
    transform: scale(1.01);
  }
  100% {
    box-shadow: inset 0 0 8px rgba(76, 175, 80, 0.2);
    transform: scale(1);
  }
}

.pulse-saved {
  animation: pulseSaved 2.5s ease-out;
  border: 2px solid rgba(76, 175, 80, 0.3);
}

/* Pulse animation for size dropdown */
.pulse-saved .product-sizes-container {
  animation: pulseSaved 2.5s ease-out;
  border: 2px solid rgba(76, 175, 80, 0.3);
}

/* Mobile responsiveness for expandable rows */
@media (max-width: 768px) {
  
  .size-stock-controls {
    gap: 4px;
    justify-content: center;
  }
  
  
  
  .item-size-stock-controls {
    gap: 4px;
    justify-content: center;
  }
  
  
  
  .size-name {
    padding-left: 0;
    margin-bottom: 0;
  }
  
  .size-stock,
  .size-cost,
  .size-value,
  .size-management {
    flex-direction: row;
    justify-content: space-between;
    padding: 0.25rem 0;
  }
  
  .product-sizes-container {
    margin: 0 0.5rem;
    border-radius: 0 0 8px 8px;
  }
}

/* Stock Management Styles */
.stocktake-btn {
  background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.stocktake-btn:hover {
  background: linear-gradient(135deg, #7d3c98 0%, #8e44ad 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.stocktake-panel {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(142, 68, 173, 0.05);
  border: 1px solid rgba(142, 68, 173, 0.2);
  border-radius: 8px;
}

.size-stock-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0;
}

.size-stock-item:last-child {
  margin-bottom: 0;
}

.size-label {
  font-weight: 600;
  color: #3e2723;
  font-size: 0.9rem;
}

.stock-input-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stock-input {
  width: 80px;
  padding: 0.25rem 0.5rem;
  border: 1px solid #d7ccc8;
  border-radius: 4px;
  text-align: center;
  font-size: 0.9rem;
}

.stock-input:disabled {
  background-color: #f5f5f5;
  color: #666;
  cursor: not-allowed;
}

.stock-edit-btn {
  background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
  color: white;
  border: none;
  border-radius: 15px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stock-edit-btn:hover {
  background: linear-gradient(135deg, #7d3c98 0%, #8e44ad 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Stock Management Modal Styles */
.stock-modal {
  background: linear-gradient(135deg, #f5f5dc 0%, #efebe9 100%);
  border: 3px solid #8d6e63;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.stock-modal-header {
  background: linear-gradient(135deg, #14545c 0%, #1a6b6b 100%);
  color: #f5f5dc;
  padding: 1.5rem;
  border-radius: 17px 17px 0 0;
  text-align: center;
  border-bottom: 2px solid #0a1a1d;
}

.stock-modal-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.stock-modal-body {
  padding: 2rem;
  background: linear-gradient(135deg, #f5f5dc 0%, #efebe9 100%);
}

.stock-modal-description {
  color: #3e2723;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
  font-style: italic;
}

.stock-sizes-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stock-size-item {
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid #d7ccc8;
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.2s ease;
}

.stock-size-item:hover {
  border-color: #8d6e63;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stock-size-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.size-name {
  font-weight: 700;
  font-size: 1.1rem;
  color: #3e2723;
  flex: 1;
}

.count-label {
  font-weight: 600;
  color: #3e2723;
  font-size: 1rem;
  margin-right: 0.5rem;
}

.stock-modal-input {
  width: 80px;
  padding: 0.75rem;
  border: 2px solid #d7ccc8;
  border-radius: 8px;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  background: white;
  transition: all 0.2s ease;
}

.stock-modal-input:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 3px rgba(141, 110, 99, 0.2);
}

/* Stock Count Controls */
.stock-count-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stock-count-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.stock-count-btn:active {
  transform: scale(0.9);
  transition: transform 0.1s ease;
}

/* Hold state visual feedback */
.stock-count-btn.holding {
  transform: scale(0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0.8;
  transition: all 0.2s ease;
}

.stock-count-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.stock-count-btn-minus {
  background: #ff4757;
  color: white;
  border-color: #ff3742;
}

.stock-count-btn-minus:hover:not(:disabled) {
  background: #ff3742;
  border-color: #ff2f3a;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}

.stock-count-btn-plus {
  background: #2ed573;
  color: white;
  border-color: #26d065;
}

.stock-count-btn-plus:hover:not(:disabled) {
  background: #26d065;
  border-color: #1dd15a;
  box-shadow: 0 2px 8px rgba(46, 213, 115, 0.3);
}

/* Adjust input width when in controls */
.stock-count-controls .stock-modal-input {
  width: 70px;
  margin: 0;
}

/* Mobile responsiveness for stock controls */
@media (max-width: 768px) {
  .stock-count-btn {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  
  .stock-count-controls .stock-modal-input {
    width: 80px;
    font-size: 1.2rem;
  }
  
  .stock-count-controls {
    gap: 10px;
  }
}

/* Touch feedback for mobile devices */
@media (hover: none) and (pointer: coarse) {
  .stock-count-btn:active {
    transform: scale(0.85);
    transition: transform 0.05s ease;
  }
}

.stock-modal-footer {
  background: linear-gradient(135deg, #8d6e63 0%, #6d4c41 100%);
  padding: 1.5rem;
  border-radius: 0 0 17px 17px;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 2px solid #5d4037;
}

.stock-cancel-btn {
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  color: white;
  border: none;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
}

.stock-cancel-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b71c1c 0%, #8d0000 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.stock-cancel-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.stock-save-btn {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
  color: white;
  border: none;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
}

.stock-save-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #1b5e20 0%, #0d3e0d 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.stock-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.stock-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  gap: 1rem;
}

.stock-loading p {
  color: #3e2723;
  font-size: 1rem;
  margin: 0;
}

.no-sizes-message {
  text-align: center;
  padding: 2rem;
  color: #8d6e63;
  font-style: italic;
}

.no-sizes-message p {
  margin: 0;
  font-size: 1rem;
}

/* Mobile Inventory Layout */
@media (max-width: 768px) {
  .inventory-table {
    display: block;
    min-width: auto;
  }
  
  .inventory-table-row {
    display: block;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f5f5dc;
    border: 2px solid #d7ccc8;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .inventory-table-row.header {
    display: none;
  }
  
  .inventory-table-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #d7ccc8;
    text-align: center;
  }
  
  .inventory-table-cell:last-child {
    border-bottom: none;
  }
  
  .inventory-table-cell.stock-cell {
    order: 2;
    font-size: 1.3rem;
    font-weight: 700;
    color: #000000;
    text-align: center;
    padding: 0.75rem 0;
  }
  
  .inventory-table-cell.management-cell {
    order: 5;
    padding: 0.75rem 0;
    border-top: 2px solid #8d6e63;
  }
  
  .inventory-table-cell.name-cell {
    order: 1;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0.5rem;
  }
  
  .inventory-table-cell.cost-cell {
    order: 2;
    font-size: 1.3rem;
    font-weight: 700;
    color: #000000;
    text-align: left !important;
    padding: 0.75rem 0;
  }
  
  .inventory-table-cell.value-cell {
    order: 3;
    font-size: 1.3rem;
    font-weight: 700;
    color: #000000;
    text-align: center;
    padding: 0.75rem 0;
  }
  
  .inventory-table-item-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #3e2723;
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .inventory-table-item-stock,
  .inventory-table-item-cost,
  .inventory-table-item-value {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 0.25rem;
  }
  
  .inventory-table-item-stock {
    font-size: 1.2rem;
  }
  
  .inventory-table-item-cost {
    color: #d32f2f !important;
  }
  
  .inventory-table-item-value {
    color: #d32f2f;
  }
  
  .mobile-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: #000000 !important;
    display: block;
    margin-bottom: 0.25rem;
  }
}

@media (max-width: 480px) {
  .inventory-table-row {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }
  
  .inventory-table-cell {
    padding: 0.4rem 0;
  }
  
  .inventory-table-item-name {
    font-size: 1.3rem;
  }
  
  .inventory-table-item-stock,
  .inventory-table-item-cost,
  .inventory-table-item-value {
    font-size: 1.1rem;
  }
  
  .mobile-label {
    font-size: 1rem;
    color: #000000 !important;
  }
  
  .inventory-table-cell.cost-cell,
  .inventory-table-cell.value-cell {
    font-size: 1.2rem;
  }
}

.dream-mode .main-content-panel,
.dream-mode .main-content-panel.main-content-panel {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
  border: 3px solid #000000 !important;
}

/* ===============================================================================
                      ADMIN BUTTON STYLING
=============================================================================== */

/* Wrapper: title + Admin button in one centred column, no overlap - same row as before, button in centre */
/* align-self: stretch + min-width ensure full width on all viewports so Admin button stays centred when title wraps */
.main-menu-header-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  margin: 0 auto 0 auto;
  margin-bottom: 0;
  box-sizing: border-box;
}

.main-menu-header-block .title-panel {
  margin-bottom: 1rem;
}

.main-menu-header-block .admin-back-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100% !important;
  min-width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
  margin: 0 0 2rem 0 !important;
  padding: 0 1rem;
  text-align: center !important;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}

/* Admin back button: centred in its row beneath title; full width so button stays centred above nav bar */
.main-menu .admin-back-button-container,
.admin-back-button-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100%;
  flex: 0 0 auto;
  margin: 0 auto 2rem auto !important;
  padding: 0 1rem;
  text-align: center !important;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}

.main-menu .admin-back-button-container .admin-back-button,
.admin-back-button-container .admin-back-button {
  display: inline-block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.admin-back-button {
  background-color: #14545c !important;
  color: #ffffff !important;
  border: 3px solid #0a1a1d !important;
  border-radius: 9999px;
  padding: 1rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.6rem;
  font-weight: 600;
  cursor: pointer !important;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 120px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 15;
  user-select: none;
}

.admin-back-button:hover {
  background-color: #1a6b75 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.admin-back-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Return to dashboard row - centre-aligned button, all screen sizes. Flex only, no position/transform. */
.main-menu .main-content-border-panel .return-to-dashboard-row,
.main-content-border-panel .return-to-dashboard-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  align-self: stretch !important;
  margin: 0 0 1rem 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.main-content-border-panel .return-to-dashboard-row .admin-back-button {
  flex-shrink: 0 !important;
}

/* Admin actions container - holds the add product button */
.admin-actions-container {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 10;
  padding: 0.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}





/* Admin add product button styling - Master Purple for Appliances */
.admin-add-product-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  color: #ffffff;
  border: 2px solid #36034d;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 120px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 15;
}

/* Green styling for Add Items button when Items tab is active - Master Green for Packaging */
.admin-add-product-btn.items-mode {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border-color: #004d06;
}

.admin-add-product-btn:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #36034d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 0 20px rgba(87, 5, 138, 0.4);
  color: #3e2723 !important;
}

.admin-add-product-btn.items-mode:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 0 20px rgba(0, 119, 10, 0.4);
  color: #3e2723 !important;
}

/* Blue enhancement button */
.admin-add-product-btn.admin-blue {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border-color: #0a5d7a;
}

.admin-add-product-btn.admin-blue:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
}

.admin-add-product-btn.admin-green {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border-color: #004d06;
  box-shadow: 0 4px 8px rgba(0, 119, 10, 0.3);
}

.admin-add-product-btn.admin-green:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4);
  color: #3e2723 !important;
}

/* Same orange as Orders tab (pool-view-btn.admin-orders-tab) */
.admin-add-product-btn.admin-orders-orange {
  background: linear-gradient(135deg, #EB640A 0%, #c95208 100%);
  border: 2px solid #a84307;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(235, 100, 10, 0.3);
}

.admin-add-product-btn.admin-orders-orange:hover {
  background: linear-gradient(135deg, #c95208 0%, #EB640A 100%);
  border-color: #a84307;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(235, 100, 10, 0.4);
  color: #ffffff !important;
}

.admin-add-product-btn.admin-orange {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
  border-color: #b8460a;
  box-shadow: 0 4px 8px rgba(211, 84, 0, 0.3);
}

.admin-add-product-btn.admin-orange:hover {
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
  border-color: #b8460a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(230, 126, 34, 0.4);
  color: #ffffff !important;
}

.admin-add-product-btn.admin-purple {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border-color: #36034d;
}

.admin-add-product-btn.admin-purple:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #2d023a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4);
  color: #ffffff !important;
}

.admin-add-product-btn.admin-blue {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border-color: #0a5d7a;
  box-shadow: 0 4px 8px rgba(16, 142, 188, 0.3);
}

.admin-add-product-btn.admin-blue:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
  color: #ffffff !important;
}

/* Templates Section Styles - Subscriptions Layout */
.templates-section {
  padding: 2rem;
  background: #ffffff;
  border-radius: 16px;
  margin-bottom: 1.5rem;
}

.templates-content {
  max-width: 1200px;
  margin: 0 auto;
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

/* Loyalty and Achievements Section Styles - Match Templates */
.loyalty-section, .achievements-section {
  padding: 2rem;
  background: #ffffff;
  border-radius: 16px;
  margin-bottom: 1.5rem;
}

.loyalty-content, .achievements-content {
  max-width: 1200px;
  margin: 0 auto;
}

.loyalty-grid, .achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.template-card, .loyalty-card, .achievement-card {
  background: #f5f5dc;
  border: 2px solid #8b4513;
  border-radius: 12px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.template-card:hover, .loyalty-card:hover, .achievement-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  border-color: #3498db;
}

.template-card h3, .loyalty-card h3, .achievement-card h3 {
  color: #8b4513;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-align: center;
}

.template-category, .loyalty-category, .achievement-category {
  color: #3498db;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-align: center;
}

.template-divider, .loyalty-divider, .achievement-divider {
  height: 2px;
  background: #8b4513;
  margin: 0.75rem 0;
  border-radius: 1px;
}

.template-description, .loyalty-description, .achievement-description {
  color: #8b4513;
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 1rem;
  text-align: center;
}

.template-stats, .loyalty-stats, .achievement-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  justify-content: center;
}

.template-stats .stat, .loyalty-stats .stat, .achievement-stats .stat {
  background: #e9ecef;
  color: #8b4513;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.template-actions, .loyalty-actions, .achievement-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.template-btn, .loyalty-btn, .achievement-btn {
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 25px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.template-btn.primary, .loyalty-btn.primary, .achievement-btn.primary {
  background: #8b4513;
  color: white;
  border: 2px solid #8b4513;
}

.template-btn.primary:hover, .loyalty-btn.primary:hover, .achievement-btn.primary:hover {
  background: #a0522d;
  border-color: #a0522d;
  transform: translateY(-1px);
}

.template-btn.secondary, .loyalty-btn.secondary, .achievement-btn.secondary {
  background: #8b4513;
  color: white;
  border: 2px solid #8b4513;
}

.template-btn.secondary:hover, .loyalty-btn.secondary:hover, .achievement-btn.secondary:hover {
  background: #a0522d;
  border-color: #a0522d;
  transform: translateY(-1px);
}

.template-btn.outline, .loyalty-btn.outline, .achievement-btn.outline {
  background: transparent;
  color: #8b4513;
  border: 2px solid #8b4513;
}

.template-btn.outline:hover, .loyalty-btn.outline:hover, .achievement-btn.outline:hover {
  background: #8b4513;
  color: white;
  transform: translateY(-1px);
}

/* Templates button styling - solid light blue when selected, transparent when not */
.pool-view-btn.templates-btn {
  background: transparent;
  color: #2c3e50;
  border: 2px solid #8b4513;
}

.pool-view-btn.templates-btn:hover {
  background: rgba(52, 152, 219, 0.1);
  border-color: #3498db;
  transform: translateY(-1px);
}

.pool-view-btn.templates-btn.active {
  background: #3498db;
  color: white;
  border-color: #3498db;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pool-view-btn.templates-btn.disabled {
  background: #e9ecef;
  color: #6c757d;
  border-color: #dee2e6;
  cursor: not-allowed;
  opacity: 0.6;
}

.pool-view-btn.templates-btn.disabled:hover {
  background: #e9ecef;
  color: #6c757d;
  border-color: #dee2e6;
  transform: none;
  box-shadow: none;
}

.admin-add-product-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Products breakdown button styling */
.products-breakdown-btn {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  color: white;
  border: 3px solid #d68910;
  border-radius: 25px;
  padding: 0.8rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 150px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 15;
  user-select: none;
}

.products-breakdown-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 0 20px rgba(243, 156, 18, 0.4);
}

.products-breakdown-btn:disabled {
  background: #95a5a6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Dark mode admin button overrides */
.dark-mode .admin-back-button {
  background-color: #14545c;
  border-color: #000000;
  color: #000000;
}

.dark-mode .admin-recipes-btn {
  background: #9333ea;
  border-color: #000000;
  color: #ffffff;
}

.dark-mode .admin-add-product-btn {
  background-color: #27ae60;
  border-color: #000000;
  color: #ffffff;
}

/* Dream mode admin button overrides */
.dream-mode .admin-back-button {
  background-color: #14545c;
  border-color: #0a1a1d;
  color: #000000;
}

.dream-mode .admin-recipes-btn {
  background: #9333ea;
  border-color: #000000;
  color: #ffffff;
}

.dream-mode .admin-add-product-btn {
  background-color: #27ae60;
  border-color: #000000;
  color: #ffffff;
}

/* ===============================================================================
                      PRODUCTS PAGE ADMIN BUTTON OVERRIDE
=============================================================================== */

/* Ultra-specific override for products page admin button */
.main-menu .admin-back-button-container .admin-back-button,
.main-menu .admin-back-button,
.admin-back-button {
  background-color: #14545c !important;
  color: #ffffff !important;
  border: 3px solid #0a1a1d !important;
}

.main-menu .admin-back-button-container .admin-back-button:hover,
.main-menu .admin-back-button:hover,
.admin-back-button:hover {
  background-color: #1a6b75 !important;
  color: #ffffff !important;
  border: 3px solid #0a1a1d !important;
}

/* Nuclear override for products page - highest specificity */
.main-menu .admin-back-button-container button.admin-back-button,
.main-menu .admin-back-button-container button[class*="admin-back"],
button.admin-back-button,
button[class*="admin-back"] {
  background-color: #14545c !important;
  background: #14545c !important;
  color: #ffffff !important;
  border: 3px solid #0a1a1d !important;
  border-color: #0a1a1d !important;
}

.main-menu .admin-back-button-container button.admin-back-button:hover,
.main-menu .admin-back-button-container button[class*="admin-back"]:hover,
button.admin-back-button:hover,
button[class*="admin-back"]:hover {
  background-color: #1a6b75 !important;
  background: #1a6b75 !important;
  color: #ffffff !important;
  border: 3px solid #0a1a1d !important;
  border-color: #0a1a1d !important;
}

/* ===============================================================================
                      PRODUCTS TAB LAYOUT
=============================================================================== */

/* Products Tab Buttons */
.products-tab-buttons {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Mobile responsiveness for products tab buttons */
@media (max-width: 768px) {
  .products-tab-buttons {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .products-tab-btn {
    min-width: 150px;
    padding: 0.6rem 1rem;
    font-size: 1rem;
  }
}

.products-tab-btn {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
  color: white;
  border: 3px solid #d35400;
  border-radius: 9999px;
  padding: 0.8rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 120px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 15;
  user-select: none;
}

.products-tab-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.products-tab-btn.active {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
  border-color: #b8460a;
  box-shadow: 0 4px 12px rgba(230, 126, 34, 0.4);
}

/* Products tab - orange (default) */
.products-tab-btn.products-tab {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
  border: 3px solid #d35400;
}

.products-tab-btn.products-tab:hover {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.products-tab-btn.products-tab.active {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
  border-color: #b8460a;
  box-shadow: 0 4px 12px rgba(230, 126, 34, 0.4);
}

/* Breakdown tab - purple (like ingredients) */
.products-tab-btn.breakdown-tab {
  background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
  border: 3px solid #7d3c98;
}

.products-tab-btn.breakdown-tab:hover {
  background: linear-gradient(135deg, #7d3c98 0%, #8e44ad 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.products-tab-btn.breakdown-tab.active {
  background: linear-gradient(135deg, #7d3c98 0%, #8e44ad 100%);
  border-color: #6a2c93;
  box-shadow: 0 4px 12px rgba(142, 68, 173, 0.4);
}

/* Items tab - green (like packaging) */
.products-tab-btn.items-tab {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  border: 3px solid #229954;
}

.products-tab-btn.items-tab:hover {
  background: linear-gradient(135deg, #229954 0%, #27ae60 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.products-tab-btn.items-tab.active {
  background: linear-gradient(135deg, #229954 0%, #27ae60 100%);
  border-color: #1e8449;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}

.products-tab-btn:disabled {
  background: #95a5a6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Products Section Header */
.products-section-header {
  margin-bottom: 2rem;
}

.products-section-title-panel {
  background-color: #14545c;
  border: 3px solid #3e2723;
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
  width: 100%;
}

.products-section-title {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 2.1rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  text-shadow: -1px -1px 0 #0a1a1d, 1px -1px 0 #0a1a1d, -1px 1px 0 #0a1a1d, 1px 1px 0 #0a1a1d;
}

.products-section-subtitle {
  color: #ffffff;
  font-size: 1.1rem;
  margin: 0;
  opacity: 0.9;
  font-weight: 500;
  line-height: 1.4;
}

/* Products Section Actions */
.products-section-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}

/* Section Info Message - Legacy (keeping for compatibility) */
.section-info-message {
  font-size: 1.1rem;
  color: #5d4037;
  text-align: center;
  font-style: italic;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif;
  max-width: 500px;
  line-height: 1.4;
  opacity: 0.9;
  font-weight: 500;
}

/* Products Extra Section */
.products-extra-section {
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  margin-top: 1rem;
}

.products-extra-header {
  background-color: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 2rem;
  text-align: center;
}

.products-extra-title {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  text-shadow: -1px -1px 0 #0a1a1d, 1px -1px 0 #0a1a1d, -1px 1px 0 #0a1a1d, 1px 1px 0 #0a1a1d;
}

.products-extra-subtitle {
  color: #ffffff;
  font-size: 1rem;
  margin: 0;
  opacity: 0.9;
}

.products-extra-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.extra-placeholder {
  background-color: #f5f5dc;
  border: 2px solid #3e2723;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.extra-placeholder h3 {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
}

.extra-placeholder p {
  color: #666;
  font-size: 1.1rem;
  margin: 0;
}

/* ===============================================================================
                      PRODUCTS BREAKDOWN SECTION
=============================================================================== */

/* Products Breakdown View Styles */
.products-breakdown-section {
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  margin-top: 1rem;
}

.products-breakdown-header {
  background-color: #14545c;
  border: 3px solid #3e2723;
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
  width: 100%;
}

/* Header fills to container corners (no gap in rounded top) */
.products-breakdown-section > .products-breakdown-header:first-child {
  margin: -2rem -2rem 1.5rem -2rem;
  border-radius: 8px 8px 0 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 1rem 2rem;
}

.products-breakdown-title {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 2.1rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  text-shadow: -1px -1px 0 #0a1a1d, 1px -1px 0 #0a1a1d, -1px 1px 0 #0a1a1d, 1px 1px 0 #0a1a1d;
}

.products-breakdown-subtitle {
  color: #ffffff;
  font-size: 1.1rem;
  margin: 0;
  opacity: 0.9;
  font-weight: 500;
  line-height: 1.4;
}

.products-breakdown-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.products-breakdown-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.breakdown-stat-card {
  background-color: #f5f5dc;
  border: 2px solid #3e2723;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.breakdown-stat-card h3 {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}

/* Titles for Promo Code Analytics on loyalty overview page */
.products-breakdown-section .breakdown-stat-card h3 {
  font-size: 1.3rem;
  margin: 0 0 0.25rem 0; /* Reduced spacing between title and number */
}

/* Make loyalty section panels match products/inventory width */
.products-breakdown-section .products-breakdown-stats {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.breakdown-stat-value {
  color: #14545c;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.5rem;
  font-weight: 900;
  display: block;
}

.products-breakdown-table h3 {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  text-align: center;
}

/* Ensure inventory-breakdown-table h3 matches products-breakdown-table h3 */
.inventory-breakdown-table h3 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin: 0 0 1rem 0 !important;
  text-align: center !important;
}

.breakdown-table-container {
  overflow-x: auto;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #ffffff;
}

.breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'The Wanters DEMO', serif;
}

.breakdown-table th {
  background-color: #14545c;
  color: #ffffff;
  padding: 1rem;
  text-align: left;
  font-weight: 700;
  font-size: 1.1rem;
  border-bottom: 2px solid #0a1a1d;
}

.breakdown-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #ddd;
  color: #3e2723;
  font-weight: 600;
}

.breakdown-table tr:hover {
  background-color: #f5f5f5;
}

.breakdown-table .low-stock {
  color: #e74c3c;
  font-weight: 900;
}

.breakdown-table .active-status {
  color: #27ae60;
  font-weight: 700;
}

.breakdown-table .inactive-status {
  color: #e74c3c;
  font-weight: 700;
}

/* Dark mode styles for products breakdown */
.dark-mode .products-breakdown-section {
  background: rgba(62, 39, 35, 0.9);
  border-color: #000000;
}

.dark-mode .breakdown-table th {
  background-color: #8d6e63;
  border-color: #000000;
}

.dark-mode .breakdown-table td {
  color: #fff8e1;
}

.dark-mode .breakdown-table tr:hover {
  background-color: #2c3e50;
}

.dark-mode .breakdown-stat-card {
  background-color: #8d6e63;
  border-color: #000000;
}

.dark-mode .breakdown-stat-card h3 {
  color: #fff8e1;
}

.dark-mode .breakdown-stat-value {
  color: #ffffff;
}

.dark-mode .products-breakdown-table h3 {
  color: #fff8e1;
}

/* Dream mode styles for products breakdown */
.dream-mode .products-breakdown-section {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  );
  border-color: #000000;
}

.dream-mode .breakdown-table th {
  background-color: #8d6e63;
  border-color: #000000;
}

.dream-mode .breakdown-table td {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dream-mode .breakdown-table tr:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.dream-mode .breakdown-stat-card {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  );
  border-color: #000000;
}

.dream-mode .breakdown-stat-card h3 {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dream-mode .breakdown-stat-value {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dream-mode .products-breakdown-table h3 {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* Responsive styles for products breakdown */
@media (max-width: 768px) {
  .products-breakdown-stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.8rem;
  }
  
  .breakdown-stat-card {
    padding: 1rem;
  }
  
  .breakdown-stat-card h3 {
    font-size: 1rem;
  }
  
  .breakdown-stat-value {
    font-size: 1.5rem;
  }
  
  .breakdown-table th,
  .breakdown-table td {
    padding: 0.5rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .products-breakdown-stats {
    grid-template-columns: 1fr;
  }
  
  .breakdown-table-container {
    font-size: 0.8rem;
  }
  
  .breakdown-table th,
  .breakdown-table td {
    padding: 0.4rem;
    font-size: 0.8rem;
  }
}

/* ===============================================================================
                      STAFF MANAGEMENT STYLES
=============================================================================== */

/* Staff Section Styles */
.staff-section {
  width: 100%;
  margin-bottom: 2rem;
}

.staff-section-title-panel {
  background-color: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.staff-section-title {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  text-shadow: -1px -1px 0 #0a1a1d, 1px -1px 0 #0a1a1d, -1px 1px 0 #0a1a1d, 1px 1px 0 #0a1a1d;
}

.staff-section-subtitle {
  color: #ffffff;
  font-size: 1rem;
  margin: 0;
  opacity: 0.9;
}

.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 350px));
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 2rem;
  justify-items: center;
  align-items: start;
  justify-content: center;
  box-sizing: border-box;
  overflow-x: auto;
}

.enhanced-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 350px));
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 2rem;
  justify-items: center;
  align-items: start;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  overflow-x: auto;
}

.enhanced-staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 350px));
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 2rem;
  justify-items: center;
  align-items: start;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  overflow-x: auto;
}

@media (max-width: 768px) {
  .enhanced-admin-grid,
  .enhanced-staff-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
    gap: 1rem;
    padding: 0.5rem;
  }
  
  .enhanced-admin-card,
  .enhanced-staff-card {
    min-width: 280px;
    max-width: 320px;
  }
}

@media (max-width: 480px) {
  .enhanced-admin-grid,
  .enhanced-staff-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 0.25rem;
  }
  
  .enhanced-admin-card,
  .enhanced-staff-card {
    min-width: 250px;
    max-width: 100%;
  }
}

@media (max-width: 360px) {
  .enhanced-admin-grid,
  .enhanced-staff-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0.1rem;
  }
  
  .enhanced-admin-card,
  .enhanced-staff-card {
    min-width: 200px;
    max-width: 100%;
  }
}

/* Ensure admin and staff cards are always visible and not squashed */
.enhanced-admin-card,
.enhanced-staff-card {
  min-width: 300px;
  width: 100%;
  max-width: 350px;
  flex-shrink: 0;
}

.staff-card-container {
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.staff-card-container:hover {
  transform: translateY(-2px);
}

.staff-card-background {
  background-color: #8d6e63;
  border: 3px solid #3e2723;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-height: 280px;
  max-height: 350px;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.staff-card-container:hover .staff-card-background {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  border-color: #3e2723;
  background-color: #8d6e63;
}

.staff-name-panel {
  text-align: center;
  padding: 0.75rem;
  border: 3px solid #3e2723;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

.staff-name-panel.staff {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  border-color: #229954;
}

.staff-name-panel.admin {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border-color: #0a1a1d;
}

.staff-card-container:hover .staff-name-panel {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.staff-card-container:hover .staff-name-panel.staff {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.staff-card-container:hover .staff-name-panel.admin {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
}

.staff-name {
  font-size: 1.8rem;
  font-weight: 900;
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  display: block;
  line-height: 1.2;
  margin: 0;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.staff-info-card {
  background-color: rgba(245, 245, 220, 0.9);
  border: 2px solid #3e2723;
  border-radius: 8px;
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.staff-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(62, 39, 35, 0.2);
}

.staff-info-row:last-child {
  border-bottom: none;
}

.staff-info-label {
  font-weight: 700;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 0.9rem;
}

.staff-info-value {
  font-weight: 600;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 0.9rem;
  text-align: right;
}

.staff-status {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.staff-status.active {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.staff-status.inactive {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.staff-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: auto;
  justify-content: center;
  flex-wrap: wrap;
}

.staff-manage-btn {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  border: 2px solid #2980b9;
  border-radius: 20px;
  padding: 0.4rem 0.8rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 55px;
}

.staff-manage-btn:hover {
  background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
}

.staff-contact-btn {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
  color: white;
  border: 2px solid #8e44ad;
  border-radius: 20px;
  padding: 0.4rem 0.8rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 55px;
}

.staff-contact-btn:hover {
  background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(155, 89, 182, 0.3);
}

.staff-fire-btn {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  border: 2px solid #c0392b;
  border-radius: 20px;
  padding: 0.4rem 0.8rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 55px;
}

.staff-fire-btn:hover {
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
}

/* Staff Empty State */
.staff-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  grid-column: 1 / -1;
  width: 100%;
  background-color: rgba(245, 245, 220, 0.9);
  border: 3px solid #3e2723;
  border-radius: 12px;
  margin: 1rem 0;
}

.staff-empty-content h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #3e2723;
  margin-bottom: 1rem;
  font-family: 'The Wanters DEMO', serif;
}

.staff-empty-content p {
  font-size: 1.2rem;
  color: #8d6e63;
  margin: 0.5rem 0;
  font-family: 'The Wanters DEMO', serif;
}

/* QR Code Settings Panel Responsive */
.qr-settings-panel {
  max-width: 100%;
  width: 100%;
}

@media (min-width: 768px) {
  .qr-settings-panel {
    max-width: 400px;
    margin: 1rem auto 0 auto;
  }
}

@media (min-width: 1024px) {
  .qr-settings-panel {
    max-width: 350px;
    margin: 1rem auto 0 auto;
  }
}

/* Dark mode styles for staff management */
.dark-mode .staff-card-background {
  background-color: #1a1a1a;
  border: 3px solid #000000;
}

.dark-mode .staff-card-container:hover .staff-card-background {
  background-color: #1a1a1a;
  border-color: #000000;
}

.dark-mode .staff-name-panel.staff {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  border-color: #229954;
}

.dark-mode .staff-name-panel.admin {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border-color: #0a1a1d;
}

.dark-mode .staff-card-container:hover .staff-name-panel.staff {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.dark-mode .staff-card-container:hover .staff-name-panel.admin {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
}

.dark-mode .staff-name {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .staff-info-card {
  background-color: #8d6e63;
  border: 2px solid #000000;
}

.dark-mode .staff-info-label,
.dark-mode .staff-info-value {
  color: #fff8e1;
}

.dark-mode .staff-empty-state {
  background-color: rgba(62, 39, 35, 0.9);
  border-color: #000000;
}

.dark-mode .staff-empty-content h3 {
  color: #8d6e63;
}

.dark-mode .staff-empty-content p {
  color: #a1887f;
}

/* Responsive styles for staff management */
@media (max-width: 768px) {
  .staff-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
    gap: 1rem;
  }
  
  .staff-card-background {
    min-height: 250px;
    max-height: 300px;
  }
  
  .staff-name {
    font-size: 1.5rem;
  }
  
  .staff-actions {
    flex-direction: column;
    gap: 0.3rem;
  }
  
  .staff-manage-btn,
  .staff-contact-btn,
  .staff-fire-btn {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    min-width: 50px;
  }
}

@media (max-width: 480px) {
  .staff-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  
  .staff-card-background {
    min-height: 220px;
    max-height: 280px;
  }
  
  .staff-name {
    font-size: 1.3rem;
  }
  
  .staff-actions {
    flex-direction: column;
    gap: 0.3rem;
  }
  
  .staff-manage-btn,
  .staff-contact-btn,
  .staff-fire-btn {
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
    min-width: 45px;
  }
}

/* ===============================================================================
                      LOADING AND EMPTY STATES
=============================================================================== */

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  grid-column: 1 / -1;
  width: 100%;
}

.loading-state h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #3e2723;
  margin-bottom: 1rem;
  font-family: 'The Wanters DEMO', serif;
}

.loading-state p {
  font-size: 1.2rem;
  color: #8d6e63;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  grid-column: 1 / -1;
  width: 100%;
  background-color: rgba(245, 245, 220, 0.9);
  border: 3px solid #3e2723;
  border-radius: 12px;
  margin: 1rem 0;
}

.empty-state h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #3e2723;
  margin-bottom: 1rem;
  font-family: 'The Wanters DEMO', serif;
}

.empty-state p {
  font-size: 1.2rem;
  color: #8d6e63;
  margin: 0.5rem 0;
  font-family: 'The Wanters DEMO', serif;
}

/* Dark mode loading and empty states */
.dark-mode .loading-state h3,
.dark-mode .empty-state h3 {
  color: #8d6e63;
}

.dark-mode .loading-state p,
.dark-mode .empty-state p {
  color: #a1887f;
}

.dark-mode .empty-state {
  background-color: rgba(62, 39, 35, 0.9);
  border-color: #000000;
}

/* Dream mode loading and empty states */
.dream-mode .loading-state h3,
.dream-mode .empty-state h3 {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dream-mode .loading-state p,
.dream-mode .empty-state p {
  color: #e0e0e0;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dream-mode .empty-state {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  );
  border-color: #000000;
}

/* ===============================================================================
                      APPLE DEVICE SPECIFIC FIXES
=============================================================================== */

/* Apple device specific fixes for consistent product grid spacing */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari specific styles - mobile first approach */
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 240px)) !important;
    gap: 1rem !important;
  }
  
  .products-title {
    font-size: clamp(2rem, 3.5vw, 3rem) !important;
    line-height: 1.1 !important;
  }
  
  .title-panel {
    padding: 0.75rem 1rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .main-content-border-panel {
    padding: 0.75rem !important;
    width: 98% !important;
  }
  
  .main-content-panel {
    padding: 0.5rem !important;
  }
  
  .product-card-background {
    padding: 0.4rem !important;
    gap: 0.3rem !important;
    min-height: 220px !important;
    max-height: 260px !important;
  }
  
  .product-name-panel {
    padding: 0.25rem !important;
  }
  
  .product-image-card {
    padding: 0.15rem !important;
  }
  
  .product-name {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
  }
  
  /* Larger iOS devices get slightly more columns */
  @media (min-width: 768px) {
    .products-grid {
      grid-template-columns: repeat(auto-fit, minmax(240px, 280px)) !important;
      gap: 1.2rem !important;
    }
    .products-title {
      font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
    }
  }
  
  @media (min-width: 1024px) {
    .products-grid {
      grid-template-columns: repeat(auto-fit, minmax(280px, 320px)) !important;
      gap: 1.5rem !important;
    }
    .products-title {
      font-size: clamp(3rem, 4.5vw, 4rem) !important;
    }
  }
}

/* Additional Apple device targeting for better consistency */
@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px) {
  .products-grid {
    gap: 0.6rem !important;
  }
  
  .product-card-background {
    padding: 0.3rem !important;
    gap: 0.4rem !important;
  }
  
  .product-name-panel {
    padding: 0.2rem !important;
  }
  
  .product-image-card {
    padding: 0.15rem !important;
  }
}

/* Force consistent spacing on Apple devices */
@supports (-webkit-touch-callout: none) {
  .product-card-container {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .product-card-background {
    margin: 0 !important;
  }
  
  /* Ensure consistent grid behavior */
  .products-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 220px)) !important;
    align-items: start !important;
    justify-items: center !important;
  }
}

/* ===============================================================================
                      INVENTORY ADMIN BUTTON - TEAL COLOR
=============================================================================== */

.inventory-admin-button {
  background-color: #14545c !important;
  color: #ffffff !important;
  border: 3px solid #0a1a1d !important;
  border-radius: 9999px !important;
  padding: 1rem 2rem !important;
  font-family: 'The Wanters DEMO', serif !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  min-width: 120px !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  user-select: none !important;
  white-space: nowrap !important;
}

.inventory-admin-button:hover:not(:disabled) {
  background-color: #0d353a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
}

.inventory-admin-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.inventory-admin-button:disabled {
  background-color: #bdc3c7 !important;
  border-color: #95a5a6 !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
  transform: none !important;
}

/* Dark mode inventory admin button */
.dark-mode .inventory-admin-button {
  background-color: #14545c !important;
  border-color: #000000 !important;
  color: #000000 !important;
}

.dark-mode .inventory-admin-button:hover:not(:disabled) {
  background-color: #0d353a !important;
  color: #ffffff !important;
  border: 2px solid #0d353a !important;
  box-shadow: 0 4px 8px rgba(13, 53, 58, 0.5) !important;
}

/* Dream mode inventory admin button */
.dream-mode .inventory-admin-button {
  background: linear-gradient(135deg, #14545c 0%, #0d353a 100%) !important;
  border-color: #14545c !important;
  color: #fff !important;
  box-shadow: 0 3px 6px rgba(20, 84, 92, 0.4) !important;
}

.dream-mode .inventory-admin-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #0d353a 0%, #14545c 100%) !important;
  color: #fff !important;
  border: 2px solid #0d353a !important;
  box-shadow: 0 4px 8px rgba(13, 53, 58, 0.5) !important;
}

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

/* ===============================================================================
                      CUSTOMER MENU BUTTONS - ADMIN DASHBOARD STYLE
=============================================================================== */

/* Base customer menu button styles - matching admin dashboard buttons */
.customer-menu-btn {
  padding: 0.8rem 1.5rem !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  font-family: 'The Wanters DEMO', serif !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #000000 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  width: 220px !important;
  min-width: 220px !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  text-decoration: none !important;
  display: inline-block !important;
  text-align: center !important;
  vertical-align: middle !important;
  user-select: none !important;
  white-space: nowrap !important;
  color: #fff !important;
}

/* Products button - Purple (matching admin-products-btn) */
.customer-menu-btn.products-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%) !important;
  border: 3px solid #000000 !important;
}

.customer-menu-btn.products-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4) !important;
  color: #3e2723 !important;
}

.customer-menu-btn.products-btn.active {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
  opacity: 0.9 !important;
}

/* Items button - Green (matching items-tab) */
.customer-menu-btn.items-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%) !important;
  border: 3px solid #000000 !important;
}

.customer-menu-btn.items-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4) !important;
  color: #3e2723 !important;
}

.customer-menu-btn.items-btn.active {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
  opacity: 0.9 !important;
}

/* Profile button - Brown/Neutral */
.customer-menu-btn.business-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%) !important;
  border: 3px solid #000000 !important;
}

.customer-menu-btn.business-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #a1887f 0%, #8d6e63 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(141, 110, 99, 0.4) !important;
  color: #3e2723 !important;
}

.customer-menu-btn.business-btn.active {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
  opacity: 0.9 !important;
}

/* Loyalty button - Light Blue */
.customer-menu-btn.loyalty-btn {
  background: linear-gradient(135deg, #5dade2 0%, #3498db 100%) !important;
  border: 3px solid #000000 !important;
}

.customer-menu-btn.loyalty-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #3498db 0%, #5dade2 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(93, 173, 226, 0.4) !important;
  color: #3e2723 !important;
}

.customer-menu-btn.loyalty-btn.active {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
  opacity: 0.9 !important;
}

/* Achievements button - Purple */
.customer-menu-btn.achievements-btn {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%) !important;
  border: 3px solid #000000 !important;
}

.customer-menu-btn.achievements-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(147, 51, 234, 0.4) !important;
  color: #3e2723 !important;
}

.customer-menu-btn.achievements-btn.active {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
  opacity: 0.9 !important;
}

/* Levels button - Green */
.customer-menu-btn.levels-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%) !important;
  border: 3px solid #000000 !important;
}

.customer-menu-btn.levels-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4) !important;
  color: #3e2723 !important;
}

.customer-menu-btn.levels-btn.active {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
  opacity: 0.9 !important;
}

/* Disabled state */
.customer-menu-btn.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.customer-menu-btn.disabled:hover {
  transform: none !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

 /* Pack Details Modal Styles */

.pack-details-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10001;
  backdrop-filter: blur(4px);
  width: 100vw;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.pack-details-modal {
  background: #f5f5dc;
  border: 3px solid #8d6e63;
  border-radius: 15px;
  min-width: 700px;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(139, 110, 99, 0.2),
    0 0 0 2px rgba(255, 255, 255, 0.1);
  font-family: 'The Wanters DEMO', serif;
  position: relative;
  margin: 0;
}

/* Hide scrollbar but maintain scroll functionality */
.pack-details-modal::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.pack-details-modal-header {
  background: linear-gradient(135deg, #EB640A 0%, #C95409 100%);
  color: white;
  padding: 1.5rem 2rem;
  border-radius: 12px 12px 0 0;
  text-align: center;
  border-bottom: 3px solid #B84A08;
}

.pack-details-modal-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.pack-details-modal-body {
  padding: 2rem;
  min-height: 400px;
}

/* Pack Summary Section */
.pack-details-summary {
  background: rgba(245, 245, 220, 0.7);
  border: 2px solid #8d6e63;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.pack-details-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
  font-size: 1.1rem;
}

.pack-details-summary-item:last-child {
  border-bottom: none;
}

.pack-details-summary-label {
  font-weight: 600;
  color: #5d4037;
}

.pack-details-summary-value {
  font-weight: 700;
  color: #3e2723;
  font-size: 1.2rem;
}

.pack-details-summary-value.loss {
  color: #d32f2f;
}

.pack-details-summary-value.savings {
  color: #4caf50;
}

.pack-details-summary-value.profit {
  color: #4caf50;
}

/* Pack Breakdown Section */
.pack-details-breakdown {
  margin: 1.5rem 0;
  background: rgba(245, 245, 220, 0.5);
  border: 2px solid #8d6e63;
  border-radius: 8px;
  padding: 1rem;
}

.pack-details-breakdown-header {
  margin-bottom: 1rem;
  text-align: center;
}

.pack-details-breakdown-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #3e2723;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pack-details-breakdown-table {
  width: 100%;
  overflow-x: auto;
}

.pack-details-table-header {
  display: flex;
  background: rgba(141, 110, 99, 0.2);
  border-bottom: 2px solid #8d6e63;
  font-weight: bold;
  padding: 0.75rem 0.5rem;
  gap: 0.5rem;
}

.pack-details-table-row {
  display: flex;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
  padding: 0.75rem 0.5rem;
  gap: 0.5rem;
  transition: background-color 0.2s ease;
}

.pack-details-table-row:hover {
  background: rgba(141, 110, 99, 0.05);
}

.pack-details-table-row:last-child {
  border-bottom: none;
}

.pack-details-total-row {
  background: rgba(141, 110, 99, 0.15);
  border-top: 2px solid #8d6e63;
  font-weight: bold;
}

.pack-details-table-cell {
  flex: 1;
  text-align: center;
  font-size: 0.95rem;
  color: #3e2723;
  padding: 0.25rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pack-details-table-cell:first-child {
  flex: 1.5;
  text-align: left;
  font-weight: 600;
}

.pack-details-table-cell.loss {
  color: #d32f2f;
  font-weight: bold;
}

.pack-details-table-cell.savings {
  color: #4caf50;
  font-weight: bold;
}

/* Modal Footer */
.pack-details-modal-footer {
  background: #8d6e63;
  padding: 1.5rem 2rem;
  border-radius: 0 0 12px 12px;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.pack-details-close-btn {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
  color: white;
  border: 2px solid #b71c1c;
  border-radius: 25px;
  padding: 0.75rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
  text-align: center;
}

.pack-details-close-btn:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #f44336 100%);
  border-color: #b71c1c;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(244, 67, 54, 0.4);
}

/* Responsive Design */
@media (max-width: 768px) {
  .pack-details-modal {
    min-width: 90vw;
    max-width: 95vw;
    margin: 1rem;
  }
  
  .pack-details-modal-body {
    padding: 1rem;
  }
  
  .pack-details-table-header,
  .pack-details-table-row {
    font-size: 0.8rem;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
  }
  
  .pack-details-table-cell {
    font-size: 0.75rem;
  }
}

/* Pack Warning Modal Styles - Smooth Sales Theme */
.pack-warning-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 2rem;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease-out;
}

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

.pack-warning-modal {
  background: #f8f5f0;
  border: 3px solid #8d6e63;
  border-radius: 15px;
  padding: 0;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-family: 'The Wanters DEMO', serif;
  animation: modalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.pack-warning-header {
  background: linear-gradient(135deg, #ff9800 0%, #ff6f00 100%);
  color: white;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid #e65100;
  border-radius: 12px 12px 0 0;
}

.pack-warning-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.pack-warning-content {
  padding: 2rem;
}

.pack-warning-message {
  text-align: center;
}

.pack-warning-text {
  font-size: 1.1rem;
  color: #2c1810;
  margin-bottom: 1.5rem;
  font-weight: 600;
  line-height: 1.6;
}

.pack-warning-text strong {
  color: #d84315;
  font-weight: 800;
}

.pack-warning-suggestion {
  background: rgba(255, 193, 7, 0.15);
  border: 2px solid #ffc107;
  border-radius: 8px;
  padding: 1.2rem;
  margin: 1rem 0;
}

.pack-warning-suggestion-text {
  margin: 0;
  font-size: 1rem;
  color: #5d4037;
  font-weight: 600;
  line-height: 1.5;
}

.pack-warning-actions {
  display: flex;
  justify-content: center;
  padding: 1.5rem 2rem 2rem 2rem;
  gap: 1rem;
}

.pack-warning-ok-btn {
  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
  color: white;
  border: 2px solid #388e3c;
  border-radius: 25px;
  padding: 0.75rem 2.5rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pack-warning-ok-btn:hover {
  background: linear-gradient(135deg, #45a049 0%, #4caf50 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.pack-warning-ok-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Dark mode */
.pack-warning-modal.dark-mode {
  background: rgba(30, 30, 30, 0.98);
  border-color: #8d6e63;
}

.pack-warning-modal.dark-mode .pack-warning-text {
  color: #e0e0e0;
}

.pack-warning-modal.dark-mode .pack-warning-suggestion-text {
  color: #d0d0d0;
}

/* Dream mode */
.pack-warning-modal.dream-mode {
  background: rgba(20, 20, 20, 0.98);
  border-color: #8d6e63;
}

.pack-warning-modal.dream-mode .pack-warning-text {
  color: #e0e0e0;
}

.pack-warning-modal.dream-mode .pack-warning-suggestion-text {
  color: #d0d0d0;
}

/* ===============================================================================
                            BATCH SECTION STYLING
   Extracted from CookPage.css for use in AdminProductsPage batch section
   This file makes AdminProductsPage independent of CookPage
=============================================================================== */

/* Cook size breakdown container and panel */
.cook-size-breakdown-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cook-size-breakdown-panel {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.35rem 0.35rem;
}

/* Side by side on wider screens */
@media (min-width: 900px) {
  .cook-size-breakdown-container {
    flex-direction: row;
    gap: 1rem;
  }
  
  .cook-size-breakdown-panel {
    flex: 1;
  }
}

/* Make compact tables even more compact */
.recipe-table-compact {
  font-size: 1rem;
  padding: 0.4rem;
}

.recipe-table-header-compact {
  padding: 0.4rem 0.5rem;
  font-size: 1rem;
}

.recipe-table-row-compact {
  padding: 0.35rem 0.5rem;
  font-size: 1rem;
}

.recipe-table-cell-compact {
  font-size: 1rem;
  padding: 0.25rem 0.35rem;
}

.recipe-title-header-compact {
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.5rem;
}

.recipe-product-name-compact {
  font-size: 0.9rem;
  padding: 0.3rem 0.5rem;
}

/* Recipe cost breakdown compact styles */
.recipe-cost-breakdown-compact {
  padding: 0.5rem;
}

/* Products-in-batch table: Remove button matches IngredientsSelectionModal (32px red circle with ×) */
.recipe-cost-breakdown-compact .batch-products-table .remove-item-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #b71c1c;
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(211, 47, 47, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}
.recipe-cost-breakdown-compact .batch-products-table .remove-item-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b71c1c 0%, #9a1616 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(211, 47, 47, 0.4);
}
.recipe-cost-breakdown-compact .batch-products-table .remove-item-btn-icon {
  font-size: 1.25rem;
  line-height: 1;
  color: #fff;
}

.recipe-cost-breakdown-header-compact {
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.4rem;
}

.recipe-cost-breakdown-title-compact {
  font-size: 0.85rem;
  padding: 0.3rem 0.4rem;
}

.recipe-cost-breakdown-toggle-container-compact {
  margin-bottom: 0.5rem;
}

.recipe-cost-breakdown-toggle-btn-compact {
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid;
}

.recipe-cost-breakdown-toggle-btn-compact.simple {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border-color: #004d06;
  color: #ffffff;
}

.recipe-cost-breakdown-toggle-btn-compact.detailed {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border-color: #0a1a1d;
  color: #ffffff;
}

.recipe-cost-breakdown-toggle-btn-compact.simple:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.25);
}

.recipe-cost-breakdown-toggle-btn-compact.detailed:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.25);
}

.recipe-cost-breakdown-content-wrapper-compact {
  padding: 0.3rem;
}

.recipe-cost-breakdown-content-compact {
  padding: 0.3rem;
}

.recipe-cost-breakdown-table-compact {
  font-size: 1rem;
}

.recipe-cost-breakdown-table-header-compact {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr;
  padding: 0.35rem 0.4rem;
  font-size: 1.15rem;
  gap: 0.2rem;
  text-align: center;
}

.recipe-cost-breakdown-table-header-detailed-section {
  grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr;
}
.recipe-cost-breakdown-table-header-compact .recipe-cost-breakdown-table-cell-compact:nth-child(3),
.recipe-cost-breakdown-table-header-compact .recipe-cost-breakdown-table-cell-compact:nth-child(4),
.recipe-cost-breakdown-table-header-compact .recipe-cost-breakdown-table-cell-compact:nth-child(5) {
  text-align: right;
}
.recipe-cost-breakdown-table-row-compact > .recipe-cost-breakdown-table-cell-compact:nth-child(3),
.recipe-cost-breakdown-table-row-compact > .recipe-cost-breakdown-table-cell-compact:nth-child(4),
.recipe-cost-breakdown-table-row-compact > .recipe-cost-breakdown-table-cell-compact:nth-child(5) {
  text-align: right;
}

.recipe-cost-breakdown-table-header-summary {
  grid-template-columns: 2fr 1.5fr 1fr;
  padding: 0.3rem 0.4rem;
}

.recipe-cost-breakdown-table-row-summary {
  grid-template-columns: 2fr 1.5fr 1fr;
}

.recipe-cost-breakdown-table-row-compact {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr;
  padding: 0.3rem 0.4rem;
  font-size: 1.15rem;
  gap: 0.2rem;
}

.recipe-cost-breakdown-table-row-detailed {
  grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr;
}

.recipe-cost-breakdown-table-row-detailed > .recipe-cost-breakdown-table-cell-compact:nth-child(4) {
  display: none;
}
.recipe-cost-breakdown-table-header-detailed-section .recipe-cost-breakdown-table-cell-compact:nth-child(4) {
  display: none;
}

@media (min-width: 768px) {
  .recipe-cost-breakdown-table-row-detailed > .recipe-cost-breakdown-table-cell-compact:nth-child(4) {
    display: block;
  }
  .recipe-cost-breakdown-table-header-detailed-section .recipe-cost-breakdown-table-cell-compact:nth-child(4) {
    display: block;
  }
}

/* Mobile responsive for batch cost breakdown */
@media (max-width: 767px) {
  .recipe-cost-breakdown-table-header-compact:has(.recipe-cost-breakdown-table-header-detailed),
  .recipe-cost-breakdown-table-row-detailed {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .recipe-cost-breakdown-table-header-detailed {
    display: block;
    font-weight: bold;
    margin-top: 0.5rem;
  }
  
  .recipe-cost-breakdown-table-row-detailed > .recipe-cost-breakdown-table-cell-compact {
    display: block;
    padding: 0.4rem;
    border-bottom: 1px solid rgba(141, 110, 99, 0.2);
  }
  
  .recipe-cost-breakdown-table-row-detailed > .recipe-cost-breakdown-table-cell-compact:first-child {
    font-weight: bold;
    border-bottom: 2px solid rgba(141, 110, 99, 0.3);
  }
  
  .recipe-cost-breakdown-table-row-detailed > .recipe-cost-breakdown-table-cell-compact::before {
    content: attr(data-label) ": ";
    font-weight: bold;
    color: #3e2723;
  }
  
  .recipe-cost-breakdown-table-row-detailed > .recipe-cost-breakdown-table-cell-compact:first-child::before {
    content: "";
  }
}

.recipe-cost-breakdown-table-cell-compact {
  font-size: 1.15rem;
  padding: 0.25rem 0.35rem;
  text-align: center;
}

.recipe-cost-breakdown-table-cell-compact:first-child {
  text-align: left;
}

/* Make columns narrower by reducing padding */
.recipe-cost-breakdown-table-cell-compact:first-child {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.recipe-cost-breakdown-table-cell-compact:nth-child(2),
.recipe-cost-breakdown-table-cell-compact:nth-child(3),
.recipe-cost-breakdown-table-cell-compact:nth-child(4) {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

/* Ensure row color classes work with recipe-cost-breakdown-table-row-compact */
.recipe-cost-breakdown-table-row-compact.recipe-ingredient-row-compact {
  background: rgba(33, 150, 243, 0.1);
}

.recipe-cost-breakdown-table-row-compact.recipe-ingredient-row-compact:hover {
  background: rgba(33, 150, 243, 0.15);
}

.recipe-cost-breakdown-table-row-compact.recipe-packaging-row-compact {
  background: rgba(76, 175, 80, 0.1);
}

.recipe-cost-breakdown-table-row-compact.recipe-packaging-row-compact:hover {
  background: rgba(76, 175, 80, 0.15);
}

.recipe-cost-breakdown-table-row-compact.recipe-appliance-row-compact {
  background: rgba(111, 66, 193, 0.1);
}

.recipe-cost-breakdown-table-row-compact.recipe-appliance-row-compact:hover {
  background: rgba(111, 66, 193, 0.15);
}

.recipe-cost-breakdown-table-row-compact.recipe-staff-row-compact {
  background: rgba(10, 93, 122, 0.1);
}

.recipe-cost-breakdown-table-row-compact.recipe-staff-row-compact:hover {
  background: rgba(10, 93, 122, 0.15);
}

/* Override cost column font sizes to match table text size */
.recipe-cost-breakdown-table-cell-compact.ingredient-cost-compact,
.recipe-cost-breakdown-table-cell-compact.packaging-cost-compact,
.recipe-cost-breakdown-table-cell-compact.electricity-cost-compact,
.recipe-cost-breakdown-table-cell-compact.staff-cost-compact,
.recipe-cost-breakdown-table-cell-compact.total-cost-compact,
.recipe-cost-breakdown-table-cell-compact.product-value-compact,
.recipe-cost-breakdown-table-cell-compact.profit-amount-compact,
.recipe-cost-breakdown-table-cell-compact.profit-margin-compact,
.recipe-cost-breakdown-table-cell-compact.wasted-cost-compact {
  font-size: 1rem;
}
.recipe-table-cell-compact.wasted-amount-compact,
.recipe-cost-breakdown-wasted-row-compact .recipe-table-cell-compact.wasted-amount-compact {
  color: #ff9800;
  font-weight: 600;
  font-size: 1.05rem;
}

/* Also ensure non-first-child cells (Per Item, Per Batch columns) match font size */
.recipe-cost-breakdown-table-cell-compact:not(:first-child) {
  font-size: 1rem;
}

/* cook-size-breakdown-panel: thinner border; table rows meet the panel edge */
.cook-size-breakdown-panel .recipe-cost-breakdown-compact {
  width: 100%;
  max-width: 100%;
  padding: 0 !important;
  border-width: 1px !important;
  border-radius: 10px !important;
}
.cook-size-breakdown-panel .recipe-cost-breakdown-toggle-container-compact {
  margin-bottom: 0 !important;
  padding: 0.35rem 1rem !important;
}
/* No horizontal padding so inner table colour rows meet the panel edge; table same size */
.cook-size-breakdown-panel .recipe-cost-breakdown-content-wrapper-compact {
  padding: 0.5rem 0 !important;
  box-sizing: border-box;
}
.cook-size-breakdown-panel .recipe-table-compact {
  font-size: 1.05rem;
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.cook-size-breakdown-panel .recipe-table-cell-compact {
  font-size: 1.05rem !important;
}
.cook-size-breakdown-panel .recipe-cost-breakdown-total-row-compact {
  margin-top: 0 !important;
  padding-top: 0.25rem !important;
}
.cook-size-breakdown-panel .recipe-cost-breakdown-table-header-summary {
  margin-top: 0 !important;
  padding-top: 0.25rem !important;
}
.cook-size-breakdown-panel .recipe-cost-breakdown-content-compact {
  padding: 0 !important;
}
.cook-size-breakdown-panel .recipe-cost-breakdown-table-header-compact {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}
.cook-size-breakdown-panel .recipe-cost-breakdown-table-row-compact {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}
.cook-size-breakdown-panel .recipe-cost-breakdown-table-cell-compact {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}
.cook-size-breakdown-panel .recipe-cost-breakdown-table-cell-compact:first-child {
  padding-right: 0.25rem !important;
}
.cook-size-breakdown-panel .recipe-cost-breakdown-table-cell-compact:nth-child(2),
.cook-size-breakdown-panel .recipe-cost-breakdown-table-cell-compact:nth-child(3),
.cook-size-breakdown-panel .recipe-cost-breakdown-table-cell-compact:nth-child(4),
.cook-size-breakdown-panel .recipe-cost-breakdown-table-cell-compact:nth-child(5) {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

/* Override recipe table cost column font sizes as well (for Recipe Components panel) */
.recipe-table-cell-compact.ingredient-cost-compact,
.recipe-table-cell-compact.packaging-cost-compact,
.recipe-table-cell-compact.electricity-cost-compact {
  font-size: 1rem;
}

/* Stock & value table: profit margin value purple (like Total value of stock), cost of stock value red (like Total cost) */
.recipe-table-cell-compact.profit-margin-value-compact {
  color: #6f42c1;
  font-size: 1rem;
}
.recipe-table-cell-compact.cost-of-stock-value-compact {
  color: #e74c3c;
  font-size: 1rem;
}

/* Stock & value table: row background colours – profit margin row purple, cost of stock row red */
.cook-size-breakdown-panel .recipe-cost-breakdown-compact .recipe-table-compact .recipe-cost-breakdown-profit-row-compact:last-of-type {
  background: rgba(111, 66, 193, 0.12);
}
.cook-size-breakdown-panel .recipe-cost-breakdown-compact .recipe-table-compact .recipe-staff-row-compact {
  background: rgba(231, 76, 60, 0.12);
}

/* Stock & value table: Total value of stock row – blue like Stock on hand */
.cook-size-breakdown-panel .recipe-cost-breakdown-compact .recipe-table-compact .stock-table-total-value-row {
  background: rgba(33, 150, 243, 0.1);
}
.cook-size-breakdown-panel .recipe-cost-breakdown-compact .recipe-table-compact .stock-table-total-value-cell {
  color: #2196f3;
  font-size: 1rem;
}

/* Recipe panel container spacing */
.recipe-panel-container:last-child {
  margin-bottom: 2rem !important;
}

@media (max-width: 768px) {
  .recipe-panel-container:last-child {
    margin-bottom: 2.5rem !important;
  }
}

/* Responsive styles for recipe panels on narrow screens */
@media (max-width: 768px) {
  .recipe-panel-row-responsive {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto;
    gap: 1.25rem !important;
    justify-items: center;
    text-align: center;
    padding: 1rem 1.25rem !important;
  }
  
  /* Expand/Collapse Icon - center on fourth row (below remove button) */
  .recipe-panel-row-responsive > div:first-child {
    grid-column: 1;
    grid-row: 4;
    justify-self: center;
  }
  
  /* Product Name and Cost/Profit - center, stack vertically on first row */
  .recipe-panel-row-responsive > div:nth-child(2) {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  /* Spacer - hide on mobile */
  .recipe-panel-row-responsive > div:nth-child(3) {
    display: none;
  }
  
  /* Quantity Control - center on second row */
  .recipe-panel-row-responsive > div:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    margin-left: 0 !important;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  /* Remove Button - center on third row */
  .recipe-panel-row-responsive > div:nth-child(5) {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
    margin-left: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  /* Expand/Collapse Icon - add spacing */
  .recipe-panel-row-responsive > div:first-child {
    margin-top: 0.5rem;
  }
  
  /* Remove button container - prevent stretching */
  .recipe-panel-row-responsive > div:nth-child(5) > div {
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Ensure buttons stay fixed size */
  .recipe-panel-row-responsive button[title="Decrease quantity"],
  .recipe-panel-row-responsive button[title="Increase quantity"] {
    min-width: 28px !important;
    max-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
  }
  
  /* Ensure quantity input stays fixed size - same across all screen sizes */
  .recipe-panel-row-responsive input[type="number"] {
    width: 40px !important;
    height: 28px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
  }
  
  /* Ensure remove button stays fixed size - same as wide screen */
  /* Use very specific selector to override inline styles */
  .recipe-panel-row-responsive > div:last-child .recipe-remove-button,
  .recipe-panel-row-responsive > div:nth-child(5) .recipe-remove-button,
  .recipe-panel-row-responsive .recipe-remove-button,
  .recipe-panel-row-responsive button[title="Remove from batch"],
  .recipe-panel-row-responsive button.recipe-remove-button {
    padding: 0.5rem 1.2rem !important;
    height: auto !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    min-width: auto !important;
    max-width: none !important;
    width: auto !important;
    min-height: auto !important;
    max-height: none !important;
    line-height: normal !important;
    border-radius: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Stack product name and cost/profit vertically on mobile */
  .recipe-panel-row-responsive > div:nth-child(2) > h3 {
    margin-bottom: 0.5rem;
    text-align: center;
  }
  
  .recipe-panel-row-responsive > div:nth-child(2) > div {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* Make table responsive - use card layout on mobile */
  .recipe-cost-breakdown-content-wrapper-compact {
    overflow-x: visible;
    width: 100%;
    padding: 0;
  }
  
  .recipe-cost-breakdown-table-compact {
    display: block;
    width: 100%;
  }
  
  .recipe-cost-breakdown-table-header-compact {
    display: none; /* Hide header on mobile */
  }
  
  .recipe-cost-breakdown-table-row-compact {
    display: block;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border: 2px solid #8d6e63;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
  }
  
  /* First cell (Name column) spans full width and is bold */
  .recipe-cost-breakdown-table-row-compact > .recipe-cost-breakdown-table-cell-compact:first-child {
    display: block;
    font-weight: bold;
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #8d6e63;
    margin-bottom: 0.5rem;
    text-align: center;
  }
  
  /* Other cells display as label-value pairs */
  .recipe-cost-breakdown-table-row-compact > .recipe-cost-breakdown-table-cell-compact:not(:first-child) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(141, 110, 99, 0.2);
    font-size: 0.9rem;
    align-items: center;
  }
  
  .recipe-cost-breakdown-table-row-compact > .recipe-cost-breakdown-table-cell-compact:not(:first-child):last-child {
    border-bottom: none;
  }
  
  /* Label cells (Amount, Per Item, etc.) */
  .recipe-cost-breakdown-table-row-compact > .recipe-cost-breakdown-table-cell-compact:not(:first-child)::before {
    content: attr(data-label);
    font-weight: 600;
    color: #3e2723;
    text-align: left;
  }
  
  /* Value cells align right */
  .recipe-cost-breakdown-table-row-compact > .recipe-cost-breakdown-table-cell-compact:not(:first-child) {
    text-align: right;
  }
}

/* Tablet sizes - ensure consistent sizing */
@media (min-width: 481px) and (max-width: 1024px) {
  /* Ensure quantity input stays fixed size on tablet */
  .recipe-panel-row-responsive input[type="number"] {
    width: 40px !important;
    height: 28px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
  }
  
  /* Ensure remove button stays fixed size on tablet */
  .recipe-panel-row-responsive > div:last-child .recipe-remove-button,
  .recipe-panel-row-responsive > div:nth-child(5) .recipe-remove-button,
  .recipe-panel-row-responsive .recipe-remove-button,
  .recipe-panel-row-responsive button[title="Remove from batch"],
  .recipe-panel-row-responsive button.recipe-remove-button {
    padding: 0.5rem 1.2rem !important;
    height: auto !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    min-height: auto !important;
    max-height: none !important;
    line-height: normal !important;
    border-radius: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  .recipe-panel-row-responsive {
    padding: 1rem 1rem !important;
    gap: 1rem !important;
  }
  
  .recipe-panel-row-responsive > div:nth-child(2) > h3 {
    font-size: 1.1rem !important;
  }
  
  .recipe-panel-row-responsive > div:nth-child(2) > div > span {
    font-size: 0.95rem !important;
  }
  
  /* Ensure buttons stay fixed size on very small screens */
  .recipe-panel-row-responsive button[title="Decrease quantity"],
  .recipe-panel-row-responsive button[title="Increase quantity"] {
    min-width: 28px !important;
    max-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    width: 28px !important;
    height: 28px !important;
  }
  
  /* Ensure quantity input stays fixed size on very small screens */
  .recipe-panel-row-responsive input[type="number"] {
    width: 40px !important;
    height: 28px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure remove button stays fixed size on very small screens - same as wide screen */
  .recipe-panel-row-responsive > div:last-child .recipe-remove-button,
  .recipe-panel-row-responsive > div:nth-child(5) .recipe-remove-button,
  .recipe-panel-row-responsive .recipe-remove-button,
  .recipe-panel-row-responsive button[title="Remove from batch"],
  .recipe-panel-row-responsive button.recipe-remove-button {
    padding: 0.5rem 1.2rem !important;
    height: auto !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    min-height: auto !important;
    max-height: none !important;
    line-height: normal !important;
    border-radius: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/* ============================================
   Responsive Accordion Styles for Narrow Screens
   Products, Items, Packs, and Nested Accordions
   ============================================ */

/* Hide dropdown arrows on narrow screens for all accordions */
@media (max-width: 768px) {
  /* Hide arrows using class selector */
  .responsive-accordion-header .accordion-arrow {
    display: none !important;
  }
  
  /* Restructure Products/Items/Packs accordions on narrow screens */
  .responsive-accordion-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 1rem 1.5rem !important;
    min-height: auto !important;
    height: auto !important;
    white-space: normal !important;
  }
  
  /* Product/Item/Pack Name - full width on top, centre aligned, larger text */
  .responsive-accordion-header .accordion-name {
    width: 100% !important;
    margin-left: 0 !important;
    margin-bottom: 0.5rem !important;
    text-align: center !important;
  }
  
  .responsive-accordion-header .accordion-name > div {
    font-size: 1.6rem !important;
    text-align: center !important;
  }
  
  /* Value and Toggle Row - below name, centred */
  .responsive-accordion-header .accordion-value,
  .responsive-accordion-header .active-inactive-switch {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .responsive-accordion-header .accordion-value {
    text-align: center !important;
    font-size: 1.35rem !important;
  }
  
  /* Smaller toggle switch on narrow screens */
  .responsive-accordion-header .active-inactive-switch .active-inactive-track {
    height: 28px !important;
    width: 56px !important;
    border-radius: 14px !important;
  }
  .responsive-accordion-header .active-inactive-track .recipe-cost-breakdown-switch-thumb-compact {
    width: 20px !important;
    height: 20px !important;
    top: 2px !important;
  }
  .responsive-accordion-header .active-inactive-track .recipe-cost-breakdown-switch-thumb-compact.simple-position {
    left: 2px !important;
  }
  .responsive-accordion-header .active-inactive-track .recipe-cost-breakdown-switch-thumb-compact.detailed-position {
    left: 32px !important;
  }
  
  /* Centre the value and toggle row as a group */
  .responsive-accordion-header > .accordion-value,
  .responsive-accordion-header > .active-inactive-switch {
    align-self: center !important;
  }
  
  .responsive-accordion-header > .accordion-value + .active-inactive-switch {
    margin-left: 1rem !important;
  }
  
  /* Nested Size Accordions - same treatment, centre aligned */
  .cook-size-accordion > div[style*="grid-template-columns: auto 1fr auto auto"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 1rem 1.5rem !important;
    min-height: auto !important;
    height: auto !important;
    white-space: normal !important;
  }
  
  /* Hide arrow in nested accordions */
  .cook-size-accordion > div[style*="grid-template-columns: auto 1fr auto auto"] > div:first-child {
    display: none !important;
  }
  
  /* Size Name - full width on top, centre aligned, larger text */
  .cook-size-accordion > div[style*="grid-template-columns: auto 1fr auto auto"] > div:nth-child(2) {
    width: 100% !important;
    margin-left: 0 !important;
    margin-bottom: 0.5rem !important;
    text-align: center !important;
  }
  
  .cook-size-accordion > div[style*="grid-template-columns: auto 1fr auto auto"] > div:nth-child(2) > div {
    font-size: 1.6rem !important;
    text-align: center !important;
  }
  
  /* Size Value and Toggle Row - below name, centred */
  .cook-size-accordion > div[style*="grid-template-columns: auto 1fr auto auto"] > div:nth-child(3),
  .cook-size-accordion > div[style*="grid-template-columns: auto 1fr auto auto"] > div:nth-child(4) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
    width: auto !important;
    margin-left: 0 !important;
    justify-content: center !important;
  }
}

/* Packs Accordion Styles */
@media (max-width: 768px) {
  /* Hide arrow in packs */
  .pack-section .pack-content > div > div[style*="grid-template-columns: auto 1fr auto auto"] > div:first-child {
    display: none !important;
  }
  
  /* Restructure packs accordion - centre aligned */
  .pack-section .pack-content > div > div[style*="grid-template-columns: auto 1fr auto auto"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 1rem 1.5rem !important;
    min-height: auto !important;
    height: auto !important;
    white-space: normal !important;
  }
  
  /* Pack Name - full width on top, centre aligned, larger text */
  .pack-section .pack-content > div > div[style*="grid-template-columns: auto 1fr auto auto"] > div:nth-child(2) {
    width: 100% !important;
    margin-left: 0 !important;
    margin-bottom: 0.5rem !important;
    text-align: center !important;
  }
  
  .pack-section .pack-content > div > div[style*="grid-template-columns: auto 1fr auto auto"] > div:nth-child(2) > div {
    font-size: 1.6rem !important;
    text-align: center !important;
  }
  
  /* Price and Toggle Row - below name, centred */
  .pack-section .pack-content > div > div[style*="grid-template-columns: auto 1fr auto auto"] > div:nth-child(3),
  .pack-section .pack-content > div > div[style*="grid-template-columns: auto 1fr auto auto"] > div:nth-child(4) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
    width: auto !important;
    margin-left: 0 !important;
    justify-content: center !important;
  }
}

/* Batch Panel Fixes for Narrow Screens */
@media (max-width: 768px) {
  /* Move product name and size above content on narrow screens */
  .recipe-panel-row-responsive {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1rem !important;
  }
  
  /* Product Name and Size - move to top (second child contains the h3) */
  .recipe-panel-row-responsive > div:nth-child(2) {
    order: 1 !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* Product Name specifically */
  .recipe-panel-row-responsive > div:nth-child(2) h3 {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto 0.5rem auto !important;
    white-space: normal !important;
  }
  
  /* Quantity Control - below name */
  .recipe-panel-row-responsive > div:nth-child(4) {
    order: 2 !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
  
  /* Remove Button - below quantity */
  .recipe-panel-row-responsive > div:nth-child(5) {
    order: 3 !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
  
  /* Spacer - hide on mobile */
  .recipe-panel-row-responsive > div:nth-child(3) {
    display: none !important;
  }
  
  /* Expand/Collapse Icon - at bottom if present */
  .recipe-panel-row-responsive > div:first-child:not(:nth-child(2)) {
    order: 4 !important;
  }
}

/* Size accordion: keep −/+ stock buttons fixed size on narrow screens (prevent growing) */
@media (max-width: 600px) {
  .size-stock-bar .size-stock-controls-bar .size-stock-btn {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    font-size: 14px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .size-stock-bar .size-stock-input {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }
}
/* Add Reward Modal Styles */

.add-reward-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
  width: 100vw;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.add-reward-modal {
  background: #f5f5dc;
  border: 3px solid #8d6e63;
  border-radius: 15px;
  min-width: 500px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(139, 110, 99, 0.2),
    0 0 0 2px rgba(255, 255, 255, 0.1);
  font-family: 'The Wanters DEMO', serif;
  position: relative;
  margin: 0;
}

/* Hide scrollbar but maintain scroll functionality */
.add-reward-modal::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.add-reward-modal-header {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  color: white;
  padding: 1.5rem 2rem;
  border-radius: 12px 12px 0 0;
  text-align: center;
  border-bottom: 3px solid #36034d;
}

.add-reward-modal-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.add-reward-modal-body {
  padding: 1.5rem;
  min-height: 200px;
  background: #f5f5dc;
}

.add-reward-general-error {
  background: #ffebee;
  border: 2px solid #f44336;
  color: #c62828;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  text-align: center;
  font-weight: 600;
}

/* Dropdown Field - Maintains original width */
.add-reward-dropdown-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  margin-bottom: 1.5rem;
}

.add-reward-dropdown-field .add-reward-select {
  width: 100%;
  max-width: 50%;
}

/* Value and Uses Row - Side by Side Below Dropdown */
.add-reward-value-inputs-row {
  display: flex;
  gap: 1rem;
  width: 100%;
  justify-content: center;
  margin-bottom: 1rem;
}

.add-reward-value-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
}

.add-reward-value-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.add-reward-value-input-wrapper .add-reward-input {
  max-width: 150px;
  width: 100%;
}

.add-reward-uses-input {
  max-width: 100px !important;
  width: 100%;
}

/* Product Dropdown Styles */
.add-reward-product-dropdown-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
}

.add-reward-product-dropdown-container {
  position: relative;
  width: 100%;
}

.add-reward-product-search {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #d0d0d0;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: 'Verdana', sans-serif;
  background: white;
  color: #3e2723;
  transition: all 0.2s ease;
  cursor: pointer;
}

.add-reward-product-search:focus {
  outline: none;
  border-color: #41AE06;
  box-shadow: 0 0 0 3px rgba(65, 174, 6, 0.1);
}

.add-reward-product-search.error {
  border-color: #f44336;
}

.add-reward-product-dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 2px solid #d0d0d0;
  border-radius: 6px;
  margin-top: 0.25rem;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.add-reward-product-dropdown-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid #f0f0f0;
}

.add-reward-product-dropdown-item:last-child {
  border-bottom: none;
}

.add-reward-product-dropdown-item:hover {
  background: #f5f5f5;
}

.add-reward-product-dropdown-item.selected {
  background: #e8f5e9;
  border-left: 4px solid #41AE06;
}

.product-dropdown-name {
  font-weight: 600;
  color: #3e2723;
  font-family: 'Verdana', sans-serif;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.product-dropdown-sku {
  font-size: 0.8rem;
  color: #666;
  font-family: 'Verdana', sans-serif;
}

.add-reward-no-products {
  padding: 1rem;
  text-align: center;
  color: #999;
  font-style: italic;
  font-family: 'Verdana', sans-serif;
}

.add-reward-select {
  padding: 0.75rem;
  border: 2px solid #d0d0d0;
  border-radius: 6px;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  background: white;
  color: #3e2723;
  transition: all 0.2s ease;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

.add-reward-select option {
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
}

.add-reward-select:focus {
  outline: none;
  border-color: #41AE06;
  box-shadow: 0 0 0 3px rgba(65, 174, 6, 0.1);
}

.add-reward-select.error {
  border-color: #f44336;
}

.add-reward-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Form Fields - Keep for backward compatibility if needed */
.add-reward-form-field {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.add-reward-label {
  display: block;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: #3e2723;
  margin-bottom: 0.5rem;
  text-align: center;
}

.add-reward-buy-count-input {
  max-width: 100px;
  width: 100%;
}

.add-reward-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #d0d0d0;
  border-radius: 6px;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  background: white;
  color: #3e2723;
  transition: all 0.2s ease;
  text-align: center;
}

.add-reward-input:focus {
  outline: none;
  border-color: #41AE06;
  box-shadow: 0 0 0 3px rgba(65, 174, 6, 0.1);
}

.add-reward-input.error {
  border-color: #f44336;
}

.add-reward-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.add-reward-input.error {
  border-color: #f44336;
  background: #ffebee;
}

.add-reward-error {
  color: #f44336;
  font-size: 0.85rem;
  margin-top: 0.25rem;
  text-align: center;
  display: block;
}

/* Product Search Results */
.product-search-results {
  max-height: 300px;
  overflow-y: auto;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  background: white;
  margin-top: 0.5rem;
  width: 100%;
  max-width: 400px;
}

.product-search-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Verdana', sans-serif;
  color: #3e2723;
}

.product-search-item:hover {
  background: #f5f5f5;
}

.product-search-item.selected {
  background: #e8d5ff;
  color: #8e44ad;
  font-weight: 600;
}

.product-search-item:last-child {
  border-bottom: none;
}

.no-products-found {
  padding: 1rem;
  text-align: center;
  color: #6c757d;
  font-style: italic;
}

/* Info Messages */
.reward-info-message {
  background: #e3f2fd;
  border: 2px solid #2196f3;
  color: #1565c0;
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
  text-align: center;
  font-size: 0.9rem;
  font-family: 'Verdana', sans-serif;
}

/* Modal Footer */
.add-reward-modal-footer {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  border-top: 3px solid #8d6e63;
  background: #f5f5dc;
  border-radius: 0 0 12px 12px;
}

.add-reward-cancel-btn,
.add-reward-add-btn {
  padding: 0.75rem 2rem;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border: 2px solid;
  min-width: 120px;
}

.add-reward-cancel-btn {
  background: linear-gradient(135deg, #f44336 0%, #e53935 100%);
  color: white;
  border-color: #c62828;
}

.add-reward-cancel-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #e53935 0%, #d32f2f 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(244, 67, 54, 0.4);
}

.add-reward-add-btn {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: white;
  border-color: #1e8449;
}

.add-reward-add-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(39, 174, 96, 0.4);
}

.add-reward-cancel-btn:disabled,
.add-reward-add-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Add Staff/Admin Modal Styles */

.add-staff-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  width: 100vw;
  height: 100vh;
}

.add-staff-modal {
  background: #f5f5dc;
  border: 3px solid #8d6e63;
  border-radius: 15px;
  width: 90vw;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(139, 110, 99, 0.2),
    0 0 0 2px rgba(255, 255, 255, 0.1);
  font-family: 'The Wanters DEMO', serif;
  /* Hide scrollbar but maintain scroll functionality */
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  margin: 0 auto;
}

/* Hide scrollbar but maintain scroll functionality */
.add-staff-modal::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.add-staff-modal::-webkit-scrollbar-track {
  background: transparent;
}

.add-staff-modal::-webkit-scrollbar-thumb {
  background: transparent;
}

.add-staff-modal-header {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  border-bottom: 3px solid #229954;
  border-radius: 12px 12px 0 0;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

.add-staff-modal-title {
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.add-staff-modal-close {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.add-staff-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.add-staff-modal-tabs {
  display: flex;
  background: #e8e8e8;
  border-bottom: 2px solid #8d6e63;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  justify-content: center;
}

.add-staff-modal-tabs::-webkit-scrollbar {
  display: none;
}

.add-staff-modal-tab {
  flex: 1;
  background: #e8e8e8;
  color: #5d4037;
  border: none;
  padding: 1rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center !important;
  border-right: 1px solid #d0d0d0;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.add-staff-modal-tab:last-child {
  border-right: none;
}

.add-staff-modal-tab:hover:not(:disabled) {
  background: #d8d8d8;
}

/* Basic Info Tab - Blue */
.add-admin-tab-basic {
  background: #c7d4e8 !important; /* Desaturated blue */
  color: #5a6b8b !important; /* Desaturated blue text */
}

.add-admin-tab-basic:hover:not(:disabled) {
  background: #b5c7e0 !important; /* Slightly more saturated on hover */
}

.add-admin-tab-basic.active {
  background: #1e3a8a !important; /* Full blue when active */
  color: #ffffff !important;
  border-bottom: 3px solid #1e3a8a;
}

/* Permissions Tab - Orange */
.add-admin-tab-permissions {
  background: #e8d4c7 !important; /* Desaturated orange */
  color: #8b6b5a !important; /* Desaturated orange text */
}

.add-admin-tab-permissions:hover:not(:disabled) {
  background: #e0c7b5 !important; /* Slightly more saturated on hover */
}

.add-admin-tab-permissions.active {
  background: #ea580c !important; /* Full orange when active */
  color: #ffffff !important;
  border-bottom: 3px solid #ea580c;
}

/* Hours Tab - Teal */
.add-admin-tab-hours {
  background: #c7e8e0 !important; /* Desaturated teal */
  color: #5a8b7a !important; /* Desaturated teal text */
}

.add-admin-tab-hours:hover:not(:disabled) {
  background: #b5e0d4 !important; /* Slightly more saturated on hover */
}

.add-admin-tab-hours.active {
  background: #0d9488 !important; /* Full teal when active */
  color: #ffffff !important;
  border-bottom: 3px solid #0d9488;
}

/* Payroll Tab - Green */
.add-admin-tab-payroll {
  background: #c7e8c7 !important; /* Desaturated green */
  color: #5a8b5a !important; /* Desaturated green text */
}

.add-admin-tab-payroll:hover:not(:disabled) {
  background: #b5e0b5 !important; /* Slightly more saturated on hover */
}

.add-admin-tab-payroll.active {
  background: #00770a !important; /* Full green when active */
  color: #ffffff !important;
  border-bottom: 3px solid #00770a;
}

.add-staff-modal-tab:disabled {
  background: #f0f0f0 !important;
  color: #999999 !important;
  cursor: not-allowed;
  opacity: 0.6;
}

.tab-icon {
  font-size: 1.2rem;
}

.tab-label {
  font-size: 1rem;
}

.add-staff-modal-content {
  padding: 2rem;
  min-height: 400px;
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: #ffffff;
}

.add-staff-modal-content::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.add-staff-tab-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  text-align: center;
}

.add-staff-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.add-staff-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}

.add-staff-form-label {
  font-weight: 700;
  color: #3e2723;
  font-size: 1.3rem;
  margin-bottom: 0.25rem;
}

.add-staff-form-input {
  padding: 0.75rem 1rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'The Wanters DEMO', serif;
  background: #ffffff;
  color: #3e2723;
  transition: all 0.3s ease;
}

.add-staff-form-input:focus {
  outline: none;
  border-color: #27ae60;
  box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.1);
}

.add-staff-form-input.error {
  border-color: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

/* Red outline and glow for required fields */
.add-staff-form-input.required-field {
  border: 2px solid #ff4444 !important;
  box-shadow: 0 0 8px rgba(255, 68, 68, 0.5) !important;
  background-color: #fff5f5 !important;
}

.add-staff-form-input.required-field:focus {
  border: 2px solid #ff4444 !important;
  box-shadow: 0 0 12px rgba(255, 68, 68, 0.7) !important;
  outline: none !important;
  background-color: #fff5f5 !important;
}

/* Permission toggle button styles - red filled background for unchecked (like allergens), green for checked */
.allergen-toggle-btn-compact.unselected {
  background: #dc2626;
  border: 2px solid #b91c1c;
  color: #ffffff;
}

.allergen-toggle-btn-compact.unselected:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #991b1b;
  color: #ffffff;
}

.allergen-toggle-btn-compact.selected {
  background: #22c55e;
  border: 2px solid #16a34a;
  color: #ffffff;
}

.allergen-toggle-btn-compact.selected:hover:not(:disabled) {
  background: #16a34a;
  border-color: #15803d;
  color: #ffffff;
}

.add-staff-error {
  color: #e74c3c;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

/* Permissions Tab Styles */
.permissions-section {
  margin-bottom: 2rem;
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.permissions-section-title {
  color: #3e2723;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #8d6e63;
  text-align: center;
}

.permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  justify-items: center;
}

.permission-item {
  background: #ffffff;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 0.75rem;
  transition: all 0.3s ease;
}

.permission-item:hover {
  border-color: #27ae60;
  background: #f8fff8;
}

.permission-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-weight: 600;
  color: #3e2723;
}

.permission-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #27ae60;
  cursor: pointer;
}

.permission-text {
  font-size: 1rem;
  user-select: none;
}

/* Hours Tab Styles */
.hours-section {
  margin-bottom: 2rem;
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hours-section-title {
  color: #3e2723;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-align: center;
}

.hours-section-subtitle {
  color: #8d6e63;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.hours-table {
  background: #ffffff;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

.hours-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #e0e0e0;
  gap: 0.75rem;
}

.hours-row:last-child {
  border-bottom: none;
}

.hours-day-label {
  font-weight: 700;
  color: #3e2723;
  font-size: 1.25rem;
  min-width: auto;
  margin-right: 0.5rem;
}

.hours-input-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hours-input {
  width: 80px;
  padding: 0.5rem;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
}

.hours-input:focus {
  outline: none;
  border-color: #27ae60;
  box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.1);
}

.hours-unit {
  color: #8d6e63;
  font-weight: 600;
  font-size: 1.25rem;
}

/* Larger text for hours dropdown in Add Staff / Add Admin modal */
.add-staff-modal.add-admin-modal .hours-table .ingredient-unit-dropdown-trigger,
.add-staff-modal.add-admin-modal .hours-table .ingredient-unit-dropdown-item {
  font-size: 1.25rem;
}

.hours-summary {
  background: #e8f5e8;
  border: 2px solid #27ae60;
  border-radius: 8px;
  padding: 1rem;
}

.hours-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  color: #3e2723;
  font-size: 1.1rem;
}

.hours-summary-value {
  color: #27ae60;
  font-size: 1.2rem;
}

/* Payroll Tab Styles */
.payroll-section {
  margin-bottom: 2rem;
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.payroll-section-title {
  color: #3e2723;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-align: center;
}

.payroll-section-subtitle {
  color: #8d6e63;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.payroll-form {
  background: #ffffff;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

.payroll-form-group {
  margin-bottom: 1.5rem;
}

.payroll-form-label {
  font-weight: 700;
  color: #3e2723;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  display: block;
}

.payroll-input-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.payroll-currency {
  color: #3e2723;
  font-weight: 700;
  font-size: 1.2rem;
}

.payroll-input {
  width: 120px;
  padding: 0.75rem;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 1.1rem;
}

.payroll-input:focus {
  outline: none;
  border-color: #27ae60;
  box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.1);
}

.payroll-input.error {
  border-color: #e74c3c;
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.1);
}

.payroll-calculations {
  background: #f8fff8;
  border: 2px solid #27ae60;
  border-radius: 8px;
  padding: 1rem;
}

.payroll-calculation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e0e0e0;
}

.payroll-calculation-item:last-child {
  border-bottom: none;
}

.payroll-calculation-label {
  font-weight: 600;
  color: #3e2723;
}

.payroll-calculation-value {
  font-weight: 700;
  color: #27ae60;
  font-size: 1.1rem;
}

.add-staff-modal-footer {
  background: rgba(245, 245, 220, 0.9);
  border-top: 2px solid #8d6e63;
  border-radius: 0 0 12px 12px;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  position: sticky;
  bottom: 0;
}

.add-staff-cancel-btn {
  background: #dc2626;
  color: #ffffff;
  border: 2px solid #b91c1c;
  border-radius: 25px;
  padding: 0.75rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 150px;
  text-align: center;
}

.add-staff-cancel-btn:hover:not(:disabled) {
  background: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.add-staff-save-btn {
  background: #27ae60;
  color: #ffffff;
  border: 2px solid #229954;
  border-radius: 25px;
  padding: 0.75rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  min-width: 150px;
  text-align: center;
}

.add-staff-save-btn:hover:not(:disabled) {
  background: #2ecc71;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(39, 174, 96, 0.3);
}

.add-staff-save-btn:disabled {
  background: #95a5a6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Admin Modal Specific Styles */
.add-admin-modal .add-staff-modal-header {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border-bottom-color: #0a5d7a;
}

.add-admin-modal .add-staff-modal-tab.active {
  background: #14545c;
  border-bottom-color: #0a1a1d;
}

.add-admin-save-btn {
  background: #27ae60;
  border-color: #229954;
}

.add-admin-save-btn:hover:not(:disabled) {
  background: #2ecc71;
  box-shadow: 0 4px 8px rgba(39, 174, 96, 0.3);
}

/* Add Admin Button Bar - Purple Theme */
.add-admin-modal .admin-actions-container {
  background: #ffffff;
  padding: 1rem;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.add-admin-modal .pool-view-buttons {
  background: #ffffff;
  border: 2px solid #8d6e63;
  border-radius: 25px;
  padding: 0.5rem;
}

.add-admin-modal .pool-view-btn.add-admin-btn-basic,
.add-admin-modal .pool-view-btn.add-admin-btn-permissions,
.add-admin-modal .pool-view-btn.add-admin-btn-work {
  min-width: 120px;
  padding: 0.75rem 1.5rem;
  border-radius: 25px !important;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  opacity: 0.6 !important;
}

/* Information tab - Teal (matching breakdown-tab) */
.add-admin-modal .pool-view-btn.add-admin-btn-basic {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%) !important;
  border: 2px solid #0a1a1d !important;
  color: #ffffff !important;
}

.add-admin-modal .pool-view-btn.add-admin-btn-basic:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%) !important;
  border-color: #0a1a1d !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.4);
  opacity: 0.8 !important;
}

.add-admin-modal .pool-view-btn.add-admin-btn-basic.active {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%) !important;
  border-color: #0a1a1d !important;
  box-shadow: 0 6px 16px rgba(20, 84, 92, 0.4), inset 0 0 8px rgba(20, 84, 92, 0.2);
  opacity: 1 !important;
}

/* Permissions tab - Red (matching ingredients-btn) */
.add-admin-modal .pool-view-btn.add-admin-btn-permissions {
  background: linear-gradient(135deg, #d32f2f 0%, #a31b00 100%) !important;
  border: 2px solid #8b0000 !important;
  color: #ffffff !important;
}

.add-admin-modal .pool-view-btn.add-admin-btn-permissions:hover {
  background: linear-gradient(135deg, #a31b00 0%, #d32f2f 100%) !important;
  border-color: #8b0000 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(163, 27, 0, 0.4);
  opacity: 0.8 !important;
}

.add-admin-modal .pool-view-btn.add-admin-btn-permissions.active {
  background: linear-gradient(135deg, #d32f2f 0%, #a31b00 100%) !important;
  border-color: #8b0000 !important;
  box-shadow: 0 6px 16px rgba(163, 27, 0, 0.4), inset 0 0 8px rgba(163, 27, 0, 0.2);
  opacity: 1 !important;
}

/* Work tab - Light Blue (matching warehouse-btn) */
.add-admin-modal .pool-view-btn.add-admin-btn-work {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%) !important;
  border: 2px solid #0a5d7a !important;
  color: #ffffff !important;
}

.add-admin-modal .pool-view-btn.add-admin-btn-work:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%) !important;
  border-color: #0a5d7a !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
  opacity: 0.8 !important;
}

.add-admin-modal .pool-view-btn.add-admin-btn-work.active {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%) !important;
  border-color: #0a5d7a !important;
  box-shadow: 0 6px 16px rgba(16, 142, 188, 0.4), inset 0 0 8px rgba(16, 142, 188, 0.2);
  opacity: 1 !important;
}

/* Add Staff Button Bar - Green Theme */
.add-staff-modal .pool-view-buttons {
  background: rgba(245, 245, 220, 0.9);
  border: 2px solid #8d6e63;
  border-radius: 25px;
  padding: 0.5rem;
}

.add-staff-modal .pool-view-btn.add-staff-btn-basic,
.add-staff-modal .pool-view-btn.add-staff-btn-permissions,
.add-staff-modal .pool-view-btn.add-staff-btn-work {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%) !important;
  border: 2px solid #229954 !important;
  color: #ffffff !important;
  opacity: 0.6 !important;
  min-width: 120px;
  padding: 0.75rem 1.5rem;
  border-radius: 25px !important;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.add-staff-modal .pool-view-btn.add-staff-btn-basic:hover,
.add-staff-modal .pool-view-btn.add-staff-btn-permissions:hover,
.add-staff-modal .pool-view-btn.add-staff-btn-work:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(39, 174, 96, 0.4);
  opacity: 0.8;
}

.add-staff-modal .pool-view-btn.add-staff-btn-basic.active,
.add-staff-modal .pool-view-btn.add-staff-btn-permissions.active,
.add-staff-modal .pool-view-btn.add-staff-btn-work.active {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  border-color: #229954;
  box-shadow: 0 6px 16px rgba(39, 174, 96, 0.4), inset 0 0 8px rgba(39, 174, 96, 0.2);
  opacity: 1;
}

.add-staff-modal .pool-view-btn.add-staff-btn-permissions {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
  border: 2px solid #2f855a;
}

.add-staff-modal .pool-view-btn.add-staff-btn-work {
  background: linear-gradient(135deg, #68d391 0%, #48bb78 100%);
  border: 2px solid #38a169;
}

/* Dark Mode Styles */
.dark-mode .add-staff-modal {
  background: #3e2723;
  border-color: #000000;
}

.dark-mode .add-staff-modal-header {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
}

.dark-mode .add-staff-modal-tabs {
  background: #1a1a1a;
  border-color: #000000;
}

.dark-mode .add-staff-modal-tab {
  color: #fff8e1;
}

.dark-mode .add-staff-modal-tab:hover {
  background: rgba(39, 174, 96, 0.2);
  color: #2ecc71;
}

.dark-mode .add-staff-modal-tab.active {
  background: #27ae60;
  color: #ffffff;
}

.dark-mode .add-staff-form-input {
  background: #1a1a1a;
  border-color: #8d6e63;
  color: #fff8e1;
}

.dark-mode .add-staff-form-input:focus {
  border-color: #27ae60;
}

.dark-mode .add-staff-form-label {
  color: #fff8e1;
}

.dark-mode .permission-item {
  background: #1a1a1a;
  border-color: #8d6e63;
}

.dark-mode .permission-item:hover {
  border-color: #27ae60;
  background: #2a2a2a;
}

.dark-mode .permission-label {
  color: #fff8e1;
}

.dark-mode .hours-table {
  background: #1a1a1a;
  border-color: #8d6e63;
}

.dark-mode .hours-day-label {
  color: #fff8e1;
}

.dark-mode .hours-input {
  background: #2a2a2a;
  border-color: #8d6e63;
  color: #fff8e1;
}

.dark-mode .hours-input:focus {
  border-color: #27ae60;
}

.dark-mode .hours-unit {
  color: #8d6e63;
}

.dark-mode .hours-summary {
  background: #2a2a2a;
  border-color: #27ae60;
}

.dark-mode .hours-summary-item {
  color: #fff8e1;
}

.dark-mode .payroll-form {
  background: #1a1a1a;
  border-color: #8d6e63;
}

.dark-mode .payroll-form-label {
  color: #fff8e1;
}

.dark-mode .payroll-currency {
  color: #fff8e1;
}

.dark-mode .payroll-input {
  background: #2a2a2a;
  border-color: #8d6e63;
  color: #fff8e1;
}

.dark-mode .payroll-input:focus {
  border-color: #27ae60;
}

.dark-mode .payroll-calculations {
  background: #2a2a2a;
  border-color: #27ae60;
}

.dark-mode .payroll-calculation-label {
  color: #fff8e1;
}

.dark-mode .add-staff-modal-footer {
  background: #1a1a1a;
  border-color: #8d6e63;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .add-staff-modal {
    width: 95vw;
    max-width: 95vw;
    margin: 1rem auto;
  }
  
  .add-staff-modal-header {
    padding: 1rem;
  }
  
  .add-staff-modal-title {
    font-size: 1.5rem;
  }
  
  .add-staff-modal-tabs {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .add-staff-modal-tab {
    min-width: 100px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
  
  .add-staff-modal-content {
    padding: 1rem;
  }
  
  .add-staff-form-row {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  
  .permissions-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  
  .add-staff-modal-footer {
    padding: 1rem;
    flex-direction: column;
    align-items: center;
  }
  
  .add-staff-cancel-btn,
  .add-staff-save-btn {
    width: 200px;
  }
}

@media (max-width: 480px) {
  .add-staff-modal {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
    height: 100vh;
    max-height: 100vh;
  }
  
  .add-staff-modal-header {
    border-radius: 0;
  }
  
  .add-staff-modal-footer {
    border-radius: 0;
    flex-direction: column;
    align-items: center;
  }
  
  .add-staff-cancel-btn,
  .add-staff-save-btn {
    width: 180px;
  }
}

/* Invite Customer modal: remove outer border and panel (no double-frame) */
.admin-profile-modal.invite-customer-modal {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0;
  padding: 0;
}

/* Invite Customer modal: single inner panel (header + content + footer) with dark brown border */
.invite-customer-inner-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border: 3px solid #5d4037 !important;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

/* Invite Customer header: fill to edge of panel, no corner gap */
.invite-customer-inner-panel .invite-customer-modal-header {
  border-color: #5d4037 !important;
  border-radius: 12px 12px 0 0;
  margin: -3px -3px 0 -3px; /* extend into panel border so green fills corners */
  position: relative;
  z-index: 1;
}
/* Customer Settings Page Styles */

/* Main page container with dual-layered geometric background */
.customer-settings-page {
  min-height: calc(100vh + 25rem);
  background-color: #f5f5dc;
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  background-attachment: fixed;
  padding: 1rem;
  position: relative;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
  overflow-y: auto;
  
  /* Hide scrollbar while maintaining scroll functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
.customer-settings-page::-webkit-scrollbar {
  display: none;
}

/* Dual-layered geometric background patterns */
.customer-settings-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.customer-settings-page::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Background panel matching app structure */
.customer-settings-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 800px;
  width: 95%;
  height: auto;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  margin: 1rem auto;
  overflow: visible;
}

/* Main container inside background panel */
.customer-settings-container {
  width: 100%;
  height: auto;
  min-height: calc(100vh + 20rem);
  background-color: rgba(255, 255, 255, 0.98);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  overflow: visible;
}



/* Header with title and back button */
.customer-settings-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #eee;
  text-align: center;
  position: relative;
  width: 100%;
  margin-bottom: 1.5rem;
}

.customer-settings-title-panel {
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: #ffffff;
  text-align: center;
  padding: 0.75rem;
  border: 2px solid #1b5e20;
  border-radius: 8px;
  background-color: #2e7d32;
  width: 100%;
  max-width: 400px;
}

.customer-settings-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
}

.customer-settings-back-button {
  background-color: #14545c;
  color: white;
  border: 2px solid #0a1a1d;
  border-radius: 25px;
  padding: 0.75rem 2rem;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.customer-settings-back-button:hover {
  background-color: #0e3a40;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.4);
}

/* Main content area */
.customer-settings-main-content {
  padding: 0.75rem;
  max-width: 100%;
  overflow-x: hidden;
  width: 100%;
}

/* Content wrapper */
.customer-settings-content {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* Larger content area on wide screens */
@media (min-width: 1024px) {
  .customer-settings-content {
    max-width: 1300px;
  }
}

@media (min-width: 1400px) {
  .customer-settings-content {
    max-width: 1500px;
  }
}

@media (min-width: 1920px) {
  .customer-settings-content {
    max-width: 1700px;
  }
}

/* Profile avatar */
.customer-settings-avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem auto;
  border: 4px solid #8b4513;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 0 0 2px rgba(139, 69, 19, 0.3),
    inset 0 0 20px rgba(139, 69, 19, 0.1);
}

/* Larger avatar on wide screens */
@media (min-width: 1024px) {
  .customer-settings-avatar {
    width: 220px;
    height: 220px;
    border-width: 5px;
    margin: 0 auto 2.5rem auto;
  }
  
  /* Scale font size for avatar initials on wide screens */
  .customer-settings-avatar > div {
    font-size: 4rem !important;
  }
}

@media (min-width: 1400px) {
  .customer-settings-avatar {
    width: 260px;
    height: 260px;
    border-width: 6px;
    margin: 0 auto 3rem auto;
  }
  
  /* Scale font size for avatar initials on extra wide screens */
  .customer-settings-avatar > div {
    font-size: 4.5rem !important;
  }
}

.customer-settings-avatar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    transparent 60%,
    rgba(0, 0, 0, 0.15) 80%,
    rgba(0, 0, 0, 0.25) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.customer-settings-avatar:hover {
  transform: scale(1.05);
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 0 3px rgba(139, 69, 19, 0.5),
    inset 0 0 25px rgba(139, 69, 19, 0.2);
}

.customer-settings-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-upload-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(15, 52, 96, 0.8);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.customer-settings-avatar:hover .avatar-upload-overlay {
  opacity: 1;
}

.avatar-upload-text {
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

/* User info card */
.customer-settings-user-card {
  background-color: rgba(245, 245, 220, 0.9);
  border: 2px solid #8d6e63;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

/* Larger user card on wide screens */
@media (min-width: 1024px) {
  .customer-settings-user-card {
    max-width: 1200px;
  }
}

@media (min-width: 1400px) {
  .customer-settings-user-card {
    max-width: 1400px;
  }
}

@media (min-width: 1920px) {
  .customer-settings-user-card {
    max-width: 1600px;
  }
}

/* Field sections */
.customer-settings-field-section {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.customer-settings-field-label {
  font-weight: 600;
  color: #3e2723;
  font-size: 1.4rem;
  text-align: center;
  margin-bottom: 0.1rem;
  font-family: 'The Wanters DEMO', serif;
}

.customer-settings-display-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #d7ccc8;
  border-radius: 6px;
  padding: 0.75rem;
  gap: 0.75rem;
  max-width: 400px;
  margin: 0 auto;
}

.customer-settings-display-value {
  color: #3e2723;
  font-size: 1rem;
  text-align: center;
  width: 100%;
  max-width: 400px;
  padding: 0.75rem;
  border: 1px solid #d7ccc8;
  border-radius: 6px;
  background-color: white;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0 auto;
  display: block;
}

.customer-settings-clickable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.customer-settings-clickable:hover {
  background-color: rgba(255, 255, 255, 1);
  border-color: #8d6e63;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.customer-settings-display-value.not-set {
  color: #999;
  font-style: italic;
}

.customer-settings-edit-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.customer-settings-input {
  width: 100%;
  max-width: 400px;
  padding: 0.75rem;
  border: 1px solid #d7ccc8;
  border-radius: 6px;
  font-size: 1rem;
  background-color: white;
  text-align: center;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
}

.customer-settings-input:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 5px rgba(93, 64, 55, 0.3);
}

/* Subtle red glow for empty fields */
.customer-settings-input.field-empty {
  box-shadow: 0 0 8px rgba(220, 53, 69, 0.3);
  border-color: #dc3545;
}

.customer-settings-input.field-empty:focus {
  box-shadow: 0 0 12px rgba(220, 53, 69, 0.4);
  border-color: #dc3545;
}

/* Subtle red glow for empty postal address field (keeping for backward compatibility) */
.customer-settings-input.postal-empty {
  box-shadow: 0 0 8px rgba(220, 53, 69, 0.3);
  border-color: #dc3545;
}

.customer-settings-input.postal-empty:focus {
  box-shadow: 0 0 12px rgba(220, 53, 69, 0.4);
  border-color: #dc3545;
}

/* Green pulse animation for successful save */
.customer-settings-input.save-success {
  animation: savePulse 1s ease-in-out;
}

@keyframes savePulse {
  0% {
    box-shadow: 0 0 0 rgba(76, 175, 80, 0);
  }
  50% {
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.6);
  }
  100% {
    box-shadow: 0 0 0 rgba(76, 175, 80, 0);
  }
}

.customer-settings-textarea {
  resize: vertical;
  min-height: 80px;
}

.customer-settings-save-button {
  background-color: #27ae60;
  color: white;
  border: none;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  font-family: 'The Wanters DEMO', serif;
  min-width: 120px;
  margin-top: 0.75rem;
}

.customer-settings-save-button:hover {
  background-color: #229954;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.customer-settings-save-button:disabled {
  background-color: #ccc;
  border-color: #999;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Email edit popup message */
.email-edit-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  padding: 1.5rem 2rem;
  border-radius: 12px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  z-index: 10000;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.6),
    0 0 0 3px rgba(255, 255, 255, 0.2),
    0 0 20px rgba(231, 76, 60, 0.4);
  animation: popupSlideIn 0.3s ease-out;
  max-width: 350px;
  word-wrap: break-word;
  border: 2px solid #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@keyframes popupSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Dark mode popup styling */
.dark-mode .email-edit-popup {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  border: 2px solid #ffffff;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.8),
    0 0 0 3px rgba(255, 255, 255, 0.3),
    0 0 25px rgba(231, 76, 60, 0.6);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

/* Dream mode popup styling */
.dream-mode .email-edit-popup {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  border: 2px solid #ffffff;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.7),
    0 0 0 3px rgba(255, 255, 255, 0.3),
    0 0 25px rgba(231, 76, 60, 0.6),
    0 0 40px rgba(231, 76, 60, 0.3);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  animation: popupSlideIn 0.3s ease-out, dreamGlow 2s ease-in-out infinite alternate;
}

/* Delivery preference toggle button */
.customer-settings-delivery-toggle-section {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
}

.customer-settings-delivery-toggle {
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 200px;
}

.customer-settings-delivery-toggle.active {
  background-color: #228B22;
  border-color: #8d6e63;
}

/* Light mode specific - no border */
.light-mode .customer-settings-delivery-toggle,
.light-mode .customer-settings-delivery-toggle.active {
  border: none !important;
}

.customer-settings-delivery-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.customer-settings-delivery-toggle.active:hover {
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}



/* Stats grid */
.customer-settings-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  width: 100%;
  justify-items: center;
}

.customer-settings-stat-card {
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid #8d6e63;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}

.customer-settings-stat-label {
  font-size: 1.2rem;
  color: #666;
  font-weight: 700;
  text-align: center;
}

.customer-settings-stat-number {
  font-size: 1.5rem;
  font-weight: 900;
  color: #3e2723;
}

/* Rewards section */
.customer-settings-rewards-section {
  background-color: #8d6e63;
  border: 2px solid #3e2723;
  border-radius: 12px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  width: 100%;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

.customer-settings-rewards-title {
  color: #1a0f0a;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-align: center;
}

.customer-settings-rewards-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.customer-settings-reward-code {
  background-color: rgba(245, 245, 220, 0.95);
  border: 3px solid #3e2723;
  border-radius: 12px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.customer-settings-reward-code:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  border-color: #27ae60;
}

.customer-settings-reward-code.applied {
  background-color: rgba(72, 187, 120, 0.15);
  border-color: #48bb78;
  box-shadow: 0 6px 16px rgba(72, 187, 120, 0.3);
}

.customer-settings-reward-reason {
  font-size: 1.5rem;
  color: #5d4037;
  font-weight: 700;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.customer-settings-reward-code-text {
  font-size: 1.3rem;
  font-weight: 900;
  color: #3e2723;
  font-family: 'Courier New', monospace;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 2px solid #3e2723;
  text-align: center;
  letter-spacing: 1px;
}

.customer-settings-reward-description {
  font-size: 1rem;
  color: #3e2723;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  margin-top: 0.5rem;
  font-family: 'The Wanters DEMO', serif;
}

.customer-settings-reward-description-text {
  font-family: 'The Wanters DEMO', serif !important;
  font-size: 1.2rem !important;
}

.customer-settings-applied-indicator {
  color: #48bb78;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
}

/* Dream mode applied indicator - solid green with 1px black outline */
.dream-mode .customer-settings-applied-indicator {
  color: #00ff00 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  font-weight: 700 !important;
}

.customer-settings-no-rewards {
  text-align: center;
  color: #999;
  font-style: italic;
  padding: 2rem;
}

/* Delete button container */
.customer-settings-delete-button-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* Delete button */
.customer-settings-delete-button {
  background-color: #dc3545;
  color: white;
  border: 2px solid #c82333;
  border-radius: 25px;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.customer-settings-delete-button:hover {
  background-color: #c82333;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  text-decoration: underline;
}

/* Toast notification */
.toast-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #48bb78;
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  animation: slideIn 0.3s ease;
}

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

/* Delete confirmation modal */
.delete-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(2px);
  padding: 1rem;
}

.delete-confirm-modal {
  background-color: rgba(245, 245, 220, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px, 56px 56px;
  background-position: 0 0, 0 0;
  background-blend-mode: soft-light, normal;
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 2rem;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Hide scrollbar but maintain scroll functionality */
.delete-confirm-modal::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.delete-confirm-modal::-webkit-scrollbar-track {
  background: transparent;
}

.delete-confirm-modal::-webkit-scrollbar-thumb {
  background: transparent;
}

/* Firefox scrollbar hiding */
.delete-confirm-modal {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Delete Modal Header */
.delete-modal-header {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: #fff;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid #b91c1c;
  border-radius: 12px 12px 0 0;
  margin: -2rem -2rem 1.5rem -2rem;
}

.delete-modal-title {
  color: #000000;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

/* Delete Modal Content */
.delete-modal-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Delete Info Panels */
.delete-info-panel {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.delete-panel-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #495057;
  margin: 0 0 1rem 0;
  text-align: center;
}

.delete-panel-content {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #495057;
}

.delete-panel-content p {
  margin: 0.5rem 0;
  padding: 0.5rem 0;
}

/* Restore Options */
.restore-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0;
  padding: 0.5rem 0;
}

.restore-checkmark {
  font-size: 1.2rem;
  color: #28a745;
  flex-shrink: 0;
}

.restore-note {
  font-size: 0.85rem;
  color: #6c757d;
  font-style: italic;
  margin-top: 1rem;
  text-align: center;
  padding: 0.5rem;
  background: rgba(108, 117, 125, 0.1);
  border-radius: 5px;
}

/* Delete Modal Buttons */
.delete-confirm-buttons {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 -2rem -2rem -2rem;
}

/* Ensure buttons are properly pill-shaped */
.delete-confirm-buttons button {
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.confirm-delete-button {
  background: #dc3545 !important;
  color: white !important;
  border: 3px solid #d32f2f !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 9999px !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-family: 'The Wanters DEMO', serif !important;
  min-width: 180px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

.confirm-delete-button:hover {
  background: #c82333 !important;
  color: white !important;
  border-color: #d32f2f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4) !important;
}

.cancel-delete-button {
  background: #28a745 !important;
  color: white !important;
  border: 3px solid #2e7d32 !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 9999px !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-family: 'The Wanters DEMO', serif !important;
  min-width: 180px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

.cancel-delete-button:hover {
  background: #218838 !important;
  color: white !important;
  border-color: #2e7d32 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4) !important;
}

/* Flash red animation for address field */
.customer-settings-field-section.flash-red {
  animation: flashRed 1s ease;
}

@keyframes flashRed {
  0%, 100% { background-color: transparent; }
  50% { background-color: rgba(220, 53, 69, 0.1); }
}

/* Dark mode styles */
.dark-mode.customer-settings-page {
  background-color: #3e2723;
}

.dark-mode.customer-settings-page::before {
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.dark-mode.customer-settings-page::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.dark-mode .customer-settings-background-panel {
  background-color: #1a1a1a !important;
  border: 3px solid #000000 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}

.dark-mode .customer-settings-container {
  background-color: rgba(62, 39, 35, 0.99);
  border: 3px solid #8d6e63 !important;
  color: #fff8e1;
}

.dark-mode .customer-settings-header {
  border-bottom-color: #000000;
}

.dark-mode .customer-settings-title-panel {
  background-color: #2e7d32;
  border-color: #1b5e20;
  box-shadow: 0 8px 16px rgba(46, 125, 50, 0.3);
}

.dark-mode .customer-settings-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .customer-settings-back-button {
  background-color: #14545c;
  border-color: #000000;
  color: #ffffff;
}

.dark-mode .customer-settings-back-button:hover {
  background-color: #0e3a40;
}

.dark-mode .customer-settings-user-card {
  background-color: rgba(139, 110, 99, 0.9);
  border-color: #000000;
}

.dark-mode .customer-settings-field-label {
  color: #ffffff;
}

.dark-mode .customer-settings-display-container {
  background-color: rgba(62, 39, 35, 0.8);
  border-color: #000000;
}

.dark-mode .customer-settings-display-value {
  color: #ffffff;
}

.dark-mode .customer-settings-display-value.not-set {
  color: #ccc;
}

.dark-mode .customer-settings-clickable:hover {
  background-color: rgba(0, 0, 0, 0.5);
  border-color: #8d6e63;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .customer-settings-input {
  background-color: rgba(62, 39, 35, 0.8);
  border-color: #000000;
  color: #ffffff;
  text-align: center;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
}

.dark-mode .customer-settings-input-uniform,
.dark-mode input[type="email"],
.dark-mode input[type="tel"],
.dark-mode .home-address-fields input {
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
}

/* Dark mode field labels */
.dark-mode .customer-settings-field-label-small {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif !important;
}

/* Dark mode subtle red glow for empty postal address field */
.dark-mode .customer-settings-input.postal-empty {
  box-shadow: 0 0 8px rgba(220, 53, 69, 0.4);
  border-color: #dc3545;
}

.dark-mode .customer-settings-input.postal-empty:focus {
  box-shadow: 0 0 12px rgba(220, 53, 69, 0.5);
  border-color: #dc3545;
}

/* Dark mode green pulse animation for successful save */
.dark-mode .customer-settings-input.save-success {
  animation: savePulseDark 1s ease-in-out;
}

@keyframes savePulseDark {
  0% {
    box-shadow: 0 0 0 rgba(76, 175, 80, 0);
  }
  50% {
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.7);
  }
  100% {
    box-shadow: 0 0 0 rgba(76, 175, 80, 0);
  }
}

.dark-mode .customer-settings-save-button {
  background-color: #27ae60;
  border: 2px solid #000000;
  color: white;
}

.dark-mode .customer-settings-save-button:hover {
  background-color: #229954;
  border-color: #000000;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}

.dark-mode .customer-settings-delivery-toggle {
  background-color: #e74c3c;
  border: 2px solid #000000;
  color: white;
}

.dark-mode .customer-settings-delivery-toggle.active {
  background-color: #228B22;
  border: 2px solid #000000;
}

.dark-mode .customer-settings-delivery-toggle:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.dark-mode .customer-settings-delivery-toggle.active:hover {
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}

.dark-mode .customer-settings-delete-button {
  background-color: #dc3545;
  border-color: #000000;
  color: white;
}

.dark-mode .customer-settings-delete-button:hover {
  background-color: #c82333;
  border-color: #000000;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  text-decoration: underline;
}



.dark-mode .customer-settings-stat-card {
  background-color: #f5f5dc;
  border-color: #000000;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}

.dark-mode .customer-settings-stat-label {
  color: #ccc;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
}

.dark-mode .customer-settings-stat-number {
  color: #ffffff;
}

.dark-mode .customer-settings-rewards-section {
  background-color: #1a1a1a;
  border-color: #000000;
}

.dark-mode .customer-settings-rewards-title {
  color: #8b6e63 !important;
  font-size: 3rem;
  font-weight: bold;
  text-shadow: 
    -1px -1px 0 #000,
    -1px 0 0 #000,
    -1px 1px 0 #000,
    0 -1px 0 #000,
    0 1px 0 #000,
    1px -1px 0 #000,
    1px 0 0 #000,
    1px 1px 0 #000,
    -2px -2px 0 #000,
    -2px -1px 0 #000,
    -2px 0 0 #000,
    -2px 1px 0 #000,
    -2px 2px 0 #000,
    -1px -2px 0 #000,
    -1px 2px 0 #000,
    0 -2px 0 #000,
    0 2px 0 #000,
    1px -2px 0 #000,
    1px 2px 0 #000,
    2px -2px 0 #000,
    2px -1px 0 #000,
    2px 0 0 #000,
    2px 1px 0 #000,
    2px 2px 0 #000;
}

.dark-mode .customer-settings-reward-code {
  background-color: rgba(139, 110, 99, 0.95);
  border-color: #000000;
}

.dark-mode .customer-settings-reward-code:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  border-color: #27ae60;
}

.dark-mode .customer-settings-reward-code.applied {
  background-color: rgba(72, 187, 120, 0.25);
  border-color: #48bb78;
  box-shadow: 0 6px 16px rgba(72, 187, 120, 0.4);
}

.dark-mode .customer-settings-reward-reason {
  color: #ffffff;
}

.dark-mode .customer-settings-reward-code-text {
  color: #000000;
  background-color: #f5f5dc;
  border-color: #000000;
}

.dark-mode .customer-settings-reward-description {
  color: #ffffff;
}

.dark-mode .customer-settings-no-rewards {
  color: #ccc;
}

/* Dark mode avatar styling */
.dark-mode .customer-settings-avatar {
  border: 4px solid #000000 !important;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 0 0 2px rgba(0, 0, 0, 0.4),
    inset 0 0 20px rgba(0, 0, 0, 0.2);
}

.dark-mode .customer-settings-avatar::after {
  background: radial-gradient(
    circle at center,
    transparent 60%,
    rgba(0, 0, 0, 0.2) 80%,
    rgba(0, 0, 0, 0.35) 100%
  );
}

.dark-mode .customer-settings-avatar:hover {
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.5),
    0 0 0 3px rgba(93, 64, 55, 0.6),
    inset 0 0 25px rgba(93, 64, 55, 0.3);
}

.dark-mode .delete-confirm-modal {
  background-color: rgba(45, 45, 45, 0.95);
  border-color: #000;
  background-image: none;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.dark-mode .delete-modal-header {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  border-bottom-color: #b91c1c;
}

.dark-mode .delete-modal-title {
  color: #000000;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

.dark-mode .delete-modal-content {
  background: transparent;
}

.dark-mode .delete-info-panel {
  background: rgba(60, 60, 60, 0.98);
  border-color: #333;
}

.dark-mode .delete-panel-title {
  color: #e2e8f0;
}

.dark-mode .delete-panel-content {
  color: #e2e8f0;
}

.dark-mode .restore-note {
  color: #a0aec0;
  background: rgba(160, 174, 192, 0.1);
}

.dark-mode .delete-confirm-buttons {
  background: rgba(60, 60, 60, 0.98);
  border-color: #333;
}

/* Dream mode styles */
.dream-mode.customer-settings-page {
  background-color: #18181b !important;
}

.dream-mode.customer-settings-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(13, 13, 13, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.customer-settings-page::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .customer-settings-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .customer-settings-container {
  background: rgba(24, 24, 24, 0.99);
  border: 3px solid #000000;
  color: #ffffff;
}

.dream-mode .customer-settings-header {
  border-bottom-color: #000000;
}

.dream-mode .customer-settings-title-panel {
  background: #2e7d32 !important;
  border: 3px solid #1b5e20 !important;
  border-radius: 20px;
  position: relative;
  z-index: 100 !important;
  box-shadow: 0 8px 25px rgba(46, 125, 50, 0.4),
    0 0 40px rgba(46, 125, 50, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
}

.dream-mode .customer-settings-title {
  color: #ffffff !important;
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important;
  cursor: default !important;
  transition: none !important;
}

.dream-mode .customer-settings-back-button {
  background-color: #14545c;
  border: 3px solid #000000;
  color: #ffffff;
  box-shadow: 
    0 8px 25px rgba(20, 84, 92, 0.4),
    0 0 40px rgba(20, 84, 92, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .customer-settings-back-button:hover {
  background-color: #0e3a40;
  transform: translateY(-2px);
  box-shadow: 
    0 10px 30px rgba(20, 84, 92, 0.5),
    0 0 50px rgba(20, 84, 92, 0.4),
    inset 0 0 25px rgba(255, 255, 255, 0.15);
}

.dream-mode .customer-settings-user-card,
.dream-mode .customer-settings-rewards-section {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 3px solid #4a148c;
  box-shadow: 0 8px 25px rgba(74, 20, 140, 0.3),
    0 0 40px rgba(74, 20, 140, 0.2),
    inset 0 0 20px rgba(0, 0, 0, 0.05);
}

.dream-mode .customer-settings-stat-card {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  ) !important;
  border: 3px solid #000000;
  box-shadow: 0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .customer-settings-field-label {
  color: #000000;
  text-shadow: none;
}

.dream-mode .customer-settings-stat-card .customer-settings-field-label {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dream-mode .customer-settings-display-container {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #4a148c;
}

.dream-mode .customer-settings-display-value {
  color: #000000;
  text-shadow: none;
}

.dream-mode .customer-settings-display-value.not-set {
  color: #ccc;
}

.dream-mode .customer-settings-clickable:hover {
  background-color: rgba(0, 0, 0, 0.6);
  border-color: #ff00cc;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 10px rgba(255, 0, 204, 0.3);
  animation: dreamGlow 2s ease-in-out infinite alternate;
}

.dream-mode .customer-settings-input {
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #4a148c;
  color: #000000;
  text-align: center;
  text-shadow: none;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
}

.dream-mode .customer-settings-input-uniform,
.dream-mode input[type="email"],
.dream-mode input[type="tel"],
.dream-mode .home-address-fields input {
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
}

/* Dream mode field labels */
.dream-mode .customer-settings-field-label-small {
  color: #4a148c;
  font-family: 'The Wanters DEMO', serif !important;
}

/* Dream mode subtle red glow for empty postal address field */
.dream-mode .customer-settings-input.postal-empty {
  box-shadow: 0 0 8px rgba(220, 53, 69, 0.4);
  border-color: #dc3545;
}

.dream-mode .customer-settings-input.postal-empty:focus {
  box-shadow: 0 0 12px rgba(220, 53, 69, 0.5);
  border-color: #dc3545;
}

/* Dream mode green pulse animation for successful save */
.dream-mode .customer-settings-input.save-success {
  animation: savePulseDream 1s ease-in-out;
}

@keyframes savePulseDream {
  0% {
    box-shadow: 0 0 0 rgba(76, 175, 80, 0);
  }
  50% {
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.8);
  }
  100% {
    box-shadow: 0 0 0 rgba(76, 175, 80, 0);
  }
}

.dream-mode .customer-settings-save-button {
  background-color: #111111;
  border: 3px solid #000000;
  color: #ffffff;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .customer-settings-save-button:hover {
  background-color: #222222;
  border-color: #000000;
  box-shadow: 
    0 10px 30px rgba(26, 13, 35, 0.5),
    0 0 50px rgba(45, 20, 60, 0.4),
    inset 0 0 25px rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.dream-mode .customer-settings-delivery-toggle {
  background-color: #e74c3c !important;
  background-image: none !important;
  background-attachment: initial !important;
  background-blend-mode: initial !important;
  background-clip: initial !important;
  background-origin: initial !important;
  background-position: initial !important;
  background-repeat: initial !important;
  background-size: initial !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1) !important;
  position: relative !important;
  z-index: 1000 !important;
  isolation: isolate !important;
}

.dream-mode .customer-settings-delivery-toggle.active {
  background-color: #228B22 !important;
  background-image: none !important;
  background-attachment: initial !important;
  background-blend-mode: initial !important;
  background-clip: initial !important;
  background-origin: initial !important;
  background-position: initial !important;
  background-repeat: initial !important;
  background-size: initial !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1) !important;
  position: relative !important;
  z-index: 1000 !important;
  isolation: isolate !important;
}

.dream-mode .customer-settings-delivery-toggle:hover {
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 
    0 10px 30px rgba(26, 13, 35, 0.5),
    0 0 50px rgba(45, 20, 60, 0.4),
    inset 0 0 25px rgba(255, 255, 255, 0.15);
}

.dream-mode .customer-settings-delivery-toggle.active:hover {
  color: #ffffff !important;
  box-shadow: 
    0 10px 30px rgba(26, 13, 35, 0.5),
    0 0 50px rgba(45, 20, 60, 0.4),
    inset 0 0 25px rgba(255, 255, 255, 0.15);
}

/* Nuclear override for delivery toggle pseudo-elements */
.dream-mode .customer-settings-delivery-toggle::before,
.dream-mode .customer-settings-delivery-toggle::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/* Remove patterns from delivery toggle child elements */
.dream-mode .customer-settings-delivery-toggle * {
  background-image: none !important;
}

.dream-mode .customer-settings-delete-button {
  background-color: #dc3545 !important;
  background-image: none !important;
  background-attachment: initial !important;
  background-blend-mode: initial !important;
  background-clip: initial !important;
  background-origin: initial !important;
  background-position: initial !important;
  background-repeat: initial !important;
  background-size: initial !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1) !important;
  position: relative !important;
  z-index: 1000 !important;
  isolation: isolate !important;
}

.dream-mode .customer-settings-delete-button:hover {
  background-color: #c82333 !important;
  background-image: none !important;
  background-attachment: initial !important;
  background-blend-mode: initial !important;
  background-clip: initial !important;
  background-origin: initial !important;
  background-position: initial !important;
  background-repeat: initial !important;
  background-size: initial !important;
  border-color: #000000 !important;
  color: #ffffff !important;
  box-shadow: 
    0 10px 30px rgba(26, 13, 35, 0.5),
    0 0 50px rgba(45, 20, 60, 0.4),
    inset 0 0 25px rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px) !important;
  position: relative !important;
  z-index: 9999 !important;
  isolation: isolate !important;
  text-decoration: underline !important;
  contain: layout style paint !important;
}

/* Extra nuclear override for hover state */
.dream-mode .customer-settings-delete-button:hover::before,
.dream-mode .customer-settings-delete-button:hover::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Ultra-specific override to prevent any brown hover effects */
.customer-settings.dream-mode .customer-settings-delete-button:hover,
.dream-mode .customer-settings-delete-button-container .customer-settings-delete-button:hover,
button.customer-settings-delete-button.dream-mode:hover {
  background-color: #c82333 !important;
  background-image: none !important;
}

/* Nuclear override for delete button pseudo-elements */
.dream-mode .customer-settings-delete-button::before,
.dream-mode .customer-settings-delete-button::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/* Remove patterns from delete button child elements */
.dream-mode .customer-settings-delete-button * {
  background-image: none !important;
}

.dream-mode .customer-settings-stat-card {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  align-items: center;
  justify-content: center;
  min-width: 120px;
}

.dream-mode .customer-settings-stat-label {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dream-mode .customer-settings-stat-number {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .customer-settings-rewards-section {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .customer-settings-rewards-title {
  color: #00ffff !important;
  font-size: 3rem;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .customer-settings-reward-code {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .customer-settings-reward-code:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 10px 30px rgba(26, 13, 35, 0.5),
    0 0 50px rgba(45, 20, 60, 0.4),
    inset 0 0 25px rgba(255, 255, 255, 0.15);
  border-color: #ff00cc;
}

.dream-mode .customer-settings-reward-code.applied {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  );
  border-color: #00ff00 !important;
  box-shadow: 
    0 10px 30px rgba(26, 13, 35, 0.5),
    0 0 50px rgba(45, 20, 60, 0.4),
    inset 0 0 25px rgba(255, 255, 255, 0.15),
    0 0 20px rgba(0, 255, 0, 0.3);
}

.dream-mode .customer-settings-reward-reason {
  color: #00ffff !important;
  font-family: 'The Wanters DEMO', serif !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .customer-settings-reward-code-text {
  color: #ff0000 !important;
  background: rgba(26, 13, 35, 0.8);
  border: 3px solid #000000;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  animation: none !important;
}

/* Dream mode promo code text when reward is applied - turn green */
.dream-mode .customer-settings-reward-code.applied .customer-settings-reward-code-text {
  color: #00ff00 !important;
  background: rgba(26, 13, 35, 0.8);
  border: 3px solid #000000;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .customer-settings-reward-description {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .customer-settings-reward-description-text {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .customer-settings-no-rewards {
  color: #ccc;
}

/* Checkout-specific rewards styling - smaller panels in rows of 2 */
.checkout-rewards-section {
  max-width: 800px !important;
  padding: clamp(1rem, 3vw, 1.5rem) !important;
  border: clamp(1px, 0.3vw, 2px) solid #3e2723 !important;
  border-radius: clamp(8px, 2vw, 12px) !important;
  /* Improved mobile scaling */
  width: 100% !important;
  box-sizing: border-box !important;
}

.checkout-rewards-container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: clamp(0.5rem, 2vw, 0.75rem) !important;
  /* Improved mobile scaling */
  width: 100% !important;
  box-sizing: border-box !important;
}

.checkout-rewards-container .customer-settings-reward-code {
  padding: clamp(0.75rem, 2vw, 1rem) !important;
  min-height: auto !important;
  border: clamp(1px, 0.3vw, 3px) solid #3e2723 !important;
  border-radius: clamp(8px, 2vw, 12px) !important;
  /* Improved mobile scaling */
  width: 100% !important;
  box-sizing: border-box !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.checkout-rewards-container .customer-settings-reward-reason {
  font-size: clamp(1rem, 3vw, 1.2rem) !important;
  margin-bottom: clamp(0.2rem, 1vw, 0.3rem) !important;
  /* Improved mobile scaling */
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  line-height: clamp(1.2, 3vw, 1.3) !important;
}

.checkout-rewards-container .customer-settings-reward-code-text {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
  padding: clamp(0.3rem, 1.5vw, 0.4rem) clamp(0.6rem, 2vw, 0.8rem) !important;
  border: clamp(1px, 0.2vw, 2px) solid #3e2723 !important;
  border-radius: clamp(4px, 1vw, 6px) !important;
  /* Improved mobile scaling */
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  text-align: center !important;
}

.checkout-rewards-container .customer-settings-reward-description {
  font-size: clamp(0.8rem, 2.2vw, 0.9rem) !important;
  margin-top: clamp(0.2rem, 1vw, 0.3rem) !important;
  /* Improved mobile scaling */
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  line-height: clamp(1.1, 2.5vw, 1.2) !important;
}

.checkout-rewards-container .customer-settings-reward-description-text {
  font-size: 1rem !important;
  /* Improved mobile scaling */
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  line-height: clamp(1.1, 2.5vw, 1.2) !important;
}

/* Dark mode clear button styling */
.dark-mode .clear-button {
  border: 2px solid #000000 !important;
}

/* Dream mode clear button styling - make it red like dark mode */
.dream-mode .clear-button {
  border: 2px solid #000000 !important;
  background-color: #d32f2f !important;
  color: #000000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  background-image: none !important;
  background: #d32f2f !important;
}

/* Additional override for any inline styles */
.dream-mode .clear-button[style*="background"] {
  background: #d32f2f !important;
  background-color: #d32f2f !important;
  background-image: none !important;
}

/* Light mode enter code button styling - ensure white text */
.light-mode .enter-code-button {
  color: #ffffff !important;
}

/* Reward description text - The Wanters DEMO font for both checkout and customer settings */
.customer-settings-reward-description-text,
.checkout-rewards-container .customer-settings-reward-description-text {
  font-family: 'The Wanters DEMO, serif' !important;
}

/* Force The Wanters DEMO font for reward descriptions - override any other styles */
.customer-settings-reward-description,
.checkout-rewards-container .customer-settings-reward-description {
  font-family: 'The Wanters DEMO', serif !important;
}

/* ULTIMATE OVERRIDE - Force The Wanters DEMO font with maximum specificity */
body .customer-settings-reward-description,
body .customer-settings-reward-description-text,
body .checkout-rewards-container .customer-settings-reward-description,
body .checkout-rewards-container .customer-settings-reward-description-text,
.customer-settings-reward-description,
.customer-settings-reward-description-text,
.checkout-rewards-container .customer-settings-reward-description,
.checkout-rewards-container .customer-settings-reward-description-text {
  font-family: 'The Wanters DEMO', serif !important;
  font-size: 1.5rem !important;
}

/* Dream mode checkout rewards title - 1px black outline */
.dream-mode .checkout-rewards-section .customer-settings-rewards-title {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream-mode .delete-confirm-modal {
  background: linear-gradient(135deg, #f8f5f0, #fff8e1);
  border-color: #b8860b;
  color: #3e2723;
  background-image: none;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .delete-modal-header {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  border-bottom-color: #b91c1c;
}

.dream-mode .delete-modal-title {
  color: #000000;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

.dream-mode .delete-modal-content {
  background: transparent;
}

.dream-mode .delete-info-panel {
  background: rgba(255, 255, 255, 0.9);
  border-color: #b8860b;
}

.dream-mode .delete-panel-title {
  color: #3e2723;
}

.dream-mode .delete-panel-content {
  color: #3e2723;
}

.dream-mode .restore-note {
  color: #6c757d;
  background: rgba(108, 117, 125, 0.1);
}

.dream-mode .delete-confirm-buttons {
  background: rgba(255, 255, 255, 0.9);
  border-color: #b8860b;
}

/* Dream mode avatar styling */
.dream-mode .customer-settings-avatar {
  border: 4px solid #000000;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(0, 0, 0, 0.4),
    inset 0 0 20px rgba(0, 0, 0, 0.2),
    0 0 15px rgba(255, 0, 204, 0.3);
  animation: dreamGlow 3s ease-in-out infinite alternate;
}

.dream-mode .customer-settings-avatar::after {
  background: radial-gradient(
    circle at center,
    transparent 60%,
    rgba(0, 0, 0, 0.2) 80%,
    rgba(0, 0, 0, 0.35) 100%
  );
}

.dream-mode .customer-settings-avatar:hover {
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.4),
    0 0 0 3px rgba(0, 0, 0, 0.6),
    inset 0 0 25px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(255, 0, 204, 0.5);
  animation: dreamGlowHover 1.5s ease-in-out infinite alternate;
}

@keyframes dreamGlow {
  0% {
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.3),
      0 0 0 2px rgba(0, 0, 0, 0.4),
      inset 0 0 20px rgba(0, 0, 0, 0.2),
      0 0 15px rgba(255, 0, 204, 0.3);
  }
  100% {
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.3),
      0 0 0 2px rgba(0, 0, 0, 0.4),
      inset 0 0 20px rgba(0, 0, 0, 0.2),
      0 0 20px rgba(255, 0, 204, 0.5);
  }
}

@keyframes dreamGlowHover {
  0% {
    box-shadow: 
      0 6px 20px rgba(0, 0, 0, 0.4),
      0 0 0 3px rgba(0, 0, 0, 0.6),
      inset 0 0 25px rgba(0, 0, 0, 0.3),
      0 0 35px rgba(255, 0, 204, 0.7);
  }
  100% {
    box-shadow: 
      0 6px 20px rgba(0, 0, 0, 0.4),
      0 0 0 3px rgba(0, 0, 0, 0.6),
      inset 0 0 25px rgba(0, 0, 0, 0.3),
      0 0 35px rgba(255, 0, 204, 0.7);
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .customer-settings-page {
    padding: 0.5rem;
  }
  
  .customer-settings-background-panel {
    width: 99%;
    padding: 0.75rem;
  }
  
  .customer-settings-container {
    padding: 0.75rem;
  }
  
  .customer-settings-title {
    font-size: 2rem;
  }
  
  .customer-settings-user-card,
  .customer-settings-rewards-section {
    padding: 1rem;
    width: 100%;
    max-width: none;
  }
  
  .customer-settings-input {
    max-width: none;
    width: 100%;
    font-size: 0.9rem;
    padding: 0.6rem;
  }
  
  .customer-settings-display-value {
    max-width: none;
    width: 100%;
    font-size: 0.9rem;
    padding: 0.6rem;
  }
  
  .customer-settings-delivery-toggle {
    font-size: 1rem;
    padding: 0.75rem 1rem;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
  }
  
  .customer-settings-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: 0.5rem;
  }
  
  .customer-settings-stat-card {
    padding: 0.75rem;
  }
  
  .delete-confirm-buttons {
    flex-direction: column;
  }
  
  .delete-confirm-modal {
    margin: 1rem;
    padding: 1.5rem;
  }
  
  /* Strategic mobile scaling for checkout rewards - prioritize content over borders */
  .checkout-rewards-section {
    padding: clamp(0.75rem, 2vw, 1rem) !important;
    border-width: clamp(1px, 0.2vw, 2px) !important;
    border-radius: clamp(6px, 1.5vw, 8px) !important;
    width: 98% !important;
    max-width: 98% !important;
  }
  
  .checkout-rewards-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(0.4rem, 1.5vw, 0.5rem) !important;
    width: 100% !important;
  }
  
  .checkout-rewards-container .customer-settings-reward-code {
    padding: clamp(0.6rem, 1.5vw, 0.75rem) !important;
    border-width: clamp(1px, 0.2vw, 3px) !important;
    border-radius: clamp(6px, 1.5vw, 8px) !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  
  .checkout-rewards-container .customer-settings-reward-reason {
    font-size: clamp(0.9rem, 2.5vw, 1rem) !important;
    margin-bottom: clamp(0.15rem, 0.8vw, 0.2rem) !important;
    line-height: clamp(1.1, 2.5vw, 1.2) !important;
  }
  
  .checkout-rewards-container .customer-settings-reward-code-text {
    font-size: clamp(0.8rem, 2.2vw, 0.9rem) !important;
    padding: clamp(0.25rem, 1.2vw, 0.3rem) clamp(0.5rem, 1.5vw, 0.6rem) !important;
    border-width: clamp(1px, 0.15vw, 2px) !important;
    border-radius: clamp(3px, 0.8vw, 4px) !important;
  }
  
  .checkout-rewards-container .customer-settings-reward-description {
    font-size: clamp(0.7rem, 2vw, 0.8rem) !important;
    margin-top: clamp(0.15rem, 0.8vw, 0.2rem) !important;
    line-height: clamp(1.0, 2vw, 1.1) !important;
  }
}

@media (max-width: 480px) {
  .customer-settings-page {
    padding: 0.25rem;
  }
  
  .customer-settings-title-panel {
    border-width: 1px;
  }
  
  .customer-settings-background-panel {
    width: 99.5%;
    padding: 0.5rem;
    border-width: 1px;
  }
  
  .customer-settings-container {
    padding: 0.5rem;
    border-width: 1px;
  }
  
  .customer-settings-user-card,
  .customer-settings-rewards-section {
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-width: 1px;
  }
  
  .customer-settings-input {
    font-size: 0.85rem;
    padding: 0.5rem;
    word-wrap: break-word;
    white-space: pre-wrap;
  }
  
  /* Ultra-aggressive mobile scaling for checkout rewards - borders scale down first */
  .checkout-rewards-section {
    padding: clamp(0.5rem, 1.5vw, 0.75rem) !important;
    border-width: clamp(0.5px, 0.15vw, 1px) !important;
    border-radius: clamp(4px, 1vw, 6px) !important;
    width: 99% !important;
    max-width: 99% !important;
  }
  
  .checkout-rewards-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(0.3rem, 1vw, 0.4rem) !important;
  }
  
  .checkout-rewards-container .customer-settings-reward-code {
    padding: clamp(0.4rem, 1.2vw, 0.6rem) !important;
    border-width: clamp(0.5px, 0.15vw, 1px) !important;
    border-radius: clamp(4px, 1vw, 6px) !important;
  }
  
  .checkout-rewards-container .customer-settings-reward-reason {
    font-size: clamp(0.8rem, 2.2vw, 0.9rem) !important;
    margin-bottom: clamp(0.1rem, 0.6vw, 0.15rem) !important;
  }
  
  .checkout-rewards-container .customer-settings-reward-code-text {
    font-size: clamp(0.7rem, 2vw, 0.8rem) !important;
    padding: clamp(0.2rem, 1vw, 0.25rem) clamp(0.4rem, 1.2vw, 0.5rem) !important;
    border-width: clamp(0.5px, 0.1vw, 1px) !important;
    border-radius: clamp(2px, 0.6vw, 3px) !important;
  }
  
  .checkout-rewards-container .customer-settings-reward-description {
    font-size: clamp(0.6rem, 1.8vw, 0.7rem) !important;
    margin-top: clamp(0.1rem, 0.6vw, 0.15rem) !important;
  }
  
  .customer-settings-display-value {
    font-size: 0.85rem;
    padding: 0.5rem;
    word-wrap: break-word;
    white-space: pre-wrap;
  }
  
  .customer-settings-delivery-toggle {
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem;
    line-height: 1.1;
    border-width: 1px;
  }
  
  .customer-settings-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: 0.4rem;
  }
  
  .customer-settings-stat-card {
    padding: 0.6rem;
    border-width: 1px;
  }
  
  .customer-settings-avatar {
    width: 150px;
    height: 150px;
    border-width: 1px;
  }
}

/* Extra small mobile screens */
@media (max-width: 360px) {
  .customer-settings-page {
    padding: 0.125rem;
  }
  
  .customer-settings-title-panel {
    border-width: 1px;
  }
  
  .customer-settings-background-panel {
    width: 99.8%;
    padding: 0.25rem;
    border-width: 1px;
  }
  
  .customer-settings-container {
    padding: 0.25rem;
    border-width: 1px;
  }
  
  .customer-settings-user-card,
  .customer-settings-rewards-section {
    padding: 0.5rem;
    margin-bottom: 0.75rem;
    border-width: 1px;
  }
  
  .customer-settings-input {
    font-size: 0.8rem;
    padding: 0.4rem;
  }
  
  .customer-settings-display-value {
    font-size: 0.8rem;
    padding: 0.4rem;
  }
  
  .customer-settings-delivery-toggle {
    font-size: 0.85rem;
    padding: 0.5rem 0.6rem;
    border-width: 1px;
  }
  
  .customer-settings-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.3rem;
  }
  
  .customer-settings-stat-card {
    padding: 0.5rem;
    border-width: 1px;
  }
  
  .customer-settings-avatar {
    width: 120px;
    height: 120px;
    border-width: 1px;
  }
  
  /* Maximum aggressive scaling for very small screens - content preserved, borders minimal */
  .checkout-rewards-section {
    padding: clamp(0.3rem, 1vw, 0.5rem) !important;
    border-width: clamp(0.25px, 0.1vw, 0.5px) !important;
    border-radius: clamp(2px, 0.5vw, 4px) !important;
    width: 99.8% !important;
    max-width: 99.8% !important;
  }
  
  .checkout-rewards-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(0.2rem, 0.8vw, 0.3rem) !important;
    width: 100% !important;
  }
  
  .checkout-rewards-container .customer-settings-reward-code {
    padding: clamp(0.3rem, 1vw, 0.4rem) !important;
    border-width: clamp(0.25px, 0.1vw, 0.5px) !important;
    border-radius: clamp(2px, 0.5vw, 4px) !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  
  .checkout-rewards-container .customer-settings-reward-reason {
    font-size: clamp(0.7rem, 2vw, 0.8rem) !important;
    margin-bottom: clamp(0.05rem, 0.4vw, 0.1rem) !important;
    line-height: clamp(0.9, 2vw, 1.0) !important;
  }
  
  .checkout-rewards-container .customer-settings-reward-code-text {
    font-size: clamp(0.6rem, 1.8vw, 0.7rem) !important;
    padding: clamp(0.15rem, 0.8vw, 0.2rem) clamp(0.3rem, 1vw, 0.4rem) !important;
    border-width: clamp(0.25px, 0.05vw, 0.5px) !important;
    border-radius: clamp(1px, 0.3vw, 2px) !important;
  }
  
  .checkout-rewards-container .customer-settings-reward-description {
    font-size: clamp(0.5rem, 1.5vw, 0.6rem) !important;
    margin-top: clamp(0.05rem, 0.4vw, 0.1rem) !important;
    line-height: clamp(0.8, 1.5vw, 0.9) !important;
  }
}

/* ========================================
   PASSWORD MANAGEMENT STYLES
   ======================================== */

/* Change Password Section Styles */
.change-password-form {
  margin-top: 1rem;
  padding: 1.5rem;
  border: 2px solid rgba(76, 175, 80, 0.3);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.change-password-form .form-group {
  margin-bottom: 1rem;
}

.change-password-form .form-group:last-child {
  margin-bottom: 0;
}

.change-password-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: inherit;
  font-size: 0.9rem;
  text-align: center !important;
}

.change-password-form .form-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  font-size: 0.9rem;
  font-family: Verdana, sans-serif !important;
  transition: all 0.2s ease;
}

.change-password-form .form-input:focus {
  outline: none;
  border-color: #4caf50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.password-strength-indicator {
  font-size: 0.8rem;
  margin-top: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
}

/* Password Input Container and Toggle Button Styles */
.change-password-form .password-input-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.change-password-form .password-input-container input {
  padding-right: 3rem;
  width: 100%;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

.change-password-form .password-toggle {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  color: #8d6e63;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  font-size: 1rem;
  transition: color 0.2s ease;
  z-index: 10;
}

.change-password-form .password-toggle:hover {
  color: #5d4037;
}

.dark .change-password-form .password-toggle {
  color: #ffffff;
}

.dark .change-password-form .password-toggle:hover {
  color: #cccccc;
}

.dream .change-password-form .password-toggle {
  color: #ffffff;
}

.dream .change-password-form .password-toggle:hover {
  color: #cccccc;
}

/* Pill-shaped styling for change password form buttons */
.change-password-form .customer-settings-save-button {
  border-radius: 9999px !important;
  padding: 0.75rem 1.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.change-password-form .customer-settings-save-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.change-password-form .customer-settings-save-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.9rem;
}

.checkbox-container input[type="checkbox"] {
  margin-right: 0.5rem;
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.customer-settings-save-button.secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  color: inherit !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.customer-settings-save-button.secondary:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

.error-message {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: 8px;
  color: #ff6b6b;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.success-message {
  padding: 0.75rem;
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 8px;
  color: #4caf50;
  font-size: 0.9rem;
  margin-top: 1rem;
  text-align: center;
}

/* Small field labels for postal address fields */
.customer-settings-field-label-small {
  display: block;
  font-weight: 600;
  color: #3e2723;
  font-size: 1rem;
  margin-bottom: 0.25rem;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  text-align: center;
  font-family: 'The Wanters DEMO', serif !important;
}

/* Small input fields for postal address */
.customer-settings-input-small {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
  background-color: #ffffff;
  color: #3e2723;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.customer-settings-input-small:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 5px rgba(93, 64, 55, 0.3);
}

.customer-settings-input-small:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

/* Uniform input fields for postal address - all same size */
.customer-settings-input-uniform {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d7ccc8;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
  background-color: #ffffff;
  color: #3e2723;
  transition: all 0.3s ease;
  box-sizing: border-box;
  height: 2.5rem;
}

.customer-settings-input-uniform:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 5px rgba(93, 64, 55, 0.3);
}

.customer-settings-input-uniform:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

/* Split Name Fields Styles */
.name-fields-container {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.name-field-half {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.name-field-half .customer-settings-field-label {
  font-size: 1.4rem;
  margin-bottom: 0.1rem;
  color: #3e2723;
  font-weight: 600;
  text-align: center;
}

.name-field-half .customer-settings-edit-container {
  width: 100%;
}

.name-field-half .customer-settings-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d7ccc8;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
  background-color: white;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.name-field-half .customer-settings-input:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 5px rgba(93, 64, 55, 0.3);
}

.name-field-half .customer-settings-input.field-empty {
  box-shadow: 0 0 8px rgba(220, 53, 69, 0.3);
  border-color: #dc3545;
}

.name-field-half .customer-settings-input.field-empty:focus {
  box-shadow: 0 0 12px rgba(220, 53, 69, 0.4);
  border-color: #dc3545;
}

.name-field-half .customer-settings-input.save-success {
  border-color: #4caf50;
  background-color: #e8f5e8;
}

/* Responsive design for name fields */
@media (max-width: 768px) {
  .name-fields-container {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .name-field-half {
    width: 100%;
  }
}

/* Home Address Section Styles */
.home-address-checkbox-container {
  margin-bottom: 1rem;
}

.home-address-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
  font-size: 1rem;
  color: #5d4037;
  font-weight: 600;
}

.home-address-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #5d4037;
  cursor: pointer;
}

.home-address-checkbox-text {
  user-select: none;
  font-family: 'The Wanters DEMO', serif !important;
}

.home-address-fields {
  margin-top: 1rem;
  padding: 1rem;
  background-color: rgba(245, 245, 220, 0.3);
  border-radius: 8px;
  border: 1px solid #d7ccc8;
}

/* Ensure all input fields use Verdana font */
.customer-settings-input,
.customer-settings-input-uniform,
.customer-settings-input-small,
input[type="text"],
input[type="email"],
input[type="tel"],
input {
  font-family: 'Verdana, Geneva, Tahoma, sans-serif' !important;
}

/* Override any other font declarations for input fields */
.customer-settings-user-card input,
.customer-settings-field-section input,
.customer-settings-page input {
  font-family: 'Verdana, Geneva, Tahoma, sans-serif' !important;
}

/* Force Verdana on all input elements globally */
input {
  font-family: 'Verdana, Geneva, Tahoma, sans-serif' !important;
}

/* Specific rules for email field */
input[type="email"],
.customer-settings-field-section input[type="email"] {
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
}

/* Email field - thicker border to suggest it cannot be changed */
.customer-settings-input[type="email"] {
  border-width: 3px !important;
  border-color: #8d6e63 !important;
}

/* Specific rules for mobile number field */
input[type="tel"],
.customer-settings-field-section input[type="tel"] {
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
}

/* Specific rules for postal address fields */
.customer-settings-input-uniform,
.customer-settings-field-section .customer-settings-input-uniform {
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
}

/* Specific rules for home address fields */
.home-address-fields input,
.home-address-checkbox-container + div input {
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
}

/* Responsive design for home address fields */
@media (max-width: 768px) {
  .home-address-fields > div[style*="grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* Postal Address Section Styles */
.postal-address-checkbox-container {
  margin-bottom: 1rem;
}

.postal-address-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
  font-size: 1rem;
  color: #5d4037;
  font-weight: 600;
}

.postal-address-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #5d4037;
  cursor: pointer;
}

.postal-address-checkbox-text {
  user-select: none;
  font-family: 'The Wanters DEMO', serif !important;
}

.postal-address-fields {
  margin-top: 1rem;
  padding: 1rem;
  background-color: rgba(245, 245, 220, 0.3);
  border-radius: 8px;
  border: 1px solid #d7ccc8;
}

/* Specific rules for postal address fields */
.postal-address-fields input,
.postal-address-checkbox-container + div input {
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
}

/* Responsive design for postal address fields */
@media (max-width: 768px) {
  .postal-address-fields > div[style*="grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* Final font override to ensure Verdana is used everywhere */
.customer-settings-page input,
.customer-settings-page input[type="text"],
.customer-settings-page input[type="email"],
.customer-settings-page input[type="tel"],
.customer-settings-input,
.customer-settings-input-uniform,
.customer-settings-input-small {
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
}/* Business Profile Styles */


/* Social media input animations */
@keyframes redGlow {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
}

@keyframes greenPulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
}

.social-media-input-empty {
  animation: redGlow 2s ease-in-out infinite;
}

.social-media-input-completed {
  animation: greenPulse 0.6s ease-in-out;
}

.social-media-input-saved {
  animation: greenPulse 2s ease-in-out;
}

/* Social media checkbox sizing */
.social-media-checkbox {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  flex-shrink: 0;
}
.business-profile-content {
  padding: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}

.business-profile-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(245, 245, 220, 0.95);
  border: 2px solid #5d4037;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.business-profile-section-title {
  color: #5d4037;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  text-align: center;
  letter-spacing: 1px;
}

.business-profile-form-group {
  margin-bottom: 1rem;
}

.business-profile-label {
  display: block;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-align: center;
  letter-spacing: 0.5px;
}

.business-profile-input {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif;
  font-size: 1rem;
  text-align: center;
  transition: border-color 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
}

.business-profile-input:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

/* Red glow for empty business profile input fields - more subtle like customer settings */
.business-profile-input.field-empty {
  box-shadow: 0 0 4px rgba(220, 53, 69, 0.2);
  border-color: #dc3545;
  border-width: 1px;
}

.business-profile-input.field-empty:focus {
  box-shadow: 0 0 6px rgba(220, 53, 69, 0.3);
  border-color: #dc3545;
  border-width: 1px;
}

.business-profile-input.po-box-input {
  max-width: 150px;
  width: 150px;
  text-align: center;
}

.business-profile-form-group.po-box-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.business-profile-input.street-number-input,
.business-profile-input.postcode-input {
  max-width: 120px;
  width: 120px;
  text-align: center;
}

.business-profile-form-group.street-number-group,
.business-profile-form-group.postcode-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.business-profile-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif;
  font-size: 1rem;
  resize: vertical;
  min-height: 150px;
  height: auto;
  transition: border-color 0.3s ease;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  overflow-y: auto;
}

.business-profile-textarea:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.business-profile-char-count {
  color: #8d6e63;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif;
  font-size: 0.8rem;
  text-align: center;
  margin-top: 0.25rem;
  opacity: 0.7;
}

.business-profile-checkbox-section {
  margin-bottom: 1rem;
}

.business-profile-checkbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.business-profile-checkbox {
  width: 1.3rem;
  height: 1.3rem;
  accent-color: #4CAF50;
  cursor: pointer;
  transition: opacity 1s ease-in-out;
}

.business-profile-checkbox.fading-out {
  opacity: 0.3;
  animation: fadeOutCheckbox 1s ease-in-out;
}

@keyframes fadeOutCheckbox {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

.business-profile-checkbox-label {
  color: #5d4037;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.5px;
}

.business-profile-postal-fields {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(93, 64, 55, 0.05);
  border-radius: 8px;
  border: 1px solid #8d6e63;
}

.business-profile-form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 768px) {
  .business-profile-form-row {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  
  .business-profile-form-group {
    width: 100%;
    max-width: 300px;
  }
}

.business-profile-form-row:last-child {
  margin-bottom: 0;
}

.business-profile-form-row .business-profile-form-group {
  flex: 1;
  margin-bottom: 0;
}

/* Specific styling for street number and street name row - closer alignment */
.business-profile-form-row.street-fields-row {
  gap: 0.5rem;
  justify-content: center;
}

.business-profile-form-row.street-fields-row .business-profile-form-group.street-number-group {
  flex: 0 0 auto;
  max-width: 120px;
}

.business-profile-form-row.street-fields-row .business-profile-form-group:not(.street-number-group) {
  flex: 1;
  max-width: 200px;
}

.business-profile-hours-section {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(93, 64, 55, 0.05);
  border-radius: 8px;
  border: 1px solid #8d6e63;
}

.business-profile-hours-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  border: 1px solid #8d6e63;
}

.business-profile-hours-row:last-child {
  margin-bottom: 0;
}

.business-profile-day-checkbox {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 120px;
}

.business-profile-day-label {
  color: #5d4037;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.5px;
}

.business-profile-hours-input {
  flex: 1;
  min-width: 0;
}

.business-profile-time-inputs {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.business-profile-time-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.business-profile-time-label {
  color: #5d4037;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.5px;
}

.business-profile-time-input {
  width: 120px;
  padding: 0.6rem 0.8rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif;
  font-size: 0.9rem;
  text-align: center;
  transition: border-color 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
}

.business-profile-time-input:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.business-profile-closed-indicator {
  color: #ff4444;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  padding: 0.5rem;
  background: rgba(255, 68, 68, 0.1);
  border-radius: 8px;
  letter-spacing: 0.5px;
}

.business-profile-save-section {
  margin-top: 2rem;
  text-align: center;
}

.business-profile-save-btn {
  background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%);
  color: white;
  border: 3px solid #1b5e20;
  padding: 1rem 2rem;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.business-profile-save-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
}

.business-profile-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .business-profile-content {
    padding: 1rem;
  }
  
  .business-profile-section {
    padding: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .business-profile-form-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .business-profile-time-inputs {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
  }
  
  .business-profile-time-input {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
  }
  
  .business-profile-hours-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  
  .business-profile-day-checkbox {
    min-width: auto;
    justify-content: center;
  }
}

/* Dark theme support */
.dark .business-profile-section {
  background: rgba(80, 80, 80, 0.95);
  border-color: #000;
}

.dark .business-profile-section-title {
  color: #f5f5dc;
}

.dark .business-profile-label {
  color: #f5f5dc;
}

.dark .business-profile-input,
.dark .business-profile-textarea {
  background: rgba(60, 60, 60, 0.9);
  border-color: #000;
  color: #fff;
}

.dark .business-profile-checkbox-label {
  color: #f5f5dc;
}

.dark .business-profile-day-label {
  color: #f5f5dc;
}

.dark .business-profile-time-label {
  color: #f5f5dc;
}

.dark .business-profile-char-count {
  color: #f5f5dc;
}

.dark .business-profile-postal-fields,
.dark .business-profile-hours-section {
  background: rgba(40, 40, 40, 0.5);
  border-color: #000;
}

.dark .business-profile-hours-row {
  background: rgba(60, 60, 60, 0.7);
  border-color: #000;
}
/* Admin Profile Modal Styles */
.admin-profile-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  overflow: hidden;
}

.admin-profile-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.admin-profile-modal {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  background: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.admin-profile-modal-content {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.98);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.admin-profile-modal-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header - Now using customer-settings-header class */

.admin-profile-title-panel {
  background-color: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
}

.admin-profile-title {
  font-size: 2rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
}

/* Back Button Container */
.admin-profile-back-container {
  display: flex;
  justify-content: center;
  padding: 1rem;
  background: rgba(245, 245, 220, 0.95);
  border-bottom: 2px solid #e0e0e0;
}

.admin-profile-back-button {
  background-color: #f44336;
  color: white;
  border: 2px solid #d32f2f;
  border-radius: 25px;
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-profile-back-button:hover {
  background-color: #d32f2f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(244, 67, 54, 0.4);
}

/* Main Content */
.admin-profile-main-content {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Avatar */
.admin-profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14545c, #1a6b75);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem auto;
  border: 4px solid #8b4513;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.admin-profile-avatar-placeholder {
  color: white;
  font-size: 2rem;
  font-weight: bold;
  font-family: 'The Wanters DEMO', serif;
}

/* Welcome Message */
.admin-profile-welcome {
  text-align: center;
  margin-bottom: 1.5rem;
}

.admin-profile-welcome-text {
  color: #14545c;
  margin: 0 0 0.5rem 0;
  fontSize: 1.5rem;
  fontWeight: 600;
  fontFamily: 'The Wanters DEMO', serif;
}

.admin-profile-role {
  color: #666;
  margin: 0;
  fontSize: 1rem;
  fontStyle: italic;
}

/* Button Bar */
.admin-profile-actions-container {
  margin-bottom: 2rem;
  width: 100%;
  max-width: 600px;
}

.admin-profile-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.admin-profile-btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid #14545c;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  color: #14545c;
  min-width: 120px;
}

.admin-profile-btn:hover {
  background: #14545c;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(20, 84, 92, 0.3);
}

.admin-profile-btn.active {
  background: #14545c;
  color: white;
  box-shadow: 0 4px 8px rgba(20, 84, 92, 0.3);
}

/* Content Area */
.admin-profile-content {
  width: 100%;
  max-width: 800px;
}

.admin-profile-section {
  width: 100%;
}

.admin-profile-user-card {
  background: rgba(245, 245, 220, 0.3);
  border: 2px solid #14545c;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.admin-profile-section-title {
  color: #14545c;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: 'The Wanters DEMO', serif;
  margin: 0 0 1.5rem 0;
  text-align: center;
  border-bottom: 2px solid #14545c;
  padding-bottom: 0.5rem;
}

.admin-profile-placeholder {
  text-align: center;
  color: #666;
  font-style: italic;
  font-size: 1.1rem;
  margin: 2rem 0;
}

/* Form Fields */
.admin-profile-field-section {
  margin-bottom: 1.5rem;
}

.admin-profile-field-label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #14545c;
  font-family: 'The Wanters DEMO', serif;
  margin-bottom: 0.5rem;
  text-transform: none;
  letter-spacing: 0.3px;
}

.admin-profile-field-label-small {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #14545c;
  font-family: 'The Wanters DEMO', serif;
  margin-bottom: 0.3rem;
  text-transform: none;
  letter-spacing: 0.3px;
}

.admin-profile-edit-container {
  position: relative;
}

.admin-profile-input {
  width: 100%;
  padding: 0.8rem;
  border: 2px solid #14545c;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Verdana', sans-serif;
  background: #ffffff;
  color: #14545c;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.admin-profile-input:focus {
  outline: none;
  border-color: #0a1a1d;
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.1);
}

.admin-profile-input:hover {
  border-color: #1a6b75;
}

.admin-profile-input.field-empty {
  border-color: #e0e0e0;
  background: #f9f9f9;
}

.admin-profile-input.save-success {
  border-color: #14545c;
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.3);
  animation: tealPulse 2s ease-in-out;
}

@keyframes tealPulse {
  0% {
    box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.3);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(20, 84, 92, 0.6);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.3);
  }
}

/* Name Fields Container */
.name-fields-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.name-field-half {
  display: flex;
  flex-direction: column;
}

/* Button Container */
.admin-profile-button-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
  align-items: center;
  width: 100%;
}

.admin-profile-save-button {
  background-color: #14545c;
  color: white;
  border: 2px solid #0a1a1d;
  border-radius: 20px;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 150px;
}

.admin-profile-save-button:hover:not(:disabled) {
  background-color: #0e3a40;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(20, 84, 92, 0.3);
}

.admin-profile-save-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
}

.admin-profile-cancel-button {
  background-color: #f44336;
  color: white;
  border: 2px solid #d32f2f;
  border-radius: 20px;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 150px;
}

.admin-profile-cancel-button:hover {
  background-color: #d32f2f;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
}

/* Address and Emergency Contact Fields */
.address-fields-container,
.emergency-fields-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.address-field,
.emergency-field {
  display: flex;
  flex-direction: column;
}

/* Responsive Design */
@media (max-width: 768px) {
  .admin-profile-modal {
    height: 95vh;
    max-height: none;
    margin: 0.5rem;
  }
  
  .admin-profile-main-content {
    padding: 1rem;
  }
  
  .name-fields-container {
    grid-template-columns: 1fr;
  }
  
  .address-fields-container,
  .emergency-fields-container {
    grid-template-columns: 1fr;
  }
  
  .admin-profile-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .admin-profile-btn {
    width: 100%;
    max-width: 200px;
  }
}

@media (max-width: 480px) {
  .admin-profile-modal {
    margin: 0.25rem;
    height: 98vh;
  }
  
  .admin-profile-header {
    padding: 1rem;
  }
  
  .admin-profile-title {
    font-size: 1.5rem;
  }
  
  .admin-profile-user-card {
    padding: 1rem;
  }
}

/* Dream Mode Styles */
.dream-mode .admin-profile-modal {
  background: rgba(24, 24, 24, 0.99);
  border: 3px solid #000000;
  color: #ffffff;
}

.dream-mode .admin-profile-header {
  background: rgba(26, 13, 35, 0.95);
  border-bottom-color: #000000;
}

.dream-mode .admin-profile-title-panel {
  background: #2e7d32 !important;
  border: 3px solid #1b5e20 !important;
  box-shadow: 0 8px 25px rgba(46, 125, 50, 0.4);
}

.dream-mode .admin-profile-title {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dream-mode .admin-profile-user-card {
  background: rgba(26, 13, 35, 0.3);
  border: 2px solid #000000;
  color: #ffffff;
}

.dream-mode .admin-profile-field-label,
.dream-mode .admin-profile-field-label-small {
  color: #ffffff;
}

.dream-mode .admin-profile-input {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
  color: #ffffff;
}

.dream-mode .admin-profile-input:focus {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.dream-mode .admin-profile-welcome-text {
  color: #ffffff;
}

.dream-mode .admin-profile-role {
  color: #cccccc;
}
/* Inventory Page Styles - Now using MainMenu layout */
.main-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0;
  background-color: #f5f5dc; /* Light beige background for light mode */
  background-image: url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-blend-mode: soft-light;
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  /* Allow vertical scroll to pass to body - finger scroll works anywhere */
  overflow-y: visible;
  touch-action: pan-y;
}
.main-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
  pointer-events: none;
}
.main-menu::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}
.products-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  margin: 0;
  color: #14545c !important; /* Force teal color in all themes */
  position: relative;
  z-index: 1;
  text-align: center;
  text-shadow: none; /* No outline in light mode */
  cursor: default;
  transition: none;
  pointer-events: none;
}
/* Light mode specific teal color enforcement */
.light-mode .products-title,
.main-menu:not(.dark-mode):not(.dream-mode) .products-title {
  color: #14545c !important;
}
/* NUCLEAR override: absolutely no hover/focus/active effect for products-title in any mode */
.products-title:hover,
.products-title:focus,
.products-title:active,
.light-mode .products-title:hover,
.light-mode .products-title:focus,
.light-mode .products-title:active,
.dark-mode .products-title:hover,
.dark-mode .products-title:focus,
.dark-mode .products-title:active {
  color: #14545c !important; /* Force teal color on hover too */
  cursor: default !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  text-shadow: none !important;
  background: none !important;
  background-color: transparent !important;
  opacity: 1 !important;
  pointer-events: none !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
/* Dream mode specific hover overrides - keep the animation */
.dream-mode .products-title:hover,
.dream-mode .products-title:focus,
.dream-mode .products-title:active,
.dream-mode .title-panel .products-title:hover,
.dream-mode .title-panel .products-title:focus,
.dream-mode .title-panel .products-title:active,
.dream-mode .main-menu .products-title:hover,
.dream-mode .main-menu .products-title:focus,
.dream-mode .main-menu .products-title:active {
  color: inherit !important;
  cursor: default !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  animation: dreamText 20s infinite linear !important;
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important;
  background: none !important;
  background-color: transparent !important;
  opacity: 1 !important;
  pointer-events: none !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
/* Force solid background for title panel - MAIN MENU PAGE ONLY */
body .main-menu .title-panel,
.main-menu .title-panel,
.main-menu.light-mode .title-panel,
div.title-panel {
  background-color: #f5f5dc !important;
  background-image: none !important;
  background: #f5f5dc !important;
  border: 3px solid #3e2723 !important;
  border-radius: 20px;
  padding: 2rem 3rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 100 !important;
  transition: none;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
  cursor: default;
  pointer-events: none;
}
/* Title panel as button - navigate to admin dashboard (Business, Customer, Inventory, Products pages) */
button.title-panel.title-panel-dashboard-link,
.main-menu .title-panel.title-panel-dashboard-link {
  width: 100%;
  max-width: 800px;
  cursor: pointer !important;
  pointer-events: auto !important;
  font: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align: center;
}
.main-menu .title-panel.title-panel-dashboard-link:hover {
  filter: brightness(0.97);
}
.main-menu .title-panel.title-panel-dashboard-link:active {
  filter: brightness(0.94);
}
/* Dark/dream mode: allow click on dashboard-link title panel */
body .main-menu.dark-mode .title-panel.title-panel-dashboard-link,
.main-menu.dark-mode .title-panel.title-panel-dashboard-link,
.dark-mode .main-menu .title-panel.title-panel-dashboard-link,
.dark-mode button.title-panel.title-panel-dashboard-link,
.main-menu.dream-mode .title-panel.title-panel-dashboard-link,
.dream-mode .main-menu .title-panel.title-panel-dashboard-link {
  cursor: pointer !important;
  pointer-events: auto !important;
}
/* Home button at bottom of main content (Business, Customer, Inventory, Products pages) */
.main-menu .admin-session-return-button.admin-teal {
  cursor: pointer;
  pointer-events: auto;
}
.home-button-container {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}
.home-button {
  display: inline-block;
  background-color: #8d6e63;
  color: white;
  font-weight: 600;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 9999px;
  transition: all 0.3s ease;
  font-size: 1.6rem;
  font-family: var(--font-family);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
}
.home-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  color: white;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
/* Light mode home button - ensure pill shape */
.main-menu:not(.dark-mode):not(.dream-mode) .home-button {
  border-radius: 9999px !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  display: inline-block !important;
  text-decoration: none !important;
  border: 3px solid #3e2723 !important;
  background-color: #8d6e63 !important;
  color: white !important;
}
.main-menu:not(.dark-mode):not(.dream-mode) .home-button:hover {
  background-color: #a1887f !important;
  color: white !important;
  text-decoration: none !important;
}
/* New brown border panel behind the main content panel */
.main-content-border-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #3e2723;
  border-radius: 16px;
  padding: 1.5rem;
  margin: 0 auto 2rem auto;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}
.main-content-panel {
  background-color: #ffffff;
  border: 3px solid #3e2723;
  border-radius: 16px;
  padding: 2.5rem;
  margin: 0 auto 1.5rem auto;
  position: relative;
  z-index: 2;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 100%;
  overflow: visible;
  touch-action: pan-y;
}
/* Dark mode styling for the brown border panel */
.dark-mode .main-content-border-panel {
  background-color: #1a1a1a;
  border: 3px solid #000000;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
/* Dream mode styling for the brown border panel */
.dream-mode .main-content-border-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 380px));
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 2rem;
  /* Ensure no overlap */
  overflow: hidden;
  box-sizing: border-box;
  justify-items: center;
  align-items: start;
  justify-content: center;
}
/* Admin products grid - ensure it overrides other styles */
.admin-products-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 380px)) !important;
  gap: 1.5rem !important;
  width: 100% !important;
  margin-bottom: 2rem !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  justify-items: center !important;
  align-items: start !important;
  justify-content: center !important;
  padding: 1rem !important;
}
/* Desktop and large tablets - allow more businesses side by side */
@media (min-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 400px));
    gap: 2rem;
  }
  
  .admin-products-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 400px)) !important;
    gap: 2rem !important;
  }
}
/* Extra wide screens - even more businesses side by side */
@media (min-width: 1400px) {
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 380px));
    gap: 1.8rem;
  }
}
/* Ultra wide screens - maximum businesses side by side */
@media (min-width: 1800px) {
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 380px));
    gap: 1.5rem;
  }
}
/* Medium tablets - maintain good panel size */
@media (min-width: 768px) and (max-width: 1023px) {
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 380px));
    gap: 1.5rem;
  }
}
.product-card-container {
  cursor: pointer;
  transition: all 0.3s ease;
  /* Prevent overlap and ensure proper sizing */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.product-card-container:hover {
transform: translateY(-1px);
}
.product-card-background {
  background-color: #8d6e63;
  border: 3px solid #3e2723;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* Portrait shape - taller than wide */
  min-height: 420px;
  max-height: 500px;
  /* Ensure proper sizing and no overlap */
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}
.product-card-container:hover .product-card-background {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  border-color: #3e2723;
  background-color: #8d6e63;
}
.product-name-panel {
  text-align: center;
  padding: 0.75rem;
  background-color: #14545c;
  border: 3px solid #0a1a1d;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.product-card-container:hover .product-name-panel {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  border-color: #0a1a1d;
  background-color: #1a6b6b;
}
.product-name {
  font-size: 1rem;
  font-weight: 700;
  color: #f5f5dc;
  font-family: 'The Wanters DEMO', serif;
  display: block;
  line-height: 1.2;
}
.product-image-card {
  background-color: #f5f5dc;
  border: 3px solid #000000;
  border-radius: 8px;
  padding: 0.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* Ensure container can accommodate full square image */
  min-height: 0;
  flex: 1;
  /* Force container to allow full image display */
  overflow: visible;
}
.product-card-container:hover .product-image-card {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  border-color: #000000;
  background-color: rgba(250, 250, 240, 0.95);
}
.product-image-card img {
  width: 100%;
  height: auto;
  object-fit: contain; /* Changed from cover to contain to prevent clipping */
  border-radius: 4px;
  transition: transform 0.3s ease;
  /* Force full square image display */
  max-width: 100%;
  /* Ensure square aspect ratio is maintained */
  aspect-ratio: 1 / 1;
  /* Force image to display completely */
  object-position: center;
}
/* Admin products: inventory display label */
.inv-display {
  display: inline-block;
  min-width: 64px;
  padding: 0.25rem 0.5rem;
  background: #f5f5dc;
  border: 3px solid #3e2723;
  border-radius: 10px;
  color: #3e2723;
  font-weight: 800;
  text-align: center;
}
/* Admin products: enhanced price input fields */
.admin-price-input {
  padding: 0.6rem 1rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-align: center;
  background: #ffffff;
  color: #3e2723;
  transition: all 0.2s ease;
  min-width: 100px;
  box-sizing: border-box;
}
.admin-price-input:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 2px rgba(93, 64, 55, 0.2);
  background: #fafafa;
}
.admin-price-input::placeholder {
  color: #8d6e63;
  opacity: 0.7;
}
/* Admin Add Product Button Styling */
.admin-add-product-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 1rem 0;
  pointer-events: auto !important;
  position: relative;
  z-index: 1000;
}
.admin-add-product-btn {
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #000000;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  min-width: 220px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  white-space: nowrap;
  background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
  color: #ffffff;
  border-color: #7d3c98;
  pointer-events: auto !important;
  position: relative;
  z-index: 1000;
}
.admin-add-product-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
  border-color: #6c3483;
}
/* Admin products: themed save button */
.admin-product-save-btn {
  background-color: #27ae60;
  color: #ffffff;
  border: 3px solid #1e8449;
  border-radius: 9999px;
  padding: 0.8rem 2.2rem;
  font-weight: 900;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.admin-product-save-btn:hover:not(:disabled) {
  background-color: #2ecc71;
  transform: translateY(-2px);
}
.admin-product-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Admin products: centered Back button under title */
.admin-product-back-btn {
  background-color: #6b7280;
  color: #ffffff;
  border: 3px solid #374151;
  border-radius: 9999px;
  padding: 0.5rem 1.5rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}
.admin-product-back-btn:hover {
  background-color: #818b9b;
  transform: translateY(-2px);
}
.product-card-container:hover .product-image-card img {
  transform: scale(1.02);
}
/* Product Image Placeholder Button */
.product-image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 120px;
  background-color: #14545c;
  border: 3px solid #0a1a1d;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}
.product-image-placeholder:hover {
  background-color: #0d353a;
  border-color: #06292b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
.product-image-button-text {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.5px;
}
/* Dark mode styles */
.dark-mode .product-image-placeholder {
  background-color: #8d6e63;
  border-color: #000000;
}
.dark-mode .product-image-placeholder:hover {
  background-color: #a1887f;
}
/* Dream mode styles */
.dream-mode .product-image-placeholder {
  background-color: #dc2626;
  border-color: #000000;
}
.dream-mode .product-image-placeholder:hover {
  background-color: #b91c1c;
}
.view-cart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  width: 100%;
}
.view-cart-button {
  display: inline-block;
  background-color: #5d4037;
  color: white;
  font-weight: 600;
  text-decoration: none;
  padding: 0.8rem 2rem;
  border-radius: 9999px;
  transition: all 0.2s ease;
  font-size: 1.2rem;
  font-family: var(--font-family);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723;
}
.view-cart-button:hover {
  background-color: #795548;
  transform: translateY(-2px);
  color: white;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
/* Dark mode specific styles */
.main-menu.dark-mode {
  background-color: #3e2723; /* Dark brown background */
  background-image: url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 84 48'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23412f2a' fill-opacity='0.25'%3E%3Cpath d='M42 48c23.196 0 42-10.745 42-24S65.196 0 42 0 0 10.745 0 24s18.804 24 42 24zm0-5c19.33 0 35-8.954 35-19s-15.67-19-35-19S7 13.954 7 24s15.67 19 35 19z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 120px 120px;
  background-position: center, center;
  background-blend-mode: multiply;
  position: relative;
  min-height: 100vh;
}
.main-menu.dark-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
  pointer-events: none;
}
.main-menu.dark-mode::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}
.dark-mode .products-title {
  color: #14545c !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}
/* Dark mode title hover effect removed - no hover effects on title */
body .main-menu.dark-mode .title-panel,
.main-menu.dark-mode .title-panel,
.dark-mode .main-menu .title-panel,
.dark-mode div.title-panel {
  background-color: #3e2723 !important;
  background-image: none !important;
  background: #3e2723 !important;
  border: 3px solid #000000 !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  z-index: 100 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
  cursor: default;
  pointer-events: none;
}
.dark-mode .main-content-panel {
  background-color: #3e2723;
  border: 3px solid #8d6e63 !important;
}
/* Additional high-specificity selectors for dark mode main content panel */
body.dark-mode .main-content-panel,
html.dark-mode .main-content-panel,
.main-menu.dark-mode .main-content-panel {
  border: 3px solid #8d6e63 !important;
}
.dark-mode .product-card-background {
  background-color: #1a1a1a;
  border: 3px solid #000000;
}
.dark-mode .product-card-container:hover .product-card-background {
  background-color: #1a1a1a;
  border-color: #000000;
}
.dark-mode .product-image-card {
  background-color: #8d6e63;
  border: 3px solid #000000;
}
.dark-mode .product-name-panel {
  background-color: #8d6e63;
  border: 3px solid #000000;
}
.dark-mode .product-card-container:hover .product-image-card {
  background-color: #a1887f;
  border-color: #000000;
}
.dark-mode .product-card-container:hover .product-name-panel {
  border-color: #000000;
}
.dark-mode .product-name {
  color: #fff8e1;
}
/* Dark mode home button with ultra-high specificity - matching dream mode shape */
body.dark-mode .main-menu .home-button,
.dark-mode.main-menu .home-button,
.dark-mode .main-menu .home-button,
.dark-mode .home-button {
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  border-radius: 9999px !important;
  background-color: #8d6e63 !important;
  font-weight: 900 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.5px !important;
  padding: 1rem 2rem !important;
  max-width: none !important;
  min-width: 0 !important;
  width: auto !important;
  display: inline-block !important;
  text-align: center !important;
  text-decoration: none !important;
}
/* Dark mode home button hover with ultra-high specificity */
body.dark-mode .main-menu .home-button:hover,
.dark-mode.main-menu .home-button:hover,
.dark-mode .main-menu .home-button:hover,
.dark-mode .home-button:hover {
  color: #000000 !important;
  background-color: #a1887f !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-4px) !important;
  text-decoration: none !important;
}
.dark-mode .view-cart-button {
  border: 3px solid #000000;
}
/* Dream mode specific styles */
.main-menu.dream-mode {
  background-color: #0d0d0d;
  background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  position: relative;
  min-height: 100vh;
}
.main-menu.dream-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(13, 13, 13, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
  pointer-events: none;
}
.main-menu.dream-mode::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
}
.dream-mode .product-card-background {
  background-color: rgba(190, 190, 190, 1);
  border: 3px solid #000000;
}
.dream-mode .product-card-container:hover .product-card-background {
  background-color: rgba(210, 210, 210, 1);
  border-color: #000000;
}
.dream-mode .product-image-card,
.dream-mode .product-name-panel {
  border: 3px solid #000000;
}
/* Dream mode product image card styling */
.dream-mode .product-image-card {
  background-color: #8d6e63 !important; /* Brown background */
}
/* Dream mode product name panel styling */
.dream-mode .product-name-panel {
  background-color: #ffffff !important; /* White background */
}
/* Dream mode product name text styling - with color-changing animation */
.dream-mode .product-name {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}
/* Dream mode panel styling */
.dream-mode .main-content-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}
body .main-menu.dream-mode .title-panel,
.main-menu.dream-mode .title-panel,
.dream-mode .main-menu .title-panel,
.dream-mode div.title-panel {
  background-color: #1a0d23 !important;
  background-image: none !important;
  background: #1a0d23 !important;
  border: 3px solid #000000 !important;
  border-radius: 20px;
  position: relative;
  z-index: 100 !important;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
  cursor: default;
  pointer-events: none;
}
/* Dream mode title with color-changing animation and black border */
.dream-mode .products-title {
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important; /* Only black border, no glow */
  cursor: default !important; /* Remove pointer cursor */
  transition: none !important; /* Remove all transitions */
  pointer-events: none !important; /* Disable all pointer events */
}
/* Force teal color for all dream mode title variations */
.dream-mode .main-menu .products-title,
.dream-mode .title-panel .products-title,
.main-menu.dream-mode .products-title {
  color: #14545c !important;
}
/* Override global dream mode text glow for products title specifically */
.dream-mode .main-menu .products-title,
.dream-mode .title-panel .products-title,
.main-menu.dream-mode .products-title {
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important; /* Override global glow with only black border */
  animation: dreamText 20s infinite linear !important; /* Keep the color animation */
  cursor: default !important; /* Remove pointer cursor */
  transition: none !important; /* Remove all transitions */
  pointer-events: none !important; /* Disable all pointer events */
}
/* Completely disable ALL hover effects for dream mode main menu title */
.dream-mode .products-title:hover,
.dream-mode .title-panel .products-title:hover,
.dream-mode .main-menu .products-title:hover {
  color: inherit !important; /* Keep the animated color exactly the same */
  cursor: default !important; /* No pointer cursor */
  transition: none !important; /* No transitions */
  transform: none !important; /* No transforms */
  filter: none !important; /* No filters */
  animation: dreamText 20s infinite linear !important; /* Keep the same animation */
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important; /* Keep the same text-shadow */
  background: none !important; /* No background changes */
  background-color: transparent !important; /* No background color */
  opacity: 1 !important; /* No opacity changes */
}
/* Dream mode button text styling - clean bold black text */
.dream-mode .home-button,
.dream-mode .view-cart-button {
  border: 3px solid #000000;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}
/* Override any global dream mode text effects for main menu buttons */
.dream-mode .home-button:not(:hover),
.dream-mode .view-cart-button:not(:hover) {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}
/* Dream mode button hover effects with white text and glow animation */
.dream-mode .home-button:hover,
.dream-mode .view-cart-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleMainMenu 1.5s ease-in-out infinite alternate !important;
}
@keyframes dreamSparkleMainMenu {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}
/* Legacy responsive rules - kept for non-iOS devices */
@media (max-width: 1200px) {
  .products-grid:not(.ios-device) {
    grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
    gap: 1.5rem;
  }
}
@media (max-width: 992px) {
  .products-grid:not(.ios-device) {
    grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
    gap: 1.2rem;
  }

  .product-card-background {
    min-height: 260px;
    max-height: 300px;
  }

  .product-image-card img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
  }
}
@media (max-width: 820px) {
  .products-grid:not(.ios-device) {
    grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
    gap: 1.2rem;
  }
  
  .product-card-background {
    min-height: 280px;
    max-height: 320px;
  }
}
@media (max-width: 768px) {
  .main-menu {
    padding: 0.75rem 0;
    width: 100%;
    min-width: 100%;
    margin: 0;
    left: 0;
    right: 0;
  }
  
  .products-title {
    font-size: 3.5rem;
  }
  
  .title-panel {
    padding: 0.5rem 0.4rem;
    margin-bottom: 0.5rem;
    max-width: 99%;
    width: 99%;
    border-width: 1px;
  }
  
  .main-content-border-panel {
    width: 99%;
    padding: 0.5rem;
    border-width: 1px;
  }
  
  .main-content-panel {
    padding: 1rem;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    border-width: 1px;
    overflow: visible;
    touch-action: pan-y;
  overscroll-behavior-y: auto;
  }

/* Keep page scroll responsive when pointer/finger is over inner business panels. */
.main-content-border-panel,
.main-content-panel,
.business-widget-content,
.business-widget-section {
  touch-action: pan-y;
  overscroll-behavior-y: auto;
}
  
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
    gap: 1.2rem;
    width: 100%;
    justify-content: center;
    /* Allow document scroll - finger scroll works on product page */
    overflow: visible;
  }
  
  .admin-products-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px)) !important;
    gap: 1.2rem !important;
    width: 100% !important;
    padding: 0.5rem !important;
    overflow: visible !important;
    justify-content: center !important;
  }

  .product-name {
    font-size: 1.2rem;
    line-height: 1.3;
  }

  .product-card-background {
    padding: 0.8rem;
    width: 100%;
    border-width: 2px;
    gap: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Maintain proper proportions */
    min-height: 380px;
    max-height: 420px;
  }

  .product-name-panel {
    padding: 0.5rem;
    border-width: 2px;
    order: -1;
    width: 100%;
    flex-shrink: 0;
  }

  .product-image-card {
    padding: 0.4rem;
    border-width: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 2;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
  }

  .product-image-card img {
    width: 100%;
    height: auto;
    max-width: 100%;
    /* Remove max-height constraint to allow full image display */
    object-fit: contain;
    border-radius: 4px;
    /* Ensure full square image is displayed */
  }
}
@media (max-width: 600px) {
  .main-content-border-panel {
    width: 99.5%;
    padding: 0.25rem;
  }
  
  .main-content-panel {
    padding: 0.5rem;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 300px));
    gap: 1rem;
    justify-content: center;
    overflow: visible;
  }
  
  .admin-products-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 300px)) !important;
    gap: 1rem !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .product-name {
    font-size: 1.1rem;
    line-height: 1.2;
  }

  .product-card-background {
    padding: 0.6rem;
    gap: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Portrait shape - taller than wide */
    min-height: 260px;
    max-height: 300px;
  }

  .product-name-panel {
    padding: 0.25rem;
    order: -1;
    width: 100%;
    flex-shrink: 0;
  }
  
  .product-image-card {
    padding: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 2;
    flex: 1;
    width: 100%;
    min-height: 0;
  }

  .product-image-card img {
    width: 100%;
    height: auto;
    max-width: 100%;
    /* Remove max-height constraint to allow full image display */
    object-fit: contain;
    border-radius: 4px;
    /* Ensure full square image is displayed */
  }
}
@media (max-width: 480px) {
  .main-menu {
    padding: 0.25rem 0;
    width: 100%;
    min-width: 100%;
    margin: 0;
    left: 0;
    right: 0;
  }
  
  .products-title {
    font-size: 3rem;
    /* Ensure consistent text rendering across themes */
    text-shadow: none !important;
  }
  
  .product-name {
    font-size: 1.1rem;
    /* Ensure consistent text rendering across themes */
    text-shadow: none !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Theme-specific overrides for mobile consistency */
  .dark-mode .products-title,
  .dark-mode .product-name {
    text-shadow: none !important;
  }
  
  .dream-mode .products-title,
  .dream-mode .product-name {
    text-shadow: none !important;
  }
  
  .title-panel {
    padding: 0.4rem 0.3rem;
    margin-bottom: 0.4rem;
    max-width: 99.5%;
    width: 99.5%;
    margin-left: auto;
    margin-right: auto;
    border-width: 1px;
  }
  
  .main-content-border-panel {
    width: 99.8%;
    padding: 0.15rem;
    border-width: 1px;
  }
  
  .main-content-panel {
    padding: 0.1rem;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    border-width: 1px;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
    gap: 1rem;
    width: 100%;
    justify-content: center;
  }
  
  .admin-products-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 280px)) !important;
    gap: 1rem !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .product-name {
    font-size: 1.1rem;
  }

  .product-card-background {
    padding: 0.5rem;
    width: 100%;
    border-width: 2px;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Maintain proper proportions */
    min-height: 340px;
    max-height: 380px;
  }

  .product-name-panel {
    padding: 0.2rem;
    border-width: 1px;
    order: -1;
    width: 100%;
    flex-shrink: 0;
  }

  .product-image-card {
    padding: 0.15rem;
    border-width: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 2;
    flex: 1;
    width: 100%;
    min-height: 0;
  }

  .product-image-card img {
    width: 100%;
    height: auto;
    max-width: 100%;
    /* Remove max-height constraint to allow full image display */
    object-fit: contain;
    border-radius: 4px;
    /* Ensure full square image is displayed */
  }
}
@media (max-width: 360px) {
  .main-menu {
    padding: 0.125rem 0;
    width: 100%;
    min-width: 100%;
    margin: 0;
    left: 0;
    right: 0;
  }
  
  .products-title {
    font-size: 2.5rem;
  }
  
  .title-panel {
    padding: 0.3rem 0.2rem;
    margin-bottom: 0.3rem;
    max-width: 99.8%;
    width: 99.8%;
  }
  
  .main-content-border-panel {
    width: 99.9%;
    padding: 0.1rem;
  }
  
  .main-content-panel {
    padding: 0.05rem;
  }
  
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }

  .product-name {
    font-size: 1rem;
  }

  .product-card-background {
    padding: 0.2rem;
    gap: 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Portrait shape - taller than wide */
    min-height: 180px;
    max-height: 220px;
  }

  .product-name-panel {
    padding: 0.15rem;
    order: -1;
    width: 100%;
    flex-shrink: 0;
  }

  .product-image-card {
    padding: 0.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 2;
    flex: 1;
    width: 100%;
    min-height: 0;
  }

  .product-image-card img {
    width: 100%;
    height: auto;
    max-width: 100%;
    /* Remove max-height constraint to allow full image display */
    object-fit: contain;
    border-radius: 4px;
    /* Ensure full square image is displayed */
  }
}
/* Very narrow screens - single column layout */
@media (max-width: 280px) {
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 160px));
    gap: 0.5rem;
    width: 100%;
  }

  .product-card-background {
    min-height: 240px;
    max-height: 280px;
    padding: 0.3rem;
    width: 100%;
    max-width: 100%;
  }

  .product-name {
    font-size: 0.9rem;
  }

  .main-content-panel {
    padding: 0.1rem;
  }

  .main-content-border-panel {
    width: 100%;
    padding: 0.1rem;
  }
  
  .title-panel {
    padding: 0.2rem 0.1rem;
    margin-bottom: 0.2rem;
    max-width: 100%;
    width: 100%;
  }
}
/* Light mode hover/active for product name panel */
.product-card-container:hover .product-name-panel,
.product-card-container:active .product-name-panel {
  background-color: rgba(196, 166, 144, 0.8);
  border-color: #3e2723;
}
.product-card-container:hover .product-name,
.product-card-container:active .product-name {
  color: #3e2723;
}
/* Dark mode hover/active for product name panel */
.dark-mode .product-card-container:hover .product-name-panel,
.dark-mode .product-card-container:active .product-name-panel {
  background-color: #a1887f;
  border-color: #000;
}
.dark-mode .product-card-container:hover .product-name,
.dark-mode .product-card-container:active .product-name {
  color: #8d6e63;
}
/* Dream mode hover/active for product name panel */
.dream-mode .product-card-container:hover .product-name-panel,
.dream-mode .product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #1565c0 0%, #002171 100%); /* blue to much darker blue, top to bottom */
}
/* .dream-mode .product-card-container:hover .product-name, .dream-mode .product-card-container:active .product-name - no color override, keep animation running */
/* Dream mode: unique highlight for each flavour (more distinct colors, black text) */
.dream-mode .flavour-barbecue.product-card-container:hover .product-name-panel,
.dream-mode .flavour-barbecue.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #1565c0 0%, #002171 100%); /* blue to much darker blue, top to bottom */
}
.dream-mode .flavour-smokey-barbecue.product-card-container:hover .product-name-panel,
.dream-mode .flavour-smokey-barbecue.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #00e676 0%, #512da8 100%); /* bright green to indigo, top to bottom */
}
.dream-mode .flavour-teriyaki.product-card-container:hover .product-name-panel,
.dream-mode .flavour-teriyaki.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #ff69b4 0%, #1a1a1a 100%); /* pink to dark grey, top to bottom */
}
.dream-mode .flavour-korean-bbq.product-card-container:hover .product-name-panel,
.dream-mode .flavour-korean-bbq.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #7c4dff 0%, #8e24aa 100%); /* purple, top to bottom */
}
.dream-mode .flavour-sweet-chilli.product-card-container:hover .product-name-panel,
.dream-mode .flavour-sweet-chilli.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #ff9800 0%, #2e7d32 100%); /* orange to dark green, top to bottom */
}
.dream-mode .flavour-exotic-spice.product-card-container:hover .product-name-panel,
.dream-mode .flavour-exotic-spice.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #00bfae 0%, #ff3d00 100%); /* teal to orange-red, top to bottom */
}
.dream-mode .flavour-hot-chilli.product-card-container:hover .product-name-panel,
.dream-mode .flavour-hot-chilli.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #d32f2f 0%, #1a1a1a 100%); /* red to dark grey, top to bottom */
}
.dream-mode .flavour-roast-lamb.product-card-container:hover .product-name-panel,
.dream-mode .flavour-roast-lamb.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #cddc39 0%, #388e3c 100%); /* lime to green, top to bottom */
}
/* Animation is already applied to .dream-mode .product-name - no override needed on hover */
/* ===============================================================================
                      DREAM MODE: DISABLE PRODUCT HOVER EFFECTS
=============================================================================== */
/* Disable card transform on hover in dream mode */
.dream-mode .product-card-container:hover {
  transform: none !important;
}
/* Disable background changes on hover in dream mode */
.dream-mode .product-card-container:hover .product-card-background {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border-color: #000000 !important;
  background-color: rgba(190, 190, 190, 1) !important;
}
/* Disable image card changes on hover in dream mode */
.dream-mode .product-card-container:hover .product-image-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  border-color: #000000 !important;
}
/* Enable image scaling on hover in dream mode */
.dream-mode .product-card-container:hover .product-image-card img {
  transform: scale(1.05) !important;
}
/* Global Square Image Fix for All Breakpoints */
@media (max-width: 768px) {
  .product-image-card {
    aspect-ratio: 1/1 !important;
    overflow: hidden !important;
  }
  
  /* Mobile product card optimization */
  .product-card-container {
    margin-bottom: 1rem;
  }
  
  .product-card-background {
    padding: 0.5rem;
  }
  
  .product-name-panel {
    padding: 0.5rem;
  }
  
  .product-name {
    font-size: 0.9rem;
  }
  
  .product-image-card {
    display: none !important;
  }
  
  .product-image-placeholder {
    display: none !important;
  }
  
  .product-image-section {
    display: none !important;
  }
  
  /* Mobile action buttons optimization */
  .admin-product-edit-btn,
  .admin-product-copy-btn,
  .admin-product-sizes-btn {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.7rem !important;
    min-width: 60px !important;
    height: 28px !important;
  }
  
  /* Mobile sizes display optimization */
  .product-card-container .sizes-display {
    font-size: 0.7rem !important;
    gap: 0.5rem !important;
    margin: 0.25rem 0 !important;
  }
  
  .product-card-container .size-item {
    min-width: 60px !important;
    padding: 0.25rem !important;
  }
  
  .product-card-container .size-weight {
    font-size: 0.6rem !important;
    margin-bottom: 1px !important;
  }
  
  .product-card-container .size-price {
    font-size: 0.7rem !important;
  }
  
  .product-image-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 1/1 !important;
  }
}
@media (max-width: 600px) {
  .product-image-card {
    display: none !important;
  }
  
  .product-image-card img {
    display: none !important;
  }
  
  .product-image-section {
    display: none !important;
  }
}
@media (max-width: 480px) {
  .product-image-card {
    display: none !important;
  }
  
  .product-image-card img {
    display: none !important;
  }
  
  .product-image-section {
    display: none !important;
  }
}
@media (max-width: 380px) {
  .product-image-card {
    display: none !important;
  }
  
  .product-image-card img {
    display: none !important;
  }
  
  .product-image-section {
    display: none !important;
  }
}
/* Dream mode color-changing text animation - now defined in global.css */
/* Sold Out Product Styles */
.product-card-container.sold-out {
  position: relative;
}
.product-image-card {
  position: relative;
  overflow: hidden;
}
.sold-out-image {
  filter: brightness(0.4) saturate(0.6);
  transition: filter 0.3s ease;
}
.sold-out-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.sold-out-text {
  color: #ff0000;
  font-family: 'The Wanters DEMO', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  line-height: 1.4;
  padding: 10px;
}
/* Sold Out overlay main and subtext styling */
.sold-out-main {
  display: block;
  font-size: 2.1rem;
  font-weight: 900;
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', sans-serif !important;
  text-align: center;
  line-height: 1.1;
  margin-bottom: 0.2em;
}
.dark-mode .sold-out-main {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-family: 'The Wanters DEMO', sans-serif !important;
  font-weight: 900;
  letter-spacing: 0.5px;
}
.light-mode .sold-out-main {
  text-shadow: none !important;
}
.sold-out-sub {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: #d32f2f;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  opacity: 0.95;
}
.dark-mode .sold-out-sub {
  color: #d32f2f !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}
.light-mode .sold-out-sub {
  color: #d32f2f !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}
.product-card-container.sold-out .product-name-panel {
  background-color: #4a3a2a !important; /* dark brown for dimming */
  opacity: 0.7;
  transition: background 0.3s, background-color 0.3s, opacity 0.3s;
}
.dark-mode .product-card-container.sold-out .product-name-panel {
  background-color: #18100a !important;
  opacity: 0.7;
}
.dream-mode .product-card-container.sold-out .product-name-panel {
  background-color: #222 !important;
  opacity: 0.7;
}
.dream-mode .sold-out-main, .dream-mode .sold-out-sub {
  color: #d32f2f !important;
  font-family: 'The Wanters DEMO', Tahoma, sans-serif !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-weight: 900;
  letter-spacing: 0.5px;
}
/* Remove all product card hover effects in dream mode */
.dream-mode .product-card-container:hover,
.dream-mode .product-card-container:focus,
.dream-mode .product-card-container:active,
.dream-mode .product-card-background:hover,
.dream-mode .product-card-background:focus,
.dream-mode .product-card-background:active {
  background: none !important;
  background-color: inherit !important;
  color: inherit !important;
  box-shadow: none !important;
  border-color: inherit !important;
  filter: none !important;
  outline: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.light-mode .product-card-container:hover .product-name-panel {
  background-color: #fafaf0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-color: #3e2723;
}
/* Inventory table styles */
.inventory-table-container {
  background: #f5f5dc;
  border: 3px solid #3e2723;
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 1000px;
  width: 100%;
}
.inventory-table-wrapper {
  overflow-x: auto;
  border: 2px solid #5d4037;
  border-radius: 8px;
}
.inventory-table {
  width: 100%;
  min-width: 600px;
}
.inventory-table-row {
  display: grid;
  grid-template-columns: 40px 2fr 100px 100px 100px 120px;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 2px solid #d7ccc8;
  transition: all 0.2s ease;
  cursor: pointer;
}
.inventory-table-row.header {
  grid-template-columns: 2fr 1fr 120px;
}
.inventory-table-row.product-row,
.inventory-table-row.item-row {
  grid-template-columns: 2fr 1fr 120px;
}
/* Ingredients and Packaging grid layout - Name, Cost, Unit, Supplier, Actions */
.inventory-table-row.ingredients-section,
.inventory-table-row.packaging-section {
  grid-template-columns: 2fr 100px 100px 1.5fr 150px;
  gap: 1rem;
}
.inventory-table-row.header.ingredients-section,
.inventory-table-row.header.packaging-section {
  grid-template-columns: 2fr 100px 100px 1.5fr 150px;
  gap: 1rem;
}
/* Appliances-specific grid layout - Name, Cost per hour, Watts, Supplier, Actions */
.inventory-table-row.appliances-section {
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr 150px;
  gap: 20px;
}
/* Appliances header row alignment */
.inventory-table-row.header.appliances-section {
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr 150px;
  gap: 20px;
}
/* Mobile label styling - ensure black text on all screen sizes */
.mobile-label {
  color: #000000 !important;
  font-weight: 700;
}
/* Default left accent bars for each section */
.inventory-table-row.ingredients-section {
  border-left: 8px solid #007bff;
}
.inventory-table-row.packaging-section {
  border-left: 8px solid #28a745;
}
.inventory-table-row.appliances-section {
  border-left: 8px solid #6f42c1;
}
.inventory-table-row.costs-section {
  border-left: 8px solid #fd7e14;
}
.inventory-table-row:hover:not(.expanded):not(.header) {
  background-color: #efebe9;
}
/* Product row hover - purple glow effect (only when not expanded) */
.inventory-table-row.product-row:hover:not(.expanded):not(.header) {
  background-color: #f3e5f5 !important;
  box-shadow: inset 0 0 8px rgba(139, 69, 209, 0.2) !important;
  transform: scale(1.01) !important;
}
/* Item row hover - green glow effect (only when not expanded) */
.inventory-table-row.item-row:hover:not(.expanded):not(.header) {
  background-color: #e8f5e8 !important;
  box-shadow: inset 0 0 8px rgba(76, 175, 80, 0.2) !important;
  transform: scale(1.01) !important;
}
/* Ingredients section hover - blue glow effect (only when not editing) */
.inventory-table-row.ingredients-section:hover:not(.editing) {
  background-color: #d4c4b0;
  box-shadow: inset 0 0 8px rgba(0, 123, 255, 0.2), 0 0 15px rgba(0, 123, 255, 0.3);
  transform: scale(1.01);
}
/* Packaging section hover - green glow effect (only when not editing) */
.inventory-table-row.packaging-section:hover:not(.editing) {
  background-color: #d4c4b0;
  box-shadow: inset 0 0 8px rgba(40, 167, 69, 0.2), 0 0 15px rgba(40, 167, 69, 0.3);
  transform: scale(1.01);
}
/* Appliances section hover - purple glow effect (only when not editing) */
.inventory-table-row.appliances-section:hover:not(.editing) {
  background-color: #d4c4b0;
  box-shadow: inset 0 0 8px rgba(111, 66, 193, 0.2), 0 0 15px rgba(111, 66, 193, 0.3);
  transform: scale(1.01);
}
/* Costs section hover - orange glow effect (only when not editing) */
.inventory-table-row.costs-section:hover:not(.editing) {
  background-color: #d4c4b0;
  box-shadow: inset 0 0 8px rgba(253, 126, 20, 0.2), 0 0 15px rgba(253, 126, 20, 0.3);
  transform: scale(1.01);
}
/* Maintain hover effect when expanded */
.inventory-table-row.product-row.expanded {
  background-color: #f3e5f5;
  box-shadow: inset 0 0 8px rgba(139, 69, 209, 0.2);
  transform: scale(1.01);
}
/* Hover effect for expanded product rows - maintain same visual effect */
.inventory-table-row.product-row.expanded:hover {
  background-color: #f3e5f5 !important;
  box-shadow: inset 0 0 8px rgba(139, 69, 209, 0.2) !important;
  transform: scale(1.01) !important;
}
.inventory-table-row.item-row.expanded {
  background-color: #e8f5e8;
  box-shadow: inset 0 0 8px rgba(76, 175, 80, 0.2);
  transform: scale(1.01);
}
/* Hover effect for expanded item rows - maintain same visual effect */
.inventory-table-row.item-row.expanded:hover {
  background-color: #e8f5e8 !important;
  box-shadow: inset 0 0 8px rgba(76, 175, 80, 0.2) !important;
  transform: scale(1.01) !important;
}
.inventory-table-row.header {
  background-color: #8d6e63;
  color: #000000;
  font-weight: 700;
  border-bottom: 3px solid #3e2723;
  cursor: default;
}
.inventory-table-row.header:hover {
  background-color: #8d6e63;
}
.inventory-table-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}
.inventory-table-cell.checkbox-cell {
  justify-content: center;
}
.inventory-table-cell.name-cell {
  justify-content: flex-start;
  text-align: left;
  padding-left: 0px; /* Align perfectly with header title */
}
.inventory-table-item-name {
  font-weight: 700;
  color: #3e2723;
  font-size: 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 1rem;
}
.inventory-table-item-category {
  font-style: italic;
  color: #8d6e63;
  font-size: 0.9rem;
  margin-top: 0.2rem;
}
.inventory-table-item-cost,
.inventory-table-item-quantity,
.inventory-table-item-value,
.inventory-table-item-stock {
  font-weight: 600;
  font-size: 1rem;
}
.inventory-table-item-cost {
  color: #d32f2f;
}
.inventory-table-item-quantity {
  color: #f57c00;
}
.inventory-table-item-value {
  color: #1976d2;
}
.inventory-table-item-stock {
  color: #ff9800;
  font-weight: 600;
  font-size: 1rem;
}
.expand-arrow {
  display: inline-block;
  font-size: 1rem;
  color: #495057;
  transition: transform 0.2s ease;
  cursor: pointer;
}
.expand-arrow.expanded {
  transform: rotate(0deg);
}
.size-stock-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.85rem;
  line-height: 1.2;
}
.size-stock-list-item {
  color: #495057;
  font-weight: 500;
  white-space: nowrap;
}
.inventory-table-item-hint {
  font-style: italic;
  color: #8d6e63;
}
/* Cost cell styling - left align to match other sections */
.inventory-table-cell.cost-cell {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 0px !important;
  margin-left: 0px !important;
  align-items: flex-start !important;
}
/* Watts cell styling for appliances */
.inventory-table-cell.watts-cell {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 0px !important;
  margin-left: 0px !important;
  align-items: flex-start !important;
}
/* Appliances section specific overrides - more specific targeting */
.inventory-table-row.appliances-section .inventory-table-cell.cost-cell {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 0px !important;
  margin-left: 0px !important;
  align-items: flex-start !important;
}
.inventory-table-row.appliances-section .inventory-table-cell.watts-cell {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 0px !important;
  margin-left: 0px !important;
  align-items: flex-start !important;
}
/* Ultra-specific override for appliances - should override everything */
.inventory-table-row.appliances-section .inventory-table-cell.cost-cell,
.inventory-table-row.appliances-section .inventory-table-cell.watts-cell {
  justify-content: flex-start !important;
  text-align: left !important;
  align-items: flex-start !important;
  padding-left: 0px !important;
  margin-left: 0px !important;
}
/* Target the actual content inside the cells */
.inventory-table-row.appliances-section .inventory-table-cell.cost-cell *,
.inventory-table-row.appliances-section .inventory-table-cell.watts-cell * {
  text-align: left !important;
}
/* Supplier display styling */
.inventory-table-item-supplier {
  color: #3e2723;
  font-weight: 500;
  font-size: 0.95rem;
  font-family: 'The Wanters DEMO', serif;
}
/* Button cell styling for inline Save/Delete buttons */
.inventory-table-cell.button-cell {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  flex-direction: row; /* Side by side on wide screens */
  flex-wrap: nowrap; /* Prevent wrapping */
}
/* Ensure proper button order: Save on left, Delete on right */
.inventory-table-cell.button-cell .inventory-edit-save-btn {
  order: 1; /* Save button first (left) */
}
.inventory-table-cell.button-cell .inventory-edit-delete-btn {
  order: 2; /* Delete button second (right) */
}
/* Hide button cell on mobile and show actions below */
@media (max-width: 768px) {
  .inventory-table-cell.button-cell {
    display: none;
  }
  
  .inventory-table-row {
    grid-template-columns: 2fr 1.5fr 1.5fr;
    gap: 15px;
  }
  
  .inventory-table-row.appliances-section {
    grid-template-columns: 1.5fr 1fr 1.5fr;
    gap: 15px;
  }
  
  .inventory-table-row.header.appliances-section {
    grid-template-columns: 1.5fr 1fr 1.5fr;
    gap: 15px;
  }
}
.inventory-table-item-watts {
  font-weight: 600;
  color: #6f42c1;
  font-size: 1rem;
}
/* Button Group for Management Cell */
.button-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.sizes-btn {
  background: #8b45d1;
  color: white;
  border: none;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.sizes-btn:hover {
  background: #7c3ed1;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(139, 69, 209, 0.3);
}
.sizes-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(139, 69, 209, 0.3);
}
/* Expandable Product Rows */
.product-row-container {
  border-bottom: 2px solid #d7ccc8;
}
.product-row-container:last-child {
  border-bottom: none;
}
.inventory-table-row.product-row {
  cursor: pointer;
  position: relative;
}
/* Product Sizes Container */
.product-sizes-container {
  background: #f5f5f5;
  border-left: 8px solid #8b45d1;
  border-radius: 8px;
  margin: 0.5rem 1rem;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: expandDown 0.3s ease-out;
  overflow: hidden;
}
@keyframes expandDown {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 500px;
    opacity: 1;
  }
}
/* Size breakdown header columns */
.product-size-columns-header {
  display: grid;
  grid-template-columns: 0.8fr 180px 110px 110px;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: #ede7f6;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #4a148c;
  letter-spacing: 0.5px;
}
.size-column-label {
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-size-columns-header .size-column-label:nth-child(2) {
  justify-content: flex-start;
  padding-left: 1.5rem;
}
/* Individual Size Rows - Match parent table grid structure */
.product-size-row {
  display: grid;
  grid-template-columns: 0.8fr 180px 110px 110px;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #dee2e6;
  background: white;
  transition: all 0.2s ease;
  align-items: center;
}
.product-size-row:last-child {
  border-bottom: none;
}
.size-name-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0;
}
.size-stock-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 0;
}
.size-name {
  font-weight: 600;
  color: #495057;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  min-width: auto;
  white-space: nowrap;
  margin-right: 0;
}
.size-cost,
.size-value {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.size-management {
  display: flex;
  align-items: center;
  justify-content: center;
}
.size-stocktake-btn {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
  color: white;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.size-stocktake-btn:hover {
  background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.size-stocktake-btn:active {
  transform: translateY(0);
}
/* Size Stock Controls */
.size-stock-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
}
.size-stock-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.size-stock-btn:active {
  transform: scale(0.9);
  transition: transform 0.1s ease;
}
.size-stock-btn.holding {
  opacity: 0.8;
  transform: scale(0.85);
  transition: all 0.2s ease;
}
.size-stock-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.size-stock-btn-minus {
  background: #ff4757;
  color: white;
  border-color: #ff3742;
}
.size-stock-btn-minus:hover:not(:disabled) {
  background: #ff3742;
  border-color: #ff2f3a;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}
.size-stock-btn-plus {
  background: #2ed573;
  color: white;
  border-color: #26d065;
}
.size-stock-btn-plus:hover:not(:disabled) {
  background: #26d065;
  border-color: #1dd15a;
  box-shadow: 0 2px 8px rgba(46, 213, 115, 0.3);
}
/* Stock tab bar: square − / + buttons, smaller and darker, fixed size */
.size-stock-controls-bar .size-stock-btn {
  border-radius: 6px;
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  font-size: 14px;
  padding: 0;
  box-sizing: border-box;
}
.size-stock-controls-bar .size-stock-btn-minus {
  background: #b71c1c;
  border-color: #8b0000;
}
.size-stock-controls-bar .size-stock-btn-minus:hover:not(:disabled) {
  background: #8b0000;
  border-color: #6b0000;
  box-shadow: 0 2px 6px rgba(139, 0, 0, 0.4);
}
.size-stock-controls-bar .size-stock-btn-plus {
  background: #1b5e20;
  border-color: #004d00;
}
.size-stock-controls-bar .size-stock-btn-plus:hover:not(:disabled) {
  background: #004d00;
  border-color: #003300;
  box-shadow: 0 2px 6px rgba(0, 77, 0, 0.4);
}
.size-stock-controls-bar .size-stock-input {
  height: 24px;
  width: 56px;
  font-size: 12px;
}
.size-stock-input {
  width: 50px;
  height: 28px;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  background: white;
  transition: border-color 0.2s ease;
  flex-shrink: 0;
}
.size-stock-input:focus {
  outline: none;
  border-color: #8b45d1;
  box-shadow: 0 0 0 2px rgba(139, 69, 209, 0.2);
}
/* Size Actions Row */
.size-actions-row {
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid #e0e0e0;
}
.size-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}
.size-save-btn {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.size-save-btn:hover {
  background: linear-gradient(135deg, #229954 0%, #27ae60 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(39, 174, 96, 0.3);
}
.size-cancel-btn {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.size-cancel-btn:hover {
  background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
}
/* Item Expandable Rows */
.item-row-container {
  border-bottom: 2px solid #d7ccc8;
}
.item-row-container:last-child {
  border-bottom: none;
}
/* Item Details Container */
.item-details-container {
  background: #f5f5f5;
  border-left: 8px solid #4caf50;
  border-radius: 8px;
  margin: 0.5rem 0;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: expandDown 0.3s ease-out;
  overflow: hidden;
}
/* Item Size Row - matches product size row layout */
.item-size-row {
  display: grid;
  grid-template-columns: 4fr 100px 100px 100px;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #dee2e6;
  background: white;
  transition: all 0.2s ease;
  border-radius: 6px;
}
.item-size-row:last-child {
  border-bottom: none;
}
.item-size-name {
  font-weight: 600;
  color: #333;
  font-size: 1rem;
  display: flex;
  align-items: center;
  padding-left: 1rem;
}
.item-size-stock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.item-size-stock-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-top: 0.25rem;
  flex-wrap: nowrap;
  min-width: 0;
}
.item-size-stock-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.item-size-stock-btn:active {
  transform: scale(0.9);
  transition: transform 0.1s ease;
}
.item-size-stock-btn.holding {
  opacity: 0.8;
  transform: scale(0.85);
  transition: all 0.2s ease;
}
.item-size-stock-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.item-size-stock-btn-minus {
  background: #ff4757;
  color: white;
  border-color: #ff3742;
}
.item-size-stock-btn-minus:hover:not(:disabled) {
  background: #ff3742;
  border-color: #ff2f3a;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}
.item-size-stock-btn-plus {
  background: #2ed573;
  color: white;
  border-color: #26d065;
}
.item-size-stock-btn-plus:hover:not(:disabled) {
  background: #26d065;
  border-color: #1dd15a;
  box-shadow: 0 2px 8px rgba(46, 213, 115, 0.3);
}
.item-size-stock-input {
  width: 50px;
  height: 28px;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  background: white;
  transition: border-color 0.2s ease;
  flex-shrink: 0;
}
.item-size-stock-input:focus {
  outline: none;
  border-color: #4caf50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}
.item-size-cost,
.item-size-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.item-size-management {
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-details-header {
  background: #4caf50;
  color: white;
  padding: 0.4rem 0.8rem;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  border-radius: 6px 6px 0 0;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
/* Item Actions Row */
.item-actions-row {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid #e0e0e0;
}
.item-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}
.item-save-btn {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.item-save-btn:hover {
  background: linear-gradient(135deg, #229954 0%, #27ae60 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(39, 174, 96, 0.3);
}
.item-cancel-btn {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.item-cancel-btn:hover {
  background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
}
/* Pulse animation for save confirmation */
@keyframes pulseSaved {
  0% {
    box-shadow: inset 0 0 8px rgba(76, 175, 80, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: inset 0 0 12px rgba(76, 175, 80, 0.4);
    transform: scale(1.01);
  }
  100% {
    box-shadow: inset 0 0 8px rgba(76, 175, 80, 0.2);
    transform: scale(1);
  }
}
.pulse-saved {
  animation: pulseSaved 2.5s ease-out;
  border: 2px solid rgba(76, 175, 80, 0.3);
}
/* Pulse animation for size dropdown */
.pulse-saved .product-sizes-container {
  animation: pulseSaved 2.5s ease-out;
  border: 2px solid rgba(76, 175, 80, 0.3);
}
/* Mobile responsiveness for expandable rows */
@media (max-width: 768px) {
  
  .size-stock-controls {
    gap: 4px;
    justify-content: center;
  }
  
  
  
  .item-size-stock-controls {
    gap: 4px;
    justify-content: center;
  }
  
  
  
  .size-name {
    padding-left: 0;
    margin-bottom: 0;
  }
  
  .size-stock,
  .size-cost,
  .size-value,
  .size-management {
    flex-direction: row;
    justify-content: space-between;
    padding: 0.25rem 0;
  }
  
  .product-sizes-container {
    margin: 0 0.5rem;
    border-radius: 0 0 8px 8px;
  }
}
/* Stock Management Styles */
.stocktake-btn {
  background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.stocktake-btn:hover {
  background: linear-gradient(135deg, #7d3c98 0%, #8e44ad 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.stocktake-panel {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(142, 68, 173, 0.05);
  border: 1px solid rgba(142, 68, 173, 0.2);
  border-radius: 8px;
}
.size-stock-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0;
}
.size-stock-item:last-child {
  margin-bottom: 0;
}
.size-label {
  font-weight: 600;
  color: #3e2723;
  font-size: 0.9rem;
}
.stock-input-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.stock-input {
  width: 80px;
  padding: 0.25rem 0.5rem;
  border: 1px solid #d7ccc8;
  border-radius: 4px;
  text-align: center;
  font-size: 0.9rem;
}
.stock-input:disabled {
  background-color: #f5f5f5;
  color: #666;
  cursor: not-allowed;
}
.stock-edit-btn {
  background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
  color: white;
  border: none;
  border-radius: 15px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.stock-edit-btn:hover {
  background: linear-gradient(135deg, #7d3c98 0%, #8e44ad 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Stock Management Modal Styles */
.stock-modal {
  background: linear-gradient(135deg, #f5f5dc 0%, #efebe9 100%);
  border: 3px solid #8d6e63;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}
.stock-modal-header {
  background: linear-gradient(135deg, #14545c 0%, #1a6b6b 100%);
  color: #f5f5dc;
  padding: 1.5rem;
  border-radius: 17px 17px 0 0;
  text-align: center;
  border-bottom: 2px solid #0a1a1d;
}
.stock-modal-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.stock-modal-body {
  padding: 2rem;
  background: linear-gradient(135deg, #f5f5dc 0%, #efebe9 100%);
}
.stock-modal-description {
  color: #3e2723;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
  font-style: italic;
}
.stock-sizes-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.stock-size-item {
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid #d7ccc8;
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.2s ease;
}
.stock-size-item:hover {
  border-color: #8d6e63;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.stock-size-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.size-name {
  font-weight: 700;
  font-size: 1.1rem;
  color: #3e2723;
  flex: 1;
}
.count-label {
  font-weight: 600;
  color: #3e2723;
  font-size: 1rem;
  margin-right: 0.5rem;
}
.stock-modal-input {
  width: 80px;
  padding: 0.75rem;
  border: 2px solid #d7ccc8;
  border-radius: 8px;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  background: white;
  transition: all 0.2s ease;
}
.stock-modal-input:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 3px rgba(141, 110, 99, 0.2);
}
/* Stock Count Controls */
.stock-count-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stock-count-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.stock-count-btn:active {
  transform: scale(0.9);
  transition: transform 0.1s ease;
}
/* Hold state visual feedback */
.stock-count-btn.holding {
  transform: scale(0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0.8;
  transition: all 0.2s ease;
}
.stock-count-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.stock-count-btn-minus {
  background: #ff4757;
  color: white;
  border-color: #ff3742;
}
.stock-count-btn-minus:hover:not(:disabled) {
  background: #ff3742;
  border-color: #ff2f3a;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}
.stock-count-btn-plus {
  background: #2ed573;
  color: white;
  border-color: #26d065;
}
.stock-count-btn-plus:hover:not(:disabled) {
  background: #26d065;
  border-color: #1dd15a;
  box-shadow: 0 2px 8px rgba(46, 213, 115, 0.3);
}
/* Adjust input width when in controls */
.stock-count-controls .stock-modal-input {
  width: 70px;
  margin: 0;
}
/* Mobile responsiveness for stock controls */
@media (max-width: 768px) {
  .stock-count-btn {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  
  .stock-count-controls .stock-modal-input {
    width: 80px;
    font-size: 1.2rem;
  }
  
  .stock-count-controls {
    gap: 10px;
  }
}
/* Touch feedback for mobile devices */
@media (hover: none) and (pointer: coarse) {
  .stock-count-btn:active {
    transform: scale(0.85);
    transition: transform 0.05s ease;
  }
}
.stock-modal-footer {
  background: linear-gradient(135deg, #8d6e63 0%, #6d4c41 100%);
  padding: 1.5rem;
  border-radius: 0 0 17px 17px;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 2px solid #5d4037;
}
.stock-cancel-btn {
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  color: white;
  border: none;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
}
.stock-cancel-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b71c1c 0%, #8d0000 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.stock-cancel-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.stock-save-btn {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
  color: white;
  border: none;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
}
.stock-save-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #1b5e20 0%, #0d3e0d 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.stock-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.stock-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  gap: 1rem;
}
.stock-loading p {
  color: #3e2723;
  font-size: 1rem;
  margin: 0;
}
.no-sizes-message {
  text-align: center;
  padding: 2rem;
  color: #8d6e63;
  font-style: italic;
}
.no-sizes-message p {
  margin: 0;
  font-size: 1rem;
}
/* Mobile Inventory Layout */
@media (max-width: 768px) {
  .inventory-table {
    display: block;
    min-width: auto;
  }
  
  .inventory-table-row {
    display: block;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f5f5dc;
    border: 2px solid #d7ccc8;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .inventory-table-row.header {
    display: none;
  }
  
  .inventory-table-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #d7ccc8;
    text-align: center;
  }
  
  .inventory-table-cell:last-child {
    border-bottom: none;
  }
  
  .inventory-table-cell.stock-cell {
    order: 2;
    font-size: 1.3rem;
    font-weight: 700;
    color: #000000;
    text-align: center;
    padding: 0.75rem 0;
  }
  
  .inventory-table-cell.management-cell {
    order: 5;
    padding: 0.75rem 0;
    border-top: 2px solid #8d6e63;
  }
  
  .inventory-table-cell.name-cell {
    order: 1;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0.5rem;
  }
  
  .inventory-table-cell.cost-cell {
    order: 2;
    font-size: 1.3rem;
    font-weight: 700;
    color: #000000;
    text-align: left !important;
    padding: 0.75rem 0;
  }
  
  .inventory-table-cell.value-cell {
    order: 3;
    font-size: 1.3rem;
    font-weight: 700;
    color: #000000;
    text-align: center;
    padding: 0.75rem 0;
  }
  
  .inventory-table-item-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #3e2723;
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .inventory-table-item-stock,
  .inventory-table-item-cost,
  .inventory-table-item-value {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 0.25rem;
  }
  
  .inventory-table-item-stock {
    font-size: 1.2rem;
  }
  
  .inventory-table-item-cost {
    color: #d32f2f !important;
  }
  
  .inventory-table-item-value {
    color: #d32f2f;
  }
  
  .mobile-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: #000000 !important;
    display: block;
    margin-bottom: 0.25rem;
  }
}
@media (max-width: 480px) {
  .inventory-table-row {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }
  
  .inventory-table-cell {
    padding: 0.4rem 0;
  }
  
  .inventory-table-item-name {
    font-size: 1.3rem;
  }
  
  .inventory-table-item-stock,
  .inventory-table-item-cost,
  .inventory-table-item-value {
    font-size: 1.1rem;
  }
  
  .mobile-label {
    font-size: 1rem;
    color: #000000 !important;
  }
  
  .inventory-table-cell.cost-cell,
  .inventory-table-cell.value-cell {
    font-size: 1.2rem;
  }
}
.dream-mode .main-content-panel,
.dream-mode .main-content-panel.main-content-panel {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
  border: 3px solid #000000 !important;
}
/* ===============================================================================
                      ADMIN BUTTON STYLING
=============================================================================== */
/* Wrapper: title + Admin button in one centred column, no overlap - same row as before, button in centre */
/* align-self: stretch + min-width ensure full width on all viewports so Admin button stays centred when title wraps */
.main-menu-header-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  margin: 0 auto 0 auto;
  margin-bottom: 0;
  box-sizing: border-box;
}
.main-menu-header-block .title-panel {
  margin-bottom: 1rem;
}
.main-menu-header-block .admin-back-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100% !important;
  min-width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
  margin: 0 0 2rem 0 !important;
  padding: 0 1rem;
  text-align: center !important;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}
/* Admin back button: centred in its row beneath title; full width so button stays centred above nav bar */
.main-menu .admin-back-button-container,
.admin-back-button-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100%;
  flex: 0 0 auto;
  margin: 0 auto 2rem auto !important;
  padding: 0 1rem;
  text-align: center !important;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}
.main-menu .admin-back-button-container .admin-back-button,
.admin-back-button-container .admin-back-button {
  display: inline-block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.admin-back-button {
  background-color: #14545c !important;
  color: #ffffff !important;
  border: 3px solid #0a1a1d !important;
  border-radius: 9999px;
  padding: 1rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.6rem;
  font-weight: 600;
  cursor: pointer !important;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 120px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 15;
  user-select: none;
}
.admin-back-button:hover {
  background-color: #1a6b75 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
.admin-back-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Return to dashboard row - centre-aligned button, all screen sizes. Flex only, no position/transform. */
.main-menu .main-content-border-panel .return-to-dashboard-row,
.main-content-border-panel .return-to-dashboard-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  align-self: stretch !important;
  margin: 0 0 1rem 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.main-content-border-panel .return-to-dashboard-row .admin-back-button {
  flex-shrink: 0 !important;
}
/* Admin actions container - holds the add product button */
.admin-actions-container {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 10;
  padding: 0.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
/* Admin add product button styling - Master Purple for Appliances */
.admin-add-product-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  color: #ffffff;
  border: 2px solid #36034d;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 120px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 15;
}
/* Green styling for Add Items button when Items tab is active - Master Green for Packaging */
.admin-add-product-btn.items-mode {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border-color: #004d06;
}
.admin-add-product-btn:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #36034d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 0 20px rgba(87, 5, 138, 0.4);
  color: #3e2723 !important;
}
.admin-add-product-btn.items-mode:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 0 20px rgba(0, 119, 10, 0.4);
  color: #3e2723 !important;
}
/* Blue enhancement button */
.admin-add-product-btn.admin-blue {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border-color: #0a5d7a;
}
.admin-add-product-btn.admin-blue:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
}
.admin-add-product-btn.admin-green {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border-color: #004d06;
  box-shadow: 0 4px 8px rgba(0, 119, 10, 0.3);
}
.admin-add-product-btn.admin-green:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4);
  color: #3e2723 !important;
}
/* Same orange as Orders tab (pool-view-btn.admin-orders-tab) */
.admin-add-product-btn.admin-orders-orange {
  background: linear-gradient(135deg, #EB640A 0%, #c95208 100%);
  border: 2px solid #a84307;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(235, 100, 10, 0.3);
}
.admin-add-product-btn.admin-orders-orange:hover {
  background: linear-gradient(135deg, #c95208 0%, #EB640A 100%);
  border-color: #a84307;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(235, 100, 10, 0.4);
  color: #ffffff !important;
}
.admin-add-product-btn.admin-orange {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
  border-color: #b8460a;
  box-shadow: 0 4px 8px rgba(211, 84, 0, 0.3);
}
.admin-add-product-btn.admin-orange:hover {
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
  border-color: #b8460a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(230, 126, 34, 0.4);
  color: #ffffff !important;
}
.admin-add-product-btn.admin-purple {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border-color: #36034d;
}
.admin-add-product-btn.admin-purple:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #2d023a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4);
  color: #ffffff !important;
}
.admin-add-product-btn.admin-blue {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border-color: #0a5d7a;
  box-shadow: 0 4px 8px rgba(16, 142, 188, 0.3);
}
.admin-add-product-btn.admin-blue:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
  color: #ffffff !important;
}
/* Templates Section Styles - Subscriptions Layout */
.templates-section {
  padding: 2rem;
  background: #ffffff;
  border-radius: 16px;
  margin-bottom: 1.5rem;
}
.templates-content {
  max-width: 1200px;
  margin: 0 auto;
}
.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
/* Loyalty and Achievements Section Styles - Match Templates */
.loyalty-section, .achievements-section {
  padding: 2rem;
  background: #ffffff;
  border-radius: 16px;
  margin-bottom: 1.5rem;
}
.loyalty-content, .achievements-content {
  max-width: 1200px;
  margin: 0 auto;
}
.loyalty-grid, .achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.template-card, .loyalty-card, .achievement-card {
  background: #f5f5dc;
  border: 2px solid #8b4513;
  border-radius: 12px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.template-card:hover, .loyalty-card:hover, .achievement-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  border-color: #3498db;
}
.template-card h3, .loyalty-card h3, .achievement-card h3 {
  color: #8b4513;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-align: center;
}
.template-category, .loyalty-category, .achievement-category {
  color: #3498db;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-align: center;
}
.template-divider, .loyalty-divider, .achievement-divider {
  height: 2px;
  background: #8b4513;
  margin: 0.75rem 0;
  border-radius: 1px;
}
.template-description, .loyalty-description, .achievement-description {
  color: #8b4513;
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 1rem;
  text-align: center;
}
.template-stats, .loyalty-stats, .achievement-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  justify-content: center;
}
.template-stats .stat, .loyalty-stats .stat, .achievement-stats .stat {
  background: #e9ecef;
  color: #8b4513;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}
.template-actions, .loyalty-actions, .achievement-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
.template-btn, .loyalty-btn, .achievement-btn {
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 25px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
.template-btn.primary, .loyalty-btn.primary, .achievement-btn.primary {
  background: #8b4513;
  color: white;
  border: 2px solid #8b4513;
}
.template-btn.primary:hover, .loyalty-btn.primary:hover, .achievement-btn.primary:hover {
  background: #a0522d;
  border-color: #a0522d;
  transform: translateY(-1px);
}
.template-btn.secondary, .loyalty-btn.secondary, .achievement-btn.secondary {
  background: #8b4513;
  color: white;
  border: 2px solid #8b4513;
}
.template-btn.secondary:hover, .loyalty-btn.secondary:hover, .achievement-btn.secondary:hover {
  background: #a0522d;
  border-color: #a0522d;
  transform: translateY(-1px);
}
.template-btn.outline, .loyalty-btn.outline, .achievement-btn.outline {
  background: transparent;
  color: #8b4513;
  border: 2px solid #8b4513;
}
.template-btn.outline:hover, .loyalty-btn.outline:hover, .achievement-btn.outline:hover {
  background: #8b4513;
  color: white;
  transform: translateY(-1px);
}
/* Templates button styling - solid light blue when selected, transparent when not */
.pool-view-btn.templates-btn {
  background: transparent;
  color: #2c3e50;
  border: 2px solid #8b4513;
}
.pool-view-btn.templates-btn:hover {
  background: rgba(52, 152, 219, 0.1);
  border-color: #3498db;
  transform: translateY(-1px);
}
.pool-view-btn.templates-btn.active {
  background: #3498db;
  color: white;
  border-color: #3498db;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.pool-view-btn.templates-btn.disabled {
  background: #e9ecef;
  color: #6c757d;
  border-color: #dee2e6;
  cursor: not-allowed;
  opacity: 0.6;
}
.pool-view-btn.templates-btn.disabled:hover {
  background: #e9ecef;
  color: #6c757d;
  border-color: #dee2e6;
  transform: none;
  box-shadow: none;
}
.admin-add-product-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Products breakdown button styling */
.products-breakdown-btn {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  color: white;
  border: 3px solid #d68910;
  border-radius: 25px;
  padding: 0.8rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 150px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 15;
  user-select: none;
}
.products-breakdown-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 0 20px rgba(243, 156, 18, 0.4);
}
.products-breakdown-btn:disabled {
  background: #95a5a6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* Dark mode admin button overrides */
.dark-mode .admin-back-button {
  background-color: #14545c;
  border-color: #000000;
  color: #000000;
}
.dark-mode .admin-recipes-btn {
  background: #9333ea;
  border-color: #000000;
  color: #ffffff;
}
.dark-mode .admin-add-product-btn {
  background-color: #27ae60;
  border-color: #000000;
  color: #ffffff;
}
/* Dream mode admin button overrides */
.dream-mode .admin-back-button {
  background-color: #14545c;
  border-color: #0a1a1d;
  color: #000000;
}
.dream-mode .admin-recipes-btn {
  background: #9333ea;
  border-color: #000000;
  color: #ffffff;
}
.dream-mode .admin-add-product-btn {
  background-color: #27ae60;
  border-color: #000000;
  color: #ffffff;
}
/* ===============================================================================
                      PRODUCTS PAGE ADMIN BUTTON OVERRIDE
=============================================================================== */
/* Ultra-specific override for products page admin button */
.main-menu .admin-back-button-container .admin-back-button,
.main-menu .admin-back-button,
.admin-back-button {
  background-color: #14545c !important;
  color: #ffffff !important;
  border: 3px solid #0a1a1d !important;
}
.main-menu .admin-back-button-container .admin-back-button:hover,
.main-menu .admin-back-button:hover,
.admin-back-button:hover {
  background-color: #1a6b75 !important;
  color: #ffffff !important;
  border: 3px solid #0a1a1d !important;
}
/* Nuclear override for products page - highest specificity */
.main-menu .admin-back-button-container button.admin-back-button,
.main-menu .admin-back-button-container button[class*="admin-back"],
button.admin-back-button,
button[class*="admin-back"] {
  background-color: #14545c !important;
  background: #14545c !important;
  color: #ffffff !important;
  border: 3px solid #0a1a1d !important;
  border-color: #0a1a1d !important;
}
.main-menu .admin-back-button-container button.admin-back-button:hover,
.main-menu .admin-back-button-container button[class*="admin-back"]:hover,
button.admin-back-button:hover,
button[class*="admin-back"]:hover {
  background-color: #1a6b75 !important;
  background: #1a6b75 !important;
  color: #ffffff !important;
  border: 3px solid #0a1a1d !important;
  border-color: #0a1a1d !important;
}
/* ===============================================================================
                      PRODUCTS TAB LAYOUT
=============================================================================== */
/* Products Tab Buttons */
.products-tab-buttons {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
/* Mobile responsiveness for products tab buttons */
@media (max-width: 768px) {
  .products-tab-buttons {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .products-tab-btn {
    min-width: 150px;
    padding: 0.6rem 1rem;
    font-size: 1rem;
  }
}
.products-tab-btn {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
  color: white;
  border: 3px solid #d35400;
  border-radius: 9999px;
  padding: 0.8rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 120px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 15;
  user-select: none;
}
.products-tab-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
.products-tab-btn.active {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
  border-color: #b8460a;
  box-shadow: 0 4px 12px rgba(230, 126, 34, 0.4);
}
/* Products tab - orange (default) */
.products-tab-btn.products-tab {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
  border: 3px solid #d35400;
}
.products-tab-btn.products-tab:hover {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
.products-tab-btn.products-tab.active {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
  border-color: #b8460a;
  box-shadow: 0 4px 12px rgba(230, 126, 34, 0.4);
}
/* Breakdown tab - purple (like ingredients) */
.products-tab-btn.breakdown-tab {
  background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
  border: 3px solid #7d3c98;
}
.products-tab-btn.breakdown-tab:hover {
  background: linear-gradient(135deg, #7d3c98 0%, #8e44ad 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
.products-tab-btn.breakdown-tab.active {
  background: linear-gradient(135deg, #7d3c98 0%, #8e44ad 100%);
  border-color: #6a2c93;
  box-shadow: 0 4px 12px rgba(142, 68, 173, 0.4);
}
/* Items tab - green (like packaging) */
.products-tab-btn.items-tab {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  border: 3px solid #229954;
}
.products-tab-btn.items-tab:hover {
  background: linear-gradient(135deg, #229954 0%, #27ae60 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
.products-tab-btn.items-tab.active {
  background: linear-gradient(135deg, #229954 0%, #27ae60 100%);
  border-color: #1e8449;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}
.products-tab-btn:disabled {
  background: #95a5a6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* Products Section Header */
.products-section-header {
  margin-bottom: 2rem;
}
.products-section-title-panel {
  background-color: #14545c;
  border: 3px solid #3e2723;
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
  width: 100%;
}
.products-section-title {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 2.1rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  text-shadow: -1px -1px 0 #0a1a1d, 1px -1px 0 #0a1a1d, -1px 1px 0 #0a1a1d, 1px 1px 0 #0a1a1d;
}
.products-section-subtitle {
  color: #ffffff;
  font-size: 1.1rem;
  margin: 0;
  opacity: 0.9;
  font-weight: 500;
  line-height: 1.4;
}
/* Products Section Actions */
.products-section-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}
/* Section Info Message - Legacy (keeping for compatibility) */
.section-info-message {
  font-size: 1.1rem;
  color: #5d4037;
  text-align: center;
  font-style: italic;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif;
  max-width: 500px;
  line-height: 1.4;
  opacity: 0.9;
  font-weight: 500;
}
/* Products Extra Section */
.products-extra-section {
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  margin-top: 1rem;
}
.products-extra-header {
  background-color: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 2rem;
  text-align: center;
}
.products-extra-title {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  text-shadow: -1px -1px 0 #0a1a1d, 1px -1px 0 #0a1a1d, -1px 1px 0 #0a1a1d, 1px 1px 0 #0a1a1d;
}
.products-extra-subtitle {
  color: #ffffff;
  font-size: 1rem;
  margin: 0;
  opacity: 0.9;
}
.products-extra-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.extra-placeholder {
  background-color: #f5f5dc;
  border: 2px solid #3e2723;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.extra-placeholder h3 {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
}
.extra-placeholder p {
  color: #666;
  font-size: 1.1rem;
  margin: 0;
}
/* ===============================================================================
                      PRODUCTS BREAKDOWN SECTION
=============================================================================== */
/* Products Breakdown View Styles */
.products-breakdown-section {
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  margin-top: 1rem;
}
.products-breakdown-header {
  background-color: #14545c;
  border: 3px solid #3e2723;
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
  width: 100%;
}
/* Header fills to container corners (no gap in rounded top) */
.products-breakdown-section > .products-breakdown-header:first-child {
  margin: -2rem -2rem 1.5rem -2rem;
  border-radius: 8px 8px 0 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 1rem 2rem;
}
.products-breakdown-title {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 2.1rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  text-shadow: -1px -1px 0 #0a1a1d, 1px -1px 0 #0a1a1d, -1px 1px 0 #0a1a1d, 1px 1px 0 #0a1a1d;
}
.products-breakdown-subtitle {
  color: #ffffff;
  font-size: 1.1rem;
  margin: 0;
  opacity: 0.9;
  font-weight: 500;
  line-height: 1.4;
}
.products-breakdown-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.products-breakdown-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.breakdown-stat-card {
  background-color: #f5f5dc;
  border: 2px solid #3e2723;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.breakdown-stat-card h3 {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}
/* Titles for Promo Code Analytics on loyalty overview page */
.products-breakdown-section .breakdown-stat-card h3 {
  font-size: 1.3rem;
  margin: 0 0 0.25rem 0; /* Reduced spacing between title and number */
}
/* Make loyalty section panels match products/inventory width */
.products-breakdown-section .products-breakdown-stats {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.breakdown-stat-value {
  color: #14545c;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.5rem;
  font-weight: 900;
  display: block;
}
.products-breakdown-table h3 {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  text-align: center;
}
/* Ensure inventory-breakdown-table h3 matches products-breakdown-table h3 */
.inventory-breakdown-table h3 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin: 0 0 1rem 0 !important;
  text-align: center !important;
}
.breakdown-table-container {
  overflow-x: auto;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #ffffff;
}
.breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'The Wanters DEMO', serif;
}
.breakdown-table th {
  background-color: #14545c;
  color: #ffffff;
  padding: 1rem;
  text-align: left;
  font-weight: 700;
  font-size: 1.1rem;
  border-bottom: 2px solid #0a1a1d;
}
.breakdown-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #ddd;
  color: #3e2723;
  font-weight: 600;
}
.breakdown-table tr:hover {
  background-color: #f5f5f5;
}
.breakdown-table .low-stock {
  color: #e74c3c;
  font-weight: 900;
}
.breakdown-table .active-status {
  color: #27ae60;
  font-weight: 700;
}
.breakdown-table .inactive-status {
  color: #e74c3c;
  font-weight: 700;
}
/* Dark mode styles for products breakdown */
.dark-mode .products-breakdown-section {
  background: rgba(62, 39, 35, 0.9);
  border-color: #000000;
}
.dark-mode .breakdown-table th {
  background-color: #8d6e63;
  border-color: #000000;
}
.dark-mode .breakdown-table td {
  color: #fff8e1;
}
.dark-mode .breakdown-table tr:hover {
  background-color: #2c3e50;
}
.dark-mode .breakdown-stat-card {
  background-color: #8d6e63;
  border-color: #000000;
}
.dark-mode .breakdown-stat-card h3 {
  color: #fff8e1;
}
.dark-mode .breakdown-stat-value {
  color: #ffffff;
}
.dark-mode .products-breakdown-table h3 {
  color: #fff8e1;
}
/* Dream mode styles for products breakdown */
.dream-mode .products-breakdown-section {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  );
  border-color: #000000;
}
.dream-mode .breakdown-table th {
  background-color: #8d6e63;
  border-color: #000000;
}
.dream-mode .breakdown-table td {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.dream-mode .breakdown-table tr:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.dream-mode .breakdown-stat-card {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  );
  border-color: #000000;
}
.dream-mode .breakdown-stat-card h3 {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.dream-mode .breakdown-stat-value {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.dream-mode .products-breakdown-table h3 {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
/* Responsive styles for products breakdown */
@media (max-width: 768px) {
  .products-breakdown-stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.8rem;
  }
  
  .breakdown-stat-card {
    padding: 1rem;
  }
  
  .breakdown-stat-card h3 {
    font-size: 1rem;
  }
  
  .breakdown-stat-value {
    font-size: 1.5rem;
  }
  
  .breakdown-table th,
  .breakdown-table td {
    padding: 0.5rem;
    font-size: 0.9rem;
  }
}
@media (max-width: 480px) {
  .products-breakdown-stats {
    grid-template-columns: 1fr;
  }
  
  .breakdown-table-container {
    font-size: 0.8rem;
  }
  
  .breakdown-table th,
  .breakdown-table td {
    padding: 0.4rem;
    font-size: 0.8rem;
  }
}
/* ===============================================================================
                      STAFF MANAGEMENT STYLES
=============================================================================== */
/* Staff Section Styles */
.staff-section {
  width: 100%;
  margin-bottom: 2rem;
}
.staff-section-title-panel {
  background-color: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.staff-section-title {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  text-shadow: -1px -1px 0 #0a1a1d, 1px -1px 0 #0a1a1d, -1px 1px 0 #0a1a1d, 1px 1px 0 #0a1a1d;
}
.staff-section-subtitle {
  color: #ffffff;
  font-size: 1rem;
  margin: 0;
  opacity: 0.9;
}
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 350px));
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 2rem;
  justify-items: center;
  align-items: start;
  justify-content: center;
  box-sizing: border-box;
  overflow-x: auto;
}
.enhanced-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 350px));
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 2rem;
  justify-items: center;
  align-items: start;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  overflow-x: auto;
}
.enhanced-staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 350px));
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 2rem;
  justify-items: center;
  align-items: start;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  overflow-x: auto;
}
@media (max-width: 768px) {
  .enhanced-admin-grid,
  .enhanced-staff-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
    gap: 1rem;
    padding: 0.5rem;
  }
  
  .enhanced-admin-card,
  .enhanced-staff-card {
    min-width: 280px;
    max-width: 320px;
  }
}
@media (max-width: 480px) {
  .enhanced-admin-grid,
  .enhanced-staff-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 0.25rem;
  }
  
  .enhanced-admin-card,
  .enhanced-staff-card {
    min-width: 250px;
    max-width: 100%;
  }
}
@media (max-width: 360px) {
  .enhanced-admin-grid,
  .enhanced-staff-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0.1rem;
  }
  
  .enhanced-admin-card,
  .enhanced-staff-card {
    min-width: 200px;
    max-width: 100%;
  }
}
/* Ensure admin and staff cards are always visible and not squashed */
.enhanced-admin-card,
.enhanced-staff-card {
  min-width: 300px;
  width: 100%;
  max-width: 350px;
  flex-shrink: 0;
}
.staff-card-container {
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.staff-card-container:hover {
  transform: translateY(-2px);
}
.staff-card-background {
  background-color: #8d6e63;
  border: 3px solid #3e2723;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-height: 280px;
  max-height: 350px;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}
.staff-card-container:hover .staff-card-background {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  border-color: #3e2723;
  background-color: #8d6e63;
}
.staff-name-panel {
  text-align: center;
  padding: 0.75rem;
  border: 3px solid #3e2723;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}
.staff-name-panel.staff {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  border-color: #229954;
}
.staff-name-panel.admin {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border-color: #0a1a1d;
}
.staff-card-container:hover .staff-name-panel {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}
.staff-card-container:hover .staff-name-panel.staff {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}
.staff-card-container:hover .staff-name-panel.admin {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
}
.staff-name {
  font-size: 1.8rem;
  font-weight: 900;
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  display: block;
  line-height: 1.2;
  margin: 0;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.staff-info-card {
  background-color: rgba(245, 245, 220, 0.9);
  border: 2px solid #3e2723;
  border-radius: 8px;
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.staff-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(62, 39, 35, 0.2);
}
.staff-info-row:last-child {
  border-bottom: none;
}
.staff-info-label {
  font-weight: 700;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 0.9rem;
}
.staff-info-value {
  font-weight: 600;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 0.9rem;
  text-align: right;
}
.staff-status {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.staff-status.active {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.staff-status.inactive {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
.staff-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: auto;
  justify-content: center;
  flex-wrap: wrap;
}
.staff-manage-btn {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  border: 2px solid #2980b9;
  border-radius: 20px;
  padding: 0.4rem 0.8rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 55px;
}
.staff-manage-btn:hover {
  background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
}
.staff-contact-btn {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
  color: white;
  border: 2px solid #8e44ad;
  border-radius: 20px;
  padding: 0.4rem 0.8rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 55px;
}
.staff-contact-btn:hover {
  background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(155, 89, 182, 0.3);
}
.staff-fire-btn {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  border: 2px solid #c0392b;
  border-radius: 20px;
  padding: 0.4rem 0.8rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 55px;
}
.staff-fire-btn:hover {
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
}
/* Staff Empty State */
.staff-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  grid-column: 1 / -1;
  width: 100%;
  background-color: rgba(245, 245, 220, 0.9);
  border: 3px solid #3e2723;
  border-radius: 12px;
  margin: 1rem 0;
}
.staff-empty-content h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #3e2723;
  margin-bottom: 1rem;
  font-family: 'The Wanters DEMO', serif;
}
.staff-empty-content p {
  font-size: 1.2rem;
  color: #8d6e63;
  margin: 0.5rem 0;
  font-family: 'The Wanters DEMO', serif;
}
/* QR Code Settings Panel Responsive */
.qr-settings-panel {
  max-width: 100%;
  width: 100%;
}
@media (min-width: 768px) {
  .qr-settings-panel {
    max-width: 400px;
    margin: 1rem auto 0 auto;
  }
}
@media (min-width: 1024px) {
  .qr-settings-panel {
    max-width: 350px;
    margin: 1rem auto 0 auto;
  }
}
/* Dark mode styles for staff management */
.dark-mode .staff-card-background {
  background-color: #1a1a1a;
  border: 3px solid #000000;
}
.dark-mode .staff-card-container:hover .staff-card-background {
  background-color: #1a1a1a;
  border-color: #000000;
}
.dark-mode .staff-name-panel.staff {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  border-color: #229954;
}
.dark-mode .staff-name-panel.admin {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border-color: #0a1a1d;
}
.dark-mode .staff-card-container:hover .staff-name-panel.staff {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}
.dark-mode .staff-card-container:hover .staff-name-panel.admin {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
}
.dark-mode .staff-name {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.dark-mode .staff-info-card {
  background-color: #8d6e63;
  border: 2px solid #000000;
}
.dark-mode .staff-info-label,
.dark-mode .staff-info-value {
  color: #fff8e1;
}
.dark-mode .staff-empty-state {
  background-color: rgba(62, 39, 35, 0.9);
  border-color: #000000;
}
.dark-mode .staff-empty-content h3 {
  color: #8d6e63;
}
.dark-mode .staff-empty-content p {
  color: #a1887f;
}
/* Responsive styles for staff management */
@media (max-width: 768px) {
  .staff-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
    gap: 1rem;
  }
  
  .staff-card-background {
    min-height: 250px;
    max-height: 300px;
  }
  
  .staff-name {
    font-size: 1.5rem;
  }
  
  .staff-actions {
    flex-direction: column;
    gap: 0.3rem;
  }
  
  .staff-manage-btn,
  .staff-contact-btn,
  .staff-fire-btn {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    min-width: 50px;
  }
}
@media (max-width: 480px) {
  .staff-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  
  .staff-card-background {
    min-height: 220px;
    max-height: 280px;
  }
  
  .staff-name {
    font-size: 1.3rem;
  }
  
  .staff-actions {
    flex-direction: column;
    gap: 0.3rem;
  }
  
  .staff-manage-btn,
  .staff-contact-btn,
  .staff-fire-btn {
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
    min-width: 45px;
  }
}
/* ===============================================================================
                      LOADING AND EMPTY STATES
=============================================================================== */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  grid-column: 1 / -1;
  width: 100%;
}
.loading-state h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #3e2723;
  margin-bottom: 1rem;
  font-family: 'The Wanters DEMO', serif;
}
.loading-state p {
  font-size: 1.2rem;
  color: #8d6e63;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  grid-column: 1 / -1;
  width: 100%;
  background-color: rgba(245, 245, 220, 0.9);
  border: 3px solid #3e2723;
  border-radius: 12px;
  margin: 1rem 0;
}
.empty-state h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #3e2723;
  margin-bottom: 1rem;
  font-family: 'The Wanters DEMO', serif;
}
.empty-state p {
  font-size: 1.2rem;
  color: #8d6e63;
  margin: 0.5rem 0;
  font-family: 'The Wanters DEMO', serif;
}
/* Dark mode loading and empty states */
.dark-mode .loading-state h3,
.dark-mode .empty-state h3 {
  color: #8d6e63;
}
.dark-mode .loading-state p,
.dark-mode .empty-state p {
  color: #a1887f;
}
.dark-mode .empty-state {
  background-color: rgba(62, 39, 35, 0.9);
  border-color: #000000;
}
/* Dream mode loading and empty states */
.dream-mode .loading-state h3,
.dream-mode .empty-state h3 {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.dream-mode .loading-state p,
.dream-mode .empty-state p {
  color: #e0e0e0;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.dream-mode .empty-state {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  );
  border-color: #000000;
}
/* ===============================================================================
                      APPLE DEVICE SPECIFIC FIXES
=============================================================================== */
/* Apple device specific fixes for consistent product grid spacing */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari specific styles - mobile first approach */
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 240px)) !important;
    gap: 1rem !important;
  }
  
  .products-title {
    font-size: clamp(2rem, 3.5vw, 3rem) !important;
    line-height: 1.1 !important;
  }
  
  .title-panel {
    padding: 0.75rem 1rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .main-content-border-panel {
    padding: 0.75rem !important;
    width: 98% !important;
  }
  
  .main-content-panel {
    padding: 0.5rem !important;
  }
  
  .product-card-background {
    padding: 0.4rem !important;
    gap: 0.3rem !important;
    min-height: 220px !important;
    max-height: 260px !important;
  }
  
  .product-name-panel {
    padding: 0.25rem !important;
  }
  
  .product-image-card {
    padding: 0.15rem !important;
  }
  
  .product-name {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
  }
  
  /* Larger iOS devices get slightly more columns */
  @media (min-width: 768px) {
    .products-grid {
      grid-template-columns: repeat(auto-fit, minmax(240px, 280px)) !important;
      gap: 1.2rem !important;
    }
    .products-title {
      font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
    }
  }
  
  @media (min-width: 1024px) {
    .products-grid {
      grid-template-columns: repeat(auto-fit, minmax(280px, 320px)) !important;
      gap: 1.5rem !important;
    }
    .products-title {
      font-size: clamp(3rem, 4.5vw, 4rem) !important;
    }
  }
}
/* Additional Apple device targeting for better consistency */
@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px) {
  .products-grid {
    gap: 0.6rem !important;
  }
  
  .product-card-background {
    padding: 0.3rem !important;
    gap: 0.4rem !important;
  }
  
  .product-name-panel {
    padding: 0.2rem !important;
  }
  
  .product-image-card {
    padding: 0.15rem !important;
  }
}
/* Force consistent spacing on Apple devices */
@supports (-webkit-touch-callout: none) {
  .product-card-container {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .product-card-background {
    margin: 0 !important;
  }
  
  /* Ensure consistent grid behavior */
  .products-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 220px)) !important;
    align-items: start !important;
    justify-items: center !important;
  }
}
/* ===============================================================================
                      INVENTORY ADMIN BUTTON - TEAL COLOR
=============================================================================== */
.inventory-admin-button {
  background-color: #14545c !important;
  color: #ffffff !important;
  border: 3px solid #0a1a1d !important;
  border-radius: 9999px !important;
  padding: 1rem 2rem !important;
  font-family: 'The Wanters DEMO', serif !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  min-width: 120px !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  user-select: none !important;
  white-space: nowrap !important;
}
.inventory-admin-button:hover:not(:disabled) {
  background-color: #0d353a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
}
.inventory-admin-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}
.inventory-admin-button:disabled {
  background-color: #bdc3c7 !important;
  border-color: #95a5a6 !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
  transform: none !important;
}
/* Dark mode inventory admin button */
.dark-mode .inventory-admin-button {
  background-color: #14545c !important;
  border-color: #000000 !important;
  color: #000000 !important;
}
.dark-mode .inventory-admin-button:hover:not(:disabled) {
  background-color: #0d353a !important;
  color: #ffffff !important;
  border: 2px solid #0d353a !important;
  box-shadow: 0 4px 8px rgba(13, 53, 58, 0.5) !important;
}
/* Dream mode inventory admin button */
.dream-mode .inventory-admin-button {
  background: linear-gradient(135deg, #14545c 0%, #0d353a 100%) !important;
  border-color: #14545c !important;
  color: #fff !important;
  box-shadow: 0 3px 6px rgba(20, 84, 92, 0.4) !important;
}
.dream-mode .inventory-admin-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #0d353a 0%, #14545c 100%) !important;
  color: #fff !important;
  border: 2px solid #0d353a !important;
  box-shadow: 0 4px 8px rgba(13, 53, 58, 0.5) !important;
}
/* Loading Spinner Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* ===============================================================================
                      CUSTOMER MENU BUTTONS - ADMIN DASHBOARD STYLE
=============================================================================== */
/* Base customer menu button styles - matching admin dashboard buttons */
.customer-menu-btn {
  padding: 0.8rem 1.5rem !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  font-family: 'The Wanters DEMO', serif !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #000000 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  width: 220px !important;
  min-width: 220px !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  text-decoration: none !important;
  display: inline-block !important;
  text-align: center !important;
  vertical-align: middle !important;
  user-select: none !important;
  white-space: nowrap !important;
  color: #fff !important;
}
/* Products button - Purple (matching admin-products-btn) */
.customer-menu-btn.products-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%) !important;
  border: 3px solid #000000 !important;
}
.customer-menu-btn.products-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4) !important;
  color: #3e2723 !important;
}
.customer-menu-btn.products-btn.active {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
  opacity: 0.9 !important;
}
/* Items button - Green (matching items-tab) */
.customer-menu-btn.items-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%) !important;
  border: 3px solid #000000 !important;
}
.customer-menu-btn.items-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4) !important;
  color: #3e2723 !important;
}
.customer-menu-btn.items-btn.active {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
  opacity: 0.9 !important;
}
/* Profile button - Brown/Neutral */
.customer-menu-btn.business-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%) !important;
  border: 3px solid #000000 !important;
}
.customer-menu-btn.business-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #a1887f 0%, #8d6e63 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(141, 110, 99, 0.4) !important;
  color: #3e2723 !important;
}
.customer-menu-btn.business-btn.active {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
  opacity: 0.9 !important;
}
/* Loyalty button - Light Blue */
.customer-menu-btn.loyalty-btn {
  background: linear-gradient(135deg, #5dade2 0%, #3498db 100%) !important;
  border: 3px solid #000000 !important;
}
.customer-menu-btn.loyalty-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #3498db 0%, #5dade2 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(93, 173, 226, 0.4) !important;
  color: #3e2723 !important;
}
.customer-menu-btn.loyalty-btn.active {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
  opacity: 0.9 !important;
}
/* Achievements button - Purple */
.customer-menu-btn.achievements-btn {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%) !important;
  border: 3px solid #000000 !important;
}
.customer-menu-btn.achievements-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(147, 51, 234, 0.4) !important;
  color: #3e2723 !important;
}
.customer-menu-btn.achievements-btn.active {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
  opacity: 0.9 !important;
}
/* Levels button - Green */
.customer-menu-btn.levels-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%) !important;
  border: 3px solid #000000 !important;
}
.customer-menu-btn.levels-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4) !important;
  color: #3e2723 !important;
}
.customer-menu-btn.levels-btn.active {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
  opacity: 0.9 !important;
}
/* Disabled state */
.customer-menu-btn.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.customer-menu-btn.disabled:hover {
  transform: none !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}
/* Inventory-specific styles that extend MainMenu */
.inventory-section {
  width: 100%;
  margin-bottom: 2rem;
}
.inventory-section-title-panel {
  background-color: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
/* When inside admin-section, header fills to corners (no gap in rounded top) */
.admin-section > .inventory-section-title-panel:first-child {
  margin: -2rem -2rem 1.5rem -2rem;
  border-radius: 12px 12px 0 0;
  padding: 1rem 2rem;
}
.inventory-section-title {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 2.1rem;
  font-weight: 700;
  margin: 0;
  text-shadow: -1px -1px 0 #0a1a1d, 1px -1px 0 #0a1a1d, -1px 1px 0 #0a1a1d, 1px 1px 0 #0a1a1d;
}
.inventory-section-subtitle {
  color: #ffffff;
  font-size: 14px;
  margin-top: 8px;
  font-style: italic;
  margin-bottom: 0;
}
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  gap: 1rem;
  width: 100%;
  margin-bottom: 2rem;
  justify-items: center;
  align-items: start;
  justify-content: center;
}
.inventory-item {
  background-color: #8d6e63;
  border: 3px solid #3e2723;
  border-radius: 12px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-height: 140px;
  max-height: 180px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.inventory-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.inventory-flavour-title-panel {
  text-align: center;
  padding: 0.5rem;
  background-color: rgba(245, 245, 220, 0.9);
  border: 3px solid #3e2723;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 0.5rem;
}
.inventory-item:hover .inventory-flavour-title-panel {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  background-color: rgba(250, 250, 240, 0.95);
}
.inventory-flavour-title-panel h3 {
  font-size: 1.4rem;
  font-weight: 900;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  display: block;
  line-height: 1.2;
  margin: 0;
}
.inventory-controls {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  justify-content: center;
}
.inventory-quantity-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem;
  background-color: rgba(245, 245, 220, 0.9);
  border: 2px solid #3e2723;
  border-radius: 6px;
}
.inventory-size-label {
  font-weight: 700;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
}
.inventory-size-unit {
  font-size: 0.9rem;
  font-weight: 600;
}
.inventory-quantity-display {
  font-weight: 700;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
  padding: 0.2rem 0.4rem;
  background-color: #ffffff;
  border: 2px solid #8d6e63;
  border-radius: 4px;
  min-width: 50px;
  text-align: center;
}
.inventory-quantity-input {
  font-weight: 700;
  color: #3e2723;
  font-family: 'Verdana', sans-serif;
  font-size: 1.1rem;
  padding: 0.2rem 0.4rem;
  background-color: #ffffff;
  border: 2px solid #8d6e63;
  border-radius: 4px;
  min-width: 60px;
  text-align: center;
  transition: all 0.3s ease;
}
.inventory-quantity-input:focus {
  outline: none;
  border-color: #14545c;
  box-shadow: 0 0 0 2px rgba(20, 84, 92, 0.2);
  background-color: #f8f9fa;
}
.inventory-quantity-input:hover {
  border-color: #14545c;
}
/* Add Product Button - matching MainMenu style */
.inventory-add-product-btn {
  background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
  color: white;
  border: 3px solid #374151;
  border-radius: 9999px;
  padding: 0.8rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 150px !important;
  width: 150px !important;
  max-width: 150px !important;
  flex: 0 0 150px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 15;
  user-select: none;
}
/* Add Ingredient Button - matching MainMenu style */
.inventory-add-ingredient-btn {
  background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
  color: white;
  border: 3px solid #7d3c98;
  border-radius: 9999px;
  padding: 0.8rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 150px !important;
  width: 150px !important;
  max-width: 150px !important;
  flex: 0 0 150px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 15;
  user-select: none;
}
/* Enhancement Button - matching MainMenu style */
.inventory-enhancement-btn {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  border: 3px solid #2980b9;
  border-radius: 9999px;
  padding: 0.8rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 150px !important;
  width: 150px !important;
  max-width: 150px !important;
  flex: 0 0 150px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 15;
  user-select: none;
  margin-left: 10px;
}
.inventory-enhancement-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.inventory-enhancement-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.inventory-enhancement-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
/* Add Cost Button - matching MainMenu style */
.inventory-add-cost-btn {
  background: #EB640A;
  color: white;
  border: 2px solid #B84A08;
  border-radius: 9999px;
  padding: 0.8rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 150px !important;
  width: 150px !important;
  max-width: 150px !important;
  flex: 0 0 150px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 15;
  user-select: none;
}
/* Add Packaging Button - dark green matching section button */
.inventory-add-packaging-btn {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: white;
  border: 3px solid #229954;
  border-radius: 9999px;
  padding: 0.8rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 150px !important;
  width: 150px !important;
  max-width: 150px !important;
  flex: 0 0 150px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 15;
  user-select: none;
}
/* Add Inventory Button - matching MainMenu style */
.inventory-add-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  color: white;
  border: 3px solid #0a1a1d;
  border-radius: 9999px;
  padding: 0.8rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 150px !important;
  width: 150px !important;
  max-width: 150px !important;
  flex: 0 0 150px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 15;
  user-select: none;
}
.inventory-add-product-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 0 20px rgba(107, 114, 128, 0.4);
}
.inventory-add-ingredient-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 0 20px rgba(142, 68, 173, 0.4);
  color: #3e2723 !important;
}
.inventory-add-cost-btn:hover:not(:disabled) {
  background: #C95409;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(235, 100, 10, 0.4);
  color: #ffffff !important;
}
.inventory-add-packaging-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #229954 0%, #27ae60 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 0 20px rgba(39, 174, 96, 0.4);
  color: #3e2723 !important;
}
.inventory-add-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 0 20px rgba(20, 84, 92, 0.4);
}
.inventory-add-product-btn:disabled {
  background: #95a5a6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.inventory-add-ingredient-btn:disabled {
  background: #95a5a6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.inventory-add-cost-btn:disabled {
  background: #95a5a6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.inventory-add-btn:disabled {
  background: #95a5a6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* Inventory Empty State */
.inventory-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  grid-column: 1 / -1;
  width: 100%;
  background-color: rgba(245, 245, 220, 0.9);
  border: 3px solid #3e2723;
  border-radius: 12px;
  margin: 1rem 0;
}
.inventory-empty-content h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #3e2723;
  margin-bottom: 1rem;
  font-family: 'The Wanters DEMO', serif;
}
.inventory-empty-content p {
  font-size: 1.2rem;
  color: #8d6e63;
  margin: 0.5rem 0;
  font-family: 'The Wanters DEMO', serif;
}
/* Inventory Loading State */
.inventory-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  grid-column: 1 / -1;
  width: 100%;
}
.inventory-loading h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #2c1810;
  margin-bottom: 1rem;
  font-family: 'The Wanters DEMO', serif;
}
.inventory-loading p {
  font-size: 1.2rem;
  color: #3e2723;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
}
/* Loading state: ring only, no panel */
.inventory-loading.inventory-loading-ring-only {
  padding: 2rem;
  background: transparent;
  border: none;
}
/* Inventory setup accordion: blank cream panel with loading ring (no text) */
.inventory-setup-loading-panel {
  background-color: #f5f5dc;
  border: 2px solid #8d6e63;
  border-radius: 12px;
  padding: 2rem;
  min-height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Content fade-in when loaded (1s) */
.inventory-content-fade-in {
  animation: inventory-content-fade-in 1s ease-out forwards;
}
@keyframes inventory-content-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Inventory Update Message */
.inventory-update-message {
  background-color: #27ae60;
  color: white;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  text-align: center;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  border: 2px solid #1e8449;
  animation: fadeInOut 5s ease-in-out forwards;
}
/* Inventory Search Bar */
.inventory-search-container {
  margin: 1rem 0;
  display: flex;
  justify-content: center;
  width: 100%;
}
.inventory-search-bar {
  position: relative;
  width: 100%;
  max-width: 500px;
  display: flex;
  align-items: center;
}
.inventory-search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #8B4513;
  border-radius: 25px;
  font-size: 1rem;
  font-family: 'The Wanters DEMO', serif;
  background-color: #f8f9fa;
  color: #3e2723;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.inventory-search-input:focus {
  border-color: #007bff;
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
  background-color: white;
}
/* Section-specific search bar focus colors */
.inventory-search-container.ingredients .inventory-search-input:focus {
  border-color: #007bff; /* Blue for ingredients */
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}
.inventory-search-container.packaging .inventory-search-input:focus {
  border-color: #28a745; /* Green for packaging */
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.2);
}
.inventory-search-container.appliances .inventory-search-input:focus {
  border-color: #8e44ad; /* Purple for appliances */
  box-shadow: 0 4px 8px rgba(142, 68, 173, 0.2);
}
.inventory-search-container.costs .inventory-search-input:focus {
  border-color: #ffc107; /* Gold for costs */
  box-shadow: 0 4px 8px rgba(255, 193, 7, 0.2);
}
.inventory-search-container.production-search .inventory-search-input:focus {
  border-color: #8b45d1; /* Purple for production/products */
  box-shadow: 0 4px 8px rgba(139, 69, 209, 0.2);
}
.inventory-search-input::placeholder {
  color: #8B4513;
  opacity: 0.7;
  font-style: normal;
}
.inventory-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: #8B4513;
  pointer-events: none;
}
/* Dark mode search bar */
.dark-mode .inventory-search-input {
  background-color: #2c3e50;
  color: #ecf0f1;
  border-color: #34495e;
}
.dark-mode .inventory-search-input:focus {
  background-color: #34495e;
  border-color: #007bff;
}
.dark-mode .inventory-search-input::placeholder {
  color: #bdc3c7;
  font-style: normal;
}
.dark-mode .inventory-search-icon {
  color: #bdc3c7;
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}
/* Breakdown View Styles */
.inventory-breakdown-section {
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  margin-top: 1rem;
}
.inventory-breakdown-header {
  background-color: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 2rem;
  text-align: center;
}
.inventory-breakdown-title {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  text-shadow: -1px -1px 0 #0a1a1d, 1px -1px 0 #0a1a1d, -1px 1px 0 #0a1a1d, 1px 1px 0 #0a1a1d;
}
.inventory-breakdown-subtitle {
  color: #ffffff;
  font-size: 1rem;
  margin: 0;
  opacity: 0.9;
}
.inventory-breakdown-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.inventory-breakdown-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.breakdown-stat-card {
  background-color: #f5f5dc;
  border: 2px solid #3e2723;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.breakdown-stat-card h3 {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}
.breakdown-stat-value {
  color: #14545c;
  font-family: 'The Wanters DEMO', serif;
  font-size: 2rem;
  font-weight: 900;
  display: block;
}
.inventory-breakdown-table h3 {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  text-align: center;
}
/* Ensure products-breakdown-table h3 matches - uses MainMenu.css but ensure consistency */
.products-breakdown-table h3 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin: 0 0 1rem 0 !important;
  text-align: center !important;
}
.breakdown-table-container {
  overflow-x: auto;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #ffffff;
}
.breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'The Wanters DEMO', serif;
}
.breakdown-table th {
  background-color: #14545c;
  color: #ffffff;
  padding: 1rem;
  text-align: left;
  font-weight: 700;
  font-size: 1.1rem;
  border-bottom: 2px solid #0a1a1d;
}
.breakdown-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #ddd;
  color: #3e2723;
  font-weight: 600;
}
.breakdown-table tr:hover {
  background-color: #f5f5f5;
}
.breakdown-table .low-stock {
  color: #e74c3c;
  font-weight: 900;
}
/* Dark mode styles */
.dark-mode .inventory-item {
  background-color: #1a1a1a;
  border: 3px solid #000000;
}
.dark-mode .inventory-item:hover {
  background-color: #1a1a1a;
  border-color: #000000;
}
.dark-mode .inventory-flavour-title-panel {
  background-color: #8d6e63;
  border: 3px solid #000000;
}
.dark-mode .inventory-item:hover .inventory-flavour-title-panel {
  background-color: #a1887f;
  border-color: #000000;
}
.dark-mode .inventory-flavour-title-panel h3 {
  color: #fff8e1;
}
.dark-mode .inventory-size-control-row {
  background-color: #8d6e63;
  border: 2px solid #000000;
}
.dark-mode .inventory-size-label {
  color: #fff8e1;
}
.dark-mode .inventory-quantity-display {
  background-color: #1a1a1a;
  border: 2px solid #8d6e63;
  color: #fff8e1;
}
.dark-mode .inventory-quantity-input {
  background-color: #1a1a1a;
  border: 2px solid #8d6e63;
  color: #fff8e1;
}
.dark-mode .inventory-quantity-input:focus {
  border-color: #27ae60;
  box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.2);
  background-color: #2c3e50;
}
.dark-mode .inventory-quantity-input:hover {
  border-color: #27ae60;
}
.dark-mode .inventory-price-row {
  background-color: rgba(62, 39, 35, 0.9);
  border-color: #8d6e63;
}
.dark-mode .inventory-price-input {
  background-color: #1a1a1a;
  border: 2px solid #8d6e63;
  color: #fff8e1;
}
.dark-mode .inventory-price-input:focus {
  border-color: #27ae60;
  box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.2);
  background-color: #2c3e50;
}
.dark-mode .inventory-price-input:hover {
  border-color: #27ae60;
}
.dark-mode .inventory-price-display {
  color: #fff8e1;
}
.dark-mode .inventory-empty-state {
  background-color: rgba(62, 39, 35, 0.9);
  border-color: #000000;
}
.dark-mode .inventory-empty-content h3 {
  color: #8d6e63;
}
.dark-mode .inventory-empty-content p {
  color: #a1887f;
}
.dark-mode .inventory-loading h3 {
  color: #fff8e1;
}
.dark-mode .inventory-loading p {
  color: #d7ccc8;
}
/* Dream mode loading styles */
.dream-mode .inventory-loading h3 {
  color: #2c1810;
}
.dream-mode .inventory-loading p {
  color: #3e2723;
}
.dark-mode .breakdown-table th {
  background-color: #8d6e63;
  border-color: #000000;
}
.dark-mode .breakdown-table td {
  color: #fff8e1;
}
.dark-mode .breakdown-table tr:hover {
  background-color: #2c3e50;
}
/* Responsive styles */
@media (max-width: 768px) {
  .inventory-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
    gap: 0.8rem;
  }
  
  .inventory-item {
    min-height: 200px;
    max-height: 240px;
  }
  
  .inventory-flavour-title-panel h3 {
    font-size: 1.2rem;
  }
  
  .inventory-breakdown-stats {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .inventory-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  
  .inventory-item {
    min-height: 180px;
    max-height: 220px;
  }
  
  .inventory-flavour-title-panel h3 {
    font-size: 1.1rem;
  }
}
/* Add Product Button */
/* Price Input Row - matching quantity section style */
.inventory-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem;
  background-color: rgba(245, 245, 220, 0.9);
  border: 2px solid #3e2723;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}
.inventory-price-input {
  font-weight: 700;
  color: #3e2723;
  font-family: 'Verdana', sans-serif;
  font-size: 1.1rem;
  padding: 0.2rem 0.4rem;
  background-color: #ffffff;
  border: 2px solid #8d6e63;
  border-radius: 4px;
  min-width: 60px;
  text-align: center;
  transition: all 0.3s ease;
}
.inventory-price-input:focus {
  outline: none;
  border-color: #14545c;
  box-shadow: 0 0 0 2px rgba(20, 84, 92, 0.2);
  background-color: #f8f9fa;
}
.inventory-price-input:hover {
  border-color: #14545c;
}
.inventory-price-display {
  font-family: 'Verdana', sans-serif;
  font-size: 1.1rem;
  color: #3e2723;
  font-weight: 700;
  min-width: 60px;
  text-align: center;
}
/* Remove Button Row */
.inventory-remove-row {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #5d4037;
}
/* New List-Based Design Styles */
/* Section Toggle Buttons */
.inventory-section-buttons {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.inventory-section-btn {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
  border: 3px solid #d35400;
  border-radius: 9999px;
  padding: 0.8rem 1.5rem !important;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  text-align: center;
  min-width: 120px;
  width: auto;
  max-width: 200px;
  flex: 0 0 auto;
}
.inventory-section-btn:hover {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
.inventory-section-btn.active {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
  border-color: #b8460a;
  box-shadow: 0 4px 12px rgba(230, 126, 34, 0.4);
}
.inventory-section-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
/* Warehouse button - teal */
.inventory-section-btn.warehouse-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border: 3px solid #0a1a1d;
}
.inventory-section-btn.warehouse-btn:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
.inventory-section-btn.warehouse-btn.active {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border-color: #0a1a1d;
  box-shadow: 0 4px 12px rgba(20, 84, 92, 0.4);
}
/* Ingredients button - purple */
.inventory-section-btn.ingredients-btn {
  background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
  border: 3px solid #7d3c98;
}
.inventory-section-btn.ingredients-btn:hover {
  background: linear-gradient(135deg, #7d3c98 0%, #8e44ad 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
.inventory-section-btn.ingredients-btn.active {
  background: linear-gradient(135deg, #7d3c98 0%, #8e44ad 100%);
  border-color: #6a2c93;
  box-shadow: 0 4px 12px rgba(142, 68, 173, 0.4);
}
/* Packaging button - dark green */
.inventory-section-btn.packaging-btn {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  border: 3px solid #229954;
}
.inventory-section-btn.packaging-btn:hover {
  background: linear-gradient(135deg, #229954 0%, #27ae60 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
.inventory-section-btn.packaging-btn.active {
  background: linear-gradient(135deg, #229954 0%, #27ae60 100%);
  border-color: #1e8449;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}
/* Section Action Buttons Container */
.inventory-section-action-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
/* Action Buttons Container */
.inventory-action-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
/* List Section Styles */
.inventory-list-section {
  width: 100%;
  margin-bottom: 2rem;
}
/* Sorting Controls */
.inventory-sorting-controls {
  background-color: #f5f5dc;
  border: 2px solid #3e2723;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}
.sort-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.sort-btn {
  background-color: #8d6e63;
  border: 2px solid #3e2723;
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  font-family: 'Verdana', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  width: auto;
  min-width: 60px;
  max-width: 80px;
}
.sort-btn:hover {
  background-color: #a1887f;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
.sort-btn.active {
  background-color: #14545c;
  border-color: #0a1a1d;
  box-shadow: 0 3px 8px rgba(20, 84, 92, 0.4);
}
/* List Container */
.inventory-list-container {
  background-color: #f5f5dc;
  border: 2px solid #3e2723;
  border-radius: 12px;
  padding: 1rem;
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* List Items - Responsive Grid Layout */
.inventory-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  width: 100%;
}
/* On very wide screens, show more items per row */
@media (min-width: 1024px) {
  .inventory-list {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}
/* On medium screens, show 2 items per row */
@media (min-width: 768px) and (max-width: 1199px) {
  .inventory-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* On mobile and tablet, show 2 items per row with center alignment */
@media (max-width: 1023px) {
  .inventory-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
}
/* On very narrow screens, still show 2 columns but with smaller gap */
@media (max-width: 400px) {
  .inventory-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }
  
  .inventory-list-item {
    padding: 0.6rem;
    min-height: 100px;
  }
  
  .item-name h3 {
    font-size: 1rem;
  }
}
/* Only on extremely narrow screens, show 1 item per row */
@media (max-width: 360px) {
  .inventory-list {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}
.inventory-list-item {
  background-color: #8d6e63;
  border: 2px solid #3e2723;
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  min-height: 120px;
}
/* On wider screens, keep vertical layout for buttons below content */
@media (min-width: 768px) {
  .inventory-list-item {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
  }
}
.inventory-list-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  background-color: #a1887f;
}
.list-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
  justify-content: center;
}
/* On wider screens, keep center alignment */
@media (min-width: 768px) {
  .list-item-content {
    text-align: center;
  }
}
.item-name h3 {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  text-shadow: -1px -1px 0 #3e2723, 1px -1px 0 #3e2723, -1px 1px 0 #3e2723, 1px 1px 0 #3e2723;
  text-align: center;
}
/* On wider screens, center align and make larger */
@media (min-width: 768px) {
  .item-name h3 {
    text-align: center;
    font-size: 1.8rem;
  }
}
/* On mobile, make titles larger for better visibility */
@media (max-width: 767px) {
  .item-name h3 {
    font-size: 1.6rem;
    text-align: center;
  }
}
.item-category {
  display: none;
}
.item-details {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
/* On wider screens, keep center alignment for price beneath title */
@media (min-width: 768px) {
  .item-details {
    justify-content: center;
  }
}
.item-cost-weight {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  width: 100%;
}
.item-cost, .item-weight, .item-quantity {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}
.detail-label {
  font-size: 0.7rem;
  color: #f5f5dc;
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.detail-value {
  font-size: 0.9rem;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  width: 100%;
}
.price-amount {
  font-size: 1.2rem;
  font-weight: 900;
  color: #ffffff;
}
.price-unit {
  font-size: 0.9rem;
  font-weight: 600;
  color: #f5f5dc;
}
/* Search Container */
.inventory-search-container {
  display: flex;
  justify-content: center;
  margin: 1rem 0 2rem 0;
  padding: 0 1rem;
}
.inventory-search-input {
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
}
/* Item Actions */
.item-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
  width: 100%;
}
/* On wider screens, keep buttons below price but center them */
@media (min-width: 768px) {
  .item-actions {
    justify-content: center;
    margin-top: 0.5rem;
  }
}
.inventory-edit-btn {
  background-color: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-family: 'Verdana', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  min-width: 80px;
  width: 80px;
  text-align: center;
}
.inventory-edit-btn:hover {
  background-color: #1a6b73;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
.inventory-remove-btn {
  background-color: #c0392b;
  border: 2px solid #8b0000;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-family: 'Verdana', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  min-width: 80px;
  width: 80px;
  text-align: center;
}
.inventory-remove-btn:hover {
  background-color: #e74c3c;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
/* Bulk Selection Styles */
.inventory-list-item.bulk-select-mode {
  cursor: pointer;
  transition: all 0.2s ease;
}
.inventory-list-item.bulk-select-mode:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.inventory-list-item.selected {
  background-color: #a1887f !important;
  border-color: #e74c3c !important;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.5) !important;
  animation: selectedPulse 0.5s ease-in-out, wiggle 0.3s ease-in-out infinite alternate;
}
.inventory-list-item.selected .item-name h3 {
  color: #ffffff;
}
@keyframes selectedPulse {
  0% {
    box-shadow: 0 0 0 0px rgba(231, 76, 60, 0.7);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.5);
  }
}
@keyframes wiggle {
  0% {
    transform: rotate(0.5deg);
  }
  100% {
    transform: rotate(-0.5deg);
  }
}
/* Bulk Action Buttons Container - In Sorting Area */
.bulk-action-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  width: 100%;
}
/* Bulk Action Buttons - Match section button style */
.bulk-cancel-btn {
  background-color: #3498db !important;
  border: 2px solid #2980b9 !important;
  border-radius: 9999px !important;
  color: #ffffff !important;
  padding: 0.8rem 1.5rem !important;
  font-family: 'The Wanters DEMO', serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  text-shadow: -1px -1px 0 #2980b9, 1px -1px 0 #2980b9, -1px 1px 0 #2980b9, 1px 1px 0 #2980b9 !important;
  min-width: 120px !important;
  max-width: 200px !important;
}
.bulk-cancel-btn:hover {
  background-color: #2980b9 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}
.bulk-delete-btn {
  background-color: #e74c3c !important;
  border: 2px solid #c0392b !important;
  border-radius: 9999px !important;
  color: #ffffff !important;
  padding: 0.8rem 1.5rem !important;
  font-family: 'The Wanters DEMO', serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  text-shadow: -1px -1px 0 #c0392b, 1px -1px 0 #c0392b, -1px 1px 0 #c0392b, 1px 1px 0 #c0392b !important;
  min-width: 120px !important;
  max-width: 200px !important;
}
.bulk-delete-btn:hover {
  background-color: #c0392b !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}
.bulk-delete-btn:disabled {
  background-color: #bdc3c7 !important;
  border-color: #95a5a6 !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  text-shadow: none !important;
}
/* Success Message Styling */
.inventory-success-message {
  background-color: #27ae60 !important;
  color: #ffffff !important;
  padding: 0.8rem 1.5rem !important;
  border-radius: 8px !important;
  margin-top: 1rem !important;
  text-align: center !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3) !important;
  animation: successSlideIn 0.3s ease-out !important;
}
@keyframes successSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Mobile Responsive Design */
@media (max-width: 768px) {
  .inventory-section-buttons {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  
  .bulk-action-buttons {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  
  .bulk-cancel-btn, .bulk-delete-btn {
    width: 100% !important;
    max-width: 180px !important;
  }
  
  .inventory-section-btn {
    width: auto;
    max-width: 180px;
    min-width: 140px;
    padding: 0.6rem 1.2rem !important;
    font-size: 1rem;
  }
  
  
  .inventory-list-item {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  
  .item-details {
    justify-content: center;
  }
  
  .item-actions {
    justify-content: center;
  }
  
  .sort-buttons {
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
  }
  
  .sort-btn {
    width: auto;
    min-width: 45px;
    max-width: 65px;
    font-size: 0.55rem;
    padding: 0.2rem 0.4rem;
  }
}
@media (max-width: 480px) {
  .inventory-section-buttons {
    gap: 0.3rem;
  }
  
  .inventory-section-btn {
    width: auto;
    max-width: 160px;
    min-width: 120px;
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem;
  }
  
  .inventory-list-container {
    padding: 0.5rem;
  }
  
  .inventory-list-item {
    padding: 0.8rem;
  }
  
  .item-details {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .item-cost, .item-weight, .item-quantity {
    min-width: auto;
  }
}
/* Very narrow screens - stack sorting buttons vertically */
@media (max-width: 300px) {
  .sort-buttons {
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
  }
  
  .sort-btn {
    width: 100%;
    max-width: 100px;
    font-size: 0.55rem;
    padding: 0.2rem 0.4rem;
  }
}
/* Edit Modal Styles */
.edit-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: modalFadeIn 0.3s ease-out;
}
.edit-modal {
  background-color: #f5f5dc;
  border: 3px solid #3e2723;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}
.edit-modal-header {
  background-color: #14545c;
  color: #ffffff;
  padding: 1rem 1.5rem;
  border-radius: 8px 8px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #0a1a1d;
}
.edit-modal-header h3 {
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.4rem;
  font-weight: 700;
  text-shadow: -1px -1px 0 #0a1a1d, 1px -1px 0 #0a1a1d, -1px 1px 0 #0a1a1d, 1px 1px 0 #0a1a1d;
}
.edit-modal-close {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}
.edit-modal-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}
.edit-modal-content {
  padding: 1.5rem;
}
.edit-form-group {
  margin-bottom: 1.5rem;
}
.edit-form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  color: #3e2723;
  font-size: 1rem;
}
.edit-form-input,
.edit-form-select,
.edit-form-textarea {
  width: 100%;
  padding: 0.8rem;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  font-family: 'Verdana', sans-serif;
  font-size: 1rem;
  background-color: #ffffff;
  color: #3e2723;
  transition: all 0.3s ease;
  box-sizing: border-box;
}
.edit-form-input:focus,
.edit-form-select:focus,
.edit-form-textarea:focus {
  outline: none;
  border-color: #14545c;
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.2);
  background-color: #f8f9fa;
}
.edit-form-textarea {
  resize: vertical;
  min-height: 80px;
}
.edit-modal-actions {
  padding: 1rem 1.5rem;
  border-top: 2px solid #3e2723;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  background-color: rgba(245, 245, 220, 0.9);
  border-radius: 0 0 8px 8px;
}
.edit-modal-cancel,
.edit-modal-save {
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid;
  min-width: 120px;
}
.edit-modal-cancel {
  background-color: #95a5a6;
  border-color: #7f8c8d;
  color: #ffffff;
}
.edit-modal-cancel:hover:not(:disabled) {
  background-color: #7f8c8d;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.edit-modal-save {
  background-color: #27ae60;
  border-color: #229954;
  color: #ffffff;
}
.edit-modal-save:hover:not(:disabled) {
  background-color: #229954;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(39, 174, 96, 0.3);
}
.edit-modal-cancel:disabled,
.edit-modal-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
/* Dark Mode Styles for List */
.dark-mode .inventory-sorting-controls {
  background-color: #2c2c2c;
  border-color: #000000;
}
.dark-mode .inventory-list-container {
  background-color: #2c2c2c;
  border-color: #000000;
}
.dark-mode .inventory-list-item {
  background-color: #1a1a1a;
  border-color: #000000;
}
.dark-mode .inventory-list-item:hover {
  background-color: #2c2c2c;
  border-color: #000000;
}
.dark-mode .item-name h3 {
  color: #fff8e1;
  text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
}
.dark-mode .detail-label {
  color: #b0b0b0;
}
.dark-mode .detail-value {
  color: #fff8e1;
}
/* Legacy Grid Styles - Keep for backward compatibility */
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  gap: 1rem;
  width: 100%;
  margin-bottom: 2rem;
  justify-items: center;
  align-items: start;
  justify-content: center;
}
.inventory-item {
  background-color: #8d6e63;
  border: 3px solid #3e2723;
  border-radius: 12px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-height: 140px;
  max-height: 180px;
}
/* Subscription Module Cards - Clean Professional Design */
.subscriptions-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
.subscription-module-card {
  background: linear-gradient(135deg, #f5f5dc 0%, #e8dcc6 100%);
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-height: 280px;
  position: relative;
}
.subscription-module-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border-color: #5d4037;
}
.subscription-module-header {
  text-align: center;
  border-bottom: 2px solid #8d6e63;
  padding-bottom: 0.8rem;
  margin-bottom: 0.5rem;
}
.subscription-module-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #3e2723;
  margin: 0 0 0.3rem 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.subscription-module-subtitle {
  font-size: 0.8rem;
  color: #5d4037;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.subscription-module-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.subscription-module-description {
  font-size: 0.9rem;
  color: #3e2723;
  line-height: 1.4;
  margin: 0;
  font-style: italic;
}
.subscription-module-stats {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: rgba(139, 110, 99, 0.1);
  padding: 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(139, 110, 99, 0.2);
}
.subscription-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0;
}
.subscription-stat-label {
  color: #3e2723;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  font-size: 0.85rem;
}
.subscription-stat-value {
  color: #1565C0;
  font-weight: 700;
  font-family: 'The Wanters DEMO', serif;
  font-size: 0.85rem;
}
.subscription-stat-value.active {
  color: #2e7d32;
  background: rgba(46, 125, 50, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-weight: 800;
}
.subscription-module-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  flex-wrap: wrap;
}
.subscription-action-btn {
  flex: 1;
  padding: 0.6rem 1rem;
  border: 2px solid;
  border-radius: 6px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 80px;
}
.subscription-action-btn.primary {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border-color: #0a1a1d;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.subscription-action-btn.primary:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.subscription-action-btn.secondary {
  background: linear-gradient(135deg, #8d6e63 0%, #5d4037 100%);
  border-color: #3e2723;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.subscription-action-btn.secondary:hover {
  background: linear-gradient(135deg, #5d4037 0%, #8d6e63 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.subscription-action-btn.tertiary {
  background: linear-gradient(135deg, #f5f5dc 0%, #e8dcc6 100%);
  border-color: #8d6e63;
  color: #3e2723;
}
.subscription-action-btn.tertiary:hover {
  background: linear-gradient(135deg, #e8dcc6 0%, #f5f5dc 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Dark Mode Styles for Subscription Cards */
.dark-mode .subscription-module-card {
  background: linear-gradient(135deg, #8d6e63 0%, #5d4037 100%);
  border-color: #3e2723;
}
.dark-mode .subscription-module-card:hover {
  border-color: #1a0d0d;
}
.dark-mode .subscription-module-title {
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
.dark-mode .subscription-module-subtitle {
  color: #e8dcc6;
}
.dark-mode .subscription-module-description {
  color: #ffffff;
}
.dark-mode .subscription-module-stats {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
}
.dark-mode .subscription-stat-label {
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
.dark-mode .subscription-stat-value {
  color: #90caf9;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
.dark-mode .subscription-stat-value.active {
  color: #81c784;
  background: rgba(46, 125, 50, 0.3);
}
.dark-mode .subscription-module-header {
  border-bottom-color: #ffffff;
  opacity: 0.7;
}
.dark-mode .subscription-action-btn.tertiary {
  background: linear-gradient(135deg, #5d4037 0%, #3e2723 100%);
  border-color: #1a0d0d;
  color: #ffffff;
}
.dark-mode .subscription-action-btn.tertiary:hover {
  background: linear-gradient(135deg, #3e2723 0%, #5d4037 100%);
}
/* Dream Mode Styles for Subscription Cards */
.dream-mode .subscription-module-card {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(240, 240, 240, 0.95) 100%
  );
  border: 3px solid #000000;
  box-shadow: 0 8px 25px rgba(26, 13, 35, 0.4), 0 0 40px rgba(45, 20, 60, 0.3);
}
.dream-mode .subscription-module-card:hover {
  box-shadow: 0 10px 30px rgba(26, 13, 35, 0.5), 0 0 50px rgba(45, 20, 60, 0.4);
  border-color: #2d143c;
}
.dream-mode .subscription-module-title {
  color: #1a0d23 !important;
  text-shadow: none !important;
}
.dream-mode .subscription-module-subtitle {
  color: #2d143c;
}
.dream-mode .subscription-module-description {
  color: #1a0d23;
}
.dream-mode .subscription-module-stats {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.2);
}
.dream-mode .subscription-stat-label {
  color: #1a0d23 !important;
  text-shadow: none !important;
}
.dream-mode .subscription-stat-value {
  color: #3c1e50 !important;
  text-shadow: none !important;
}
.dream-mode .subscription-stat-value.active {
  color: #2e7d32 !important;
  background: rgba(22, 163, 74, 0.15);
  font-weight: 900 !important;
}
.dream-mode .subscription-module-header {
  border-bottom-color: #2d143c;
  opacity: 0.7;
}
.dream-mode .subscription-action-btn.tertiary {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.9) 0%, 
    rgba(240, 240, 240, 0.9) 100%
  );
  border-color: #2d143c;
  color: #1a0d23;
}
.dream-mode .subscription-action-btn.tertiary:hover {
  background: linear-gradient(135deg, 
    rgba(240, 240, 240, 0.95) 0%, 
    rgba(255, 255, 255, 0.95) 100%
  );
}
/* Responsive Design for Subscription Cards */
@media (max-width: 768px) {
  .subscriptions-module-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    padding: 0.5rem;
  }
  
  .subscription-module-card {
    padding: 1rem;
    min-height: 260px;
  }
  
  .subscription-module-title {
    font-size: 1.2rem;
  }
  
  .subscription-module-description {
    font-size: 0.8rem;
  }
  
  .subscription-module-actions {
    flex-direction: column;
  }
  
  .subscription-action-btn {
    font-size: 0.75rem;
    padding: 0.5rem 0.8rem;
  }
}
@media (max-width: 480px) {
  .subscriptions-module-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  
  .subscription-module-card {
    padding: 0.8rem;
    min-height: 240px;
  }
  
  .subscription-module-title {
    font-size: 1.1rem;
  }
  
  .subscription-module-description {
    font-size: 0.75rem;
  }
  
  .subscription-stat-label,
  .subscription-stat-value {
    font-size: 0.75rem;
  }
}/* Warning Message Styles */
.admin-warning-message {
  margin: 1.5rem auto;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  border: 2px solid #d32f2f;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.2);
  animation: fadeIn 0.3s ease-in;
  text-align: center;
  max-width: 800px;
}

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

.admin-warning-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.admin-warning-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.admin-warning-text {
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  color: #c62828;
  line-height: 1.5;
  text-align: center;
  width: 100%;
}

.admin-warning-understand-btn {
  padding: 0.6rem 1.5rem;
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  color: #ffffff;
  border: 2px solid #b71c1c;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(211, 47, 47, 0.3);
  margin-top: 0.5rem;
  align-self: center;
}

.admin-warning-understand-btn:hover {
  background: linear-gradient(135deg, #b71c1c 0%, #d32f2f 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.4);
}

.admin-warning-understand-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(211, 47, 47, 0.3);
}

/* Dark mode styles for warning message */
.dark-mode .admin-warning-message {
  background: linear-gradient(135deg, #4a1f1f 0%, #6b2c2c 100%);
  border-color: #d32f2f;
}

.dark-mode .admin-warning-text {
  color: #ffcdd2;
}

.dark-mode .admin-warning-understand-btn {
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  color: #ffffff;
  border-color: #b71c1c;
}

.dark-mode .admin-warning-understand-btn:hover {
  background: linear-gradient(135deg, #b71c1c 0%, #d32f2f 100%);
  color: #ffffff;
}

/* Dream mode styles for warning message */
.dream-mode .admin-warning-message {
  background: linear-gradient(135deg, rgba(211, 47, 47, 0.2) 0%, rgba(183, 28, 28, 0.3) 100%);
  border-color: #d32f2f;
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3), 0 0 20px rgba(211, 47, 47, 0.2);
}

.dream-mode .admin-warning-text {
  color: #ffcdd2;
  text-shadow: 0 0 10px rgba(211, 47, 47, 0.5);
}

.dream-mode .admin-warning-understand-btn {
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  color: #ffffff;
  border-color: #b71c1c;
  box-shadow: 0 2px 8px rgba(211, 47, 47, 0.4), 0 0 15px rgba(211, 47, 47, 0.3);
}

.dream-mode .admin-warning-understand-btn:hover {
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.5), 0 0 25px rgba(211, 47, 47, 0.4);
}

/* Refresh Button for Troubleshooting (Loyalty Management Only) */
.admin-warning-refresh-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  border: 2px solid #b71c1c;
  color: #ffffff;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(211, 47, 47, 0.3);
}

.admin-warning-refresh-btn:hover {
  background: linear-gradient(135deg, #b71c1c 0%, #d32f2f 100%);
  transform: translateY(-2px) rotate(180deg);
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.4);
}

.admin-warning-refresh-btn:active {
  transform: translateY(0) rotate(180deg);
  box-shadow: 0 2px 6px rgba(211, 47, 47, 0.3);
}

/* Responsive styles for warning message */
@media (max-width: 768px) {
  .admin-warning-content {
    gap: 0.75rem;
  }
  
  .admin-warning-icon {
    font-size: 1.75rem;
  }
  
  .admin-warning-text {
    font-size: 0.95rem;
  }
  
  .admin-warning-understand-btn {
    width: 100%;
    max-width: 200px;
  }
}

/* ===============================================================================
                                COOK PAGE STYLING
=============================================================================== */

/* Import PoolOverview styles for tab buttons */

/* Pool View Toggle Buttons */

.pool-view-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.25rem;
  background: #ffffff;
  border: 2px solid #3e2723;
  border-radius: 25px;
  padding: 0.5rem;
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
}

/* Ensure all buttons in the button bar have consistent sizing on all screen sizes */

.pool-view-buttons .pool-view-btn.setup-btn,
.pool-view-buttons .pool-view-btn.customer-details-btn,
.pool-view-buttons .pool-view-btn.loyalty-btn,
.pool-view-buttons .pool-view-btn.achievements-btn,
.pool-view-buttons .pool-view-btn.promo-codes-btn,
.pool-view-buttons .pool-view-btn.costs-btn,
.pool-view-buttons .pool-view-btn.products-btn,
.pool-view-buttons .pool-view-btn.business-btn,
.pool-view-buttons .pool-view-btn.items-tab,
.pool-view-buttons .pool-view-btn.levels-btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 120px;
  box-sizing: border-box;
  height: auto;
  min-height: auto;
  padding: 0.75rem 1.5rem;
  line-height: 1.5;
  font-size: 1rem;
  text-align: center;
  border-radius: 9999px !important;
}

/* Inventory Management buttons - same styling as loyalty management buttons */

.pool-view-buttons .pool-view-btn.setup-btn,
.pool-view-buttons .pool-view-btn.breakdown-tab,
.pool-view-buttons .pool-view-btn.ingredients-btn,
.pool-view-buttons .pool-view-btn.warehouse-btn,
.pool-view-buttons .pool-view-btn.packaging-btn,
.pool-view-buttons .pool-view-btn.appliances-btn,
.pool-view-buttons .pool-view-btn.costs-btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 120px;
  box-sizing: border-box;
  height: auto;
  min-height: auto;
  padding: 0.75rem 1.5rem;
  line-height: 1.5;
  font-size: 1rem;
  text-align: center;
  border-radius: 25px !important;
}

/* Products Management buttons - same styling as loyalty management buttons */

.pool-view-buttons .pool-view-btn.setup-btn,
.pool-view-buttons .pool-view-btn.inventory-tab,
.pool-view-buttons .pool-view-btn.items-tab,
.pool-view-buttons .pool-view-btn.products-tab,
.pool-view-buttons .pool-view-btn.packs-tab,
.pool-view-buttons .pool-view-btn.batch-tab {
  flex: 0 0 auto;
  width: auto;
  min-width: 120px;
  box-sizing: border-box;
  height: auto;
  min-height: auto;
  padding: 0.75rem 1.5rem;
  line-height: 1.5;
  font-size: 1rem;
  text-align: center;
  border-radius: 9999px !important;
}

/* Business Management buttons - same styling as loyalty management buttons */

.pool-view-buttons .pool-view-btn.setup-btn,
.pool-view-buttons .pool-view-btn.admin-analytics-tab,
.pool-view-buttons .pool-view-btn.admin-profile-tab,
.pool-view-buttons .pool-view-btn.admin-management-tab,
.pool-view-buttons .pool-view-btn.admin-customers-tab,
.pool-view-buttons .pool-view-btn.admin-orders-tab,
.pool-view-buttons .pool-view-btn.admin-subscriptions-tab,
.pool-view-buttons .pool-view-btn.admin-contact-tab,
.pool-view-buttons .pool-view-btn.admin-admin-tab,
.pool-view-buttons .pool-view-btn.admin-staff-tab {
  flex: 0 0 auto;
  width: auto;
  min-width: 120px;
  box-sizing: border-box;
  height: auto;
  min-height: auto;
  padding: 0.75rem 1.5rem;
  line-height: 1.5;
  font-size: 1rem;
  text-align: center;
  border-radius: 25px !important;
}

/* Medium screens - ensure consistent font-size */

@media (min-width: 768px) and (max-width: 1023px) {
  .pool-view-buttons .pool-view-btn.customer-details-btn,
  .pool-view-buttons .pool-view-btn.loyalty-btn,
  .pool-view-buttons .pool-view-btn.achievements-btn,
  .pool-view-buttons .pool-view-btn.promo-codes-btn,
  .pool-view-buttons .pool-view-btn.costs-btn,
  .pool-view-buttons .pool-view-btn.products-btn,
  .pool-view-buttons .pool-view-btn.business-btn,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.levels-btn {
    font-size: 1rem !important;
    padding: 0.75rem 1.5rem;
    min-width: 130px;
    height: auto;
    line-height: 1.5;
    border-radius: 9999px !important;
  }
  
  /* Inventory Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.breakdown-tab,
  .pool-view-buttons .pool-view-btn.ingredients-btn,
  .pool-view-buttons .pool-view-btn.packaging-btn,
  .pool-view-buttons .pool-view-btn.appliances-btn,
  .pool-view-buttons .pool-view-btn.costs-btn {
    font-size: 1rem !important;
    padding: 0.75rem 1.5rem;
    min-width: 130px;
    height: auto;
    line-height: 1.5;
    border-radius: 25px !important;
  }
  
  /* Products Management buttons */
  .pool-view-buttons .pool-view-btn.inventory-tab,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.products-tab,
  .pool-view-buttons .pool-view-btn.packs-tab,
  .pool-view-buttons .pool-view-btn.batch-tab,
  .pool-view-buttons .pool-view-btn.products-btn,
  .pool-view-buttons .pool-view-btn.business-btn,
  .pool-view-buttons .pool-view-btn.levels-btn {
    font-size: 1rem !important;
    padding: 0.75rem 1.5rem;
    min-width: 130px;
    height: auto;
    line-height: 1.5;
    border-radius: 9999px !important;
  }
  
  /* Business Management buttons */
  .pool-view-buttons .pool-view-btn.admin-analytics-tab,
  .pool-view-buttons .pool-view-btn.admin-profile-tab,
  .pool-view-buttons .pool-view-btn.admin-management-tab,
  .pool-view-buttons .pool-view-btn.admin-customers-tab,
  .pool-view-buttons .pool-view-btn.admin-orders-tab,
  .pool-view-buttons .pool-view-btn.admin-subscriptions-tab,
  .pool-view-buttons .pool-view-btn.admin-contact-tab,
  .pool-view-buttons .pool-view-btn.admin-admin-tab,
  .pool-view-buttons .pool-view-btn.admin-staff-tab {
    font-size: 1rem !important;
    padding: 0.75rem 1.5rem;
    min-width: 130px;
    height: auto;
    line-height: 1.5;
    border-radius: 25px !important;
  }
}

/* On wider screens, ensure all buttons have the same width and height */

@media (min-width: 1024px) {
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.customer-details-btn,
  .pool-view-buttons .pool-view-btn.loyalty-btn,
  .pool-view-buttons .pool-view-btn.achievements-btn,
  .pool-view-buttons .pool-view-btn.promo-codes-btn,
  .pool-view-buttons .pool-view-btn.costs-btn,
  .pool-view-buttons .pool-view-btn.products-btn,
  .pool-view-buttons .pool-view-btn.business-btn,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.levels-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 140px;
    max-width: none;
    font-size: 1rem !important;
    text-align: center;
    padding: 0.75rem 1.5rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    border-radius: 25px !important;
  }
  
  /* Inventory Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.breakdown-tab,
  .pool-view-buttons .pool-view-btn.ingredients-btn,
  .pool-view-buttons .pool-view-btn.warehouse-btn,
  .pool-view-buttons .pool-view-btn.packaging-btn,
  .pool-view-buttons .pool-view-btn.appliances-btn,
  .pool-view-buttons .pool-view-btn.costs-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 140px;
    max-width: none;
    font-size: 1rem !important;
    text-align: center;
    padding: 0.75rem 1.5rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    border-radius: 25px !important;
  }
  
  /* Products Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.inventory-tab,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.products-tab,
  .pool-view-buttons .pool-view-btn.packs-tab,
  .pool-view-buttons .pool-view-btn.batch-tab {
    flex: 0 0 auto;
    width: auto;
    min-width: 140px;
    max-width: none;
    font-size: 1rem !important;
    text-align: center;
    padding: 0.75rem 1.5rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    border-radius: 25px !important;
  }
  
  /* Business Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.admin-analytics-tab,
  .pool-view-buttons .pool-view-btn.admin-profile-tab,
  .pool-view-buttons .pool-view-btn.admin-management-tab,
  .pool-view-buttons .pool-view-btn.admin-customers-tab,
  .pool-view-buttons .pool-view-btn.admin-orders-tab,
  .pool-view-buttons .pool-view-btn.admin-subscriptions-tab,
  .pool-view-buttons .pool-view-btn.admin-contact-tab,
  .pool-view-buttons .pool-view-btn.admin-admin-tab,
  .pool-view-buttons .pool-view-btn.admin-staff-tab {
    flex: 0 0 auto;
    width: auto;
    min-width: 140px;
    max-width: none;
    font-size: 1rem !important;
    text-align: center;
    padding: 0.75rem 1.5rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    border-radius: 25px !important;
  }
}

/* On very wide screens, set a consistent width and height for all buttons */

@media (min-width: 1200px) {
  .pool-view-buttons {
    justify-content: center;
  }
  
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.customer-details-btn,
  .pool-view-buttons .pool-view-btn.loyalty-btn,
  .pool-view-buttons .pool-view-btn.achievements-btn,
  .pool-view-buttons .pool-view-btn.promo-codes-btn,
  .pool-view-buttons .pool-view-btn.costs-btn,
  .pool-view-buttons .pool-view-btn.products-btn,
  .pool-view-buttons .pool-view-btn.business-btn,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.levels-btn {
    flex: 0 0 auto;
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    font-size: 1rem !important;
    text-align: center;
    padding: 0.75rem 1.5rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    border-radius: 9999px !important;
  }
  
  /* Inventory Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.breakdown-tab,
  .pool-view-buttons .pool-view-btn.ingredients-btn,
  .pool-view-buttons .pool-view-btn.warehouse-btn,
  .pool-view-buttons .pool-view-btn.packaging-btn,
  .pool-view-buttons .pool-view-btn.appliances-btn,
  .pool-view-buttons .pool-view-btn.costs-btn {
    flex: 0 0 auto;
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    font-size: 1rem !important;
    text-align: center;
    padding: 0.75rem 1.5rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    border-radius: 25px !important;
  }
  
  /* Products Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.inventory-tab,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.products-tab,
  .pool-view-buttons .pool-view-btn.packs-tab,
  .pool-view-buttons .pool-view-btn.batch-tab,
  .pool-view-buttons .pool-view-btn.products-btn,
  .pool-view-buttons .pool-view-btn.business-btn,
  .pool-view-buttons .pool-view-btn.levels-btn {
    flex: 0 0 auto;
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    font-size: 1rem !important;
    text-align: center;
    padding: 0.75rem 1.5rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    border-radius: 9999px !important;
  }
  
  /* Business Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.admin-analytics-tab,
  .pool-view-buttons .pool-view-btn.admin-profile-tab,
  .pool-view-buttons .pool-view-btn.admin-management-tab,
  .pool-view-buttons .pool-view-btn.admin-customers-tab,
  .pool-view-buttons .pool-view-btn.admin-orders-tab,
  .pool-view-buttons .pool-view-btn.admin-subscriptions-tab,
  .pool-view-buttons .pool-view-btn.admin-contact-tab,
  .pool-view-buttons .pool-view-btn.admin-admin-tab,
  .pool-view-buttons .pool-view-btn.admin-staff-tab {
    flex: 0 0 auto;
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    font-size: 1rem !important;
    text-align: center;
    padding: 0.75rem 1.5rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    border-radius: 25px !important;
  }
}

/* Narrow screens - wrap buttons to multiple rows, make them compact but uniform size */

@media (max-width: 767px) {
  .pool-view-buttons {
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.customer-details-btn,
  .pool-view-buttons .pool-view-btn.loyalty-btn,
  .pool-view-buttons .pool-view-btn.achievements-btn,
  .pool-view-buttons .pool-view-btn.promo-codes-btn,
  .pool-view-buttons .pool-view-btn.costs-btn,
  .pool-view-buttons .pool-view-btn.products-btn,
  .pool-view-buttons .pool-view-btn.business-btn,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.levels-btn {
    flex: 0 0 auto;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    font-size: 0.95rem !important;
    padding: 0.65rem 1rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    text-align: center;
    border-radius: 9999px !important;
  }
  
  /* Inventory Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.breakdown-tab,
  .pool-view-buttons .pool-view-btn.ingredients-btn,
  .pool-view-buttons .pool-view-btn.warehouse-btn,
  .pool-view-buttons .pool-view-btn.packaging-btn,
  .pool-view-buttons .pool-view-btn.appliances-btn,
  .pool-view-buttons .pool-view-btn.costs-btn {
    flex: 0 0 auto;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    font-size: 0.95rem !important;
    padding: 0.65rem 1rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    text-align: center;
    border-radius: 25px !important;
  }
  
  /* Products Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.inventory-tab,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.products-tab,
  .pool-view-buttons .pool-view-btn.packs-tab,
  .pool-view-buttons .pool-view-btn.batch-tab,
  .pool-view-buttons .pool-view-btn.products-btn,
  .pool-view-buttons .pool-view-btn.business-btn,
  .pool-view-buttons .pool-view-btn.levels-btn {
    flex: 0 0 auto;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    font-size: 0.95rem !important;
    padding: 0.65rem 1rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    text-align: center;
    border-radius: 9999px !important;
  }
  
  /* Business Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.admin-analytics-tab,
  .pool-view-buttons .pool-view-btn.admin-profile-tab,
  .pool-view-buttons .pool-view-btn.admin-management-tab,
  .pool-view-buttons .pool-view-btn.admin-customers-tab,
  .pool-view-buttons .pool-view-btn.admin-orders-tab,
  .pool-view-buttons .pool-view-btn.admin-subscriptions-tab,
  .pool-view-buttons .pool-view-btn.admin-contact-tab,
  .pool-view-buttons .pool-view-btn.admin-admin-tab,
  .pool-view-buttons .pool-view-btn.admin-staff-tab {
    flex: 0 0 auto;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    font-size: 0.95rem !important;
    padding: 0.65rem 1rem;
    height: auto;
    min-height: auto;
    line-height: 1.5;
    text-align: center;
    border-radius: 25px !important;
  }
}

/* Very narrow screens - make buttons compact but still uniform */

@media (max-width: 480px) {
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.customer-details-btn,
  .pool-view-buttons .pool-view-btn.loyalty-btn,
  .pool-view-buttons .pool-view-btn.achievements-btn,
  .pool-view-buttons .pool-view-btn.promo-codes-btn,
  .pool-view-buttons .pool-view-btn.costs-btn,
  .pool-view-buttons .pool-view-btn.products-btn,
  .pool-view-buttons .pool-view-btn.business-btn,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.levels-btn {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    font-size: 0.85rem !important;
    padding: 0.6rem 0.8rem;
    border-radius: 9999px !important;
  }
  
  /* Inventory Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.breakdown-tab,
  .pool-view-buttons .pool-view-btn.ingredients-btn,
  .pool-view-buttons .pool-view-btn.warehouse-btn,
  .pool-view-buttons .pool-view-btn.packaging-btn,
  .pool-view-buttons .pool-view-btn.appliances-btn,
  .pool-view-buttons .pool-view-btn.costs-btn {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    font-size: 0.85rem !important;
    padding: 0.6rem 0.8rem;
  }
  
  /* Products Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.inventory-tab,
  .pool-view-buttons .pool-view-btn.items-tab,
  .pool-view-buttons .pool-view-btn.products-tab,
  .pool-view-buttons .pool-view-btn.packs-tab,
  .pool-view-buttons .pool-view-btn.batch-tab,
  .pool-view-buttons .pool-view-btn.products-btn,
  .pool-view-buttons .pool-view-btn.business-btn,
  .pool-view-buttons .pool-view-btn.levels-btn {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    font-size: 0.85rem !important;
    padding: 0.6rem 0.8rem;
    border-radius: 9999px !important;
  }
  
  /* Business Management buttons */
  .pool-view-buttons .pool-view-btn.setup-btn,
  .pool-view-buttons .pool-view-btn.admin-analytics-tab,
  .pool-view-buttons .pool-view-btn.admin-profile-tab,
  .pool-view-buttons .pool-view-btn.admin-management-tab,
  .pool-view-buttons .pool-view-btn.admin-customers-tab,
  .pool-view-buttons .pool-view-btn.admin-orders-tab,
  .pool-view-buttons .pool-view-btn.admin-subscriptions-tab,
  .pool-view-buttons .pool-view-btn.admin-contact-tab,
  .pool-view-buttons .pool-view-btn.admin-admin-tab,
  .pool-view-buttons .pool-view-btn.admin-staff-tab {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    font-size: 0.85rem !important;
    padding: 0.6rem 0.8rem;
  }
}

.pool-view-btn {
  background: transparent;
  color: #5d4037;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  min-width: 120px;
  flex: 0 0 auto;
  white-space: nowrap;
  opacity: 0.6;
  position: relative;
  z-index: 10;
  height: auto;
  min-height: auto;
  line-height: 1.5;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pool-view-btn:hover:not(:disabled) {
  background: rgba(93, 64, 55, 0.1);
  color: #3e2723;
}

/* Management and Overview buttons - styled like admin dashboard buttons */

.pool-view-btn.management-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%) !important;
  border: 3px solid #36034d !important;
  color: white !important;
  opacity: 0.6 !important;
}

.pool-view-btn.management-btn:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.management-btn.active {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  border-color: #2d0a3d !important;
  box-shadow: 0 4px 12px rgba(87, 5, 138, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.overview-btn {
  background: #696969 !important;
  border: 3px solid #2f2f2f !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.overview-btn:hover {
  background: #808080 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.overview-btn.active {
  background: #696969 !important;
  border-color: #1a1a1a !important;
  box-shadow: 0 4px 12px rgba(105, 105, 105, 0.4);
  opacity: 1 !important;
}

/* Businesses and Customers buttons - styled like admin dashboard buttons */

.pool-view-btn.businesses-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%) !important;
  border: 3px solid #0a1a1d !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.businesses-btn:hover {
  background: linear-gradient(135deg, #0e3a40 0%, #14545c 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.businesses-btn.active {
  background: linear-gradient(135deg, #0e3a40 0%, #14545c 100%) !important;
  border-color: #06292b !important;
  box-shadow: 0 4px 12px rgba(20, 84, 92, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.customers-btn {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%) !important;
  border: 3px solid #1b5e20 !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.customers-btn:hover {
  background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.customers-btn.active {
  background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%) !important;
  border-color: #155724 !important;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.fired-staff-btn {
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%) !important;
  border: 3px solid #8b0000 !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.fired-staff-btn:hover {
  background: linear-gradient(135deg, #b71c1c 0%, #d32f2f 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.fired-staff-btn.active {
  background: linear-gradient(135deg, #b71c1c 0%, #d32f2f 100%) !important;
  border-color: #8b0000 !important;
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.4);
  opacity: 1 !important;
}

/* Business Profile Page Button Styles */

.pool-view-btn.profile-btn {
  background: #696969 !important;
  border: 3px solid #2f2f2f !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.profile-btn:hover {
  background: #808080 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.profile-btn.active {
  background: #808080 !important;
  border-color: #1a1a1a !important;
  box-shadow: 0 4px 12px rgba(105, 105, 105, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.manage-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%) !important;
  border: 3px solid #36034d !important;
  color: white !important;
  opacity: 0.6 !important;
}

.pool-view-btn.manage-btn:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.manage-btn.active {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  border-color: #2d0a3d !important;
  box-shadow: 0 4px 12px rgba(87, 5, 138, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.admin-btn {
  background: #007bff !important;
  border: 3px solid #004085 !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.admin-btn:hover {
  background: #0056b3 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.admin-btn.active {
  background: #0056b3 !important;
  border-color: #003d82 !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.staff-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%) !important;
  border: 3px solid #36034d !important;
  color: white !important;
  opacity: 0.6 !important;
}

.pool-view-btn.staff-btn:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.staff-btn.active {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  border-color: #36034d !important;
  box-shadow: 0 4px 12px rgba(87, 5, 138, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.customers-btn {
  background: #28a745 !important;
  border: 3px solid #155724 !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.customers-btn:hover {
  background: #1e7e34 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(40, 167, 69, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.customers-btn.active {
  background: #1e7e34 !important;
  border-color: #155724 !important;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
  opacity: 1 !important;
}

/* Setup button - Pink */

.pool-view-btn.setup-btn {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
  border: 3px solid #be185d !important;
  color: white !important;
  opacity: 1 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.setup-btn:hover {
  background: linear-gradient(135deg, #db2777 0%, #ec4899 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(236, 72, 153, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.setup-btn.active {
  background: linear-gradient(135deg, #db2777 0%, #ec4899 100%) !important;
  border-color: #9f1239 !important;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.5);
  opacity: 1 !important;
}

.pool-view-btn.message-btn {
  background: #007bff !important;
  border: 3px solid #004085 !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.message-btn:hover {
  background: #0056b3 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.message-btn.active {
  background: #0056b3 !important;
  border-color: #003d82 !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
  opacity: 1 !important;
}

/* General active state - only applies when no specific button class is present */

.pool-view-btn.active:not(.products-tab):not(.breakdown-tab):not(.items-tab):not(.inventory-tab):not(.packs-tab):not(.batch-tab):not(.ingredients-btn):not(.packaging-btn):not(.warehouse-btn):not(.costs-btn):not(.appliances-btn):not(.customer-details-btn):not(.promo-codes-btn):not(.loyalty-btn):not(.admin-analytics-tab):not(.admin-management-tab):not(.admin-admin-tab):not(.admin-staff-tab):not(.admin-qr-tab):not(.admin-subscriptions-tab):not(.admin-contact-tab):not(.admin-customers-tab):not(.admin-orders-tab) {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  opacity: 1;
}

/* General active hover state - only applies when no specific button class is present */

.pool-view-btn.active:hover:not(.products-tab):not(.breakdown-tab):not(.items-tab):not(.inventory-tab):not(.packs-tab):not(.batch-tab):not(.ingredients-btn):not(.packaging-btn):not(.warehouse-btn):not(.costs-btn):not(.appliances-btn):not(.customer-details-btn):not(.promo-codes-btn):not(.loyalty-btn):not(.admin-analytics-tab):not(.admin-management-tab):not(.admin-admin-tab):not(.admin-staff-tab):not(.admin-qr-tab):not(.admin-subscriptions-tab):not(.admin-contact-tab):not(.admin-customers-tab):not(.admin-orders-tab):not(.business-profile-btn):not(.business-btn):not(.products-btn):not(.achievements-btn):not(.current-business-btn):not(.all-carts-btn):not(.business-cart-btn) {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Products button - orange (like Costs) */

/* Products button - Purple (matching admin-products-btn) */

.pool-view-btn.products-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%) !important;
  border: 3px solid #36034d !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.products-btn:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4);
  opacity: 0.8 !important;
  color: #3e2723 !important;
}

.pool-view-btn.products-btn.active {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%) !important;
  border-color: #36034d !important;
  box-shadow: 0 6px 16px rgba(87, 5, 138, 0.4);
  opacity: 1 !important;
}

/* Business button - teal (like Warehouse) */

.pool-view-btn.business-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%) !important;
  border: 3px solid #0a1a1d !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.business-btn:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.business-btn.active {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%) !important;
  border-color: #0a1a1d !important;
  box-shadow: 0 4px 12px rgba(20, 84, 92, 0.4);
  opacity: 1 !important;
}

/* Loyalty button - green by default (other pages) */

.pool-view-btn.loyalty-btn {
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%) !important;
  border: 2px solid #2e7d32 !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.loyalty-btn:hover {
  background: linear-gradient(135deg, #388e3c 0%, #4caf50 100%) !important;
  border: 2px solid #2e7d32 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4);
  opacity: 0.8 !important;
  color: #3e2723 !important;
}

.pool-view-btn.loyalty-btn.active {
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%) !important;
  border: 2px solid #2e7d32 !important;
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4), inset 0 0 8px rgba(76, 175, 80, 0.2);
  opacity: 1 !important;
  transform: scale(1.02);
}

.pool-view-btn.loyalty-btn.active:hover {
  background: linear-gradient(135deg, #388e3c 0%, #4caf50 100%) !important;
  border: 2px solid #2e7d32 !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.5);
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Loyalty Management page: Loyalty button uses Inventory blue (same as Admin Dashboard Inventory button) */

.loyalty-management-tabs .pool-view-btn.loyalty-btn {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%) !important;
  border: 2px solid #0a5d7a !important;
  color: #fff !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 8px rgba(16, 142, 188, 0.3);
}

.loyalty-management-tabs .pool-view-btn.loyalty-btn:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%) !important;
  border: 2px solid #0a5d7a !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
  opacity: 0.8 !important;
  color: #3e2723 !important;
}

.loyalty-management-tabs .pool-view-btn.loyalty-btn.active {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%) !important;
  border: 2px solid #0a5d7a !important;
  box-shadow: 0 6px 16px rgba(16, 142, 188, 0.4), inset 0 0 8px rgba(16, 142, 188, 0.2);
  opacity: 1 !important;
  transform: scale(1.02);
}

.loyalty-management-tabs .pool-view-btn.loyalty-btn.active:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%) !important;
  border: 2px solid #0a5d7a !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(16, 142, 188, 0.5);
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Achievements button - purple */

.pool-view-btn.achievements-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%) !important;
  border: 2px solid #36034d !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.achievements-btn:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  border: 2px solid #36034d !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4);
  opacity: 0.8 !important;
  color: #3e2723 !important;
}

.pool-view-btn.achievements-btn.active {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%) !important;
  border: 2px solid #36034d !important;
  box-shadow: 0 6px 16px rgba(87, 5, 138, 0.4), inset 0 0 8px rgba(87, 5, 138, 0.2);
  opacity: 1 !important;
  transform: scale(1.02);
}

.pool-view-btn.achievements-btn.active:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%) !important;
  border: 2px solid #36034d !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(87, 5, 138, 0.5);
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Current Business button - orange (like Products) */

.pool-view-btn.current-business-btn {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%) !important;
  border: 3px solid #d35400 !important;
  color: white !important;
  opacity: 0.6 !important;
}

.pool-view-btn.current-business-btn:hover {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.current-business-btn.active {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%) !important;
  border-color: #b8460a !important;
  box-shadow: 0 4px 12px rgba(230, 126, 34, 0.4);
  opacity: 1 !important;
}

/* All Carts button - purple (like Loyalty) */

.pool-view-btn.all-carts-btn {
  background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%) !important;
  border: 3px solid #7d3c98 !important;
  color: white !important;
  opacity: 0.6 !important;
}

.pool-view-btn.all-carts-btn:hover {
  background: linear-gradient(135deg, #7d3c98 0%, #8e44ad 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.all-carts-btn.active {
  background: linear-gradient(135deg, #7d3c98 0%, #8e44ad 100%) !important;
  border-color: #6a2c93 !important;
  box-shadow: 0 4px 12px rgba(142, 68, 173, 0.4);
  opacity: 1 !important;
}

/* Business Cart buttons - teal (like Business) */

.pool-view-btn.business-cart-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%) !important;
  border: 3px solid #0a1a1d !important;
  color: white !important;
  opacity: 0.6 !important;
}

.pool-view-btn.business-cart-btn:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.business-cart-btn.active {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%) !important;
  border-color: #0a1a1d !important;
  box-shadow: 0 4px 12px rgba(20, 84, 92, 0.4);
  opacity: 1 !important;
}

.pool-view-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Disabled state for loyalty, achievements, and levels buttons when unlinked */

.pool-view-btn.loyalty-btn.disabled,
.pool-view-btn.achievements-btn.disabled,
.pool-view-btn.levels-btn.disabled {
  background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%) !important;
  border: 2px solid #7f8c8d !important;
  color: #7f8c8d !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
  pointer-events: auto !important; /* Allow pointer events for tooltips */
  border-radius: 9999px !important;
}

.pool-view-btn.loyalty-btn.disabled:hover,
.pool-view-btn.achievements-btn.disabled:hover,
.pool-view-btn.levels-btn.disabled:hover {
  background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%) !important;
  border: 2px solid #7f8c8d !important;
  color: #7f8c8d !important;
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.6 !important;
}

/* Profile button - teal (like Business) */

.pool-view-btn.profile-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%) !important;
  border: 2px solid #0a1a1d !important;
  color: #ffffff !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.profile-btn:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%) !important;
  border-color: #0a1a1d !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.4);
  opacity: 0.8 !important;
  color: #3e2723 !important;
}

.pool-view-btn.profile-btn.active {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%) !important;
  border-color: #0a1a1d !important;
  box-shadow: 0 6px 16px rgba(20, 84, 92, 0.4), inset 0 0 8px rgba(20, 84, 92, 0.2);
  opacity: 1 !important;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.profile-btn.active:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%) !important;
  border-color: #0a1a1d !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(20, 84, 92, 0.5);
  opacity: 1 !important;
  color: #3e2723 !important;
}

/* Tools button - Light Blue (like Warehouse/Inventory) */

.pool-view-btn.tools-btn {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%) !important;
  border: 2px solid #0a5d7a !important;
  color: #ffffff !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.tools-btn:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%) !important;
  border-color: #0a5d7a !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
  opacity: 0.8 !important;
  color: #3e2723 !important;
}

.pool-view-btn.tools-btn.active {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%) !important;
  border-color: #0a5d7a !important;
  box-shadow: 0 6px 16px rgba(16, 142, 188, 0.4), inset 0 0 8px rgba(16, 142, 188, 0.2);
  opacity: 1 !important;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.tools-btn.active:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%) !important;
  border-color: #0a5d7a !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(16, 142, 188, 0.5);
  opacity: 1 !important;
  color: #3e2723 !important;
}

/* Pool Overview Content */

.pool-overview-content {
  padding: 1rem;
  background: #ffffff;
  border: 2px solid #8d6e63;
  border-radius: 12px;
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-height: auto;
  overflow: visible;
}

@media (max-width: 768px) {
  .pool-overview-content {
    align-items: center;
  }
}

.pool-overview-header {
  text-align: center;
  margin-bottom: 2rem;
}

.pool-overview-header h3 {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.pool-overview-header p {
  color: #5d4037;
  font-family: 'Verdana', sans-serif;
  font-size: 1rem;
}

.templates-list {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

@media (max-width: 768px) {
  .templates-list {
    align-items: center;
    padding: 0.75rem;
  }
}

/* Template items styled like inventory horizontal panels */

.template-item {
  display: grid;
  grid-template-columns: 50px 2fr 120px;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
  background: rgba(245, 245, 220, 0.9);
  border: 2px solid #8d6e63;
  border-left: 8px solid #007bff; /* Blue accent like ingredients section */
  border-radius: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

@media (min-width: 769px) {
  .template-item {
    gap: 8rem;
  }
}

@media (max-width: 768px) {
  .template-item {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 0.75rem;
    padding: 1rem;
  }
  
  .template-item-cell.number-cell {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding-left: 0;
  }
  
  .template-item-cell.info-cell {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }
  
  .template-item-cell.action-cell {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding-left: 0;
  }
}

/* Template item hover - blue glow effect (like ingredients section) */

.template-item:hover:not(.editing) {
  background-color: #f3e5f5 !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* Template item cells - matching inventory table cell styling */

.template-item-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.template-item-cell.number-cell {
  justify-content: center;
  align-items: center;
}

.template-item-cell.icon-cell {
  justify-content: center;
}

.template-item-cell.info-cell {
  justify-content: flex-start;
  text-align: left;
  padding-left: 0px;
}

.template-item-cell.status-cell {
  justify-content: center;
  text-align: center;
}

.template-item-cell.action-cell {
  justify-content: center;
  text-align: center;
}

.template-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-status-icon {
  font-size: 1.5rem;
  color: #007bff;
}

.template-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.template-number {
  font-weight: 700;
  color: #3e2723;
  font-size: 1.2rem;
  font-family: 'Verdana', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.template-name {
  font-weight: 700;
  color: #3e2723;
  font-size: 2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-id {
  font-style: italic;
  color: #8d6e63;
  font-size: 0.9rem;
}

.template-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.available {
  background-color: #e8f5e8;
  color: #2e7d32;
  border: 1px solid #4caf50;
}

.template-delete-btn {
  background: #c0392b;
  color: white;
  border: 2px solid #8b0000;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Verdana', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  min-width: 50px;
  text-align: center;
  line-height: 1.2;
}

.template-delete-btn:hover {
  background: #e74c3c;
  border-color: #8b0000;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.no-templates {
  text-align: center;
  padding: 2rem;
  color: #5d4037;
  font-family: 'Verdana', sans-serif;
}

.loading-templates {
  text-align: center;
  padding: 2rem;
  color: #5d4037;
  font-family: 'Verdana', sans-serif;
}

/* Inventory Management Button Colors */

/* Permissions button - Red (matching site map button) */

.pool-view-btn.ingredients-btn {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border: 2px solid #0a5d7a;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.ingredients-btn:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.ingredients-btn.active {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border-color: #0a5d7a;
  box-shadow: 0 6px 16px rgba(16, 142, 188, 0.4), inset 0 0 8px rgba(16, 142, 188, 0.2);
  opacity: 1;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.ingredients-btn.active:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(16, 142, 188, 0.5);
  opacity: 1;
  color: #3e2723 !important;
}

.pool-view-btn.packaging-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border: 2px solid #004d06;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.packaging-btn:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.25);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.packaging-btn.active {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border-color: #004d06;
  box-shadow: 0 6px 16px rgba(0, 119, 10, 0.4), inset 0 0 8px rgba(0, 119, 10, 0.2);
  opacity: 1;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.packaging-btn.active:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 119, 10, 0.5);
  opacity: 1;
  color: #3e2723 !important;
}

/* Work button - Light Blue (matching permissions/admin-management-tab) */

.pool-view-btn.warehouse-btn {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border: 2px solid #0a5d7a;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.warehouse-btn:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.warehouse-btn.active {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border-color: #0a5d7a;
  box-shadow: 0 6px 16px rgba(16, 142, 188, 0.4), inset 0 0 8px rgba(16, 142, 188, 0.2);
  opacity: 1;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.warehouse-btn.active:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(16, 142, 188, 0.5);
  opacity: 1;
  color: #3e2723 !important;
}

.pool-view-btn.costs-btn {
  background: linear-gradient(135deg, #EB640A 0%, #C95409 100%);
  border: 2px solid #B84A08;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.costs-btn:hover {
  background: linear-gradient(135deg, #C95409 0%, #EB640A 100%);
  border-color: #B84A08;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(235, 100, 10, 0.4);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.costs-btn.active {
  background: linear-gradient(135deg, #EB640A 0%, #C95409 100%) !important;
  border-color: #B84A08 !important;
  box-shadow: 0 6px 16px rgba(235, 100, 10, 0.4), inset 0 0 8px rgba(235, 100, 10, 0.2);
  opacity: 1 !important;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.costs-btn.active:hover {
  background: linear-gradient(135deg, #C95409 0%, #EB640A 100%) !important;
  border-color: #B84A08 !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(235, 100, 10, 0.5);
  color: #3e2723 !important;
}

.pool-view-btn.appliances-btn {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border: 2px solid #36034d;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.appliances-btn:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #36034d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.25);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.appliances-btn.active {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border-color: #36034d;
  box-shadow: 0 6px 16px rgba(87, 5, 138, 0.4), inset 0 0 8px rgba(87, 5, 138, 0.2);
  opacity: 1;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.appliances-btn.active:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #36034d;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(87, 5, 138, 0.5);
  opacity: 1;
  color: #3e2723 !important;
}

/* Products Management Button Colors - Master Purple for Appliances */

.pool-view-btn.products-tab {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border: 2px solid #36034d;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.products-tab:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #36034d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4);
  color: #3e2723 !important;
}

.pool-view-btn.products-tab.active:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #36034d;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(87, 5, 138, 0.5);
  color: #3e2723 !important;
}

.pool-view-btn.products-tab.active {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border-color: #36034d;
  box-shadow: 0 6px 16px rgba(87, 5, 138, 0.4);
  opacity: 1;
  color: #ffffff !important;
}

/* Profile button - Teal (matching admin-profile-tab) */

.pool-view-btn.breakdown-tab {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border: 2px solid #0a1a1d;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.breakdown-tab:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  border-color: #0a1a1d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.25);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.breakdown-tab.active {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border-color: #0a1a1d;
  box-shadow: 0 6px 16px rgba(20, 84, 92, 0.4), inset 0 0 8px rgba(20, 84, 92, 0.2);
  opacity: 1;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.breakdown-tab.active:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  border-color: #0a1a1d;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(20, 84, 92, 0.5);
  opacity: 1;
  color: #ffffff !important;
}

/* Items Tab Button Colors - Master Green for Packaging */

.pool-view-btn.items-tab {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border: 2px solid #004d06;
  color: #ffffff;
  opacity: 0.6;
  border-radius: 9999px !important;
}

.pool-view-btn.items-tab:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4);
  color: #3e2723 !important;
}

.pool-view-btn.items-tab.active {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border-color: #004d06;
  box-shadow: 0 6px 16px rgba(0, 119, 10, 0.4);
  opacity: 1;
  color: #ffffff !important;
}

.pool-view-btn.items-tab.active:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 119, 10, 0.5);
  opacity: 1;
  color: #ffffff !important;
}

/* Levels button - Greyed out when disabled, requires linking */

.pool-view-btn.levels-btn {
  background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
  border: 2px solid #5d6d7e;
  color: #ffffff;
  opacity: 0.5;
  border-radius: 9999px !important;
}

.pool-view-btn.levels-btn:hover:not(.disabled) {
  background: linear-gradient(135deg, #7f8c8d 0%, #95a5a6 100%);
  border-color: #5d6d7e;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(149, 165, 166, 0.4);
  opacity: 0.8;
}

.pool-view-btn.levels-btn.active:not(.disabled) {
  background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
  border-color: #5d6d7e;
  box-shadow: 0 6px 16px rgba(149, 165, 166, 0.4);
  opacity: 1;
}

.pool-view-btn.levels-btn.disabled {
  background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
  border-color: #5d6d7e;
  opacity: 0.5;
  cursor: not-allowed;
}

.pool-view-btn.levels-btn.disabled:hover {
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

/* Inventory Tab Button Colors - Master Blue for Ingredients */

.pool-view-btn.inventory-tab {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border: 2px solid #36034d;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.inventory-tab:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #36034d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.inventory-tab.active {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border-color: #36034d;
  box-shadow: 0 6px 16px rgba(87, 5, 138, 0.4), inset 0 0 8px rgba(87, 5, 138, 0.2);
  opacity: 1;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.inventory-tab.active:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #36034d;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(87, 5, 138, 0.5);
  opacity: 1;
  color: #ffffff !important;
}

/* Packs Tab Button Colors - Master Yellow for Packs */

.pool-view-btn.packs-tab {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border: 2px solid #004d06;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.packs-tab:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.packs-tab.active {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%) !important;
  border-color: #004d06 !important;
  box-shadow: 0 6px 16px rgba(0, 119, 10, 0.4), inset 0 0 8px rgba(0, 119, 10, 0.2);
  opacity: 1 !important;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.packs-tab.active:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%) !important;
  border-color: #004d06 !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 119, 10, 0.5);
  color: #ffffff !important;
}

.pool-view-btn.recipes-tab {
  background: linear-gradient(135deg, #a31b00 0%, #d32f2f 100%);
  border: 2px solid #8b0000;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.recipes-tab:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #a31b00 100%);
  border-color: #8b0000;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(163, 27, 0, 0.4);
  opacity: 0.8;
}

.pool-view-btn.recipes-tab.active {
  background: linear-gradient(135deg, #a31b00 0%, #d32f2f 100%) !important;
  border-color: #8b0000 !important;
  box-shadow: 0 6px 16px rgba(163, 27, 0, 0.4), inset 0 0 8px rgba(163, 27, 0, 0.2);
  opacity: 1 !important;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.recipes-tab.active:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #a31b00 100%) !important;
  border-color: #8b0000 !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(163, 27, 0, 0.5);
}

/* Batch tab button - red (matching recipes-tab) */

/* Override CookPage.css batch-tab styles for AdminProductsPage */

.pool-view-btn.batch-tab {
  background: linear-gradient(135deg, #a31b00 0%, #d32f2f 100%) !important;
  border: 2px solid #8b0000 !important;
  color: #ffffff !important;
  opacity: 0.6 !important;
}

.pool-view-btn.batch-tab:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #a31b00 100%) !important;
  border-color: #8b0000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(163, 27, 0, 0.4) !important;
  opacity: 0.8 !important;
  color: #3e2723 !important;
}

.pool-view-btn.batch-tab.active,
.pool-view-btn.batch-tab.active:focus {
  background: linear-gradient(135deg, #a31b00 0%, #d32f2f 100%) !important;
  border-color: #8b0000 !important;
  box-shadow: 0 6px 16px rgba(163, 27, 0, 0.4), inset 0 0 8px rgba(163, 27, 0, 0.2) !important;
  opacity: 1 !important;
  transform: scale(1.02) !important;
  color: #ffffff !important;
}

.pool-view-btn.batch-tab.active:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #a31b00 100%) !important;
  border-color: #8b0000 !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 8px 20px rgba(163, 27, 0, 0.5) !important;
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Business Page Button Colors */

.pool-view-btn.admin-management-tab {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border: 2px solid #0a5d7a;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.admin-management-tab:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
  opacity: 0.8;
}

.pool-view-btn.admin-management-tab.active {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border-color: #0a5d7a;
  box-shadow: 0 6px 16px rgba(16, 142, 188, 0.4), inset 0 0 8px rgba(16, 142, 188, 0.2);
  opacity: 1;
  transform: scale(1.02);
}

.pool-view-btn.admin-admin-tab {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border: 3px solid #36034d;
  color: #ffffff;
  opacity: 0.6;
  box-shadow: 0 4px 8px rgba(87, 5, 138, 0.3);
}

.pool-view-btn.admin-admin-tab:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #2d023a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4);
  opacity: 0.8;
}

.pool-view-btn.admin-admin-tab.active {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border-color: #36034d;
  box-shadow: 0 6px 16px rgba(87, 5, 138, 0.4), inset 0 0 8px rgba(87, 5, 138, 0.2);
  opacity: 1;
  transform: scale(1.02);
}

.pool-view-btn.admin-staff-tab {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  border: 2px solid #374151;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.admin-staff-tab:hover {
  background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
  border-color: #374151;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(107, 114, 128, 0.4);
  opacity: 0.8;
}

.pool-view-btn.admin-staff-tab.active {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  border-color: #374151;
  box-shadow: 0 6px 16px rgba(107, 114, 128, 0.4), inset 0 0 8px rgba(107, 114, 128, 0.2);
  opacity: 1;
  transform: scale(1.02);
}

/* Reports tab - brown/amber (documents, reports) */

/* Analytics tab - green (like Customers button) */

.pool-view-btn.admin-analytics-tab {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border: 2px solid #004d06;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.admin-analytics-tab:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4);
  opacity: 0.8;
}

.pool-view-btn.admin-analytics-tab.active {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border-color: #004d06;
  box-shadow: 0 6px 16px rgba(0, 119, 10, 0.4), inset 0 0 8px rgba(0, 119, 10, 0.2);
  opacity: 1;
  transform: scale(1.02);
}

.pool-view-btn.admin-profile-tab {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border: 2px solid #0a1a1d;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.admin-profile-tab:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  border-color: #0a1a1d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.4);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.admin-profile-tab.active {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border-color: #0a1a1d;
  box-shadow: 0 6px 16px rgba(20, 84, 92, 0.4);
  opacity: 1;
}

.pool-view-btn.admin-qr-tab {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
  border: 2px solid #d35400;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.admin-qr-tab:hover {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  border-color: #d68910;
}

.pool-view-btn.admin-qr-tab.active {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
  border-color: #d35400;
  box-shadow: 0 6px 16px rgba(230, 126, 34, 0.4);
  opacity: 1;
}

.pool-view-btn.admin-subscriptions-tab {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border: 2px solid #36034d;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.admin-subscriptions-tab:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #36034d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.4);
  opacity: 0.8;
}

.pool-view-btn.admin-subscriptions-tab.active {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border-color: #36034d;
  box-shadow: 0 6px 16px rgba(87, 5, 138, 0.4), inset 0 0 8px rgba(87, 5, 138, 0.2);
  opacity: 1;
  transform: scale(1.02);
}

/* Customers Tab Button Colors - Master Green for Packaging */

.pool-view-btn.admin-customers-tab {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border: 2px solid #004d06;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.admin-customers-tab:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4);
}

.pool-view-btn.admin-customers-tab.active {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border-color: #004d06;
  box-shadow: 0 6px 16px rgba(0, 119, 10, 0.4);
  opacity: 1;
}

.pool-view-btn.admin-customers-tab.active:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  box-shadow: 0 8px 20px rgba(0, 119, 10, 0.5);
  transform: translateY(-1px);
}

.pool-view-btn.admin-orders-tab {
  background: linear-gradient(135deg, #EB640A 0%, #c95208 100%);
  border: 2px solid #a84307;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.admin-orders-tab:hover {
  background: linear-gradient(135deg, #c95208 0%, #EB640A 100%);
  border-color: #a84307;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(235, 100, 10, 0.4);
}

.pool-view-btn.admin-orders-tab.active {
  background: linear-gradient(135deg, #EB640A 0%, #c95208 100%);
  border-color: #a84307;
  box-shadow: 0 6px 16px rgba(235, 100, 10, 0.4);
  opacity: 1;
}

.pool-view-btn.admin-orders-tab.active:hover {
  background: linear-gradient(135deg, #c95208 0%, #EB640A 100%);
  border-color: #a84307;
  box-shadow: 0 8px 20px rgba(235, 100, 10, 0.5);
  transform: translateY(-1px);
}

/* Fired Staff Filter Buttons - Matching Business Management Style */

.pool-view-btn.fired-staff-all-btn {
  background: linear-gradient(135deg, #696969 0%, #4b5563 100%);
  border: 2px solid #2f2f2f;
  color: #ffffff;
  opacity: 0.6;
  border-radius: 9999px !important;
}

.pool-view-btn.fired-staff-all-btn:hover {
  background: linear-gradient(135deg, #4b5563 0%, #696969 100%);
  border-color: #2f2f2f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(105, 105, 105, 0.4);
  opacity: 0.8;
}

.pool-view-btn.fired-staff-all-btn.active {
  background: linear-gradient(135deg, #696969 0%, #4b5563 100%);
  border-color: #1a1a1a;
  box-shadow: 0 6px 16px rgba(105, 105, 105, 0.4);
  opacity: 1;
}

.pool-view-btn.fired-staff-pending-btn {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  border: 2px solid #e65100;
  color: #ffffff;
  opacity: 0.6;
  border-radius: 9999px !important;
}

.pool-view-btn.fired-staff-pending-btn:hover {
  background: linear-gradient(135deg, #f57c00 0%, #ff9800 100%);
  border-color: #e65100;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(255, 152, 0, 0.4);
  opacity: 0.8;
}

.pool-view-btn.fired-staff-pending-btn.active {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  border-color: #bf360c;
  box-shadow: 0 6px 16px rgba(255, 152, 0, 0.4);
  opacity: 1;
}

.pool-view-btn.fired-staff-deleted-btn {
  background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
  border: 2px solid #155724;
  color: #ffffff;
  opacity: 0.6;
  border-radius: 9999px !important;
}

.pool-view-btn.fired-staff-deleted-btn:hover {
  background: linear-gradient(135deg, #1e7e34 0%, #28a745 100%);
  border-color: #155724;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(40, 167, 69, 0.4);
  opacity: 0.8;
}

.pool-view-btn.fired-staff-deleted-btn.active {
  background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
  border-color: #0d3e1a;
  box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
  opacity: 1;
}

.pool-view-btn.admin-contact-tab {
  background: linear-gradient(135deg, #EB640A 0%, #C95409 100%);
  border: 2px solid #B84A08;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.admin-contact-tab:hover {
  background: linear-gradient(135deg, #C95409 0%, #EB640A 100%);
  border-color: #B84A08;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(235, 100, 10, 0.4);
  opacity: 0.8;
}

.pool-view-btn.admin-contact-tab.active {
  background: linear-gradient(135deg, #EB640A 0%, #C95409 100%);
  border-color: #B84A08;
  box-shadow: 0 6px 16px rgba(235, 100, 10, 0.4), inset 0 0 8px rgba(235, 100, 10, 0.2);
  opacity: 1;
  transform: scale(1.02);
}

/* Customer Management Button Colors - Purple (like products) */

.pool-view-btn.customer-details-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border: 2px solid #0a1a1d;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.customer-details-btn:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  border: 2px solid #0a1a1d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.4);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.customer-details-btn.active {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border: 2px solid #0a1a1d;
  box-shadow: 0 6px 16px rgba(20, 84, 92, 0.4), inset 0 0 8px rgba(20, 84, 92, 0.2);
  opacity: 1;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.customer-details-btn.active:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  border: 2px solid #0a1a1d;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(20, 84, 92, 0.5);
  opacity: 1;
  color: #ffffff !important;
}

.pool-view-btn.promo-codes-btn {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
  border: 2px solid #d35400;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.promo-codes-btn:hover {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
  border: 2px solid #b8460a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(230, 126, 34, 0.4);
  opacity: 0.8;
  color: #3e2723 !important;
}

.pool-view-btn.promo-codes-btn.active {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
  border: 2px solid #b8460a;
  box-shadow: 0 6px 16px rgba(230, 126, 34, 0.4), inset 0 0 8px rgba(230, 126, 34, 0.2);
  opacity: 1;
  transform: scale(1.02);
  color: #ffffff !important;
}

.pool-view-btn.promo-codes-btn.active:hover {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
  border: 2px solid #b8460a;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(230, 126, 34, 0.5);
  opacity: 1;
  color: #ffffff !important;
}

.pool-view-btn.achievements-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border: 2px solid #004d06;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.achievements-btn:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border: 2px solid #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4);
  color: #3e2723 !important;
}

.pool-view-btn.achievements-btn.active {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border: 2px solid #004d06;
  box-shadow: 0 6px 16px rgba(0, 119, 10, 0.4), inset 0 0 8px rgba(0, 119, 10, 0.2);
  opacity: 1;
  color: #ffffff !important;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #8d6e63;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem auto;
}

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

/* Packs Section Styles */

.packs-section {
  padding: 0;
}

.packs-section-header {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.packs-section-title-panel {
  background-color: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
  width: 100%;
}

.packs-section-title {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  text-shadow: -1px -1px 0 #0a1a1d, 1px -1px 0 #0a1a1d, -1px 1px 0 #0a1a1d, 1px 1px 0 #0a1a1d;
}

.packs-section-subtitle {
  color: #ffffff;
  font-size: 1.1rem;
  margin: 0;
  opacity: 0.9;
  font-weight: 500;
  line-height: 1.4;
}

.add-packs-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  color: white;
  border: 2px solid #004d06;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  display: block;
  margin: 0 auto;
  min-width: 120px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.add-packs-btn:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 0 20px rgba(0, 119, 10, 0.4);
  color: #3e2723 !important;
}

.packs-content {
  margin-top: 2rem;
}

.packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.packs-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  background: #f8f8f8;
  border-radius: 12px;
  border: 2px dashed #ddd;
}

.packs-empty-state p {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
  color: #666;
  margin: 0;
  font-style: italic;
}

/* Templates Count Message */

.templates-count-message {
  background: linear-gradient(135deg, #8d6e63, #5d4037);
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* User Management Filter Buttons */

.pool-view-btn.inactive-btn {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
  border: 3px solid #495057 !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.inactive-btn:hover {
  background: linear-gradient(135deg, #5a6268 0%, #6c757d 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(108, 117, 125, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.inactive-btn.active {
  background: linear-gradient(135deg, #5a6268 0%, #6c757d 100%) !important;
  border-color: #495057 !important;
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.new-btn {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
  border: 3px solid #004085 !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.new-btn:hover {
  background: linear-gradient(135deg, #0056b3 0%, #007bff 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 123, 255, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.new-btn.active {
  background: linear-gradient(135deg, #0056b3 0%, #007bff 100%) !important;
  border-color: #003d82 !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.active-btn {
  background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
  border: 3px solid #155724 !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.active-btn:hover {
  background: linear-gradient(135deg, #1e7e34 0%, #28a745 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(40, 167, 69, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.active-btn.active {
  background: linear-gradient(135deg, #1e7e34 0%, #28a745 100%) !important;
  border-color: #155724 !important;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.veteran-btn {
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%) !important;
  border: 3px solid #b8460a !important;
  color: white !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.veteran-btn:hover {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(230, 126, 34, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.veteran-btn.active {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%) !important;
  border-color: #b8460a !important;
  box-shadow: 0 4px 12px rgba(230, 126, 34, 0.4);
  opacity: 1 !important;
}

.pool-view-btn.vip-btn {
  background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%) !important;
  border: 3px solid #ff8f00 !important;
  color: #3e2723 !important;
  opacity: 0.6 !important;
  border-radius: 9999px !important;
}

.pool-view-btn.vip-btn:hover {
  background: linear-gradient(135deg, #ffb300 0%, #ffd700 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(255, 215, 0, 0.25);
  opacity: 0.8 !important;
}

.pool-view-btn.vip-btn.active {
  background: linear-gradient(135deg, #ffb300 0%, #ffd700 100%) !important;
  border-color: #ff8f00 !important;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
  opacity: 1 !important;
}

/* Override CookPage.css batch-tab.active rule - ensure red color for AdminProductsPage */

/* This must come after CookPage.css import to override the teal color */

.pool-view-btn.batch-tab.active {
  background: linear-gradient(135deg, #a31b00 0%, #d32f2f 100%) !important;
  border-color: #8b0000 !important;
  box-shadow: 0 6px 16px rgba(163, 27, 0, 0.4), inset 0 0 8px rgba(163, 27, 0, 0.2) !important;
  opacity: 1 !important;
  transform: scale(1.02) !important;
  color: #ffffff !important;
}

.pool-view-btn.batch-tab.active:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #a31b00 100%) !important;
  border-color: #8b0000 !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 8px 20px rgba(163, 27, 0, 0.5) !important;
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Mobile / small screens: ensure active tab and button text stays white (touch and narrow viewports) */

@media (max-width: 767px) {
  .pool-view-btn.breakdown-tab.active,
  .pool-view-btn.breakdown-tab.active:hover,
  .pool-view-btn.inventory-tab.active,
  .pool-view-btn.inventory-tab.active:hover,
  .pool-view-btn.packs-tab.active,
  .pool-view-btn.packs-tab.active:hover,
  .pool-view-btn.batch-tab.active,
  .pool-view-btn.batch-tab.active:hover,
  .pool-view-btn.items-tab.active,
  .pool-view-btn.items-tab.active:hover,
  .pool-view-btn.products-tab.active,
  .pool-view-btn.customer-details-btn.active,
  .pool-view-btn.customer-details-btn.active:hover,
  .pool-view-btn.promo-codes-btn.active,
  .pool-view-btn.promo-codes-btn.active:hover,
  .pool-view-btn.loyalty-btn.active,
  .pool-view-btn.loyalty-btn.active:hover,
  .pool-view-btn.achievements-btn.active,
  .pool-view-btn.achievements-btn.active:hover {
    color: #ffffff !important;
  }
}

/* Touch devices: same guarantee when hover is unreliable (sticky hover) */

@media (hover: none) and (pointer: coarse) {
  .pool-view-btn.breakdown-tab.active,
  .pool-view-btn.inventory-tab.active,
  .pool-view-btn.packs-tab.active,
  .pool-view-btn.batch-tab.active,
  .pool-view-btn.items-tab.active,
  .pool-view-btn.products-tab.active,
  .pool-view-btn.customer-details-btn.active,
  .pool-view-btn.promo-codes-btn.active,
  .pool-view-btn.loyalty-btn.active,
  .pool-view-btn.achievements-btn.active {
    color: #ffffff !important;
  }
}

/* ===============================================================================
                                MODERN ADMIN LAYOUT
=============================================================================== */

/* Main cook page container */

.cook-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background */
  background-image: url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 0.5rem;
  position: relative;
  font-family: 'The Wanters DEMO', serif;
  color: #2c1810;
  transition: all 0.3s ease;
}

.cook-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.cook-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Background panel similar to cart page */

.cook-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1rem;
  max-width: 100%;
  width: 98%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Main container inside background panel */

.cook-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Header Section */

.cook-header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 2rem;
}

/* Cook title panel */

.cook-title-panel {
  background-color: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  padding: 1rem 2rem;
  text-align: center;
  flex: 1;
  margin-right: 2rem;
}

.cook-title {
  font-size: 2.2rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.cook-subtitle {
  font-size: 1rem;
  color: #ffffff;
  margin: 0.5rem 0 0 0;
  font-family: 'Verdana', sans-serif;
  font-weight: 400;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Override products-title color to teal for cook page */

.cook-page .title-panel .products-title.cook-page-title,
.cook-page .title-panel .cook-page-title {
  color: #14545c !important;
  text-shadow: none;
}

/* Ensure cook page title panel matches size of other admin title panels */

.cook-page .title-panel,
.cook-page .cook-container .title-panel {
  max-width: 800px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 2rem 3rem !important;
  margin-bottom: 2rem !important;
}

/* Navigation button */

.cook-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
}

.admin-login-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  color: #ffffff;
  border: 3px solid #0a1a1d;
  border-radius: 25px;
  padding: 0.8rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(20, 84, 92, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.admin-login-btn:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.4);
}

/* Main Content Panel */

.main-content-border-panel {
  width: 100%;
  background-color: #f5f5dc;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.admin-actions-container {
  background-color: transparent;
  border: none;
  padding: 1rem;
}

.main-content-panel {
  background-color: #f5f5dc;
  padding: 2rem;
  min-height: 400px;
}

/* ===============================================================================
                                TAB BUTTON COLORS
=============================================================================== */

/* Batch Tab Button - Blue (like Inventory) */

.pool-view-btn.batch-tab {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border: 2px solid #0a5d7a;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.batch-tab:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
  opacity: 0.8;
}

.pool-view-btn.batch-tab.active {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%) !important;
  border-color: #0a1a1d !important;
  box-shadow: 0 6px 16px rgba(20, 84, 92, 0.4), inset 0 0 8px rgba(20, 84, 92, 0.2) !important;
  opacity: 1 !important;
  transform: scale(1.02);
  color: #ffffff !important;
}

/* Tab 1 Button - Light Blue (like Levels/Inventory) */

.pool-view-btn.tab1-btn {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border: 2px solid #0a5d7a;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.tab1-btn:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
  opacity: 0.8;
}

.pool-view-btn.tab1-btn.active {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%) !important;
  border-color: #0a5d7a !important;
  box-shadow: 0 6px 16px rgba(16, 142, 188, 0.4), inset 0 0 8px rgba(16, 142, 188, 0.2) !important;
  opacity: 1 !important;
  transform: scale(1.02);
  color: #ffffff !important;
}

/* Tab 2 Button - Light Blue (like Inventory) */

.pool-view-btn.tab2-btn {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border: 2px solid #0a5d7a;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.tab2-btn:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.4);
  opacity: 0.8;
}

.pool-view-btn.tab2-btn.active {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%) !important;
  border-color: #0a5d7a !important;
  box-shadow: 0 6px 16px rgba(16, 142, 188, 0.4), inset 0 0 8px rgba(16, 142, 188, 0.2) !important;
  opacity: 1 !important;
  transform: scale(1.02);
  color: #ffffff !important;
}

/* Tab 3 Button - Green (like Batch/Customers) */

.pool-view-btn.tab3-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border: 2px solid #004d06;
  color: #ffffff;
  opacity: 0.6;
}

.pool-view-btn.tab3-btn:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4);
  opacity: 0.8;
}

.pool-view-btn.tab3-btn.active {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%) !important;
  border-color: #004d06 !important;
  box-shadow: 0 6px 16px rgba(0, 119, 10, 0.4), inset 0 0 8px rgba(0, 119, 10, 0.2) !important;
  opacity: 1 !important;
  transform: scale(1.02);
  color: #ffffff !important;
}

/* ===============================================================================
                                PRODUCTS LIST STYLING
=============================================================================== */

.products-list-section {
  margin-bottom: 2rem;
}

.products-list-header {
  background-color: #e0e0e0;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.products-list-column-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 1rem;
  padding: 1rem;
  background-color: #e0e0e0;
  border-radius: 6px;
}

.column-header-item {
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  color: #3e2723;
  text-align: center;
}

.products-list-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.product-list-item {
  background-color: #ffffff;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  overflow: hidden;
}

.product-list-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 1rem;
  padding: 1rem;
  align-items: center;
}

.product-name-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.product-color-bar {
  width: 4px;
  height: 40px;
  border-radius: 2px;
}

.product-name {
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #3e2723;
}

.product-stock-section,
.product-cost-section,
.product-value-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.product-stock-label,
.product-cost-label,
.product-value-label {
  font-family: 'Verdana', sans-serif;
  font-size: 0.9rem;
  color: #3e2723;
  margin-bottom: 0.25rem;
}

.product-stock-value {
  font-family: 'Verdana', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #e67e22;
}

.product-cost-value,
.product-value-value {
  font-family: 'Verdana', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #27ae60;
}

/* ===============================================================================
                                TAB CONTENT
=============================================================================== */

.batch-tab-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.tab-content {
  padding: 2rem;
  text-align: center;
}

.tab-content h2 {
  font-family: 'The Wanters DEMO', serif;
  font-size: 2rem;
  color: #3e2723;
  margin-bottom: 1rem;
}

.tab-content p {
  font-family: 'Verdana', sans-serif;
  font-size: 1.1rem;
  color: #5d4037;
}

/* Main cook page container */

.cook-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background */
  background-image: url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 0.5rem;
  position: relative;
  font-family: 'The Wanters DEMO', serif;
  color: #2c1810;
  transition: all 0.3s ease;
}

.cook-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.cook-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Background panel similar to cart page */

.cook-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1rem;
  max-width: 100%;
  width: 98%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Main container inside background panel */

.cook-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Cook title panel */

.cook-title-panel {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 400px;
}

.cook-title {
  font-size: 2.2rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

/* Navigation button */

.cook-navigation {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  width: 100%;
}

.cook-back-nav-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #14545c;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #0d3d42;
  cursor: pointer;
  font-family: 'The Wanters DEMO', serif;
}

.cook-back-nav-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #1a6b75;
  color: white;
}

/* Cook content area */

.cook-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Cook sections */

.cook-section {
  width: 100%;
  background: #ffffff;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  margin-bottom: 2rem;
}

.cook-section-title-panel {
  background: #5d4037;
  padding: 1.5rem;
  border-bottom: 3px solid #3e2723;
  text-align: center;
}

.cook-section-title-panel h2 {
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-family: 'The Wanters DEMO', serif;
}

/* Recipe Selection Grid */

.cook-flavours-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 0.75rem;
  width: 100%;
}

.cook-flavour-item {
  background: #f8f5f0;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 100%;
}

.cook-flavour-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  background: #fff8e1;
}

.cook-flavour-header {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.cook-flavour-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding-top: 1rem;
  border-top: 2px solid #8d6e63;
}

.cook-flavour-item img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #5d4037;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.cook-flavour-item h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2c1810;
  margin: 0;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.cook-recipe-button {
  background: #9333ea;
  color: #ffffff;
  border: 3px solid #000000;
  border-radius: 25px;
  padding: 0.8rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.cook-recipe-button:hover {
  background: #a855f7;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Quantity Controls */

.cook-quantity-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  align-items: center;
}

.cook-bag-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
  width: 100%;
  max-width: 200px;
}

.cook-bag-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c1810;
  min-width: 40px;
  text-align: center;
}

.cook-quantity-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.cook-quantity-btn:first-of-type {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.cook-quantity-btn:last-of-type {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  box-shadow: 0 4px 8px rgba(22, 163, 74, 0.3);
}

.cook-quantity-btn:hover {
  transform: scale(1.05);
}

.cook-quantity-btn:first-of-type:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 6px 12px rgba(220, 38, 38, 0.5);
}

.cook-quantity-btn:last-of-type:hover {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 6px 12px rgba(22, 163, 74, 0.5);
}

.cook-quantity-value {
  background: #f8f5f0;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  min-width: 60px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c1810;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cook-add-batch-btn {
  background: #16a34a;
  color: #ffffff;
  border: 3px solid #000000;
  border-radius: 25px;
  padding: 0.8rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.cook-add-batch-btn:hover {
  background: #22c55e;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.cook-add-batch-btn:disabled {
  background: #6b7280;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Batch Summary Grid */

.batch-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}

.batch-summary-card {
  background: #ffffff;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.batch-summary-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.batch-summary-card.highlight {
  background: linear-gradient(135deg, #f8f5f0 0%, #fff8e1 100%);
  border-color: #5d4037;
  border-width: 4px;
}

.batch-summary-label {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #3e2723;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.batch-summary-value {
  font-family: 'The Wanters DEMO', serif;
  font-size: 2rem;
  font-weight: 900;
  color: #2c1810;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Selected recipe styling */

.cook-flavour-item.selected {
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e9 100%);
  border-color: #2ecc71;
  box-shadow: 0 6px 16px rgba(46, 204, 113, 0.3);
}

.cook-flavour-item.selected:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(46, 204, 113, 0.4);
}

/* Batch Cart */

.cook-empty-cart {
  padding: 3rem 2rem;
  text-align: center;
  color: #666;
  font-size: 1.3rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
}

.cook-batch-list {
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

.cook-batch-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: #f8f5f0;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 2rem;
  min-height: 300px;
  min-width: 350px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cook-batch-item:hover {
  background: #fff8e1;
  transform: translateX(3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.cook-batch-info h3 {
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: 900;
  margin: 0 0 1rem 0;
  font-family: 'The Wanters DEMO', serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  text-align: center;
  letter-spacing: 1px;
  background: #5d4037;
  border: 3px solid #3e2723;
  border-radius: 12px;
  padding: 1rem 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.cook-batch-info p {
  color: #3e2723;
  font-size: 1.4rem;
  margin: 0.5rem 0;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
  letter-spacing: 0.5px;
}

.cook-batch-value {
  color: #059669 !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  text-shadow: 1px 1px 2px rgba(5, 150, 105, 0.2) !important;
  background: #ffffff;
  border: 2px solid #5d4037;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0.5rem 0;
}

.cook-batch-cost {
  color: #dc2626 !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  text-shadow: 1px 1px 2px rgba(220, 38, 38, 0.2) !important;
  background: #ffffff;
  border: 2px solid #5d4037;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0.5rem 0;
}

.cook-batch-profit {
  color: #16a34a !important;
  font-weight: 700 !important;
  font-size: 1.8rem !important;
  text-shadow: 1px 1px 2px rgba(22, 163, 74, 0.2) !important;
  background: #ffffff;
  border: 2px solid #5d4037;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0.5rem 0;
}

.cook-remove-btn {
  background: #dc2626;
  color: #ffffff;
  border: 2px solid #000000;
  border-radius: 20px;
  padding: 0.8rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
  text-align: center;
  display: block;
  margin: 0 auto;
}

.cook-remove-btn:hover {
  background: #ef4444;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.cook-batch-summary {
  background: #f8f5f0;
  border-top: 3px solid #8d6e63;
  padding: 2rem;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 2rem;
}

.cook-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.cook-summary-item span:first-child {
  color: #3e2723;
  font-size: 1.6rem;
  font-weight: 700;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
  letter-spacing: 0.5px;
}

.cook-summary-item span:last-child {
  color: #2c1810;
  font-size: 2rem;
  font-weight: 900;
  font-family: 'The Wanters DEMO', serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  text-align: center;
  letter-spacing: 1px;
}

.cook-submit-btn {
  background: #16a34a;
  color: #ffffff;
  border: 3px solid #000000;
  border-radius: 25px;
  padding: 1rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.cook-submit-btn:hover {
  background: #22c55e;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.cook-submit-btn:disabled {
  background: #6b7280;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Panels Container */

.cook-panels-container {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  width: 100%;
  margin: 1rem 0;
}

/* Dehydrators Panel */

.cook-dehydrators-panel {
  background-color: rgba(255, 255, 255, 0.95);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
  flex: 1;
  min-width: 300px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cook-dehydrators-input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

.cook-dehydrators-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}

.cook-dehydrators-input-container label {
  font-size: 2.2rem;
  font-weight: 700;
  color: #3e2723;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.cook-dehydrators-input {
  width: 120px;
  padding: 1rem;
  border: 3px solid #5d4037;
  border-radius: 12px;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  background-color: #ffffff;
  color: #3e2723;
  transition: all 0.3s ease;
  font-family: 'The Wanters DEMO', serif;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cook-dehydrators-input:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 4px rgba(141, 110, 99, 0.2), 0 6px 12px rgba(0, 0, 0, 0.15);
  transform: scale(1.05);
}

.cook-dehydrators-input:hover {
  border-color: #8d6e63;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.cook-dehydrators-input::-webkit-outer-spin-button,
.cook-dehydrators-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cook-dehydrators-input[type=number] {
  -moz-appearance: textfield;
}

.cook-dehydrators-minus-btn,
.cook-dehydrators-plus-btn {
  width: 50px;
  height: 50px;
  border: 3px solid #000000;
  border-radius: 50%;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.cook-dehydrators-minus-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.cook-dehydrators-plus-btn {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(22, 163, 74, 0.3);
}

.cook-dehydrators-minus-btn:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(220, 38, 38, 0.4);
}

.cook-dehydrators-plus-btn:hover {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(22, 163, 74, 0.4);
}

.cook-dehydrators-minus-btn:active,
.cook-dehydrators-plus-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cook-dehydrators-minus-btn:disabled,
.cook-dehydrators-plus-btn:disabled {
  background: #cccccc;
  color: #666666;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  border-color: #999999;
}

.cook-dehydrators-info {
  font-size: 1rem;
  color: #5d4037;
  text-align: center;
  line-height: 1.5;
  font-weight: 500;
  font-family: 'The Wanters DEMO', serif;
  text-shadow: 0 0 2px rgba(93, 64, 55, 0.1);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.cook-dehydrators-info p {
  margin: 0;
}

.cook-dehydrators-details-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: #ffffff;
  border: 3px solid #000000;
  border-radius: 30px;
  padding: 0.75rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  text-align: center;
  min-width: 120px;
}

.cook-dehydrators-details-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.cook-dehydrators-details-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cook-dehydrators-btn {
  background: linear-gradient(135deg, #9333ea 0%, #a855f7 100%);
  color: #ffffff;
  border: 3px solid #000000;
  border-radius: 30px;
  padding: 1rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  text-align: center;
  min-width: 140px;
}

.cook-dehydrators-btn:hover {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.cook-dehydrators-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Recipe Modal */

.cook-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 1rem;
}

.cook-modal {
  background: #f5f5dc;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  /* Hide scrollbar but maintain scroll functionality */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hide scrollbar but maintain scroll functionality */

.cook-modal::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.cook-modal::-webkit-scrollbar-track {
  background: transparent;
}

.cook-modal::-webkit-scrollbar-thumb {
  background: transparent;
}

.cook-modal-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cook-flavour-title-panel {
  background: #14545c;
  border: 3px solid #000000;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
}

.cook-flavour-title-panel h3 {
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.cook-back-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
}

.cook-back-button {
  background: #dc2626;
  color: #ffffff;
  border: none;
  border-radius: 30px;
  padding: 0.8rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.cook-back-button:hover {
  background: #ef4444;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.cook-inner-panel {
  background: #f5f5dc;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 2.5rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cook-ingredients-section h4,
.cook-yield-section h4 {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
  background: #8d6e63;
  padding: 0.75rem;
  border: 2px solid #000000;
  border-radius: 8px;
}

.cook-ingredients-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cook-ingredient-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cook-input-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.cook-input-unit {
  color: #3e2723;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  min-width: 30px;
  text-align: left;
}

.cook-ingredient-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c1810;
  min-width: 200px;
  font-family: 'The Wanters DEMO', serif;
}

/* Nested size accordion */

.cook-size-accordion {
  border: 2px solid #8d6e63;
  border-left: 8px solid #8b45d1;
  border-radius: 12px;
  background: rgba(245, 245, 220, 0.9);
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: border-radius 0.2s ease;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.cook-size-accordion:has(.cook-size-body) {
  border-radius: 12px 12px 0 0;
}

.cook-size-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  background: rgba(245, 245, 220, 0.9);
  gap: 0.75rem;
  border: none;
}

.cook-size-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cook-size-toggle {
  font-size: 1.1rem;
  color: #3e2723;
  min-width: 16px;
}

.cook-size-header-info {
  display: flex;
  flex-direction: column;
}

.cook-size-title {
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  color: #3e2723;
  font-size: 1.15rem;
  margin: 0;
}

.cook-size-meta {
  font-size: 0.82rem;
  color: #6b4f3d;
}

.cook-size-checkbox {
  width: 30px;
  height: 30px;
  border: 3px solid #8d6e63;
  border-radius: 6px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #ffffff;
  transition: all 0.2s ease;
}

.cook-size-checkbox.selected {
  background: #2ecc71;
  border-color: #2ecc71;
}

.cook-size-body {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #8d6e63;
  border-top: none;
  border-left: 8px solid #8b45d1;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  margin-top: -0.5rem;
  margin-left: 0;
  margin-right: 0;
}

.cook-size-breakdown-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cook-size-breakdown-panel {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.35rem 0.35rem;
}

/* Side by side on wider screens */

@media (min-width: 900px) {
  .cook-size-breakdown-container {
    flex-direction: row;
    gap: 1rem;
  }
  
  .cook-size-breakdown-panel {
    flex: 1;
  }
}

/* Make compact tables even more compact */

.recipe-table-compact {
  font-size: 1rem;
  padding: 0.4rem;
}

.recipe-table-header-compact {
  padding: 0.4rem 0.5rem;
  font-size: 1rem;
}

.recipe-table-row-compact {
  padding: 0.35rem 0.5rem;
  font-size: 1rem;
}

.recipe-table-cell-compact {
  font-size: 1rem;
  padding: 0.25rem 0.35rem;
}

.recipe-title-header-compact {
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.5rem;
}

.recipe-product-name-compact {
  font-size: 0.9rem;
  padding: 0.3rem 0.5rem;
}

.recipe-cost-breakdown-compact {
  padding: 0.5rem;
  border: 2px solid #5d4037;
  border-radius: 8px;
  overflow: hidden;
}

.recipe-cost-breakdown-header-compact {
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.4rem;
}

/* Header fills to container corners (no gap in rounded top) */

.recipe-cost-breakdown-compact > .recipe-cost-breakdown-header-compact:first-child {
  margin: -0.5rem -0.5rem 0.4rem -0.5rem;
  border-radius: 8px 8px 0 0;
  padding: 0.4rem 0.5rem;
  background: linear-gradient(135deg, #14545c, #0a1a1d);
  border-bottom: 2px solid #5d4037;
}

.recipe-cost-breakdown-compact > .recipe-cost-breakdown-header-compact:first-child .recipe-cost-breakdown-title-compact {
  color: #ffffff;
}

.recipe-cost-breakdown-title-compact {
  font-size: 0.85rem;
  padding: 0.3rem 0.4rem;
}

.recipe-cost-breakdown-toggle-container-compact {
  margin-bottom: 0.5rem;
}

.recipe-cost-breakdown-toggle-btn-compact {
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid;
}

.recipe-cost-breakdown-toggle-btn-compact.simple {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border-color: #004d06;
  color: #ffffff;
}

.recipe-cost-breakdown-toggle-btn-compact.detailed {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border-color: #0a1a1d;
  color: #ffffff;
}

.recipe-cost-breakdown-toggle-btn-compact.simple:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.25);
}

.recipe-cost-breakdown-toggle-btn-compact.detailed:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.25);
}

.recipe-cost-breakdown-content-wrapper-compact {
  padding: 0.3rem;
}

.recipe-cost-breakdown-content-compact {
  padding: 0.3rem;
}

.recipe-cost-breakdown-table-compact {
  font-size: 1rem;
}

.recipe-cost-breakdown-table-header-compact {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr;
  padding: 0.35rem 0.4rem;
  font-size: 1.15rem;
  gap: 0.2rem;
  text-align: center;
}

.recipe-cost-breakdown-table-header-detailed-section {
  grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr;
}

.recipe-cost-breakdown-table-header-summary {
  grid-template-columns: 2fr 1.5fr 1fr;
  padding: 0.3rem 0.4rem;
}

.recipe-cost-breakdown-table-row-summary {
  grid-template-columns: 2fr 1.5fr 1fr;
}

.recipe-cost-breakdown-table-row-compact {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr;
  padding: 0.3rem 0.4rem;
  font-size: 1.15rem;
  gap: 0.2rem;
}

.recipe-cost-breakdown-table-row-detailed {
  grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr;
}

.recipe-cost-breakdown-table-row-detailed > .recipe-cost-breakdown-table-cell-compact:nth-child(4) {
  display: none;
}

@media (min-width: 768px) {
  .recipe-cost-breakdown-table-row-detailed > .recipe-cost-breakdown-table-cell-compact:nth-child(4) {
    display: block;
  }
}

/* Mobile responsive for batch cost breakdown */

@media (max-width: 767px) {
  .recipe-cost-breakdown-table-header-compact:has(.recipe-cost-breakdown-table-header-detailed),
  .recipe-cost-breakdown-table-row-detailed {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .recipe-cost-breakdown-table-header-detailed {
    display: block;
    font-weight: bold;
    margin-top: 0.5rem;
  }
  
  .recipe-cost-breakdown-table-row-detailed > .recipe-cost-breakdown-table-cell-compact {
    display: block;
    padding: 0.4rem;
    border-bottom: 1px solid rgba(141, 110, 99, 0.2);
  }
  
  .recipe-cost-breakdown-table-row-detailed > .recipe-cost-breakdown-table-cell-compact:first-child {
    font-weight: bold;
    border-bottom: 2px solid rgba(141, 110, 99, 0.3);
  }
  
  .recipe-cost-breakdown-table-row-detailed > .recipe-cost-breakdown-table-cell-compact::before {
    content: attr(data-label) ": ";
    font-weight: bold;
    color: #3e2723;
  }
  
  .recipe-cost-breakdown-table-row-detailed > .recipe-cost-breakdown-table-cell-compact:first-child::before {
    content: "";
  }
}

.recipe-cost-breakdown-table-cell-compact {
  font-size: 1.15rem;
  padding: 0.25rem 0.35rem;
  text-align: center;
}

.recipe-cost-breakdown-table-cell-compact:first-child {
  text-align: left;
}

/* Make columns narrower by reducing padding */

.recipe-cost-breakdown-table-cell-compact:first-child {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.recipe-cost-breakdown-table-cell-compact:nth-child(2),
.recipe-cost-breakdown-table-cell-compact:nth-child(3),
.recipe-cost-breakdown-table-cell-compact:nth-child(4) {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

/* Ensure row color classes work with recipe-cost-breakdown-table-row-compact */

.recipe-cost-breakdown-table-row-compact.recipe-ingredient-row-compact {
  background: rgba(33, 150, 243, 0.1);
}

.recipe-cost-breakdown-table-row-compact.recipe-ingredient-row-compact:hover {
  background: rgba(33, 150, 243, 0.15);
}

.recipe-cost-breakdown-table-row-compact.recipe-packaging-row-compact {
  background: rgba(76, 175, 80, 0.1);
}

.recipe-cost-breakdown-table-row-compact.recipe-packaging-row-compact:hover {
  background: rgba(76, 175, 80, 0.15);
}

.recipe-cost-breakdown-table-row-compact.recipe-appliance-row-compact {
  background: rgba(111, 66, 193, 0.1);
}

.recipe-cost-breakdown-table-row-compact.recipe-appliance-row-compact:hover {
  background: rgba(111, 66, 193, 0.15);
}

/* Override cost column font sizes to match table text size */

.recipe-cost-breakdown-table-cell-compact.ingredient-cost-compact,
.recipe-cost-breakdown-table-cell-compact.packaging-cost-compact,
.recipe-cost-breakdown-table-cell-compact.electricity-cost-compact,
.recipe-cost-breakdown-table-cell-compact.total-cost-compact,
.recipe-cost-breakdown-table-cell-compact.product-value-compact,
.recipe-cost-breakdown-table-cell-compact.profit-amount-compact,
.recipe-cost-breakdown-table-cell-compact.profit-margin-compact,
.recipe-cost-breakdown-table-cell-compact.wasted-cost-compact {
  font-size: 1rem;
}

/* Also ensure non-first-child cells (Per Item, Per Batch columns) match font size */

.recipe-cost-breakdown-table-cell-compact:not(:first-child) {
  font-size: 1rem;
}

/* Override recipe table cost column font sizes as well (for Recipe Components panel) */

.recipe-table-cell-compact.ingredient-cost-compact,
.recipe-table-cell-compact.packaging-cost-compact,
.recipe-table-cell-compact.electricity-cost-compact {
  font-size: 1rem;
}

.cook-input {
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 6px;
  padding: 0.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  color: #3e2723;
  transition: all 0.3s ease;
  text-align: center;
  font-weight: 600;
  width: 80px;
  min-width: 80px;
}

.cook-input:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.2);
}

/* Remove spinner arrows from number inputs */

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

.cook-input[type=number] {
  -moz-appearance: textfield;
}

.cook-yield-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.cook-yield-input {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
  text-align: center;
}

.cook-yield-input label {
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
  background: #f5f5dc;
  padding: 0.5rem;
  border: none;
  border-radius: 4px;
  margin-bottom: 0.25rem;
}

.cook-modal-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid #8d6e63;
  justify-content: center;
}

.cook-save-btn {
  background: #16a34a;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.8rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cook-save-btn:hover {
  background: #22c55e;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.cook-batch-btn {
  background: #9333ea;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.8rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cook-batch-btn:hover {
  background: #a855f7;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.cook-cancel-btn {
  background: #dc2626;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.8rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cook-cancel-btn:hover {
  background: #ef4444;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.cook-auth-message {
  text-align: center;
  padding: 2rem;
  background: #ffffff;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  margin: 2rem auto;
  max-width: 500px;
}

.cook-auth-message h2 {
  color: #2c1810;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.cook-auth-message p {
  color: #3e2723;
  font-size: 1.1rem;
}

/* ===============================================================================
                                DARK MODE STYLES
=============================================================================== */

.dark-mode.cook-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
}

.dark-mode.cook-page::before {
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
}

.dark-mode.cook-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .cook-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .cook-container {
  background-color: rgba(62, 39, 35, 0.9);
  border: 3px solid #000000;
}

.dark-mode .cook-title-panel {
  background-color: #8d6e63;
  border: 2px solid #000000;
}

.dark-mode .cook-title {
  color: #8d6e63;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.dark-mode .cook-back-nav-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #14545c;
  border: 3px solid #000000;
  color: #000000;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.dark-mode .cook-back-nav-button:hover {
  background-color: #1a6b75;
  color: #000000;
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.dark-mode .cook-section {
  background: #2c1810;
  border-color: #8d6e63;
}

.dark-mode .cook-flavour-item {
  background: #3e2723;
  border-color: #8d6e63;
  color: #fff8e1;
}

.dark-mode .cook-flavour-item:hover {
  background: #5d4037;
}

.dark-mode .cook-flavour-item h3 {
  color: #fff8e1;
}

.dark-mode .cook-flavour-controls {
  border-top-color: #8d6e63;
}

.dark-mode .cook-quantity-btn {
  border: 3px solid #000000;
  color: #ffffff;
}

.dark-mode .cook-quantity-btn:first-of-type {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.4);
}

.dark-mode .cook-quantity-btn:last-of-type {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  box-shadow: 0 4px 8px rgba(22, 163, 74, 0.4);
}

.dark-mode .cook-quantity-btn:first-of-type:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 6px 12px rgba(220, 38, 38, 0.6);
}

.dark-mode .cook-quantity-btn:last-of-type:hover {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 6px 12px rgba(22, 163, 74, 0.6);
}

.dark-mode .cook-quantity-value {
  color: #000000;
  background-color: transparent;
}

.dark-mode .cook-bag-label {
  color: #fff8e1;
}

.dark-mode .cook-add-batch-btn {
  background: #16a34a;
  border: 3px solid #000000;
  color: #000000;
}

.dark-mode .cook-add-batch-btn:hover {
  background: #22c55e;
  color: #000000;
}

.dark-mode .cook-add-batch-btn:disabled {
  background: #6b7280;
  color: #000000;
}

.dark-mode .cook-batch-item {
  background: #3e2723;
  border-color: #8d6e63;
  color: #fff8e1;
}

.dark-mode .cook-batch-item:hover {
  background: #5d4037;
}

.dark-mode .cook-batch-info h3 {
  color: #ffffff;
  background: #3e2723;
  border-color: #2c1810;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.dark-mode .cook-batch-info p {
  color: #fff8e1;
}

.dark-mode .cook-batch-value {
  color: #10b981 !important;
  background: #2c1810;
  border-color: #3e2723;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .cook-batch-cost {
  color: #f87171 !important;
  background: #2c1810;
  border-color: #3e2723;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .cook-batch-profit {
  color: #22c55e !important;
  background: #2c1810;
  border-color: #3e2723;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .cook-batch-summary {
  background: #3e2723;
  border-color: #8d6e63;
}

.dark-mode .cook-dehydrators-panel {
  background-color: rgba(62, 39, 35, 0.95);
  border-color: #8d6e63;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.dark-mode .cook-dehydrators-input-container label {
  color: #fff8e1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.dark-mode .cook-dehydrators-input {
  background-color: #5d4037;
  border-color: #8d6e63;
  color: #fff8e1;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .cook-dehydrators-input:focus {
  border-color: #a1887f;
  box-shadow: 0 0 0 4px rgba(161, 136, 127, 0.3), 0 6px 12px rgba(0, 0, 0, 0.4);
}

.dark-mode .cook-dehydrators-input:hover {
  border-color: #a1887f;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.dark-mode .cook-dehydrators-minus-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.5);
}

.dark-mode .cook-dehydrators-plus-btn {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  box-shadow: 0 4px 8px rgba(22, 163, 74, 0.5);
}

.dark-mode .cook-dehydrators-minus-btn:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 6px 12px rgba(220, 38, 38, 0.6);
}

.dark-mode .cook-dehydrators-plus-btn:hover {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 6px 12px rgba(22, 163, 74, 0.6);
}

.dark-mode .cook-dehydrators-info {
  color: #d7ccc8;
  text-shadow: 0 0 2px rgba(215, 204, 200, 0.2);
}

.dark-mode .cook-dehydrators-btn {
  background: linear-gradient(135deg, #9333ea 0%, #a855f7 100%);
  border: 3px solid #000000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.dark-mode .cook-dehydrators-btn:hover {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
}

.dark-mode .cook-summary-item span:first-child {
  color: #fff8e1;
}

.dark-mode .cook-summary-item span:last-child {
  color: #ffffff;
}

.dark-mode .cook-modal {
  background: #2c1810;
  border-color: #8d6e63;
}

.dark-mode .cook-inner-panel {
  background: #3e2723;
  border-color: #8d6e63;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .cook-ingredient-name {
  color: #fff8e1;
}

.dark-mode .cook-input-unit {
  color: #fff8e1;
}

.dark-mode .cook-input {
  background: #5d4037;
  color: #fff8e1;
  border-color: #8d6e63;
}

.dark-mode .cook-yield-input label {
  color: #fff8e1;
  background: #3e2723;
}

.dark-mode .cook-back-button {
  background: #dc2626;
  border: 3px solid #000000;
}

.dark-mode .cook-save-btn {
  background: #16a34a;
  border: 3px solid #000000;
}

.dark-mode .cook-batch-btn {
  background: #9333ea;
  border: 3px solid #000000;
}

.dark-mode .cook-cancel-btn {
  background: #dc2626;
  border: 3px solid #000000;
}

/* ===============================================================================
                                DREAM MODE STYLES
=============================================================================== */

.dream-mode.cook-page {
  background-color: #222;
}

.dream-mode.cook-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.cook-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .cook-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .cook-container {
  background-color: rgba(26, 26, 26, 0.9);
  border: 3px solid #000000;
}

.dream-mode .cook-title-panel {
  background-color: rgba(45, 20, 60, 0.95);
  border: 2px solid #000000;
}

.dream-mode .cook-title {
  color: #ffffff;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  animation: dreamText 20s infinite linear;
}

.dream-mode .cook-back-nav-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #14545c;
  border: 3px solid #000000;
  color: #000000;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: none;
  animation: none;
}

.dream-mode .cook-back-nav-button:hover {
  background-color: #1a6b75;
  color: #ffffff;
  border: 3px solid #000000;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(20, 84, 92, 0.8),
    0 0 25px rgba(26, 107, 117, 0.6),
    0 0 35px rgba(13, 61, 66, 0.4);
  animation: dreamSparkle 1.5s ease-in-out infinite alternate;
}

@keyframes dreamText {
  0% {
    color: #000080; /* Dark Blue */
  }
  16.67% {
    color: #008080; /* Teal */
  }
  33.33% {
    color: #00ffff; /* Cyan */
  }
  50% {
    color: #008000; /* Green */
  }
  66.67% {
    color: #006400; /* Dark Green */
  }
  83.33% {
    color: #800080; /* Purple */
  }
  100% {
    color: #000080; /* Back to Dark Blue for smooth loop */
  }
}

.dream-mode .cook-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8f5f0 100%);
  border-color: #8d6e63;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(141, 110, 99, 0.1);
}

.dream-mode .cook-flavour-item {
  background: linear-gradient(135deg, #f8f5f0 0%, #fff8e1 100%);
  border-color: #8d6e63;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dream-mode .cook-flavour-item:hover {
  background: linear-gradient(135deg, #fff8e1 0%, #f5f5dc 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(141, 110, 99, 0.3);
}

.dream-mode .cook-flavour-controls {
  border-top-color: #8d6e63;
}

.dream-mode .cook-quantity-btn {
  border: 3px solid #000000;
  color: #ffffff;
  text-shadow: none;
  animation: none;
}

.dream-mode .cook-quantity-btn:first-of-type {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5);
}

.dream-mode .cook-quantity-btn:last-of-type {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.5);
}

.dream-mode .cook-quantity-btn:first-of-type:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 
    0 6px 16px rgba(220, 38, 38, 0.7),
    0 0 15px rgba(220, 38, 38, 0.8),
    0 0 25px rgba(220, 38, 38, 0.6);
  animation: dreamSparkle 1.5s ease-in-out infinite alternate;
}

.dream-mode .cook-quantity-btn:last-of-type:hover {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 
    0 6px 16px rgba(22, 163, 74, 0.7),
    0 0 15px rgba(22, 163, 74, 0.8),
    0 0 25px rgba(22, 163, 74, 0.6);
  animation: dreamSparkle 1.5s ease-in-out infinite alternate;
}

.dream-mode .cook-quantity-value {
  color: #ffffff;
  background-color: rgba(45, 20, 60, 0.3);
  text-shadow: none;
  animation: none;
}

.dream-mode .cook-bag-label {
  color: #ffffff;
  text-shadow: none;
  animation: none;
}

.dream-mode .cook-add-batch-btn {
  background: #16a34a;
  border: 3px solid #000000;
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream-mode .cook-add-batch-btn:hover {
  background: #22c55e;
  color: #ffffff;
  border: 3px solid #000000;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 128, 0, 0.8),
    0 0 25px rgba(34, 139, 34, 0.6),
    0 0 35px rgba(46, 139, 87, 0.4);
  animation: dreamSparkle 1.5s ease-in-out infinite alternate;
}

.dream-mode .cook-add-batch-btn:disabled {
  background: #6b7280;
  color: #000000;
  border: 3px solid #000000;
  text-shadow: none;
  animation: none;
}

.dream-mode .cook-batch-item {
  background: linear-gradient(135deg, #f8f5f0 0%, #fff8e1 100%);
  border-color: #8d6e63;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dream-mode .cook-batch-item:hover {
  background: linear-gradient(135deg, #fff8e1 0%, #f5f5dc 100%);
  transform: translateX(2px);
  box-shadow: 0 4px 8px rgba(141, 110, 99, 0.2);
}

.dream-mode .cook-batch-info h3 {
  color: #ffffff;
  background: linear-gradient(135deg, #5d4037 0%, #8d6e63 100%);
  border-color: #3e2723;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.4);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.dream-mode .cook-batch-value {
  color: #10b981 !important;
  text-shadow: none;
  animation: none;
  background: linear-gradient(135deg, #ffffff 0%, #f8f5f0 100%);
  border-color: #8d6e63;
  box-shadow: 0 2px 8px rgba(141, 110, 99, 0.3);
}

.dream-mode .cook-batch-cost {
  color: #f87171 !important;
  text-shadow: none;
  animation: none;
  background: linear-gradient(135deg, #ffffff 0%, #f8f5f0 100%);
  border-color: #8d6e63;
  box-shadow: 0 2px 8px rgba(141, 110, 99, 0.3);
}

.dream-mode .cook-batch-profit {
  color: #22c55e !important;
  text-shadow: none;
  animation: none;
  background: linear-gradient(135deg, #ffffff 0%, #f8f5f0 100%);
  border-color: #8d6e63;
  box-shadow: 0 2px 8px rgba(141, 110, 99, 0.3);
}

.dream-mode .cook-batch-summary {
  background: linear-gradient(135deg, #f8f5f0 0%, #fff8e1 100%);
  border-color: #8d6e63;
}

.dream-mode .cook-dehydrators-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 245, 240, 0.95) 100%);
  border-color: #8d6e63;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(141, 110, 99, 0.1);
}

.dream-mode .cook-dehydrators-input-container label {
  color: #3e2723;
  text-shadow: 0 0 8px rgba(62, 39, 35, 0.3);
}

.dream-mode .cook-dehydrators-input {
  background: linear-gradient(135deg, #ffffff 0%, #f8f5f0 100%);
  border-color: #8d6e63;
  color: #3e2723;
  box-shadow: 0 4px 12px rgba(141, 110, 99, 0.3);
}

.dream-mode .cook-dehydrators-input:focus {
  border-color: #a1887f;
  box-shadow: 0 0 0 4px rgba(161, 136, 127, 0.4), 0 6px 16px rgba(141, 110, 99, 0.4);
  transform: scale(1.05);
}

.dream-mode .cook-dehydrators-input:hover {
  border-color: #a1887f;
  box-shadow: 0 6px 16px rgba(141, 110, 99, 0.4);
  transform: translateY(-2px);
}

.dream-mode .cook-dehydrators-minus-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.dream-mode .cook-dehydrators-plus-btn {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.5);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.dream-mode .cook-dehydrators-minus-btn:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.7);
  transform: translateY(-2px);
}

.dream-mode .cook-dehydrators-plus-btn:hover {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.7);
  transform: translateY(-2px);
}

.dream-mode .cook-dehydrators-info {
  color: #5d4037;
  text-shadow: 0 0 5px rgba(93, 64, 55, 0.3);
}

.dream-mode .cook-dehydrators-btn {
  background: linear-gradient(135deg, #9333ea 0%, #a855f7 100%);
  border: 3px solid #000000;
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.4);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.dream-mode .cook-dehydrators-btn:hover {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
  box-shadow: 0 6px 16px rgba(147, 51, 234, 0.6);
  transform: translateY(-2px);
}

.dream-mode .cook-modal {
  background: linear-gradient(135deg, #f5f5dc 0%, #e8e8d0 100%);
  border-color: #8d6e63;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(141, 110, 99, 0.1);
}

.dream-mode .cook-inner-panel {
  background: linear-gradient(135deg, #f5f5dc 0%, #e8e8d0 100%);
  border-color: #8d6e63;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(141, 110, 99, 0.2);
}

.dream-mode .cook-back-button {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  border: 3px solid #000000;
}

.dream-mode .cook-save-btn {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  border: 3px solid #000000;
}

.dream-mode .cook-batch-btn {
  background: linear-gradient(135deg, #9333ea 0%, #a855f7 100%);
  border: 3px solid #000000;
}

.dream-mode .cook-cancel-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  border: 3px solid #000000;
}

.dream-mode .cook-dehydrators-info {
  color: #5d4037;
  text-shadow: 0 0 5px rgba(93, 64, 55, 0.3);
}

.dream-mode .cook-dehydrators-details-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: 3px solid #000000;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.dream-mode .cook-dehydrators-details-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.6);
  transform: translateY(-2px);
}

.dream-mode .cook-dehydrators-btn {
  background: linear-gradient(135deg, #9333ea 0%, #a855f7 100%);
  border: 3px solid #000000;
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.4);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* ===============================================================================
                            RESPONSIVE DESIGN
=============================================================================== */

/* Mobile First - Base styles for all screen sizes */

.cook-page {
  padding: 0.5rem;
}

.cook-background-panel {
  padding: 1rem;
  width: 98%;
  max-width: 100%;
}

.cook-container {
  padding: 1.5rem;
}

.cook-title {
  font-size: 2.2rem;
}

.cook-section-title-panel h2 {
  font-size: 2.2rem;
}

.cook-flavours-grid {
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 1rem;
}

.cook-flavour-item {
  padding: 1.5rem;
  gap: 1.5rem;
}

.cook-flavour-item img {
  width: 120px;
  height: 120px;
}

.cook-flavour-item h3 {
  font-size: 1.5rem;
}

.cook-quantity-controls {
  gap: 1rem;
}

.cook-bag-controls {
  gap: 0.75rem;
  max-width: 200px;
}

.cook-quantity-btn {
  width: 36px;
  height: 36px;
  font-size: 1.2rem;
}

.cook-quantity-value {
  min-width: 60px;
  padding: 0.5rem 1rem;
  font-size: 1.1rem;
}

.cook-batch-list {
  grid-template-columns: 1fr;
  gap: 1rem;
}

.cook-batch-item {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
}

.cook-batch-summary {
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

.cook-panels-container {
  flex-direction: column;
  gap: 1rem;
}

.cook-dehydrators-panel {
  min-width: 100%;
  max-width: 100%;
}

.cook-dehydrators-info {
  gap: 0.75rem;
}

.cook-dehydrators-details-btn {
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  min-width: 100px;
}

.cook-dehydrators-btn {
  padding: 0.8rem 1.6rem;
  font-size: 1.1rem;
  min-width: 120px;
}

/* Small screens - 480px and larger */

@media (min-width: 480px) {
  .cook-page {
    padding: 1rem;
  }
  
  .cook-background-panel {
    padding: 1.5rem;
    max-width: 800px;
  }
  
  .cook-container {
    padding: 2rem;
  }
  
  .cook-title {
    font-size: 2.6rem;
  }
  
  .cook-section-title-panel h2 {
    font-size: 2.4rem;
  }
  
  .cook-flavours-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.75rem;
    padding: 1.5rem;
  }
  
  .cook-flavour-item {
    padding: 1.75rem;
    gap: 1.75rem;
  }
  
  .cook-flavour-item img {
    width: 130px;
    height: 130px;
  }
  
  .cook-flavour-item h3 {
    font-size: 1.6rem;
  }
  
  .cook-batch-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  
  .cook-batch-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 1.75rem;
  }
  
  .cook-batch-summary {
    flex-direction: row;
    gap: 1.5rem;
    text-align: left;
  }
  
  .cook-panels-container {
    flex-direction: row;
    gap: 1.5rem;
  }
  
  .cook-dehydrators-panel {
    min-width: 280px;
    max-width: 350px;
  }
  
  .cook-dehydrators-info {
    gap: 1rem;
  }
  
  .cook-dehydrators-details-btn {
    padding: 0.7rem 1.4rem;
    font-size: 0.95rem;
    min-width: 110px;
  }
  
  .cook-dehydrators-btn {
    padding: 0.9rem 1.8rem;
    font-size: 1.15rem;
    min-width: 130px;
  }
}

/* Medium screens - 600px and larger */

@media (min-width: 600px) {
  .cook-page {
    padding: 1rem;
  }
  
  .cook-background-panel {
    padding: 1.5rem;
  }
  
  .cook-container {
    padding: 2rem;
  }
  
  .cook-title {
    font-size: 2.8rem;
  }
  
  .cook-section-title-panel h2 {
    font-size: 2.6rem;
  }
  
  .cook-flavours-grid {
    gap: 1.75rem;
    padding: 1.25rem;
  }
  
  .cook-flavour-item {
    padding: 1.75rem;
  }
  
  .cook-flavour-item img {
    width: 140px;
    height: 140px;
  }
  
  .cook-flavour-item h3 {
    font-size: 1.7rem;
  }
  
  .cook-batch-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

/* Tablet styles - 768px and larger */

@media (min-width: 768px) {
  .cook-page {
    padding: 1.5rem;
  }
  
  .cook-background-panel {
    padding: 2rem;
    max-width: 1200px;
  }
  
  .cook-container {
    padding: 2.5rem;
  }
  
  .cook-title {
    font-size: 3.2rem;
  }
  
  .cook-section-title-panel h2 {
    font-size: 2.8rem;
  }
  
  .cook-flavours-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
  }
  
  .cook-flavour-item {
    padding: 2rem;
  }
  
  .cook-flavour-item img {
    width: 150px;
    height: 150px;
  }
  
  .cook-flavour-item h3 {
    font-size: 1.8rem;
  }
  
  .cook-batch-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  
  .cook-batch-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 2rem;
  }
  
  .cook-batch-summary {
    flex-direction: row;
    gap: 2rem;
    text-align: left;
  }
  
  .cook-panels-container {
    flex-direction: row;
    gap: 2rem;
  }
  
  .cook-dehydrators-panel {
    min-width: 300px;
    max-width: 400px;
  }
  
  .cook-dehydrators-info {
    gap: 1.25rem;
  }
  
  .cook-dehydrators-details-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    min-width: 120px;
  }
  
  .cook-dehydrators-btn {
    padding: 1rem 2rem;
    font-size: 1.2rem;
    min-width: 140px;
  }
}

/* Desktop styles - 1024px and larger */

@media (min-width: 1024px) {
  .cook-background-panel {
    max-width: 1200px;
  }
  
  .cook-batch-list {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .cook-flavours-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
  
  .cook-flavour-item img {
    width: 160px;
    height: 160px;
  }
  
  .cook-flavour-item h3 {
    font-size: 1.9rem;
  }
  
  .cook-title {
    font-size: 3.5rem;
  }
  
  .cook-dehydrators-info {
    gap: 1.5rem;
  }
  
  .cook-dehydrators-details-btn {
    padding: 0.8rem 1.6rem;
    font-size: 1.05rem;
    min-width: 125px;
  }
  
  .cook-dehydrators-btn {
    padding: 1.1rem 2.2rem;
    font-size: 1.25rem;
    min-width: 145px;
  }
}

/* Large desktop styles - 1200px and larger */

@media (min-width: 1200px) {
  .cook-background-panel {
    max-width: 1400px;
  }
  
  .cook-flavours-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
  
  .cook-flavour-item img {
    width: 170px;
    height: 170px;
  }
  
  .cook-flavour-item h3 {
    font-size: 2rem;
  }
  
  .cook-title {
    font-size: 4rem;
  }
  
  .cook-dehydrators-info {
    gap: 1.75rem;
  }
  
  .cook-dehydrators-details-btn {
    padding: 0.85rem 1.7rem;
    font-size: 1.1rem;
    min-width: 130px;
  }
  
  .cook-dehydrators-btn {
    padding: 1.15rem 2.3rem;
    font-size: 1.3rem;
    min-width: 150px;
  }
}

/* Extra large screens - 1400px and larger */

@media (min-width: 1400px) {
  .cook-background-panel {
    max-width: 1600px;
  }
  
  .cook-flavours-grid {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  }
  
  .cook-flavour-item img {
    width: 180px;
    height: 180px;
  }
  
  .cook-flavour-item h3 {
    font-size: 2.1rem;
  }
}

/* Recipe panel container spacing */

.recipe-panel-container:last-child {
  margin-bottom: 2rem !important;
}

@media (max-width: 768px) {
  .recipe-panel-container:last-child {
    margin-bottom: 2.5rem !important;
  }
}

/* Responsive styles for recipe panels on narrow screens */

@media (max-width: 768px) {
  .recipe-panel-row-responsive {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto;
    gap: 1.25rem !important;
    justify-items: center;
    text-align: center;
    padding: 1rem 1.25rem !important;
  }
  
  /* Expand/Collapse Icon - center on fourth row (below remove button) */
  .recipe-panel-row-responsive > div:first-child {
    grid-column: 1;
    grid-row: 4;
    justify-self: center;
  }
  
  /* Product Name and Cost/Profit - center, stack vertically on first row */
  .recipe-panel-row-responsive > div:nth-child(2) {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  /* Spacer - hide on mobile */
  .recipe-panel-row-responsive > div:nth-child(3) {
    display: none;
  }
  
  /* Quantity Control - center on second row */
  .recipe-panel-row-responsive > div:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    margin-left: 0 !important;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  /* Remove Button - center on third row */
  .recipe-panel-row-responsive > div:nth-child(5) {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
    margin-left: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  /* Expand/Collapse Icon - add spacing */
  .recipe-panel-row-responsive > div:first-child {
    margin-top: 0.5rem;
  }
  
  /* Remove button container - prevent stretching */
  .recipe-panel-row-responsive > div:nth-child(5) > div {
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Ensure buttons stay fixed size */
  .recipe-panel-row-responsive button[title="Decrease quantity"],
  .recipe-panel-row-responsive button[title="Increase quantity"] {
    min-width: 28px !important;
    max-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
  }
  
  /* Ensure quantity input stays fixed size - same across all screen sizes */
  .recipe-panel-row-responsive input[type="number"] {
    width: 40px !important;
    height: 28px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
  }
  
  /* Ensure remove button stays fixed size - same as wide screen */
  /* Use very specific selector to override inline styles */
  .recipe-panel-row-responsive > div:last-child .recipe-remove-button,
  .recipe-panel-row-responsive > div:nth-child(5) .recipe-remove-button,
  .recipe-panel-row-responsive .recipe-remove-button,
  .recipe-panel-row-responsive button[title="Remove from batch"],
  .recipe-panel-row-responsive button.recipe-remove-button {
    padding: 0.5rem 1.2rem !important;
    height: auto !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    min-width: auto !important;
    max-width: none !important;
    width: auto !important;
    min-height: auto !important;
    max-height: none !important;
    line-height: normal !important;
    border-radius: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Stack product name and cost/profit vertically on mobile */
  .recipe-panel-row-responsive > div:nth-child(2) > h3 {
    margin-bottom: 0.5rem;
    text-align: center;
  }
  
  .recipe-panel-row-responsive > div:nth-child(2) > div {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* Make table responsive - use card layout on mobile */
  .recipe-cost-breakdown-content-wrapper-compact {
    overflow-x: visible;
    width: 100%;
    padding: 0;
  }
  
  .recipe-cost-breakdown-table-compact {
    display: block;
    width: 100%;
  }
  
  .recipe-cost-breakdown-table-header-compact {
    display: none; /* Hide header on mobile */
  }
  
  .recipe-cost-breakdown-table-row-compact {
    display: block;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border: 2px solid #8d6e63;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
  }
  
  /* First cell (Name column) spans full width and is bold */
  .recipe-cost-breakdown-table-row-compact > .recipe-cost-breakdown-table-cell-compact:first-child {
    display: block;
    font-weight: bold;
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #8d6e63;
    margin-bottom: 0.5rem;
    text-align: center;
  }
  
  /* Other cells display as label-value pairs */
  .recipe-cost-breakdown-table-row-compact > .recipe-cost-breakdown-table-cell-compact:not(:first-child) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(141, 110, 99, 0.2);
    font-size: 0.9rem;
    align-items: center;
  }
  
  .recipe-cost-breakdown-table-row-compact > .recipe-cost-breakdown-table-cell-compact:not(:first-child):last-child {
    border-bottom: none;
  }
  
  /* Label cells (Amount, Per Item, etc.) */
  .recipe-cost-breakdown-table-row-compact > .recipe-cost-breakdown-table-cell-compact:not(:first-child)::before {
    content: attr(data-label);
    font-weight: 600;
    color: #3e2723;
    text-align: left;
  }
  
  /* Value cells align right */
  .recipe-cost-breakdown-table-row-compact > .recipe-cost-breakdown-table-cell-compact:not(:first-child) {
    text-align: right;
  }
}

/* Tablet sizes - ensure consistent sizing */

@media (min-width: 481px) and (max-width: 1024px) {
  /* Ensure quantity input stays fixed size on tablet */
  .recipe-panel-row-responsive input[type="number"] {
    width: 40px !important;
    height: 28px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
  }
  
  /* Ensure remove button stays fixed size on tablet */
  .recipe-panel-row-responsive > div:last-child .recipe-remove-button,
  .recipe-panel-row-responsive > div:nth-child(5) .recipe-remove-button,
  .recipe-panel-row-responsive .recipe-remove-button,
  .recipe-panel-row-responsive button[title="Remove from batch"],
  .recipe-panel-row-responsive button.recipe-remove-button {
    padding: 0.5rem 1.2rem !important;
    height: auto !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    min-height: auto !important;
    max-height: none !important;
    line-height: normal !important;
    border-radius: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  .recipe-panel-row-responsive {
    padding: 1rem 1rem !important;
    gap: 1rem !important;
  }
  
  .recipe-panel-row-responsive > div:nth-child(2) > h3 {
    font-size: 1.1rem !important;
  }
  
  .recipe-panel-row-responsive > div:nth-child(2) > div > span {
    font-size: 0.95rem !important;
  }
  
  /* Ensure buttons stay fixed size on very small screens */
  .recipe-panel-row-responsive button[title="Decrease quantity"],
  .recipe-panel-row-responsive button[title="Increase quantity"] {
    min-width: 28px !important;
    max-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    width: 28px !important;
    height: 28px !important;
  }
  
  /* Ensure quantity input stays fixed size on very small screens */
  .recipe-panel-row-responsive input[type="number"] {
    width: 40px !important;
    height: 28px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure remove button stays fixed size on very small screens - same as wide screen */
  .recipe-panel-row-responsive > div:last-child .recipe-remove-button,
  .recipe-panel-row-responsive > div:nth-child(5) .recipe-remove-button,
  .recipe-panel-row-responsive .recipe-remove-button,
  .recipe-panel-row-responsive button[title="Remove from batch"],
  .recipe-panel-row-responsive button.recipe-remove-button {
    padding: 0.5rem 1.2rem !important;
    height: auto !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    min-height: auto !important;
    max-height: none !important;
    line-height: normal !important;
    border-radius: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
} /* Admin Loyalty Page Styles - Smooth Sales Theme */

/* Main Layout Fixes */
.admin-panel-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.admin-background-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.admin-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 0 1rem;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 2rem;
  padding: 1rem 0;
}

.admin-back-button {
  position: absolute;
  left: 0;
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(141, 110, 99, 0.3);
}

.admin-back-button:hover {
  background: linear-gradient(135deg, #5d4037 0%, #8d6e63 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(141, 110, 99, 0.4);
}

.admin-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #5d4037;
  text-align: center;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.admin-tab-button {
  padding: 1rem 2rem;
  border: none;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
  color: #666;
}

.admin-tab-button.active {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(141, 110, 99, 0.3);
}

.admin-tab-button:hover:not(.active) {
  background: linear-gradient(135deg, #d0d0d0 0%, #e8e8e8 100%);
  transform: translateY(-1px);
}

/* Achievements button - Green */
.admin-tab-button.achievements-btn.active {
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
  color: white;
}

.admin-tab-button.achievements-btn:hover:not(.active) {
  background: linear-gradient(135deg, #45a049 0%, #5cb85c 100%);
  color: white;
}

.admin-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.admin-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.admin-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f5f5dc 0%, #e8e8d3 100%);
  border: 3px solid #8d6e63;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(141, 110, 99, 0.15);
}

.admin-section-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #5d4037;
  margin: 0;
  text-align: center;
  flex: 1;
}

.admin-action-buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Loyalty Levels Container */
.loyalty-levels-container {
  margin-top: 0;
  flex: 1;
}

.loyalty-empty-state {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, #f5f5dc 0%, #e8e8d3 100%);
  border: 3px solid #8d6e63;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(141, 110, 99, 0.2);
}

.loyalty-empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.7;
}

.loyalty-empty-state h3 {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.5rem;
  color: #5d4037;
  margin-bottom: 0.5rem;
}

.loyalty-empty-state p {
  color: #8d6e63;
  font-size: 1rem;
}

/* Loyalty Levels List */
.loyalty-levels-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Table Header */
.loyalty-levels-table-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  border-radius: 10px;
  margin-bottom: 0.5rem;
}

.loyalty-table-header-cell {
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  color: #f5f5dc;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
}

.loyalty-table-header-cell.status-cell {
  text-align: center;
}

.loyalty-table-header-cell.action-cell {
  text-align: right;
}

.loyalty-level-wrapper {
  margin-bottom: 0.5rem;
}

.loyalty-level-item {
  background: linear-gradient(135deg, #f5f5dc 0%, #e8e8d3 100%);
  border: 3px solid #8d6e63;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(141, 110, 99, 0.15);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.loyalty-level-item.expanded {
  border-color: #14545c;
  box-shadow: 0 6px 20px rgba(20, 84, 92, 0.3);
  background: linear-gradient(135deg, #e8f4f5 0%, #d4e8ea 100%);
}

.loyalty-level-item.editing {
  border-color: #14545c;
  box-shadow: 0 6px 20px rgba(20, 84, 92, 0.3);
  background: linear-gradient(135deg, #e8f4f5 0%, #d4e8ea 100%);
  cursor: default;
}

/* Table Row Style - Higher specificity to override AdminPanel.css */
.loyalty-levels-list .loyalty-level-item .loyalty-level-row {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important;
  gap: 1rem !important;
  align-items: center !important;
  padding: 1rem 1.5rem !important;
  transition: all 0.3s ease !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  cursor: inherit !important;
}

.loyalty-levels-list .loyalty-level-item:not(.editing) .loyalty-level-row:hover {
  background: rgba(20, 84, 92, 0.05) !important;
}

.loyalty-levels-list .loyalty-level-item.editing .loyalty-level-row {
  cursor: default !important;
}

.loyalty-levels-list .loyalty-level-cell {
  display: flex !important;
  align-items: center !important;
  font-family: 'The Wanters DEMO', serif !important;
  justify-content: flex-start !important;
  padding: 0.5rem !important;
}

.loyalty-levels-list .loyalty-level-cell.name-cell {
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: #5d4037 !important;
}

.loyalty-levels-list .loyalty-level-cell.points-cell,
.loyalty-levels-list .loyalty-level-cell.discount-cell {
  font-weight: 600 !important;
  color: #5d4037 !important;
  font-size: 1rem !important;
}

.loyalty-levels-list .loyalty-level-name,
.loyalty-levels-list .loyalty-level-points {
  user-select: none !important;
  transition: all 0.2s ease !important;
  font-weight: 600 !important;
  color: #3e2723 !important;
  font-family: 'The Wanters DEMO', serif !important;
  font-size: 1rem !important;
  display: block !important;
}

/* Inline Edit Inputs */
.loyalty-levels-list .loyalty-edit-input-inline {
  width: 100% !important;
  padding: 0.5rem 0.75rem !important;
  border: 2px solid #14545c !important;
  border-radius: 6px !important;
  font-family: 'Verdana', sans-serif !important;
  font-size: 1rem !important;
  background: white !important;
  color: #5d4037 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(20, 84, 92, 0.2) !important;
}

.loyalty-levels-list .loyalty-edit-input-inline:focus {
  outline: none !important;
  border-color: #14545c !important;
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.3) !important;
}

.loyalty-levels-list .loyalty-edit-actions-inline {
  display: flex !important;
  gap: 0.5rem !important;
  justify-content: flex-end !important;
}

.loyalty-levels-list .loyalty-level-cell.status-cell {
  display: flex !important;
  justify-content: center !important;
}

.loyalty-levels-list .loyalty-level-cell.action-cell {
  display: flex !important;
  justify-content: flex-end !important;
}

.loyalty-levels-list .loyalty-level-discount {
  font-family: 'The Wanters DEMO', serif !important;
  color: #3e2723 !important;
  font-weight: 600 !important;
}


.loyalty-save-inline-btn,
.loyalty-cancel-inline-btn {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  min-width: 80px;
}

.loyalty-save-inline-btn {
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%) !important;
  color: white !important;
  border: 2px solid #388e3c !important;
}

.loyalty-save-inline-btn:hover {
  background: linear-gradient(135deg, #388e3c 0%, #4caf50 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.3);
}

.loyalty-cancel-inline-btn {
  background: linear-gradient(135deg, #f44336 0%, #e57373 100%) !important;
  color: white !important;
  border: 2px solid #d32f2f !important;
}

.loyalty-cancel-inline-btn:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #f44336 100%) !important;
  border-color: #c62828 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(244, 67, 54, 0.3);
}

/* Remove Button */
.loyalty-remove-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #f44336 0%, #e57373 100%);
  color: white;
}

.loyalty-remove-btn:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #f44336 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

/* Rewards Section - Attached directly to the row */
.loyalty-level-item .loyalty-rewards-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 1.5rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease, border-top 0.3s ease;
}

.loyalty-level-item.expanded .loyalty-rewards-section {
  max-height: 2000px;
  padding: 1rem 1.5rem !important;
  padding-top: 1rem !important;
  margin-top: 0 !important;
  border-top: 3px solid #57058A !important;
  background: rgba(87, 5, 138, 0.05) !important;
  border-radius: 0 0 12px 12px !important;
  opacity: 1;
}

.loyalty-rewards-header {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.loyalty-rewards-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #f5f5dc;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.loyalty-rewards-content {
  min-height: 60px;
  margin-bottom: 1rem;
}

.loyalty-rewards-placeholder {
  color: #8d6e63;
  font-style: italic;
  text-align: center;
  padding: 1rem;
}

.loyalty-add-reward-btn {
  width: 100%;
  padding: 0.75rem 1.5rem;
  border: 2px solid #57058A;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(87, 5, 138, 0.3);
}

.loyalty-add-reward-btn:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(87, 5, 138, 0.4);
}

.loyalty-level-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #8d6e63 0%, #a1887f 50%, #8d6e63 100%);
}

.loyalty-level-item:hover:not(.editing) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(141, 110, 99, 0.25);
  border-color: #5d4037;
}

.loyalty-level-item.expanded:hover:not(.editing) {
  border-color: #14545c;
  box-shadow: 0 8px 24px rgba(20, 84, 92, 0.35);
}

.loyalty-level-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.loyalty-level-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.loyalty-level-number {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #5d4037;
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(141, 110, 99, 0.3);
}

.loyalty-level-name {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: #5d4037;
}

.loyalty-level-status {
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.loyalty-level-status.enabled {
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.loyalty-level-status.disabled {
  background: linear-gradient(135deg, #f44336 0%, #e57373 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
}

.loyalty-level-details {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.loyalty-level-requirement,
.loyalty-level-reward {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.loyalty-requirement-label,
.loyalty-reward-label {
  font-size: 0.85rem;
  color: #8d6e63;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.loyalty-requirement-value,
.loyalty-reward-value {
  font-size: 1rem;
  color: #5d4037;
  font-weight: 600;
}

.loyalty-level-message {
  margin-top: 0.5rem;
}

.loyalty-message-text {
  font-style: italic;
  color: #8d6e63;
  font-size: 0.95rem;
  line-height: 1.4;
}

.loyalty-level-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.loyalty-edit-btn,
.loyalty-delete-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.loyalty-edit-btn {
  background: linear-gradient(135deg, #2196f3 0%, #42a5f5 100%);
  color: white;
}

.loyalty-edit-btn:hover {
  background: linear-gradient(135deg, #1976d2 0%, #2196f3 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.loyalty-delete-btn {
  background: linear-gradient(135deg, #f44336 0%, #e57373 100%);
  color: white;
}

.loyalty-delete-btn:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #f44336 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

/* Edit Modal Styles */
.loyalty-edit-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 1rem;
}

.loyalty-edit-modal {
  background: linear-gradient(135deg, #f5f5dc 0%, #e8e8d3 100%);
  border: 3px solid #8d6e63;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(141, 110, 99, 0.4);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.loyalty-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 2px solid #8d6e63;
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  border-radius: 17px 17px 0 0;
}

.loyalty-modal-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.loyalty-modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.loyalty-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.loyalty-modal-content {
  padding: 2rem;
}

.loyalty-form-group {
  margin-bottom: 1.5rem;
}

.loyalty-form-label {
  display: block;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 600;
  color: #5d4037;
  margin-bottom: 0.5rem;
}

.loyalty-form-input,
.loyalty-form-select,
.loyalty-form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #8d6e63;
  border-radius: 10px;
  font-family: 'Verdana', sans-serif;
  font-size: 1rem;
  background: white;
  color: #5d4037;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(141, 110, 99, 0.1);
}

.loyalty-form-input:focus,
.loyalty-form-select:focus,
.loyalty-form-textarea:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 3px rgba(141, 110, 99, 0.2);
  transform: translateY(-1px);
}

.loyalty-form-textarea {
  resize: vertical;
  min-height: 100px;
}

.loyalty-form-help {
  display: block;
  font-size: 0.85rem;
  color: #8d6e63;
  margin-top: 0.25rem;
  font-style: italic;
}

.loyalty-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 600;
  color: #5d4037;
}

.loyalty-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #8d6e63;
  cursor: pointer;
}

.loyalty-checkbox-text {
  user-select: none;
}

.loyalty-modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid #8d6e63;
}

.loyalty-cancel-btn,
.loyalty-save-btn {
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.loyalty-cancel-btn {
  background: linear-gradient(135deg, #f44336 0%, #e57373 100%);
  color: white;
}

.loyalty-cancel-btn:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #f44336 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(244, 67, 54, 0.3);
}

.loyalty-save-btn {
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
  color: white;
}

.loyalty-save-btn:hover {
  background: linear-gradient(135deg, #388e3c 0%, #4caf50 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.3);
}

/* Dark Mode Support */
.dark-mode .loyalty-level-item {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border-color: #555;
  color: #e0e0e0;
}

.dark-mode .loyalty-level-name,
.dark-mode .loyalty-requirement-value,
.dark-mode .loyalty-reward-value {
  color: #e0e0e0;
}

.dark-mode .loyalty-requirement-label,
.dark-mode .loyalty-reward-label,
.dark-mode .loyalty-message-text {
  color: #b0b0b0;
}

.dark-mode .loyalty-edit-modal {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border-color: #555;
}

.dark-mode .loyalty-form-input,
.dark-mode .loyalty-form-select,
.dark-mode .loyalty-form-textarea {
  background: #1a1a1a;
  border-color: #555;
  color: #e0e0e0;
}

.dark-mode .loyalty-form-label,
.dark-mode .loyalty-checkbox-text {
  color: #e0e0e0;
}

/* Action Buttons */
.loyalty-add-btn,
.loyalty-save-btn,
.loyalty-refresh-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-right: 0.75rem;
}

.loyalty-add-btn {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  color: white;
  border: 3px solid #004d06;
  box-shadow: 0 4px 8px rgba(0, 119, 10, 0.3);
}

.loyalty-add-btn:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.4);
  border-color: #004d06;
  color: #3e2723 !important;
}

.loyalty-save-btn {
  background: linear-gradient(135deg, #2196f3 0%, #42a5f5 100%);
  color: white;
}

.loyalty-save-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #1976d2 0%, #2196f3 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(33, 150, 243, 0.3);
}

.loyalty-save-btn:disabled {
  background: linear-gradient(135deg, #bdbdbd 0%, #e0e0e0 100%);
  color: #757575;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.loyalty-save-btn.has-changes {
  background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3); }
  50% { box-shadow: 0 6px 20px rgba(255, 152, 0, 0.5); }
  100% { box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3); }
}

.loyalty-refresh-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: white;
}

.loyalty-refresh-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #5d4037 0%, #8d6e63 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(141, 110, 99, 0.3);
}

.loyalty-refresh-btn:disabled {
  background: linear-gradient(135deg, #bdbdbd 0%, #e0e0e0 100%);
  color: #757575;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Additional Layout Fixes */
.admin-loading {
  text-align: center;
  padding: 3rem;
  font-size: 1.2rem;
  color: #8d6e63;
  font-family: 'The Wanters DEMO', serif;
}

.admin-save-message {
  text-align: center;
  padding: 1rem;
  margin: 1rem 0;
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
  color: white;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

/* Fix modal positioning */
.loyalty-edit-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 1rem;
}

.loyalty-edit-modal {
  background: linear-gradient(135deg, #f5f5dc 0%, #e8e8d3 100%);
  border: 3px solid #8d6e63;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(141, 110, 99, 0.4);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

/* Responsive Design */
@media (max-width: 768px) {
  .admin-container {
    padding: 0 0.5rem;
  }
  
  .admin-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .admin-back-button {
    position: static;
    align-self: center;
  }
  
  .admin-title {
    font-size: 2rem;
  }
  
  .admin-tabs {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .admin-tab-button {
    width: 100%;
    text-align: center;
  }
  
  .admin-section-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .admin-action-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .loyalty-levels-table-header,
  .loyalty-level-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .loyalty-table-header-cell,
  .loyalty-level-cell {
    text-align: left !important;
    padding: 0.25rem 0;
  }
  
  .loyalty-level-item {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  
  .loyalty-level-actions {
    justify-content: center;
  }
  
  .loyalty-level-details {
    flex-direction: column;
    gap: 1rem;
  }
  
  .loyalty-modal-actions {
    flex-direction: column;
  }
  
  .loyalty-cancel-btn,
  .loyalty-save-btn {
    width: 100%;
  }
  
  .loyalty-add-btn,
  .loyalty-save-btn,
  .loyalty-refresh-btn {
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
  
  .loyalty-edit-actions {
    flex-direction: column;
  }
  
  .loyalty-save-inline-btn,
  .loyalty-cancel-inline-btn {
    width: 100%;
  }
}
/* Admin Loyalty Page Styles */

/* Tab Button Styles - Match Admin Dashboard */
.admin-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.admin-tab-button {
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #000000;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  outline: none;
  background-color: #6b7280;
  color: #fff;
  border-color: #374151;
}

.admin-tab-button:hover {
  background-color: #818b9b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.admin-tab-button.active {
  background-color: #14545c;
  border-color: #0a1a1d;
  color: #ffffff;
}

.admin-tab-button.active:hover {
  background-color: #0d353a;
}

/* Section Header Styles */
.admin-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(139, 110, 99, 0.1);
  border-radius: 10px;
  border: 2px solid #5d4037;
  width: 100%;
  max-width: 1200px;
}

.admin-section-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #3e2723;
  margin: 0;
  text-transform: none;
  letter-spacing: 0.05em;
  font-family: 'The Wanters DEMO', serif;
}

.admin-action-buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Button Styles - Match Admin Dashboard */
.admin-add-button {
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #000000;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  min-width: 180px;
  outline: none;
  background-color: #ff9800;
  color: #fff;
  border-color: #f57c00;
}

.admin-add-button:hover {
  background-color: #ffb74d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.admin-save-btn {
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #000000;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  min-width: 180px;
  outline: none;
  background-color: #27ae60;
  color: #fff;
  border-color: #1e8449;
}

.admin-save-btn:hover:not(:disabled) {
  background-color: #2ecc71;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.admin-save-btn.has-changes {
  background-color: #27ae60;
  border-color: #1e8449;
  animation: pulse 2s infinite;
}

.admin-save-btn.has-changes:hover {
  background-color: #2ecc71;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 1; }
}

.admin-save-btn:disabled {
  background-color: #bdc3c7;
  border-color: #95a5a6;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Level and Achievement Grid - Match Customer Achievement Styling */
.admin-levels-grid,
.admin-achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

/* Level Cards - Match Customer Achievement Styling */
.admin-level-card {
  padding: 1.5rem;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  background-color: rgba(245, 245, 220, 0.9);
  transition: all 0.3s ease;
  position: relative;
  text-align: center;
}

.admin-level-card.unlocked {
  border-color: #8d6e63;
}

/* Tier-specific background colors for level cards - Light Mode */
.admin-level-card[data-tier="1"] {
  background-color: #F5F5DC; /* Very light cream - Tier 1 */
  border-color: #a1887f; /* Lighter border */
}

.admin-level-card[data-tier="2"] {
  background-color: #d4c4a8; /* Light brown like tier 3 panel - Tier 2 */
  border-color: #5d4037; /* Dark brown border like tier 3 */
}

.admin-level-card[data-tier="3"] {
  background-color: #8d6e63; /* Medium brown like the panel in the image - Tier 3 */
  border-color: #3e2723; /* Darker brown border */
}

.admin-level-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  text-align: center;
  position: relative;
}

.admin-level-name {
  font-weight: 900;
  font-size: 1.7rem;
  color: #5d4037;
  text-align: center;
  text-shadow: none;
  letter-spacing: 0.01em;
  margin: 0 auto 0.2em auto;
  display: block;
  /* Light mode panel */
  background: rgba(245, 245, 220, 0.8);
  border: 2px solid #8d6e63;
  border-radius: 12px;
  padding: 0.8rem 1.2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.admin-level-card[data-tier="1"] .admin-level-name {
  color: #3e2723;
}

.admin-level-card[data-tier="2"] .admin-level-name {
  color: #3e2723;
}

.admin-level-card[data-tier="3"] .admin-level-name {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.admin-level-tiers-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 0.5em;
}

.admin-level-tier-icon {
  font-size: 1.2em;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.admin-level-tier-icon.active {
  opacity: 1;
  color: #ffd700;
  text-shadow: 0 0 4px #000;
}

.admin-level-description {
  margin: 0.5rem 0 1rem 0;
  font-size: 1.12rem;
  color: #5d4037;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.admin-level-progress {
  margin-top: 1rem;
}

.admin-progress-text {
  font-size: 1rem;
  font-weight: 600;
  color: #3e2723;
  display: block;
  margin-bottom: 0.5rem;
  text-align: center;
}

.admin-progress-bar {
  width: 100%;
  height: 20px;
  border: 2px solid #8d6e63;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background-color: rgba(245, 245, 220, 0.9);
}

.admin-progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #8d6e63, #5d4037);
  border-radius: 8px;
  transition: width 0.3s ease;
}

/* Achievement Cards - Match Customer Achievement Styling */
.admin-achievement-card {
  padding: 1.5rem;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  background-color: rgba(245, 245, 220, 0.9);
  transition: all 0.3s ease;
  position: relative;
  text-align: center;
}

.admin-achievement-card.unlocked {
  border-color: #8d6e63;
}

/* Tier-specific background colors for achievement cards - Light Mode */
.admin-achievement-card[data-tier="1"] {
  background-color: #F5F5DC; /* Very light cream - Tier 1 */
  border-color: #a1887f; /* Lighter border */
}

.admin-achievement-card[data-tier="2"] {
  background-color: #d4c4a8; /* Light brown like tier 3 panel - Tier 2 */
  border-color: #5d4037; /* Dark brown border like tier 3 */
}

.admin-achievement-card[data-tier="3"] {
  background-color: #8d6e63; /* Medium brown like the panel in the image - Tier 3 */
  border-color: #3e2723; /* Darker brown border */
}

.admin-achievement-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  text-align: center;
}

.admin-achievement-name {
  font-weight: 900;
  font-size: 1.7rem;
  color: #5d4037;
  text-align: center;
  text-shadow: none;
  letter-spacing: 0.01em;
  margin: 0 auto 0.2em auto;
  display: block;
  /* Light mode panel */
  background: rgba(245, 245, 220, 0.8);
  border: 2px solid #8d6e63;
  border-radius: 12px;
  padding: 0.8rem 1.2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.admin-achievement-card[data-tier="1"] .admin-achievement-name {
  color: #3e2723;
}

.admin-achievement-card[data-tier="2"] .admin-achievement-name {
  color: #3e2723;
}

.admin-achievement-card[data-tier="3"] .admin-achievement-name {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.admin-achievement-tiers-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 0.5em;
}

.admin-achievement-tier-icon {
  font-size: 1.2em;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.admin-achievement-tier-icon.active {
  opacity: 1;
  color: #ffd700;
  text-shadow: 0 0 4px #000;
}

.admin-achievement-description {
  margin: 0.5rem 0 1rem 0;
  font-size: 1.12rem;
  color: #5d4037;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.admin-achievement-progress {
  margin-top: 1rem;
  text-align: center;
}

.admin-achievement-actions {
  margin-top: 1rem;
  text-align: center;
}

.admin-achievement-actions .admin-edit-button {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.admin-achievement-actions .admin-edit-button:hover {
  background: linear-gradient(135deg, #45a049, #4CAF50);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.admin-achievement-actions .admin-edit-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Edit Button */
.admin-edit-button {
  background: #4caf50;
  color: white;
  border: none;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease;
  width: 100%;
  font-size: 0.95rem;
  margin-top: 1rem;
}

.admin-edit-button:hover {
  background: #45a049;
  transform: translateY(-1px);
}

.admin-delete-button {
  background: #f44336;
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.admin-delete-button:hover {
  background: #d32f2f;
  transform: scale(1.1);
}

.admin-edit-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.admin-modal-content {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  /* Hide scrollbar but maintain scroll functionality */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hide scrollbar but maintain scroll functionality */
.admin-modal::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.admin-modal::-webkit-scrollbar-track {
  background: transparent;
}

.admin-modal::-webkit-scrollbar-thumb {
  background: transparent;
}

.admin-modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #3e2723;
  margin: 0 0 1.5rem 0;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
}

.admin-form-group {
  margin-bottom: 1.5rem;
}

.admin-form-label {
  display: block;
  font-weight: 600;
  color: #5d4037;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.admin-form-input,
.admin-form-select,
.admin-form-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
  font-family: inherit;
  background: #fff;
}

.admin-form-input:focus,
.admin-form-select:focus,
.admin-form-textarea:focus {
  outline: none;
  border-color: #4caf50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.admin-form-textarea {
  resize: vertical;
  min-height: 100px;
}

.admin-form-help {
  display: block;
  font-size: 0.85rem;
  color: #666;
  margin-top: 0.25rem;
  font-style: italic;
}

.admin-modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #eee;
}

.admin-cancel-button,
.admin-save-button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  min-width: 120px;
}

.admin-cancel-button {
  background: #9e9e9e;
  color: white;
}

.admin-cancel-button:hover {
  background: #757575;
  transform: translateY(-1px);
}

.admin-save-button {
  background: #4caf50;
  color: white;
}

.admin-save-button:hover {
  background: #45a049;
  transform: translateY(-1px);
}

.admin-warning-button {
  background: #ff9800 !important;
}

.admin-warning-button:hover {
  background: #f57c00 !important;
}

.admin-points-config {
  max-width: 600px;
  margin: 2rem auto;
}

.admin-points-config .admin-form-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.admin-points-config .admin-form-label {
  min-width: 150px;
  margin-bottom: 0;
}

.admin-points-config .admin-form-input {
  max-width: 120px;
}

/* Warning Modal Styles */
.admin-warning-content {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0;
}

.admin-warning-text {
  font-size: 1.1rem;
  color: #856404;
  margin: 0 0 1rem 0;
  line-height: 1.5;
}

.admin-warning-details {
  margin: 1rem 0;
}

.admin-warning-details h4 {
  color: #856404;
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

.admin-warning-details ul {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.admin-warning-details li {
  color: #856404;
  margin: 0.25rem 0;
  line-height: 1.4;
}

.admin-warning-question {
  font-size: 1.1rem;
  color: #d63031;
  margin: 1rem 0 0 0;
  text-align: center;
  font-weight: 600;
}

/* Save Message Styles */
.admin-save-message {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #4CAF50;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  animation: slideIn 0.3s ease-out;
  font-weight: 600;
}

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

/* Responsive Design */
@media (max-width: 768px) {
  .admin-levels-grid,
  .admin-achievements-grid {
    grid-template-columns: 1fr;
  }
  
  .admin-modal-content {
    margin: 1rem;
    padding: 1.5rem;
    max-width: 95%;
  }
  
  .admin-modal-actions {
    flex-direction: column;
  }
  
  .admin-points-config .admin-form-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .admin-points-config .admin-form-label {
    min-width: auto;
  }
  
  .admin-points-config .admin-form-input {
    max-width: 100%;
  }

  .admin-warning-content {
    padding: 1rem;
  }

  .admin-warning-text,
  .admin-warning-question {
    font-size: 1rem;
  }

  .admin-section-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .admin-action-buttons {
    flex-direction: column;
    width: 100%;
  }

  .admin-add-button,
  .admin-save-btn {
    width: 100%;
    min-width: auto;
  }
}

/* Dark Mode Support */
.dark-mode .admin-level-card,
.dark-mode .admin-achievement-card {
  background: #2d2d2d;
  border-color: #555;
  color: #fff;
}

.dark-mode .admin-level-name,
.dark-mode .admin-achievement-name {
  color: #fff;
}

.dark-mode .admin-level-description,
.dark-mode .admin-achievement-description {
  color: #ccc;
}

.dark-mode .admin-modal-content {
  background: #2d2d2d;
  color: #fff;
}

.dark-mode .admin-form-label {
  color: #ccc;
}

.dark-mode .admin-form-input,
.dark-mode .admin-form-select,
.dark-mode .admin-form-textarea {
  background: #3d3d3d;
  border-color: #555;
  color: #fff;
}

.dark-mode .admin-form-input:focus,
.dark-mode .admin-form-select:focus,
.dark-mode .admin-form-textarea:focus {
  border-color: #4caf50;
}

.dark-mode .admin-form-help {
  color: #aaa;
}

.dark-mode .admin-warning-content {
  background: #2d2d2d;
  border-color: #555;
}

.dark-mode .admin-warning-text,
.dark-mode .admin-warning-details h4,
.dark-mode .admin-warning-details li {
  color: #ffd54f;
}

.dark-mode .admin-warning-question {
  color: #ff8a80;
}
/* Staff Profile Modal Styles */
.staff-profile-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  overflow: hidden;
}

.staff-profile-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.staff-profile-modal {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  background: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.staff-profile-modal-content {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.98);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Header */
.staff-profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 2px solid #e0e0e0;
  background: rgba(245, 245, 220, 0.95);
}

.staff-profile-title-panel {
  background-color: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
}

.staff-profile-title {
  font-size: 2rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
}

/* Back Button Container */
.staff-profile-back-container {
  display: flex;
  justify-content: center;
  padding: 1rem;
  background: rgba(245, 245, 220, 0.95);
  border-bottom: 2px solid #e0e0e0;
}

.staff-profile-back-button {
  background-color: #f44336;
  color: white;
  border: 2px solid #d32f2f;
  border-radius: 25px;
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.staff-profile-back-button:hover {
  background-color: #d32f2f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(244, 67, 54, 0.4);
}

/* Main Content */
.staff-profile-main-content {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Avatar */
.staff-profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4caf50, #66bb6a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem auto;
  border: 4px solid #8b4513;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.staff-profile-avatar-placeholder {
  color: white;
  font-size: 1.8rem;
  font-weight: bold;
  font-family: 'The Wanters DEMO', serif;
}

/* Welcome Message */
.staff-profile-welcome {
  text-align: center;
  margin-bottom: 1.5rem;
}

.staff-profile-welcome-text {
  color: #4caf50;
  margin: 0 0 0.5rem 0;
  fontSize: 1.4rem;
  fontWeight: 600;
  fontFamily: 'The Wanters DEMO', serif;
}

.staff-profile-role {
  color: #666;
  margin: 0;
  fontSize: 1rem;
  fontStyle: italic;
}

/* Button Bar */
.staff-profile-actions-container {
  margin-bottom: 2rem;
  width: 100%;
  max-width: 600px;
}

.staff-profile-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.staff-profile-btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid #4caf50;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  color: #4caf50;
  min-width: 120px;
}

.staff-profile-btn:hover {
  background: #4caf50;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

.staff-profile-btn.active {
  background: #4caf50;
  color: white;
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

/* Content Area */
.staff-profile-content {
  width: 100%;
  max-width: 700px;
}

.staff-profile-section {
  width: 100%;
}

.staff-profile-user-card {
  background: rgba(245, 245, 220, 0.3);
  border: 2px solid #4caf50;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.staff-profile-section-title {
  color: #4caf50;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: 'The Wanters DEMO', serif;
  margin: 0 0 1.5rem 0;
  text-align: center;
  border-bottom: 2px solid #4caf50;
  padding-bottom: 0.5rem;
}

.staff-profile-placeholder {
  text-align: center;
  color: #666;
  font-style: italic;
  font-size: 1.1rem;
  margin: 2rem 0;
}

/* Form Fields */
.staff-profile-field-section {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.staff-profile-field-label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #4caf50;
  font-family: 'The Wanters DEMO', serif;
  margin-bottom: 0.5rem;
  text-transform: none;
  letter-spacing: 0.3px;
  text-align: center;
}

.staff-profile-edit-container {
  position: relative;
}

.staff-profile-input {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 0.8rem;
  border: 2px solid #4caf50;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Verdana', sans-serif;
  background: #ffffff;
  color: #4caf50;
  transition: all 0.3s ease;
  box-sizing: border-box;
  text-align: center;
}

.staff-profile-input:focus {
  outline: none;
  border-color: #2e7d32;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.staff-profile-input:hover {
  border-color: #66bb6a;
}

/* Responsive Design */
@media (max-width: 768px) {
  .staff-profile-modal {
    height: 95vh;
    max-height: none;
    margin: 0.5rem;
  }
  
  .staff-profile-main-content {
    padding: 1rem;
  }
  
  .staff-profile-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .staff-profile-btn {
    width: 100%;
    max-width: 200px;
  }
}

@media (max-width: 480px) {
  .staff-profile-modal {
    margin: 0.25rem;
    height: 98vh;
  }
  
  .staff-profile-header {
    padding: 1rem;
  }
  
  .staff-profile-title {
    font-size: 1.5rem;
  }
  
  .staff-profile-user-card {
    padding: 1rem;
  }
}

/* Dream Mode Styles */
.dream-mode .staff-profile-modal {
  background: rgba(24, 24, 24, 0.99);
  border: 3px solid #000000;
  color: #ffffff;
}

.dream-mode .staff-profile-header {
  background: rgba(26, 13, 35, 0.95);
  border-bottom-color: #000000;
}

.dream-mode .staff-profile-title-panel {
  background: #2e7d32 !important;
  border: 3px solid #1b5e20 !important;
  box-shadow: 0 8px 25px rgba(46, 125, 50, 0.4);
}

.dream-mode .staff-profile-title {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dream-mode .staff-profile-user-card {
  background: rgba(26, 13, 35, 0.3);
  border: 2px solid #000000;
  color: #ffffff;
}

.dream-mode .staff-profile-field-label {
  color: #ffffff;
}

.dream-mode .staff-profile-input {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
  color: #ffffff;
}

.dream-mode .staff-profile-input:focus {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.dream-mode .staff-profile-welcome-text {
  color: #ffffff;
}

.dream-mode .staff-profile-role {
  color: #cccccc;
}

/* Work section input fields - Verdana font */
.work-hours-input,
.work-hourly-rate-input {
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
}
/* Inventory Flip Card Styles */

/* Grid layout for flip cards */
.inventory-flip-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.inventory-flip-card-container {
  perspective: 1000px;
  width: 100%;
  height: 280px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

.inventory-flip-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.inventory-flip-card.flipped {
  transform: rotateY(180deg);
}

.inventory-flip-card-front,
.inventory-flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid #8d6e63;
}

.inventory-flip-card-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #f5f5dc 0%, #e8dcc6 100%);
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  box-sizing: border-box;
}

.inventory-flip-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.inventory-flip-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 0.5rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Removed hover effect - no message on hover */
.inventory-flip-card-container:hover .inventory-flip-card-overlay {
  opacity: 0;
}

.inventory-flip-card-hint {
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.inventory-flip-card-header {
  text-align: center;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #8d6e63;
  padding-bottom: 0.3rem;
}

.inventory-flip-card-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #3e2723;
  margin: 0 0 0.2rem 0;
  line-height: 1.2;
}

.inventory-flip-card-subtitle {
  font-size: 0.6rem;
  color: #5d4037;
  font-weight: 600;
}

.inventory-flip-card-stats {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.6rem;
}

.inventory-flip-card-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.1rem 0;
}

.inventory-flip-card-stat-row.highlight {
  background: rgba(39, 174, 96, 0.1);
  border-radius: 3px;
  padding: 0.2rem 0.3rem;
  margin: 0.1rem 0;
}

.inventory-flip-card-stat-row.profit {
  background: rgba(22, 163, 74, 0.15);
  border-radius: 3px;
  padding: 0.2rem 0.3rem;
  margin: 0.1rem 0;
  font-weight: 700;
}

.inventory-flip-card-stat-label {
  color: #3e2723;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
}

.inventory-flip-card-stat-value {
  color: #1565C0;
  font-weight: 700;
  font-family: 'The Wanters DEMO', serif;
}

.inventory-flip-card-stat-row.profit .inventory-flip-card-stat-value {
  color: #2e7d32;
}

.inventory-flip-card-divider {
  height: 1px;
  background: #8d6e63;
  margin: 0.3rem 0;
  opacity: 0.5;
}

.inventory-flip-card-footer {
  text-align: center;
  margin-top: 0.3rem;
}

/* Dark Mode Styles */
.dark-mode .inventory-flip-card-front,
.dark-mode .inventory-flip-card-back {
  border: 3px solid #000000;
}

.dark-mode .inventory-flip-card-back {
  background: linear-gradient(135deg, #8d6e63 0%, #5d4037 100%);
}

.dark-mode .inventory-flip-card-title {
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.dark-mode .inventory-flip-card-subtitle {
  color: #e8dcc6;
}

.dark-mode .inventory-flip-card-stat-label {
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.dark-mode .inventory-flip-card-stat-value {
  color: #90caf9;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.dark-mode .inventory-flip-card-stat-row.profit .inventory-flip-card-stat-value {
  color: #81c784;
}

.dark-mode .inventory-flip-card-stat-row.highlight {
  background: rgba(39, 174, 96, 0.2);
}

.dark-mode .inventory-flip-card-stat-row.profit {
  background: rgba(22, 163, 74, 0.25);
}

.dark-mode .inventory-flip-card-divider {
  background: #ffffff;
  opacity: 0.3;
}

.dark-mode .inventory-flip-card-header {
  border-bottom: 1px solid #ffffff;
  opacity: 0.7;
}

/* Dream Mode Styles */
.dream-mode .inventory-flip-card-front,
.dream-mode .inventory-flip-card-back {
  border: 3px solid #000000;
  box-shadow: 0 8px 25px rgba(26, 13, 35, 0.4), 0 0 40px rgba(45, 20, 60, 0.3);
}

.dream-mode .inventory-flip-card-back {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(240, 240, 240, 0.95) 100%
  );
}

.dream-mode .inventory-flip-card-title {
  color: #1a0d23 !important;
  text-shadow: none !important;
}

.dream-mode .inventory-flip-card-subtitle {
  color: #2d143c;
}

.dream-mode .inventory-flip-card-stat-label {
  color: #1a0d23 !important;
  text-shadow: none !important;
}

.dream-mode .inventory-flip-card-stat-value {
  color: #3c1e50 !important;
  text-shadow: none !important;
}

.dream-mode .inventory-flip-card-stat-row.profit .inventory-flip-card-stat-value {
  color: #2e7d32 !important;
  font-weight: 900 !important;
}

.dream-mode .inventory-flip-card-stat-row.highlight {
  background: rgba(124, 58, 237, 0.1);
}

.dream-mode .inventory-flip-card-stat-row.profit {
  background: rgba(22, 163, 74, 0.15);
}

.dream-mode .inventory-flip-card-divider {
  background: #2d143c;
  opacity: 0.5;
}

.dream-mode .inventory-flip-card-header {
  border-bottom: 1px solid #2d143c;
  opacity: 0.7;
}

/* Flip card action buttons */
.inventory-flip-card-footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

.inventory-save-btn,
.inventory-cancel-btn,
.inventory-remove-btn {
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.inventory-save-btn {
  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
  color: white;
  border: 2px solid #2e7d32;
}

.inventory-save-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #45a049 0%, #4caf50 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

.inventory-cancel-btn {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  color: white;
  border: 2px solid #e65100;
}

.inventory-cancel-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #f57c00 0%, #ff9800 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
}

.inventory-remove-btn {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
  color: white;
  border: 2px solid #b71c1c;
}

.inventory-remove-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #d32f2f 0%, #f44336 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
}

.inventory-edit-input {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #8d6e63;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  font-size: 0.7rem;
  font-family: 'Verdana', sans-serif;
  color: #3e2723;
  width: 100%;
  box-sizing: border-box;
}

.inventory-edit-input:focus {
  outline: none;
  border-color: #14545c;
  box-shadow: 0 0 0 2px rgba(20, 84, 92, 0.2);
}

.flip-back-btn {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.flip-back-btn:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #f44336 100%);
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(244, 67, 54, 0.4);
}

/* Responsive design for flip cards */
@media (max-width: 768px) {
  .inventory-flip-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    padding: 0.5rem;
  }
  
  .inventory-flip-card-container {
    height: 260px;
  }
  
  .inventory-flip-card-title {
    font-size: 0.8rem;
  }
  
  .inventory-flip-card-subtitle {
    font-size: 0.5rem;
  }
  
  .inventory-flip-card-stat-label,
  .inventory-flip-card-stat-value {
    font-size: 0.5rem;
  }
  
  .inventory-save-btn,
  .inventory-cancel-btn,
  .inventory-remove-btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.6rem;
  }
}

@media (max-width: 480px) {
  .inventory-flip-cards-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  
  .inventory-flip-card-container {
    height: 240px;
  }
}

/* Hover Effects */
.inventory-flip-card-container:hover .inventory-flip-card {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.dark-mode .inventory-flip-card-container:hover .inventory-flip-card {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.dream-mode .inventory-flip-card-container:hover .inventory-flip-card {
  box-shadow: 0 10px 30px rgba(26, 13, 35, 0.5), 0 0 50px rgba(45, 20, 60, 0.4);
}

/* Responsive Design */
@media (max-width: 768px) {
  .inventory-flip-card-container {
    width: 170px;
    height: 170px;
  }
  
  .inventory-flip-card-title {
    font-size: 0.8rem;
  }
  
  .inventory-flip-card-stats {
    font-size: 0.55rem;
  }
  
  .inventory-flip-card-hint {
    font-size: 0.6rem;
  }
}

@media (max-width: 480px) {
  .inventory-flip-card-container {
    width: 160px;
    height: 160px;
  }
  
  .inventory-flip-card-title {
    font-size: 0.75rem;
  }
  
  .inventory-flip-card-stats {
    font-size: 0.5rem;
    gap: 0.1rem;
  }
  
  .inventory-flip-card-stat-row {
    padding: 0.05rem 0;
  }
  
  .inventory-flip-card-hint {
    font-size: 0.55rem;
  }
}/* Template Pool Management - Compact Single Panel Design with Admin Dashboard Colors */
.template-pool-compact {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .template-pool-compact {
    width: 100%;
    max-width: 100%;
    align-items: center;
  }
}

/* Force override any existing input styles */
.template-pool-compact input[type="number"],
.template-pool-compact input[type="text"],
.template-pool-compact .template-pool-input {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 2px solid #8d6e63 !important;
  border-radius: 25px !important;
  color: #3e2723 !important;
  font-family: 'Verdana', sans-serif !important;
  box-shadow: none !important;
}

/* Main Panel */
.template-pool-main {
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  padding: 0;
  backdrop-filter: none;
  transition: none;
  box-shadow: none !important;
  text-align: center;
}

.template-pool-main:hover {
  transform: none;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Header */
.template-pool-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 1.5rem 2rem;
  border: 4px solid #0a1a1d;
  border-radius: 15px;
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 50%, #14545c 100%) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.1), inset 0 2px 4px rgba(255, 255, 255, 0.2) !important;
  position: relative;
}

.template-pool-header h3 {
  color: #ffffff !important;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.refresh-btn {
  background: linear-gradient(135deg, #9c27b0 0%, #ba68c8 100%);
  color: white;
  border: 2px solid #7b1fa2;
  border-radius: 25px;
  font-family: 'Verdana', sans-serif;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
  position: absolute;
  right: 0;
}

.refresh-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(156, 39, 176, 0.4);
}

.refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Metrics Row */
.metrics-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
  width: 100%;
}

.metric-item {
  background: linear-gradient(135deg, #f5f5dc 0%, #faf0e6 100%) !important;
  border: 2px solid #5d4037 !important;
  border-radius: 15px;
  padding: 1rem;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(93, 64, 55, 0.2) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.metric-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3) !important;
  border-color: #14545c !important;
}

.metric-number {
  font-size: 2rem;
  font-weight: bold;
  color: #3e2723 !important;
  font-family: 'The Wanters DEMO', serif;
  margin-bottom: 0.5rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.metric-label {
  font-size: 0.8rem;
  color: #2e1a0f !important;
  font-weight: 600;
  font-family: 'Verdana', sans-serif;
  line-height: 1.2;
  text-align: center;
  width: 100%;
}

/* Float Section */
.float-section {
  background: linear-gradient(135deg, #f5f5dc 0%, #faf0e6 100%) !important;
  border: 2px solid #5d4037 !important;
  border-radius: 15px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  margin-top: 1rem;
  box-shadow: 0 2px 8px rgba(93, 64, 55, 0.2) !important;
}

.float-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.float-input-group label {
  font-weight: 600;
  color: #2e1a0f !important;
  font-size: 0.9rem;
  font-family: 'Verdana', sans-serif;
  text-align: center;
}

.float-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* New vertical layout for auto-replenish controls */
.float-controls-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Number input container with plus/minus buttons */
.number-input-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}

.number-btn {
  width: 32px;
  height: 32px;
  border: 2px solid #8d6e63;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5f5dc 0%, #faf0e6 100%);
  color: #3e2723;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Verdana', sans-serif;
  box-sizing: border-box;
  padding: 0;
}

/* Plus button - Green */
.plus-btn {
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
  border-color: #2e7d32;
  color: #ffffff;
}

.plus-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%);
  border-color: #1b5e20;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

/* Minus button - Red */
.minus-btn {
  background: linear-gradient(135deg, #f44336 0%, #ef5350 100%);
  border-color: #c62828;
  color: #ffffff;
}

.minus-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #c62828 0%, #f44336 100%);
  border-color: #b71c1c;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
}

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

/* Remove arrows from number input */
.no-arrows {
  -moz-appearance: textfield;
  text-align: center;
  width: 80px;
  height: 40px;
  font-size: 1.1rem;
  font-weight: bold;
}

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

.template-pool-compact .float-input {
  padding: 0.5rem !important;
  border: 2px solid #5d4037 !important;
  border-radius: 25px !important;
  font-size: 1rem !important;
  font-family: 'Verdana', sans-serif !important;
  width: 80px !important;
  text-align: center !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #3e2723 !important;
  box-shadow: none !important;
}

.template-pool-compact .float-input:focus {
  outline: none !important;
  border-color: #14545c !important;
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.1) !important;
  background: #ffffff !important;
}

.update-float-btn {
  background: linear-gradient(135deg, #5d4037 0%, #8d6e63 100%) !important;
  color: white;
  border: 2px solid #3e2723 !important;
  border-radius: 25px;
  font-family: 'Verdana', sans-serif;
  font-weight: 600;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(93, 64, 55, 0.3) !important;
  font-size: 0.9rem;
}

.update-float-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.4) !important;
}

.update-float-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.check-replenish-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%) !important;
  color: white;
  border: 2px solid #0a1a1d !important;
  border-radius: 25px;
  font-family: 'Verdana', sans-serif;
  font-weight: 600;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(20, 84, 92, 0.3) !important;
  font-size: 0.9rem;
}

.check-replenish-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 84, 92, 0.4) !important;
}

.check-replenish-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.auto-replenish-status {
  background: rgba(20, 84, 92, 0.1) !important;
  border: 2px solid #14545c !important;
  border-radius: 15px;
  padding: 0.5rem;
  color: #14545c !important;
  font-weight: 600;
  text-align: center;
  margin-top: 0.5rem;
  font-family: 'Verdana', sans-serif;
  font-size: 0.9rem;
}

/* Add to Pool Section */
.add-to-pool-section {
  text-align: center;
  margin-bottom: 1.5rem;
  margin-top: 1rem;
}

.add-to-pool-btn {
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
  color: white;
  border: 3px solid #2e7d32;
  border-radius: 25px;
  font-family: 'Verdana', sans-serif;
  font-weight: 700;
  padding: 1rem 2.5rem;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
  min-width: 200px;
}

.add-to-pool-btn:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.5);
}

.add-to-pool-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Bottom Refresh Button */
.bottom-refresh-section {
  text-align: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid #5d4037 !important;
}

.bottom-refresh-btn {
  background: #9333ea !important;
  color: white;
  border: 3px solid #6b21a8 !important;
  border-radius: 25px;
  font-family: 'Verdana', sans-serif;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.bottom-refresh-btn:hover:not(:disabled) {
  background: #a855f7 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(147, 51, 234, 0.4) !important;
  border-color: #9333ea !important;
}

.bottom-refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Result Message */
.result-message {
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 15px;
  padding: 1rem;
  text-align: center;
  font-weight: 600;
  font-family: 'Verdana', sans-serif;
  margin-top: 1rem;
}

.result-message.success {
  background: rgba(76, 175, 80, 0.2) !important;
  border: 2px solid #4caf50 !important;
  color: #2e7d32 !important;
}

.result-message.error {
  background: rgba(244, 67, 54, 0.2) !important;
  border: 2px solid #f44336 !important;
  color: #c62828 !important;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999 !important;
}

.modal-content {
  background: #f5f5dc !important;
  border-radius: 15px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(93, 64, 55, 0.3) !important;
  border: 4px solid #5d4037 !important;
}

.modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 2px solid #5d4037 !important;
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 50%, #14545c 100%) !important;
  border-radius: 15px 15px 0 0;
}

.modal-header h3 {
  color: #f5f5dc !important;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.5rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #ffffff;
  padding: 0.25rem;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #f5f5dc;
}

.modal-body {
  padding: 1.5rem;
  text-align: center;
}

.modal-body p {
  color: #5d4037;
  margin-bottom: 1.5rem;
  line-height: 1.5;
  font-family: 'Verdana', sans-serif;
}

.input-group {
  margin-bottom: 1.5rem;
  text-align: center;
}

.input-group label {
  display: block;
  font-weight: 600;
  color: #3e2723;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
}

.input-group input {
  width: 80px !important;
  padding: 0.75rem;
  border: 2px solid #5d4037 !important;
  border-radius: 25px;
  font-size: 1rem;
  font-family: 'Verdana', sans-serif;
  transition: border-color 0.3s ease;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #3e2723;
  text-align: center;
  margin: 0 auto;
  display: block;
  -moz-appearance: textfield !important;
}

.input-group input::-webkit-outer-spin-button,
.input-group input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.input-group input:focus {
  outline: none;
  border-color: #14545c;
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.1);
  background: #ffffff;
}

.progress-section {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(245, 245, 220, 0.9);
  border: 2px solid #8d6e63;
  border-radius: 12px;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background: rgba(245, 245, 220, 0.9);
  border: 2px solid #8d6e63;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin-bottom: 1rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #8d6e63, #5d4037);
  border-radius: 8px;
  transition: width 0.3s ease;
}

.progress-message {
  color: #3e2723;
  font-size: 1rem;
  text-align: center;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-details {
  margin-top: 1rem;
  max-height: 200px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #8d6e63;
  border-radius: 8px;
  padding: 0.5rem;
}

.progress-detail-item {
  color: #5d4037;
  font-size: 0.9rem;
  font-family: 'Verdana', sans-serif;
  margin: 0.25rem 0;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: rgba(245, 245, 220, 0.5);
}

.progress-detail-item:last-child {
  background: rgba(20, 84, 92, 0.1);
  font-weight: 600;
  color: #14545c;
}

.modal-footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 2px solid #5d4037 !important;
  background: #f5f5dc !important;
  border-radius: 0 0 15px 15px;
  align-items: center;
}

/* Pool Overview Modal Styles */
.pool-overview-modal {
  max-width: 600px;
  width: 90%;
}

.templates-list {
  padding: 1rem 0;
  overflow: visible;
}

.template-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  margin-bottom: 0.5rem;
  background: rgba(245, 245, 220, 0.9);
  border: 2px solid #8d6e63;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.template-item:hover {
  background: rgba(245, 245, 220, 1);
  border-color: #5d4037;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.template-icon {
  margin-right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-status-icon {
  font-size: 1.5rem;
  color: #8d6e63;
}

.template-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.template-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  margin-bottom: 0.25rem;
}

.template-id {
  font-size: 0.9rem;
  color: #5d4037;
  font-family: 'Verdana', sans-serif;
}

.template-status {
  display: flex;
  align-items: center;
}

.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Verdana', sans-serif;
}

.status-badge.available {
  background: #4caf50;
  color: white;
}

.no-templates {
  text-align: center;
  padding: 2rem;
  color: #5d4037;
  font-family: 'Verdana', sans-serif;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #5d4037;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.modal-close-btn:hover {
  background: rgba(93, 64, 55, 0.1);
  color: #3e2723;
}

/* Pool Actions Section */
.pool-actions-section {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

.pool-overview-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pool-overview-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.pool-overview-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.generate-btn {
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%) !important;
  color: white;
  border: 2px solid #2e7d32 !important;
  border-radius: 25px;
  font-family: 'Verdana', sans-serif;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3) !important;
  min-width: 200px;
}

.generate-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4) !important;
}

.generate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.cancel-generation-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%) !important;
  color: white;
  border: 2px solid #0a1a1d !important;
  border-radius: 25px;
  font-family: 'Verdana', sans-serif;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(20, 84, 92, 0.3) !important;
  min-width: 200px;
  text-align: center;
}

.cancel-generation-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 84, 92, 0.4) !important;
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%) !important;
}

.cancel-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
  color: white !important;
  border: 2px solid #b91c1c !important;
  border-radius: 25px;
  font-family: 'Verdana', sans-serif;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 200px;
  text-align: center;
  text-shadow: -1px -1px 0 #b91c1c, 1px -1px 0 #b91c1c, -1px 1px 0 #b91c1c, 1px 1px 0 #b91c1c;
}

.cancel-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%) !important;
  border-color: #991b1b !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

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

/* Success button (green) when template creation is complete */
.cancel-btn.success-btn {
  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%) !important;
  border: 2px solid #2e7d32 !important;
  text-shadow: -1px -1px 0 #2e7d32, 1px -1px 0 #2e7d32, -1px 1px 0 #2e7d32, 1px 1px 0 #2e7d32;
}

.cancel-btn.success-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #45a049 0%, #4caf50 100%) !important;
  border-color: #1b5e20 !important;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

/* Confirmation section styles */
.confirmation-section {
  padding: 2rem;
  text-align: center;
}

.confirmation-message {
  font-size: 1.2rem;
  font-weight: 600;
  color: #3e2723;
  font-family: 'Verdana', sans-serif;
  margin-bottom: 1rem;
}

.confirmation-submessage {
  font-size: 1rem;
  color: #5d4037;
  font-family: 'Verdana', sans-serif;
  margin-bottom: 0;
}

/* Confirm button */
.confirm-btn {
  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%) !important;
  color: white !important;
  border: 2px solid #2e7d32 !important;
  border-radius: 25px;
  font-family: 'Verdana', sans-serif;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 200px;
  text-align: center;
  text-shadow: -1px -1px 0 #2e7d32, 1px -1px 0 #2e7d32, -1px 1px 0 #2e7d32, 1px 1px 0 #2e7d32;
}

.confirm-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #45a049 0%, #4caf50 100%) !important;
  border-color: #1b5e20 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

/* Modal footer with two buttons side by side for confirmation */
.modal-footer.confirmation-footer {
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .template-pool-compact {
    max-width: 100%;
    padding: 0 1rem;
  }
  
  .metrics-row {
    grid-template-columns: 1fr;
  }
  
  .float-controls {
    flex-direction: column;
    align-items: center;
  }
  
  .float-input {
    width: 100px;
  }
  
  .modal-content {
    width: 95%;
    margin: 1rem;
  }
  
  .modal-footer {
    flex-direction: column;
  }
  
  .cancel-generation-btn {
    min-width: auto;
  }
}

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

.loading-spinner {
  display: inline-block;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .template-pool-main {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
    border-color: #5d4037;
  }
  
  .template-pool-main:hover {
    border-color: #14545c !important;
  }
  
  .template-pool-header h3 {
    color: #ffffff !important;
  }
  
  .metric-item {
    background: rgba(0, 0, 0, 0.3);
    border-color: #5d4037;
  }
  
  .metric-item:hover {
    border-color: #14545c !important;
  }
  
  .metric-number {
    color: #3e2723 !important;
  }
  
  .metric-label {
    color: #9ca3af;
  }
  
  .float-section {
    background: rgba(0, 0, 0, 0.3);
    border-color: #5d4037;
  }
  
  .float-input-group label {
    color: #d1d5db;
  }
  
  .float-input {
    background: #444 !important;
    border-color: #666 !important;
    color: #3e2723 !important;
  }
  
  .float-input:focus {
    border-color: #14545c;
  }
  
  .number-btn {
    background: linear-gradient(135deg, #444 0%, #555 100%);
    border-color: #666;
    color: #e0e0e0;
  }
  
  /* Dark mode plus button - Green */
  .plus-btn {
    background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%);
    border-color: #1b5e20;
    color: #ffffff;
  }
  
  .plus-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    border-color: #0d3e13;
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.4);
  }
  
  /* Dark mode minus button - Red */
  .minus-btn {
    background: linear-gradient(135deg, #c62828 0%, #f44336 100%);
    border-color: #b71c1c;
    color: #ffffff;
  }
  
  .minus-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #b71c1c 0%, #c62828 100%);
    border-color: #8d1a1a;
    box-shadow: 0 4px 8px rgba(244, 67, 54, 0.4);
  }
  
  .bottom-refresh-btn {
    background: #9333ea !important;
    border-color: #6b21a8 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  }
  
  .bottom-refresh-btn:hover:not(:disabled) {
    background: #a855f7 !important;
    box-shadow: 0 6px 12px rgba(147, 51, 234, 0.5) !important;
  }

  .modal-content {
    background: #333;
    color: #fff;
    border-color: #555;
  }
  
  .modal-header {
    background: linear-gradient(135deg, #14545c 0%, #1a6b75 50%, #14545c 100%);
    border-color: #555;
  }
  
  .modal-footer {
    background: #2d2d2d;
    border-color: #555;
  }
}

/* Add Templates Button - Green */
.add-templates-btn {
  background: linear-gradient(135deg, #4caf50, #45a049);
  color: white;
  border: 2px solid #2e7d32;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  min-width: 80px;
}

.add-templates-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #45a049, #3d8b40);
  border-color: #1b5e20;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.add-templates-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Refill Button - Purple (matching refresh button) */
.refill-btn {
  background: linear-gradient(135deg, #9c27b0, #7b1fa2);
  color: white;
  border: 2px solid #6a1b9a;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  min-width: 80px;
}

.refill-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #7b1fa2, #6a1b9a);
  border-color: #4a148c;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.refill-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Responsive Layout for Panels */
@media (min-width: 768px) {
  .template-pool-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
  }
  
  .metrics-row {
    grid-column: 1 / -1;
  }
}

/* Bottom Refresh Button - Positioned beneath Management/Templates buttons */
.bottom-refresh-section {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-top: 0.5rem;
}

.bottom-refresh-btn {
  background: linear-gradient(135deg, #9c27b0, #7b1fa2);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bottom-refresh-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #7b1fa2, #6a1b9a);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.bottom-refresh-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (max-width: 767px) {
  .template-pool-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}/* QR Code Generator Specific Styles */
.qr-generator-description {
  text-align: center;
  margin: 0 auto 2rem auto;
  color: #666;
  font-size: 1.1rem;
  max-width: 600px;
  line-height: 1.6;
}

/* QR Style Toggle Buttons */
.qr-style-toggles {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.5rem auto 2rem auto;
  flex-wrap: wrap;
}

.qr-toggle-btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid #ddd;
  background-color: #fff;
  color: #666;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.qr-toggle-btn:hover {
  border-color: #14545c;
  color: #14545c;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.qr-toggle-btn.active {
  background-color: #14545c;
  border-color: #14545c;
  color: #fff;
  box-shadow: 0 4px 12px rgba(20, 84, 92, 0.3);
}

.qr-toggle-btn.active:hover {
  background-color: #0f3d44;
  border-color: #0f3d44;
  transform: translateY(-1px);
}

/* QR Code Display */
.qr-code-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 2rem auto;
  padding: 1rem;
  width: 100%;
  max-width: 500px;
}

.qr-code-container {
  position: relative;
  display: inline-block;
  border-radius: 12px;
  overflow: hidden;
}

.qr-code-container.with-border {
  border: 4px solid #000;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.qr-code-container.transparent {
  background: transparent;
}

.qr-code-container:not(.transparent) {
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.qr-code-image {
  max-width: 300px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

.qr-code-container.with-border .qr-code-image {
  border-radius: 4px;
}

.qr-code-info {
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid #ddd;
  max-width: 100%;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.qr-code-text,
.qr-code-size {
  margin: 0.5rem 0;
  color: #333;
}

.qr-code-settings {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
  font-size: 0.9rem;
}

.qr-code-settings p {
  margin: 0.3rem 0;
  color: #666;
}

/* QR Placeholder */
.qr-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  color: #666;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px dashed #ddd;
  border-radius: 12px;
  margin: 2rem auto;
  max-width: 500px;
  width: 100%;
  min-height: 200px;
}

.qr-placeholder-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.6;
}

/* QR Generator specific container improvements */
.admin-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

.admin-section {
  margin: 0 auto 2rem auto;
  max-width: 600px;
  text-align: center;
}

.admin-input-group {
  text-align: left;
}

/* Admin textarea override for QR generator */
.admin-textarea {
  width: 100%;
  min-height: 120px;
  padding: 1rem;
  border: 2px solid #ddd;
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.admin-textarea:focus {
  outline: none;
  border-color: #14545c;
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.1);
}

.admin-action-buttons {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.admin-save-btn {
  min-width: 120px;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Theme-specific adjustments */
.dark-mode .qr-generator-description {
  color: #ccc;
}

.dark-mode .qr-toggle-btn {
  background-color: #333;
  border-color: #555;
  color: #ccc;
}

.dark-mode .qr-toggle-btn:hover {
  border-color: #4a90a4;
  color: #4a90a4;
}

.dark-mode .qr-toggle-btn.active {
  background-color: #4a90a4;
  border-color: #4a90a4;
  color: #fff;
}

.dark-mode .qr-toggle-btn.active:hover {
  background-color: #3a7a8a;
  border-color: #3a7a8a;
}

.dark-mode .qr-code-container:not(.transparent) {
  background: #333;
}

.dark-mode .qr-code-container.with-border {
  border-color: #fff;
}

.dark-mode .qr-code-info {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
}

.dark-mode .qr-code-text,
.dark-mode .qr-code-size {
  color: #fff;
}

.dark-mode .qr-code-settings {
  border-top-color: #555;
}

.dark-mode .qr-code-settings p {
  color: #ccc;
}

.dark-mode .qr-placeholder {
  background-color: rgba(0, 0, 0, 0.5);
  color: #ccc;
  border-color: #555;
}

.dream-mode .qr-generator-description {
  color: #e8f4f8;
}

.dream-mode .qr-toggle-btn {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #4a90a4;
  color: #e8f4f8;
}

.dream-mode .qr-toggle-btn:hover {
  border-color: #5ba0b4;
  color: #5ba0b4;
  background-color: rgba(255, 255, 255, 0.2);
}

.dream-mode .qr-toggle-btn.active {
  background-color: #4a90a4;
  border-color: #4a90a4;
  color: #fff;
}

.dream-mode .qr-toggle-btn.active:hover {
  background-color: #5ba0b4;
  border-color: #5ba0b4;
}

.dream-mode .qr-code-container:not(.transparent) {
  background: rgba(255, 255, 255, 0.9);
}

.dream-mode .qr-code-container.with-border {
  border-color: #4a90a4;
}

.dream-mode .qr-code-info {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: #4a90a4;
}

.dream-mode .qr-code-settings {
  border-top-color: #4a90a4;
}

.dream-mode .qr-code-settings p {
  color: #666;
}

.dream-mode .qr-placeholder {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: #4a90a4;
  color: #e8f4f8;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .qr-style-toggles {
    gap: 0.5rem;
    margin: 1rem auto 1.5rem auto;
  }
  
  .qr-toggle-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    min-width: 85px;
  }
  
  .qr-generator-description {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
  }
  
  .qr-code-display {
    padding: 0.5rem;
    margin: 1.5rem auto;
    gap: 1rem;
  }
  
  .qr-code-image {
    max-width: 250px;
    border-radius: 8px;
  }
  
  .qr-code-info {
    padding: 1rem;
    border-radius: 8px;
  }
  
  .qr-placeholder {
    padding: 2rem 1rem;
    margin: 1.5rem auto;
    min-height: 150px;
    border-radius: 8px;
  }
}

@media (max-width: 480px) {
  .qr-style-toggles {
    gap: 0.4rem;
    margin: 0.8rem auto 1.2rem auto;
  }
  
  .qr-toggle-btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    min-width: 75px;
  }
  
  .qr-generator-description {
    font-size: 0.9rem;
    padding: 0 0.5rem;
  }
  
  .qr-code-display {
    padding: 0.25rem;
    margin: 1rem auto;
  }
  
  .qr-code-image {
    max-width: 200px;
  }
  
  .qr-code-info {
    padding: 0.75rem;
    font-size: 0.9rem;
  }
  
  .qr-placeholder {
    padding: 1.5rem 0.75rem;
    min-height: 120px;
  }
  
  .qr-placeholder-icon {
    font-size: 2.5rem;
  }
}

@media (max-width: 320px) {
  .qr-style-toggles {
    gap: 0.3rem;
    margin: 0.6rem auto 1rem auto;
  }
  
  .qr-toggle-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    min-width: 65px;
  }
  
  .qr-code-image {
    max-width: 180px;
  }
  
  .qr-code-info {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  
  .qr-placeholder {
    padding: 1rem 0.5rem;
    min-height: 100px;
  }
  
  .qr-placeholder-icon {
    font-size: 2rem;
  }
}

/* QR Code Stress Test Styles */
.stress-test-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.stress-test-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  color: white;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.stress-test-header h1 {
  margin: 0 0 1rem 0;
  font-size: 2.5rem;
  font-weight: 700;
}

.stress-test-header p {
  margin: 0 0 2rem 0;
  font-size: 1.2rem;
  opacity: 0.9;
}

.test-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.run-all-tests-btn {
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.run-all-tests-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.run-all-tests-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.current-test {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.current-test p {
  margin: 0;
  font-size: 1rem;
}

.test-results h2 {
  color: #333;
  margin-bottom: 2rem;
  font-size: 2rem;
  text-align: center;
}

.test-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 3rem;
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.summary-label {
  font-weight: 600;
  color: #666;
}

.summary-value {
  font-weight: 700;
  font-size: 1.2rem;
}

.test-cases {
  display: grid;
  gap: 2rem;
}

.test-case {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.test-case:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.test-case-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.test-case-info {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1;
}

.test-icon {
  font-size: 1.5rem;
  margin-top: 0.25rem;
}

.test-details h3 {
  margin: 0 0 0.5rem 0;
  color: #333;
  font-size: 1.3rem;
}

.test-description {
  margin: 0 0 1rem 0;
  color: #666;
  font-style: italic;
}

.test-settings {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.setting {
  padding: 0.25rem 0.75rem;
  background: #e3f2fd;
  color: #1976d2;
  border-radius: 16px;
  font-size: 0.85rem;
  font-weight: 600;
}

.test-actions {
  display: flex;
  gap: 0.5rem;
}

.run-single-test-btn {
  padding: 0.5rem 1rem;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.run-single-test-btn:hover:not(:disabled) {
  background: #45a049;
  transform: translateY(-1px);
}

.run-single-test-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.test-error {
  background: #ffebee;
  color: #c62828;
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid #f44336;
  margin-bottom: 1rem;
}

.test-preview {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.qr-preview-container {
  position: relative;
  display: inline-block;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.qr-preview-container.with-border {
  border: 4px solid #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.qr-preview-container.transparent {
  background: transparent;
}

.qr-preview-container:not(.transparent) {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.qr-preview-image {
  width: 150px;
  height: 150px;
  display: block;
  border-radius: 4px;
}

.qr-preview-container.with-border .qr-preview-image {
  border-radius: 2px;
}

.qr-preview-info {
  flex: 1;
  min-width: 0;
}

.qr-preview-info p {
  margin: 0.5rem 0;
  color: #666;
  word-break: break-word;
}

/* Dark mode support */
.dark-mode .stress-test-container {
  background: #1a1a1a;
  color: #fff;
}

.dark-mode .test-results h2 {
  color: #fff;
}

.dark-mode .test-summary {
  background: #2d2d2d;
  border-color: #444;
}

.dark-mode .summary-item {
  background: #333;
  color: #fff;
}

.dark-mode .test-case {
  background: #333;
  border-color: #444;
  color: #fff;
}

.dark-mode .test-details h3 {
  color: #fff;
}

.dark-mode .test-description {
  color: #ccc;
}

.dark-mode .setting {
  background: #1e3a8a;
  color: #93c5fd;
}

.dark-mode .test-error {
  background: #2d1b1b;
  color: #fca5a5;
  border-left-color: #ef4444;
}

.dark-mode .test-preview {
  background: #2d2d2d;
}

.dark-mode .qr-preview-container:not(.transparent) {
  background: #444;
}

.dark-mode .qr-preview-container.with-border {
  border-color: #fff;
}

.dark-mode .qr-preview-info p {
  color: #ccc;
}

/* Dream mode support */
.dream-mode .stress-test-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.dream-mode .test-results h2 {
  color: #fff;
}

.dream-mode .test-summary {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.dream-mode .summary-item {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  backdrop-filter: blur(10px);
}

.dream-mode .test-case {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  backdrop-filter: blur(10px);
}

.dream-mode .test-details h3 {
  color: #fff;
}

.dream-mode .test-description {
  color: #e8f4f8;
}

.dream-mode .setting {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.dream-mode .test-error {
  background: rgba(244, 67, 54, 0.2);
  color: #ffcdd2;
  border-left-color: #f44336;
}

.dream-mode .test-preview {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.dream-mode .qr-preview-container:not(.transparent) {
  background: rgba(255, 255, 255, 0.9);
}

.dream-mode .qr-preview-container.with-border {
  border-color: #4a90a4;
}

.dream-mode .qr-preview-info p {
  color: #e8f4f8;
}

/* Responsive design */
@media (max-width: 768px) {
  .stress-test-container {
    padding: 1rem;
  }
  
  .stress-test-header h1 {
    font-size: 2rem;
  }
  
  .stress-test-header p {
    font-size: 1rem;
  }
  
  .test-summary {
    grid-template-columns: repeat(2, 1fr);
    padding: 1rem;
  }
  
  .test-case {
    padding: 1.5rem;
  }
  
  .test-case-header {
    flex-direction: column;
    gap: 1rem;
  }
  
  .test-settings {
    gap: 0.5rem;
  }
  
  .test-preview {
    flex-direction: column;
    gap: 1rem;
  }
  
  .qr-preview-image {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 480px) {
  .stress-test-header h1 {
    font-size: 1.5rem;
  }
  
  .test-summary {
    grid-template-columns: 1fr;
  }
  
  .test-case {
    padding: 1rem;
  }
  
  .test-settings {
    flex-direction: column;
    gap: 0.25rem;
  }
  
  .qr-preview-image {
    width: 100px;
    height: 100px;
  }
}






























































/* Base styles for Customer Details Page - Modern Design */
.customer-details-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  background-color: #f5f5dc;
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: 'The Wanters DEMO', serif;
  /* Hide scrollbar but maintain scroll functionality */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hide scrollbar but maintain scroll functionality */
.customer-details-page::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.customer-details-page::-webkit-scrollbar-track {
  background: transparent;
}

.customer-details-page::-webkit-scrollbar-thumb {
  background: transparent;
}

.customer-details-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.customer-details-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.customer-details-background-panel {
  background-color: rgba(245, 245, 220, 0.9);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 1400px;
  width: 95%;
  min-width: 320px;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.customer-details-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
}

/* Title Panel */
.customer-details-title-panel {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  background-color: #14545c;
  width: 100%;
  max-width: 600px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.customer-details-title-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.customer-details-refresh-btn {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: white;
  border: 2px solid #1e8449;
  border-radius: 20px;
  padding: 0.6rem 1.2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 3px 6px rgba(39, 174, 96, 0.3);
  white-space: nowrap;
}

.customer-details-refresh-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(39, 174, 96, 0.4);
}

.customer-details-refresh-btn:disabled {
  background: #95a5a6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.customer-details-title {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  text-shadow: -2px -2px 0 #0a1a1d, 2px -2px 0 #0a1a1d, -2px 2px 0 #0a1a1d, 2px 2px 0 #0a1a1d;
}

/* Navigation */
.customer-details-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-bottom: 1rem;
}

.customer-details-back-nav-button {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: white;
  border: 3px solid #1e8449;
  border-radius: 25px;
  padding: 0.8rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
  margin: 0.5rem;
}

.customer-details-back-nav-button:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(220, 38, 38, 0.4);
}

/* Content */
.customer-details-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

/* Update Message */
.customer-details-update-message {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #27ae60;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  text-align: center;
  color: #155724;
  font-weight: bold;
  font-size: 1.1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Loading */
.customer-details-loading {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #3498db;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  color: #2980b9;
  font-weight: bold;
  font-size: 1.2rem;
  margin: 2rem 0;
}

/* Sections - Updated to match inventory management design */
.customer-details-section {
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
}

/* Search Box Styles */
.customer-details-search-container {
  position: relative;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.customer-details-search-input {
  width: 100%;
  max-width: 500px;
  padding: 1rem 1.5rem;
  padding-right: 3rem;
  border: 3px solid #8d6e63;
  border-radius: 30px;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.95);
  color: #2c1810;
  box-shadow: 0 4px 8px rgba(141, 110, 99, 0.2);
  transition: all 0.3s ease;
}

.customer-details-search-input:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 6px 12px rgba(93, 64, 55, 0.3);
  background: rgba(255, 255, 255, 1);
}

.customer-details-search-input::placeholder {
  color: #8d6e63;
  font-style: italic;
  text-align: center;
}

.customer-details-search-clear {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #8d6e63;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.customer-details-search-clear:hover {
  background: rgba(141, 110, 99, 0.2);
  color: #5d4037;
}

.customer-details-clear-search-btn {
  background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
  color: white;
  border: 2px solid #4b5563;
  border-radius: 20px;
  padding: 0.8rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.customer-details-clear-search-btn:hover {
  background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(107, 114, 128, 0.3);
}

.customer-details-section-title-panel {
  background-color: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 2rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.customer-details-section-title {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  text-shadow: -1px -1px 0 #0a1a1d, 1px -1px 0 #0a1a1d, -1px 1px 0 #0a1a1d, 1px 1px 0 #0a1a1d;
}

/* Controls */
.customer-details-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.customer-details-add-customer-btn {
  background-color: #27ae60;
  color: #fff;
  border: 3px solid #1e8449;
  font-weight: 700;
  font-size: 1.3rem;
  font-family: 'The Wanters DEMO', serif;
  padding: 1rem 2.2rem;
  border-radius: 32px;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.15);
  transition: all 0.3s ease;
  cursor: pointer;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.customer-details-add-customer-btn:hover:not(:disabled) {
  background-color: #2ecc71;
  color: #fff;
  box-shadow: 0 6px 18px rgba(39, 174, 96, 0.25);
  border-color: #1e8449;
  transform: translateY(-2px);
}

.customer-details-add-customer-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.1);
}

.customer-details-empty {
  text-align: center;
  padding: 3rem;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #d7ccc8;
  border-radius: 12px;
  color: #5d4037;
}

.customer-details-empty p {
  font-size: 1.2rem;
  margin: 0.5rem 0;
  font-weight: 600;
}

/* Table Layout Styles - Updated to match inventory design */
.customer-details-table-container {
  width: 100%;
  overflow-x: auto;
  margin-top: 1rem;
  border-radius: 8px;
  border: 2px solid #5d4037;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.customer-details-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Verdana', sans-serif;
  font-size: 0.9rem;
  table-layout: fixed;
}

.customer-details-table-header {
  background: #5d4037;
  color: white;
}

.customer-details-table-header-cell {
  padding: 12px 8px;
  text-align: center;
  font-weight: bold;
  font-size: 0.9rem;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.customer-details-table-header-cell.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: all 0.3s ease;
}

.customer-details-table-header-cell.sortable:hover {
  background: rgba(93, 64, 55, 0.8);
  transform: translateY(-1px);
}

.customer-details-table-header-cell.sortable:hover .sort-indicator {
  transform: scale(1.15);
  background: linear-gradient(135deg, #2c5f68 0%, #14545c 100%);
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(20, 84, 92, 0.6),
    0 0 20px rgba(13, 65, 71, 0.4),
    inset 0 1px 3px rgba(245, 245, 220, 0.3);
}

.customer-details-table-header-cell.sortable:hover .sort-arrow {
  filter: drop-shadow(0 0 4px rgba(245, 245, 220, 0.8));
}

.sort-indicator {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14545c 0%, #2c5f68 100%);
  border: 2px solid #0d4147;
  position: relative;
  transition: all 0.3s ease;
  animation: sortIndicatorPulse 0.4s ease-out;
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.4),
    0 0 8px rgba(20, 84, 92, 0.3),
    inset 0 1px 2px rgba(245, 245, 220, 0.2);
}

.sort-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  transition: all 0.3s ease;
}

.sort-indicator.asc .sort-arrow {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid #f5f5dc;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.sort-indicator.desc .sort-arrow {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #f5f5dc;
  filter: drop-shadow(0 -1px 2px rgba(0, 0, 0, 0.6));
}

@keyframes sortIndicatorPulse {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.customer-details-table-header-cell:last-child {
  border-right: none;
}

.customer-details-table-row {
  transition: background-color 0.2s ease;
}

.customer-details-table-row:nth-child(even) {
  background: rgba(93, 64, 55, 0.05);
}

.customer-details-table-row:hover {
  background: rgba(93, 64, 55, 0.1);
}

.customer-details-table-cell {
  padding: 10px 8px;
  text-align: center;
  border-right: 1px solid rgba(93, 64, 55, 0.1);
  border-bottom: 1px solid rgba(93, 64, 55, 0.1);
  vertical-align: middle;
  color: #2c1810;
  font-weight: 500;
}

.customer-details-table-cell:last-child {
  border-right: none;
}

.customer-details-table-cell.category {
  font-weight: 700;
  font-size: 0.8rem;
  color: #3e2723;
}

.customer-details-table-cell.name {
  text-align: left;
  font-weight: 600;
  color: #2c1810;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
}

.customer-details-table-cell.email {
  text-align: left;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: #3e2723;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-details-table-cell.level {
  font-weight: 700;
  color: #6d28d9;
}

/* Enhanced Mobile Scrolling */
@media (max-width: 768px) {
  .customer-details-table-container {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    
    /* Scroll indicators with gradient shadows */
    background: 
      /* Left shadow gradient */
      linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 30px),
      /* Right shadow gradient */  
      linear-gradient(270deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 30px),
      /* Main background */
      rgba(255, 255, 255, 0.9);
    background-position: left, right, center;
    background-size: 30px 100%, 30px 100%, 100% 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll;
  }
  
  .customer-details-table {
    min-width: 950px; /* Prevents crushing - ensures readable columns */
  }
  
  /* Sticky first three columns for context */
  .customer-details-table-header-cell:nth-child(1),
  .customer-details-table-header-cell:nth-child(2),
  .customer-details-table-header-cell:nth-child(3),
  .customer-details-table-cell:nth-child(1),
  .customer-details-table-cell:nth-child(2), 
  .customer-details-table-cell:nth-child(3) {
    position: sticky;
    z-index: 10;
    background: inherit;
    border-right: 2px solid rgba(93, 64, 55, 0.3);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  }
  
  /* Position sticky columns with proper widths */
  .customer-details-table-header-cell:nth-child(1),
  .customer-details-table-cell:nth-child(1) {
    left: 0;
    min-width: 60px; /* Select checkbox column */
    max-width: 60px;
  }
  
  .customer-details-table-header-cell:nth-child(2),
  .customer-details-table-cell:nth-child(2) {
    left: 60px;
    min-width: 110px; /* Category column */
    max-width: 110px;
  }
  
  .customer-details-table-header-cell:nth-child(3),
  .customer-details-table-cell:nth-child(3) {
    left: 170px;
    min-width: 140px; /* Name column */
    max-width: 140px;
    font-weight: 700; /* Emphasize name for context */
  }
  
  /* Enhanced touch targets for mobile */
  .customer-details-table-cell button {
    min-height: 44px;
    min-width: 60px;
    padding: 0.6rem 0.8rem;
    margin: 0.2rem;
    touch-action: manipulation;
    font-size: 0.85rem;
  }
  
  .customer-details-checkbox {
    min-width: 18px;
    min-height: 18px;
    touch-action: manipulation;
    transform: scale(1.2);
  }
  
  /* Better column spacing and readability on mobile */
  .customer-details-table-header-cell,
  .customer-details-table-cell {
    padding: 0.8rem 0.5rem;
    white-space: nowrap;
    font-size: 0.85rem;
  }
  
  /* Scroll hint visual effects */
  .customer-details-table-container::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(270deg, rgba(93, 64, 55, 0.15) 0%, transparent 100%);
    pointer-events: none;
    z-index: 5;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  
  .customer-details-table-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 310px; /* After sticky columns */
    bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, rgba(93, 64, 55, 0.15) 0%, transparent 100%);
    pointer-events: none;
    z-index: 5;
  }
  
  /* Better email cell handling on mobile */
  .customer-details-table-cell.email {
    max-width: 180px;
    font-size: 0.75rem;
  }
}

.customer-details-table-cell.orders,
.customer-details-table-cell.bags {
  font-family: monospace;
  font-weight: 600;
  color: #2c1810;
}

.customer-details-table-cell.spent {
  font-weight: 700;
  color: #047857;
}

.customer-details-table-cell.date-joined {
  font-size: 0.8rem;
  font-weight: 500;
  color: #2c1810;
}

.customer-details-table-cell.global-discount {
  text-align: center;
  font-weight: 500;
  color: #5d4037;
}

/* Action Buttons */
.customer-details-table-cell.actions {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.customer-details-view-btn,
.customer-details-message-btn,
.customer-details-edit-btn,
.customer-details-delete-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-width: 60px;
}

.customer-details-view-btn {
  background: #3b82f6;
  color: white;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.customer-details-view-btn:hover {
  background: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.customer-details-message-btn {
  background: #059669;
  color: white;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.customer-details-message-btn:hover {
  background: #047857;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3);
}

.customer-details-edit-btn {
  background: #8b5cf6;
  color: white;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.customer-details-edit-btn:hover:not(:disabled) {
  background: #7c3aed;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(139, 92, 246, 0.3);
}

.customer-details-edit-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.customer-details-delete-btn {
  background: #dc2626;
  color: white;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.customer-details-delete-btn:hover:not(:disabled) {
  background: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.customer-details-delete-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.customer-details-bulk-delete-btn {
  background-color: #dc2626;
  color: #fff;
  border: 3px solid #b91c1c;
  font-weight: 700;
  font-size: 1.3rem;
  font-family: 'The Wanters DEMO', serif;
  padding: 1rem 2.2rem;
  border-radius: 32px;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
  transition: all 0.3s ease;
  cursor: pointer;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.customer-details-bulk-delete-btn:hover:not(:disabled) {
  background-color: #ef4444;
  color: #fff;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.25);
  border-color: #b91c1c;
  transform: translateY(-2px);
}

.customer-details-bulk-delete-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.1);
}

.customer-details-bulk-message-btn {
  background-color: #1e40af;
  color: #fff;
  border: 3px solid #1d4ed8;
  font-weight: 700;
  font-size: 1.3rem;
  font-family: 'The Wanters DEMO', serif;
  padding: 1rem 2.2rem;
  border-radius: 32px;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.15);
  transition: all 0.3s ease;
  cursor: pointer;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.customer-details-bulk-message-btn:hover:not(:disabled) {
  background-color: #3b82f6;
  color: #fff;
  box-shadow: 0 6px 18px rgba(30, 64, 175, 0.25);
  border-color: #1d4ed8;
  transform: translateY(-2px);
}

.customer-details-bulk-message-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.1);
}

.customer-details-customer-message-btn {
  background-color: #059669;
  color: #fff;
  border: 3px solid #047857;
  font-weight: 700;
  font-size: 1.3rem;
  font-family: 'The Wanters DEMO', serif;
  padding: 1rem 2.2rem;
  border-radius: 32px;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
  transition: all 0.3s ease;
  cursor: pointer;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.customer-details-customer-message-btn:hover:not(:disabled) {
  background-color: #10b981;
  color: #fff;
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.25);
  border-color: #047857;
  transform: translateY(-2px);
}

.customer-details-customer-message-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.1);
}

/* Checkbox styles */
.customer-details-checkbox {
  width: 22px;
  height: 22px;
  cursor: pointer;
  accent-color: #14545c;
}

.customer-details-table-cell.checkbox {
  width: 50px;
  text-align: center;
  padding: 0.5rem;
}

.customer-details-table-header-cell.checkbox {
  width: 120px;
  text-align: center;
  padding: 0.5rem;
}

.customer-details-table-header-cell.checkbox .customer-details-select-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #ffffff;
  font-weight: 600;
  margin: 0;
  padding: 0;
}

.customer-details-table-header-cell.checkbox .customer-details-select-all span {
  user-select: none;
  white-space: nowrap;
}

/* Select All functionality */
.customer-details-section-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1rem;
}

.customer-details-select-all {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #ffffff;
  font-weight: 600;
}

.customer-details-select-all span {
  user-select: none;
}

/* Auth Message */
.customer-details-auth-section {
  text-align: center;
  padding: 3rem;
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #8d6e63;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.customer-details-auth-section p {
  color: #5d4037;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* Dark Mode Styles */
.dark-mode.customer-details-page {
  background-color: #1a1a1a;
}

.dark-mode .customer-details-page::before {
  background-color: rgba(26, 26, 26, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238b6f63' stroke-width='1.5' stroke-opacity='0.3'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.dark-mode .customer-details-page::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%235d4037' fill-opacity='0.2' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.8;
}

.dark-mode .customer-details-background-panel {
  background-color: rgba(26, 26, 26, 0.9);
  border-color: #8b6f63;
}

.dark-mode .customer-details-container {
  background-color: rgba(45, 32, 28, 0.9);
  border-color: #8b6f63;
}

.dark-mode .customer-details-section {
  background: rgba(45, 32, 28, 0.9);
  border-color: #8b6f63;
}

.dark-mode .customer-details-empty {
  background: rgba(44, 24, 16, 0.8);
  border-color: #3e2723;
  color: #d7ccc8;
}

.dark-mode .customer-details-update-message {
  background: #1b2f1b;
  color: #4caf50;
  border-color: #2e7d32;
}

.dark-mode .customer-details-loading {
  background: #2c1810;
  color: #d7ccc8;
}

.dark-mode .customer-details-back-nav-button {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  border-color: #991b1b;
  box-shadow: 0 4px 8px rgba(185, 28, 28, 0.4);
}

.dark-mode .customer-details-back-nav-button:hover {
  background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%);
  box-shadow: 0 6px 12px rgba(185, 28, 28, 0.5);
}

.dark-mode .customer-details-add-customer-btn {
  background: linear-gradient(135deg, #1e8449 0%, #27ae60 100%);
  border-color: #155724;
  box-shadow: 0 4px 8px rgba(30, 132, 73, 0.3);
}

.dark-mode .customer-details-add-customer-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #155724 0%, #1e8449 100%);
  box-shadow: 0 6px 12px rgba(30, 132, 73, 0.4);
}

.dark-mode .customer-details-checkbox {
  accent-color: #4fc3f7;
}

.dark-mode .customer-details-select-all {
  color: #e0e0e0;
}

.dark-mode .customer-details-search-input {
  background: rgba(45, 32, 28, 0.9);
  color: #f5f5dc;
  border-color: #8b6f63;
}

.dark-mode .customer-details-search-input:focus {
  background: rgba(45, 32, 28, 1);
  border-color: #8b6f63;
  box-shadow: 0 6px 12px rgba(139, 111, 99, 0.4);
}

.dark-mode .customer-details-search-input::placeholder {
  color: #a1887f;
}

.dark-mode .customer-details-search-clear {
  color: #a1887f;
}

.dark-mode .customer-details-search-clear:hover {
  background: rgba(139, 111, 99, 0.3);
  color: #d7ccc8;
}

.dark-mode .customer-details-clear-search-btn {
  background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
  border-color: #374151;
}

.dark-mode .customer-details-clear-search-btn:hover {
  background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
}

.dark-mode .customer-details-table-header-cell.sortable:hover {
  background: rgba(139, 111, 99, 0.8);
}

.dark-mode .sort-indicator {
  background: linear-gradient(135deg, #3e2723 0%, #5d4037 100%);
  border-color: #2c1810;
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 0 8px rgba(139, 111, 99, 0.4),
    inset 0 1px 2px rgba(215, 204, 200, 0.15);
}

.dark-mode .sort-indicator.asc .sort-arrow {
  border-bottom-color: #d7ccc8;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}

.dark-mode .sort-indicator.desc .sort-arrow {
  border-top-color: #d7ccc8;
  filter: drop-shadow(0 -1px 3px rgba(0, 0, 0, 0.8));
}

.dark-mode .customer-details-table-header-cell.sortable:hover .sort-indicator {
  transform: scale(1.15);
  background: linear-gradient(135deg, #5d4037 0%, #8d6e63 100%);
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.7),
    0 0 12px rgba(139, 111, 99, 0.6),
    0 0 20px rgba(44, 24, 16, 0.5),
    inset 0 1px 3px rgba(215, 204, 200, 0.25);
}

.dark-mode .customer-details-table-header-cell.sortable:hover .sort-arrow {
  filter: drop-shadow(0 0 6px rgba(215, 204, 200, 0.9));
}

/* Dark mode table styles */
.dark-mode .customer-details-table-container {
  background: rgba(45, 32, 28, 0.9);
  border-color: #8b6f63;
}

.dark-mode .customer-details-table-header {
  background: #2d201c;
  color: #f5f5dc;
}

.dark-mode .customer-details-table-row:nth-child(even) {
  background: rgba(139, 111, 99, 0.1);
}

.dark-mode .customer-details-table-row:hover {
  background: rgba(139, 111, 99, 0.2);
}

.dark-mode .customer-details-table-cell {
  color: #d7ccc8;
  border-bottom: 1px solid rgba(139, 111, 99, 0.3);
}

.dark-mode .customer-details-table-cell.global-discount {
  color: #d7ccc8;
}

/* Dark mode delete button styles */
.dark-mode .customer-details-delete-btn {
  background: #ef4444;
  color: white;
}

.dark-mode .customer-details-delete-btn:hover:not(:disabled) {
  background: #dc2626;
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4);
}

.dark-mode .customer-details-edit-btn {
  background: #a855f7;
  color: white;
}

.dark-mode .customer-details-edit-btn:hover:not(:disabled) {
  background: #9333ea;
  box-shadow: 0 4px 8px rgba(168, 85, 247, 0.4);
}

.dark-mode .customer-details-bulk-delete-btn {
  background-color: #ef4444;
  border-color: #dc2626;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.dark-mode .customer-details-bulk-delete-btn:hover:not(:disabled) {
  background-color: #f87171;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.4);
}

.dark-mode .customer-details-bulk-message-btn {
  background-color: #1e40af;
  border-color: #1d4ed8;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}

.dark-mode .customer-details-bulk-message-btn:hover:not(:disabled) {
  background-color: #3b82f6;
  box-shadow: 0 6px 18px rgba(30, 64, 175, 0.4);
}

.dark-mode .customer-details-customer-message-btn {
  background-color: #059669;
  border-color: #047857;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.dark-mode .customer-details-customer-message-btn:hover:not(:disabled) {
  background-color: #10b981;
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.4);
}

/* Dream Mode Styles */
.dream-mode.customer-details-page {
  background-color: #fff8e1;
}

.dream-mode .customer-details-page::before {
  background-color: rgba(255, 248, 225, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23b8860b' stroke-width='1.5' stroke-opacity='0.3'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.dream-mode .customer-details-page::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%238b6914' fill-opacity='0.2' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.7;
}

.dream-mode .customer-details-background-panel {
  background-color: rgba(255, 248, 225, 0.9);
  border-color: #b8860b;
  box-shadow: 
    0 6px 20px rgba(93, 64, 55, 0.4),
    0 0 0 2px rgba(184, 134, 11, 0.3),
    0 0 30px rgba(184, 134, 11, 0.2);
}

.dream-mode .customer-details-container {
  background-color: rgba(255, 248, 225, 0.95);
  border-color: #b8860b;
}

.dream-mode .customer-details-section {
  background: rgba(255, 248, 225, 0.95);
  border-color: #b8860b;
}

.dream-mode .customer-details-title-panel {
  background: linear-gradient(135deg, #5d4037 0%, #8d6e63 100%);
  border-color: #3e2723;
  box-shadow: 0 8px 25px rgba(93, 64, 55, 0.4);
}

.dream-mode .customer-details-section-title-panel {
  background: linear-gradient(135deg, #5d4037 0%, #8d6e63 100%);
  border-color: #3e2723;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .customer-details-section {
  background: linear-gradient(135deg, #f7ede2 0%, #faf5f0 100%);
  border-color: #8d6e63;
  box-shadow: 0 4px 12px rgba(141, 110, 99, 0.2);
}

.dream-mode .customer-details-add-customer-btn {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  border-color: #7c3aed;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.dream-mode .customer-details-add-customer-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #a855f7 0%, #c084fc 100%);
  box-shadow: 0 6px 18px rgba(139, 92, 246, 0.4);
}

.dream-mode .customer-details-checkbox {
  accent-color: #8b5cf6;
}

.dream-mode .customer-details-select-all {
  color: #ffffff;
}

.dream-mode .customer-details-search-input {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 248, 243, 0.95) 100%);
  border-color: #b8860b;
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.3);
}

.dream-mode .customer-details-search-input:focus {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(250, 248, 243, 1) 100%);
  border-color: #8b6914;
  box-shadow: 0 6px 18px rgba(139, 105, 20, 0.4);
}

.dream-mode .customer-details-search-input::placeholder {
  color: #8b6914;
}

.dream-mode .customer-details-search-clear {
  color: #8b6914;
}

.dream-mode .customer-details-search-clear:hover {
  background: rgba(184, 134, 11, 0.2);
  color: #5d4037;
}

.dream-mode .customer-details-clear-search-btn {
  background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
  border-color: #4b5563;
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

.dream-mode .customer-details-clear-search-btn:hover {
  background: linear-gradient(135deg, #9ca3af 0%, #d1d5db 100%);
  box-shadow: 0 6px 18px rgba(107, 114, 128, 0.4);
}

.dream-mode .customer-details-table-header-cell.sortable:hover {
  background: rgba(184, 134, 11, 0.8);
}

.dream-mode .sort-indicator {
  background: linear-gradient(135deg, #b8860b 0%, #8b6914 100%);
  border-color: #5d4037;
  box-shadow: 
    0 2px 8px rgba(93, 64, 55, 0.5),
    0 0 12px rgba(184, 134, 11, 0.4),
    0 0 20px rgba(139, 105, 20, 0.3),
    inset 0 1px 3px rgba(255, 248, 225, 0.3);
}

.dream-mode .sort-indicator.asc .sort-arrow {
  border-bottom-color: #fff8e1;
  filter: drop-shadow(0 1px 4px rgba(93, 64, 55, 0.8));
}

.dream-mode .sort-indicator.desc .sort-arrow {
  border-top-color: #fff8e1;
  filter: drop-shadow(0 -1px 4px rgba(93, 64, 55, 0.8));
}

.dream-mode .customer-details-table-header-cell.sortable:hover .sort-indicator {
  transform: scale(1.15);
  background: linear-gradient(135deg, #8b6914 0%, #b8860b 100%);
  box-shadow: 
    0 4px 12px rgba(93, 64, 55, 0.6),
    0 0 16px rgba(184, 134, 11, 0.7),
    0 0 28px rgba(139, 105, 20, 0.5),
    0 0 40px rgba(255, 248, 225, 0.3),
    inset 0 1px 4px rgba(255, 248, 225, 0.4);
}

.dream-mode .customer-details-table-header-cell.sortable:hover .sort-arrow {
  filter: drop-shadow(0 0 8px rgba(255, 248, 225, 1));
}

.dream-mode .customer-details-back-nav-button {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  border-color: #b91c1c;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.dream-mode .customer-details-back-nav-button:hover {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.4);
}

/* Dream mode table styles */
.dream-mode .customer-details-table-container {
  background: rgba(139, 110, 99, 0.8);
  border-color: #b8860b;
  box-shadow: 0 0 20px rgba(184, 134, 11, 0.3);
}

.dream-mode .customer-details-table-header {
  background: linear-gradient(135deg, #b8860b, #8b6914);
  color: #f5f5dc;
}

.dream-mode .customer-details-table-row:hover {
  background: rgba(184, 134, 11, 0.1);
}

.dream-mode .customer-details-table-cell.global-discount {
  color: #1a237e;
}

/* Dream mode delete button styles */
.dream-mode .customer-details-delete-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: white;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}

.dream-mode .customer-details-delete-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.4);
}

.dream-mode .customer-details-edit-btn {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  color: white;
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
}

.dream-mode .customer-details-edit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #a855f7 0%, #c084fc 100%);
  box-shadow: 0 4px 10px rgba(139, 92, 246, 0.4);
}

.dream-mode .customer-details-bulk-delete-btn {
  background-color: #dc2626;
  border-color: #b91c1c;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.dream-mode .customer-details-bulk-delete-btn:hover:not(:disabled) {
  background-color: #ef4444;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.4);
}

.dream-mode .customer-details-bulk-message-btn {
  background-color: #8b5cf6;
  border-color: #7c3aed;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.dream-mode .customer-details-bulk-message-btn:hover:not(:disabled) {
  background-color: #a855f7;
  box-shadow: 0 6px 18px rgba(139, 92, 246, 0.4);
}

.dream-mode .customer-details-customer-message-btn {
  background-color: #8b5cf6;
  border-color: #7c3aed;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.dream-mode .customer-details-customer-message-btn:hover:not(:disabled) {
  background-color: #a855f7;
  box-shadow: 0 6px 18px rgba(139, 92, 246, 0.4);
}

/* Landscape Mode Styles for Narrow Screens */
.customer-details-page.landscape-mode {
  padding: 10px;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.customer-details-page.landscape-mode .customer-details-background-panel {
  max-width: 95vw;
  width: 95vw;
  padding: 1rem;
  margin: 0;
}

.customer-details-page.landscape-mode .customer-details-container {
  padding: 1rem;
  max-width: none;
  width: 100%;
}

.customer-details-page.landscape-mode .customer-details-title-panel {
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;
  flex-direction: column;
  gap: 0.5rem;
}

.customer-details-page.landscape-mode .customer-details-title {
  font-size: 1.8rem;
}

.customer-details-page.landscape-mode .customer-details-refresh-btn {
  font-size: 0.9rem;
  padding: 0.4rem 1rem;
}

.customer-details-page.landscape-mode .customer-details-navigation {
  margin-bottom: 0.5rem;
}

.customer-details-page.landscape-mode .customer-details-navigation button {
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

.customer-details-page.landscape-mode .customer-details-section {
  padding: 1rem;
  margin-bottom: 1rem;
}

.customer-details-page.landscape-mode .customer-details-section-title-panel {
  padding: 0.5rem;
  margin-bottom: 1rem;
}

.customer-details-page.landscape-mode .customer-details-section-title {
  font-size: 1.4rem;
}

.customer-details-page.landscape-mode .customer-details-controls {
  flex-direction: row;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.customer-details-page.landscape-mode .customer-details-add-customer-btn,
.customer-details-page.landscape-mode .customer-details-bulk-message-btn,
.customer-details-page.landscape-mode .customer-details-customer-message-btn,
.customer-details-page.landscape-mode .customer-details-bulk-delete-btn {
  font-size: 1rem;
  padding: 0.5rem 1rem;
  margin: 0.2rem;
}

.customer-details-page.landscape-mode .customer-details-search-container {
  margin-bottom: 1rem;
}

.customer-details-page.landscape-mode .customer-details-search-input {
  font-size: 1rem;
  padding: 0.5rem 1rem;
  max-width: 400px;
}

.customer-details-page.landscape-mode .customer-details-table-container {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: auto;
}

.customer-details-page.landscape-mode .customer-details-table {
  font-size: 0.8rem;
  min-width: 1200px;
}

.customer-details-page.landscape-mode .customer-details-table-header-cell,
.customer-details-page.landscape-mode .customer-details-table-cell {
  padding: 0.5rem 0.3rem;
  font-size: 0.75rem;
}

.customer-details-page.landscape-mode .customer-details-table-cell.name {
  max-width: 120px;
  font-size: 0.8rem;
}

.customer-details-page.landscape-mode .customer-details-table-cell.email {
  max-width: 150px;
  font-size: 0.7rem;
}

.customer-details-page.landscape-mode .customer-details-table-cell.actions {
  display: flex;
  gap: 0.2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.customer-details-page.landscape-mode .customer-details-view-btn,
.customer-details-page.landscape-mode .customer-details-message-btn,
.customer-details-page.landscape-mode .customer-details-edit-btn,
.customer-details-page.landscape-mode .customer-details-delete-btn {
  padding: 0.3rem 0.5rem;
  font-size: 0.7rem;
  min-width: 50px;
  margin: 0.1rem;
}

.customer-details-page.landscape-mode .customer-details-checkbox {
  width: 18px;
  height: 18px;
}

/* Enhanced landscape mode for very narrow screens */
@media (max-height: 500px) and (orientation: landscape) {
  .customer-details-page.landscape-mode {
    padding: 5px;
  }
  
  .customer-details-page.landscape-mode .customer-details-background-panel {
    padding: 0.5rem;
  }
  
  .customer-details-page.landscape-mode .customer-details-container {
    padding: 0.5rem;
  }
  
  .customer-details-page.landscape-mode .customer-details-title-panel {
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.3rem;
  }
  
  .customer-details-page.landscape-mode .customer-details-title {
    font-size: 1.4rem;
  }
  
  .customer-details-page.landscape-mode .customer-details-section {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .customer-details-page.landscape-mode .customer-details-section-title-panel {
    padding: 0.3rem;
    margin-bottom: 0.5rem;
  }
  
  .customer-details-page.landscape-mode .customer-details-section-title {
    font-size: 1.2rem;
  }
  
  .customer-details-page.landscape-mode .customer-details-controls {
    gap: 0.3rem;
  }
  
  .customer-details-page.landscape-mode .customer-details-add-customer-btn,
  .customer-details-page.landscape-mode .customer-details-bulk-message-btn,
  .customer-details-page.landscape-mode .customer-details-customer-message-btn,
  .customer-details-page.landscape-mode .customer-details-bulk-delete-btn {
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
    margin: 0.1rem;
  }
  
  .customer-details-page.landscape-mode .customer-details-table-container {
    max-height: 50vh;
  }
  
  .customer-details-page.landscape-mode .customer-details-table {
    font-size: 0.7rem;
  }
  
  .customer-details-page.landscape-mode .customer-details-table-header-cell,
  .customer-details-page.landscape-mode .customer-details-table-cell {
    padding: 0.3rem 0.2rem;
    font-size: 0.65rem;
  }
  
  .customer-details-page.landscape-mode .customer-details-table-cell.name {
    max-width: 100px;
    font-size: 0.7rem;
  }
  
  .customer-details-page.landscape-mode .customer-details-table-cell.email {
    max-width: 120px;
    font-size: 0.6rem;
  }
  
  .customer-details-page.landscape-mode .customer-details-view-btn,
  .customer-details-page.landscape-mode .customer-details-message-btn,
  .customer-details-page.landscape-mode .customer-details-edit-btn,
  .customer-details-page.landscape-mode .customer-details-delete-btn {
    padding: 0.2rem 0.4rem;
    font-size: 0.6rem;
    min-width: 40px;
  }
}

/* Landscape mode adjustments for medium screens */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .customer-details-page.landscape-mode .customer-details-background-panel {
    max-width: 98vw;
  }
  
  .customer-details-page.landscape-mode .customer-details-table-container {
    max-height: 70vh;
  }
  
  .customer-details-page.landscape-mode .customer-details-table {
    font-size: 0.85rem;
  }
  
  .customer-details-page.landscape-mode .customer-details-table-header-cell,
  .customer-details-page.landscape-mode .customer-details-table-cell {
    padding: 0.6rem 0.4rem;
    font-size: 0.8rem;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .customer-details-title-panel {
    flex-direction: column;
    gap: 0.8rem;
    padding: 1rem;
  }

  .customer-details-title {
    font-size: 2.2rem;
  }

  .customer-details-refresh-btn {
    font-size: 1rem;
    padding: 0.7rem 1.5rem;
  }

  .customer-details-section-title {
    font-size: 1.8rem;
  }

  .customer-details-navigation {
    flex-direction: column;
    gap: 0.5rem;
  }

  .customer-details-controls {
    flex-direction: column;
    gap: 0.5rem;
  }

  .customer-details-add-customer-btn {
    font-size: 1.1rem;
    padding: 0.8rem 1.8rem;
  }

  .customer-details-table-container {
    font-size: 0.8rem;
  }
  
  .customer-details-table-header-cell,
  .customer-details-table-cell {
    padding: 8px 4px;
    font-size: 0.75rem;
  }
  
  .customer-details-table-cell.name,
  .customer-details-table-cell.email {
    max-width: 100px;
  }
  
  .customer-details-view-btn,
  .customer-details-message-btn,
  .customer-details-edit-btn,
  .customer-details-delete-btn {
    padding: 4px 8px;
    font-size: 0.7rem;
    min-width: 50px;
  }
  
  .customer-details-bulk-delete-btn {
    font-size: 0.9rem;
    padding: 0.7rem 1.2rem;
    margin: 0.3rem;
  }
  
  .customer-details-table-cell.actions {
    flex-direction: column;
    gap: 3px;
  }

  .customer-details-search-input {
    font-size: 1rem;
    padding: 0.8rem 1.2rem;
    padding-right: 2.5rem;
  }
  
  .customer-details-search-clear {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .customer-details-page {
    padding: 10px;
  }

  .customer-details-background-panel {
    padding: 1rem;
  }

  .customer-details-title {
    font-size: 1.8rem;
  }

  .customer-details-title-panel {
    padding: 1rem 1.5rem;
    flex-direction: column;
    gap: 0.6rem;
  }

  .customer-details-refresh-btn {
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
  }

  .customer-details-section {
    padding: 1rem;
  }

  .customer-details-search-input {
    font-size: 0.9rem;
    padding: 0.7rem 1rem;
    padding-right: 2.2rem;
  }
  
  .customer-details-search-clear {
    font-size: 1.2rem;
    width: 25px;
    height: 25px;
  }
  
  .customer-details-add-customer-btn {
    font-size: 1rem;
    padding: 0.7rem 1.5rem;
  }
  
  .customer-details-bulk-delete-btn {
    font-size: 0.9rem;
    padding: 0.7rem 1.2rem;
    margin: 0.3rem;
  }
}

/* Resizable Columns */
.customer-details-table-header-cell.resizable {
  position: relative;
}

.resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background-color: transparent;
  cursor: col-resize;
  transition: background-color 0.2s ease;
  z-index: 10;
}

.resize-handle:hover {
  background-color: #14545c;
}

.resize-handle:active {
  background-color: #0a1a1d;
}

.customer-details-table-header-cell.resizable:hover .resize-handle {
  background-color: rgba(20, 84, 92, 0.3);
}

/* Dark Mode Resizable Columns */
.dark-mode .resize-handle:hover {
  background-color: #5c6bc0;
}

.dark-mode .resize-handle:active {
  background-color: #3f51b5;
}

.dark-mode .customer-details-table-header-cell.resizable:hover .resize-handle {
  background-color: rgba(92, 107, 192, 0.3);
}

/* Dream Mode Resizable Columns */
.dream-mode .resize-handle:hover {
  background-color: #673ab7;
}

.dream-mode .resize-handle:active {
  background-color: #5e35b1;
}

.dream-mode .customer-details-table-header-cell.resizable:hover .resize-handle {
  background-color: rgba(103, 58, 183, 0.3);
}

/* Toggle Button Styles */
.customer-details-toggle-btn {
  background: linear-gradient(135deg, #4caf50, #45a049);
  color: white;
  border: 2px solid #4caf50;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 0 0.5rem;
  white-space: nowrap;
}

.customer-details-toggle-btn.inactive {
  background: linear-gradient(135deg, #f44336, #d32f2f);
  border-color: #f44336;
}

.customer-details-toggle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.customer-details-toggle-btn.active:hover {
  background: linear-gradient(135deg, #45a049, #388e3c);
}

.customer-details-toggle-btn.inactive:hover {
  background: linear-gradient(135deg, #d32f2f, #c62828);
}

.customer-details-toggle-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Block Button Styles */
.customer-details-block-btn {
  background: linear-gradient(135deg, #ff9800, #f57c00);
  color: white;
  border: 2px solid #ff9800;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 2px;
}

.customer-details-block-btn.unblock {
  background: linear-gradient(135deg, #4caf50, #45a049);
  border-color: #4caf50;
}

.customer-details-block-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.customer-details-block-btn.block:hover {
  background: linear-gradient(135deg, #f57c00, #ef6c00);
}

.customer-details-block-btn.unblock:hover {
  background: linear-gradient(135deg, #45a049, #388e3c);
}

.customer-details-block-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Block Confirmation Modal Styles */
.block-confirmation-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(2px);
}

.block-confirmation-modal {
  background-color: #f7ede2;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  font-family: 'The Wanters DEMO', serif;
}

.block-confirmation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.block-confirmation-title {
  color: #8d6e63;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.block-confirmation-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #8d6e63;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.block-confirmation-close:hover {
  background-color: rgba(141, 110, 99, 0.1);
  transform: scale(1.1);
}

.block-confirmation-content {
  margin-bottom: 2rem;
}

.block-warning-text {
  font-size: 1.1rem;
  color: #5d4037;
  margin-bottom: 1rem;
  text-align: center;
}

.block-reason-input {
  margin: 1rem 0;
}

.block-reason-input label {
  display: block;
  margin-bottom: 0.5rem;
  color: #5d4037;
  font-weight: 600;
}

.block-reason-input textarea {
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-family: 'The Wanters DEMO', serif;
  resize: vertical;
}

.block-reason-input textarea:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 3px rgba(141, 110, 99, 0.2);
}

.block-final-warning {
  font-size: 0.95rem;
  color: #795548;
  text-align: center;
  font-style: italic;
  margin-top: 1rem;
}

.block-confirmation-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.block-cancel-btn,
.block-confirm-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  border: 2px solid;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
}

.block-cancel-btn {
  background-color: #f5f5f5;
  border-color: #8d6e63;
  color: #5d4037;
}

.block-cancel-btn:hover {
  background-color: #eeeeee;
  transform: translateY(-1px);
}

.block-confirm-btn.block {
  background: linear-gradient(135deg, #ff9800, #f57c00);
  border-color: #ff9800;
  color: white;
}

.block-confirm-btn.unblock {
  background: linear-gradient(135deg, #4caf50, #45a049);
  border-color: #4caf50;
  color: white;
}

.block-confirm-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.block-confirm-btn.block:hover {
  background: linear-gradient(135deg, #f57c00, #ef6c00);
}

.block-confirm-btn.unblock:hover {
  background: linear-gradient(135deg, #45a049, #388e3c);
}

.block-confirm-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}/* Customer Detail Modal Styles */
.customer-detail-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  font-family: 'The Wanters DEMO', serif;
}

.customer-detail-modal {
  background: rgba(139, 110, 99, 0.95);
  border: 4px solid #5d4037;
  border-radius: 15px;
  padding: 2rem;
  max-width: 800px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  /* Hide scrollbar but maintain scroll functionality */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hide scrollbar but maintain scroll functionality */
.customer-detail-modal::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.customer-detail-modal::-webkit-scrollbar-track {
  background: transparent;
}

.customer-detail-modal::-webkit-scrollbar-thumb {
  background: transparent;
}

.customer-detail-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #5d4037;
}

.customer-detail-modal-header h3 {
  color: #f5f5dc;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.customer-detail-modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: #f5f5dc;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.customer-detail-modal-close:hover {
  background: rgba(93, 64, 55, 0.3);
}

.customer-detail-modal-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Section Styles */
.customer-detail-section {
  background: rgba(245, 245, 220, 0.9);
  border: 2px solid #8d6e63;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.customer-detail-section-title {
  background: linear-gradient(135deg, #14545c 0%, #2c5f68 100%);
  border: 2px solid #0d4147;
  border-radius: 8px;
  padding: 0.8rem 1.5rem;
  margin-bottom: 1rem;
  text-align: center;
}

.customer-detail-section-title h4 {
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Grid Layout */
.customer-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.customer-detail-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #d7ccc8;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.customer-detail-field:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: #8d6e63;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.customer-detail-field.full-width {
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.customer-detail-label {
  font-weight: 700;
  color: #3e2723;
  font-size: 0.95rem;
  min-width: 140px;
}

.customer-detail-value {
  font-weight: 600;
  color: #5d4037;
  text-align: right;
  font-size: 0.95rem;
}

/* Special Value Styles */
.customer-detail-value.customer-email {
  font-family: monospace;
  font-size: 0.85rem;
  color: #1976d2;
  word-break: break-all;
}

.customer-detail-value.customer-category {
  background: #e3f2fd;
  color: #0d47a1;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.customer-detail-value.customer-level {
  background: #f3e5f5;
  color: #6a1b9a;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
}

.customer-detail-value.customer-points {
  background: #fff8e1;
  color: #e65100;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
}

.customer-detail-value.customer-orders {
  background: #e8f5e8;
  color: #2e7d32;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
}

.customer-detail-value.customer-spent {
  background: #e8f5e8;
  color: #1b5e20;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 1rem;
}

.customer-detail-value.customer-bags {
  background: #fff3e0;
  color: #e65100;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
}

/* Status Badges */
.customer-detail-value.customer-status {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.customer-detail-value.customer-status.active {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #22c55e;
}

.customer-detail-value.customer-status.moderate {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b;
}

.customer-detail-value.customer-status.inactive,
.customer-detail-value.customer-status.never-ordered {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #ef4444;
}

/* Flavors List */
.customer-flavors-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.customer-flavor-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background: rgba(14, 84, 92, 0.1);
  border: 1px solid #14545c;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.customer-flavor-item:hover {
  background: rgba(14, 84, 92, 0.2);
  transform: translateX(5px);
}

.flavor-name {
  font-weight: 600;
  color: #0d4147;
}

.flavor-count {
  font-size: 0.85rem;
  color: #14545c;
  font-style: italic;
}

.no-data {
  color: #8d6e63;
  font-style: italic;
  text-align: center;
  padding: 1rem;
}

/* Products List */
.customer-products-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.8rem;
}

.customer-product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #d7ccc8;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.customer-product-item:hover {
  background: rgba(255, 255, 255, 1);
  border-color: #8d6e63;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.product-name {
  font-weight: 600;
  color: #3e2723;
  font-size: 0.9rem;
}

.product-quantity {
  font-size: 0.85rem;
  color: #5d4037;
  font-weight: 500;
  background: #f3e5f5;
  color: #6a1b9a;
  padding: 2px 8px;
  border-radius: 12px;
}

/* Modal Actions */
.customer-detail-modal-actions {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid #5d4037;
}

.customer-detail-close-btn {
  background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
  color: white;
  border: 3px solid #4b5563;
  border-radius: 30px;
  padding: 1rem 2.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(107, 114, 128, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.customer-detail-close-btn:hover {
  background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(107, 114, 128, 0.4);
}

/* Dark Mode Styles */
.dark-mode .customer-detail-modal {
  background: rgba(45, 32, 28, 0.95);
  border-color: #8b6f63;
}

.dark-mode .customer-detail-modal-header {
  border-color: #8b6f63;
}

.dark-mode .customer-detail-section {
  background: rgba(60, 45, 40, 0.9);
  border-color: #8b6f63;
}

.dark-mode .customer-detail-field {
  background: rgba(45, 32, 28, 0.8);
  border-color: #8b6f63;
  color: #f5f5dc;
}

.dark-mode .customer-detail-field:hover {
  background: rgba(45, 32, 28, 0.95);
  border-color: #8b6f63;
}

.dark-mode .customer-detail-label {
  color: #d7ccc8;
}

.dark-mode .customer-detail-value {
  color: #f5f5dc;
}

.dark-mode .customer-detail-value.customer-email {
  color: #90caf9;
}

.dark-mode .customer-detail-value.customer-category {
  background: #1a237e;
  color: #90caf9;
}

.dark-mode .customer-detail-value.customer-level {
  background: #4a148c;
  color: #ce93d8;
}

.dark-mode .customer-detail-value.customer-points {
  background: #e65100;
  color: #ffcc02;
}

.dark-mode .customer-detail-value.customer-orders {
  background: #1b5e20;
  color: #81c784;
}

.dark-mode .customer-detail-value.customer-spent {
  background: #2e7d32;
  color: #a5d6a7;
}

.dark-mode .customer-detail-value.customer-bags {
  background: #bf360c;
  color: #ffab91;
}

.dark-mode .customer-detail-value.customer-status.active {
  background: #1b5e20;
  color: #81c784;
  border-color: #4caf50;
}

.dark-mode .customer-detail-value.customer-status.moderate {
  background: #e65100;
  color: #ffb74d;
  border-color: #ff9800;
}

.dark-mode .customer-detail-value.customer-status.inactive,
.dark-mode .customer-detail-value.customer-status.never-ordered {
  background: #c62828;
  color: #ef9a9a;
  border-color: #f44336;
}

.dark-mode .customer-flavor-item {
  background: rgba(139, 111, 99, 0.2);
  border-color: #8b6f63;
}

.dark-mode .customer-flavor-item:hover {
  background: rgba(139, 111, 99, 0.3);
}

.dark-mode .flavor-name {
  color: #d7ccc8;
}

.dark-mode .flavor-count {
  color: #a1887f;
}

.dark-mode .customer-product-item {
  background: rgba(45, 32, 28, 0.8);
  border-color: #8b6f63;
}

.dark-mode .customer-product-item:hover {
  background: rgba(45, 32, 28, 0.95);
  border-color: #8b6f63;
}

.dark-mode .product-name {
  color: #d7ccc8;
}

.dark-mode .product-quantity {
  background: #4a148c;
  color: #ce93d8;
}

.dark-mode .no-data {
  color: #a1887f;
}

/* Dream Mode Styles */
.dream-mode .customer-detail-modal {
  background: rgba(139, 110, 99, 0.9);
  border-color: #b8860b;
  box-shadow: 0 0 30px rgba(184, 134, 11, 0.5);
}

.dream-mode .customer-detail-modal-header {
  border-color: #b8860b;
}

.dream-mode .customer-detail-section-title {
  background: linear-gradient(135deg, #5d4037 0%, #8d6e63 100%);
  border-color: #3e2723;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .customer-detail-section {
  background: linear-gradient(135deg, #f7ede2 0%, #faf5f0 100%);
  border-color: #8d6e63;
  box-shadow: 0 4px 12px rgba(141, 110, 99, 0.2);
}

.dream-mode .customer-detail-field {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 248, 243, 0.9) 100%);
  border-color: #8d6e63;
  box-shadow: 0 2px 8px rgba(141, 110, 99, 0.1);
}

.dream-mode .customer-detail-field:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(250, 248, 243, 1) 100%);
  border-color: #5d4037;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.2);
}

.dream-mode .customer-detail-value.customer-category {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  color: #0d47a1;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.dream-mode .customer-detail-value.customer-level {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  color: #6a1b9a;
  box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
}

.dream-mode .customer-detail-value.customer-points {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
  color: #e65100;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}

.dream-mode .customer-detail-value.customer-orders {
  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
  color: #2e7d32;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.dream-mode .customer-detail-value.customer-spent {
  background: linear-gradient(135deg, #e8f5e8 0%, #a5d6a7 100%);
  color: #1b5e20;
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3);
}

.dream-mode .customer-detail-value.customer-bags {
  background: linear-gradient(135deg, #fff3e0 0%, #ffcc80 100%);
  color: #e65100;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}

.dream-mode .customer-detail-value.customer-status.active {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #166534;
  border-color: #22c55e;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.dream-mode .customer-detail-value.customer-status.moderate {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  border-color: #f59e0b;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.dream-mode .customer-detail-value.customer-status.inactive,
.dream-mode .customer-detail-value.customer-status.never-ordered {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  color: #991b1b;
  border-color: #ef4444;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.dream-mode .customer-flavor-item {
  background: rgba(184, 134, 11, 0.15);
  border-color: #b8860b;
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.2);
}

.dream-mode .customer-flavor-item:hover {
  background: rgba(184, 134, 11, 0.25);
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.3);
}

.dream-mode .customer-product-item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 248, 243, 0.9) 100%);
  border-color: #8d6e63;
  box-shadow: 0 2px 8px rgba(141, 110, 99, 0.1);
}

.dream-mode .customer-product-item:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(250, 248, 243, 1) 100%);
  border-color: #5d4037;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.2);
}

.dream-mode .product-quantity {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  color: #6a1b9a;
  box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .customer-detail-modal {
    padding: 1.5rem;
    width: 95%;
    max-height: 90vh;
  }

  .customer-detail-modal-header h3 {
    font-size: 1.5rem;
  }

  .customer-detail-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .customer-detail-field {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .customer-detail-label {
    min-width: auto;
  }

  .customer-detail-value {
    text-align: left;
  }

  .customer-products-list {
    grid-template-columns: 1fr;
  }

  .customer-product-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .customer-detail-modal {
    padding: 1rem;
    width: 98%;
  }

  .customer-detail-section {
    padding: 1rem;
  }

  .customer-detail-section-title h4 {
    font-size: 1.1rem;
  }

  .customer-detail-close-btn {
    padding: 0.8rem 2rem;
    font-size: 1rem;
  }
}/* Add Customer Modal Styles */
.add-customer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 1rem;
}

.add-customer-modal {
  background-color: rgba(255, 255, 255, 0.95);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 0;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  font-family: 'The Wanters DEMO', serif;
  /* Hide scrollbar but maintain scroll functionality */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hide scrollbar but maintain scroll functionality */
.add-customer-modal::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.add-customer-modal::-webkit-scrollbar-track {
  background: transparent;
}

.add-customer-modal::-webkit-scrollbar-thumb {
  background: transparent;
}

/* Header */
.add-customer-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 2rem 1rem 2rem;
  border-bottom: 2px solid #8d6e63;
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border-radius: 12px 12px 0 0;
  position: relative;
}

.add-customer-title {
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 900;
  margin: 0;
  text-shadow: -1px -1px 0 #0a1a1d, 1px -1px 0 #0a1a1d, -1px 1px 0 #0a1a1d, 1px 1px 0 #0a1a1d;
  text-align: center;
}

.add-customer-close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  transition: all 0.2s ease;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-customer-close:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.add-customer-close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form */
.add-customer-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.add-customer-content {
  padding: 2rem;
  flex-grow: 1;
}

.add-customer-message {
  margin-bottom: 1.5rem;
}

.add-customer-description {
  color: #5d4037;
  font-size: 1rem;
  margin: 0;
  line-height: 1.5;
  text-align: center;
}

/* Form Fields */
.add-customer-field {
  margin-bottom: 1.5rem;
}

.add-customer-label {
  display: block;
  color: #5d4037;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

.add-customer-input,
.add-customer-textarea {
  width: 80%;
  max-width: 300px;
  margin: 0 auto;
  display: block;
  padding: 0.75rem 1rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.9);
  color: #2c1810;
  transition: all 0.3s ease;
  box-sizing: border-box;
  text-align: center;
}

/* Global Discount specific styling */
.add-customer-input[type="number"] {
  width: 40%;
  max-width: 150px;
  margin: 0 auto;
  display: block;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.add-customer-input[type="number"]::-webkit-outer-spin-button,
.add-customer-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.add-customer-input[type="number"] {
  -moz-appearance: textfield;
}

.add-customer-input:focus,
.add-customer-textarea:focus {
  outline: none;
  border-color: #14545c;
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.2);
  background: rgba(255, 255, 255, 1);
}

.add-customer-input.error,
.add-customer-textarea.error {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

.add-customer-textarea {
  resize: vertical;
  min-height: 80px;
}

.add-customer-error {
  color: #d32f2f;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.add-customer-help-text {
  color: #666;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-style: italic;
}

/* Actions */
.add-customer-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  border-top: 2px solid #8d6e63;
  background: rgba(245, 245, 220, 0.5);
}

.add-customer-cancel-btn,
.add-customer-confirm-btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid;
  border-radius: 50px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.add-customer-cancel-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: #ffffff;
  border-color: #b91c1c;
  text-shadow: -1px -1px 0 #b91c1c, 1px -1px 0 #b91c1c, -1px 1px 0 #b91c1c, 1px 1px 0 #b91c1c;
}

.add-customer-cancel-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  border-color: #991b1b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.add-customer-confirm-btn {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: #ffffff;
  border-color: #1e8449;
  text-shadow: -1px -1px 0 #1e8449, 1px -1px 0 #1e8449, -1px 1px 0 #1e8449, 1px 1px 0 #1e8449;
}

.add-customer-confirm-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.add-customer-cancel-btn:disabled,
.add-customer-confirm-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Dark Mode Styles */
.dark-mode .add-customer-modal {
  background-color: rgba(45, 32, 28, 0.95);
  border-color: #8b6f63;
}

.dark-mode .add-customer-header {
  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
  border-bottom-color: #5c6bc0;
}

.dark-mode .add-customer-description {
  color: #d7ccc8;
}

.dark-mode .add-customer-label {
  color: #d7ccc8;
  text-align: center;
}

.dark-mode .add-customer-input,
.dark-mode .add-customer-textarea {
  background: rgba(69, 48, 42, 0.9);
  color: #d7ccc8;
  border-color: #8b6f63;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  width: 80%;
  max-width: 300px;
  margin: 0 auto;
  display: block;
  text-align: center;
}

.dark-mode .add-customer-input[type="number"] {
  width: 40%;
  max-width: 150px;
  margin: 0 auto;
  display: block;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.dark-mode .add-customer-input[type="number"]::-webkit-outer-spin-button,
.dark-mode .add-customer-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dark-mode .add-customer-input:focus,
.dark-mode .add-customer-textarea:focus {
  background: rgba(69, 48, 42, 1);
  border-color: #5c6bc0;
  box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.2);
}

.dark-mode .add-customer-actions {
  background: rgba(26, 26, 26, 0.5);
  border-top-color: #8b6f63;
}

.dark-mode .add-customer-cancel-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: #ffffff;
  border-color: #b91c1c;
  text-shadow: -1px -1px 0 #b91c1c, 1px -1px 0 #b91c1c, -1px 1px 0 #b91c1c, 1px 1px 0 #b91c1c;
}

.dark-mode .add-customer-cancel-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  border-color: #991b1b;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

.dark-mode .add-customer-confirm-btn {
  background: linear-gradient(135deg, #1e8449 0%, #27ae60 100%);
  border-color: #155724;
}

.dark-mode .add-customer-confirm-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
}

/* Dream Mode Styles */
.dream-mode .add-customer-modal {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(227, 242, 253, 0.95) 100%);
  border-color: #2196f3;
}

.dream-mode .add-customer-header {
  background: linear-gradient(135deg, #673ab7 0%, #9c27b0 100%);
  border-bottom-color: #8b5cf6;
}

.dream-mode .add-customer-description {
  color: #1a237e;
}

.dream-mode .add-customer-label {
  color: #1a237e;
}

.dream-mode .add-customer-input,
.dream-mode .add-customer-textarea {
  background: rgba(255, 255, 255, 0.9);
  color: #1a237e;
  border-color: #2196f3;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  width: 80%;
  max-width: 300px;
  margin: 0 auto;
  display: block;
  text-align: center;
}

.dream-mode .add-customer-input:focus,
.dream-mode .add-customer-textarea:focus {
  background: rgba(255, 255, 255, 1);
  border-color: #673ab7;
  box-shadow: 0 0 0 3px rgba(103, 58, 183, 0.2);
}

.dream-mode .add-customer-input[type="number"] {
  width: 40%;
  max-width: 150px;
  margin: 0 auto;
  display: block;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.dream-mode .add-customer-input[type="number"]::-webkit-outer-spin-button,
.dream-mode .add-customer-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dream-mode .add-customer-actions {
  background: linear-gradient(135deg, rgba(227, 242, 253, 0.5) 0%, rgba(187, 222, 251, 0.5) 100%);
  border-top-color: #2196f3;
}

.dream-mode .add-customer-cancel-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: #ffffff;
  border-color: #b91c1c;
  text-shadow: -1px -1px 0 #b91c1c, 1px -1px 0 #b91c1c, -1px 1px 0 #b91c1c, 1px 1px 0 #b91c1c;
}

.dream-mode .add-customer-cancel-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  border-color: #991b1b;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

.dream-mode .add-customer-confirm-btn {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  border-color: #7c3aed;
}

.dream-mode .add-customer-confirm-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #a855f7 0%, #8b5cf6 100%);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .add-customer-overlay {
    padding: 0.5rem;
  }

  .add-customer-modal {
    max-width: none;
    width: 100%;
    max-height: 95vh;
  }

  .add-customer-header {
    padding: 1rem 1.5rem 0.75rem 1.5rem;
  }

  .add-customer-title {
    font-size: 1.25rem;
  }

  .add-customer-content {
    padding: 1.5rem;
  }

  .add-customer-actions {
    padding: 1rem 1.5rem;
    flex-direction: column;
  }

  .add-customer-cancel-btn,
  .add-customer-confirm-btn {
    width: 100%;
    min-width: none;
  }
}

@media (max-width: 480px) {
  .add-customer-header {
    padding: 0.75rem 1rem 0.5rem 1rem;
  }

  .add-customer-title {
    font-size: 1.1rem;
  }

  .add-customer-content {
    padding: 1rem;
  }

  .add-customer-field {
    margin-bottom: 1rem;
  }

  .add-customer-input,
  .add-customer-textarea {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
  }

  .add-customer-actions {
    padding: 0.75rem 1rem;
    gap: 0.75rem;
  }
}
/* Message Modal Styles */
.message-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 1rem;
}

.message-modal {
  background-color: rgba(255, 255, 255, 0.95);
  border: 3px solid #14545c;
  border-radius: 15px;
  padding: 0;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  font-family: 'The Wanters DEMO', serif;
  /* Hide scrollbar but maintain scroll functionality */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hide scrollbar but maintain scroll functionality */
.message-modal::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.message-modal::-webkit-scrollbar-track {
  background: transparent;
}

.message-modal::-webkit-scrollbar-thumb {
  background: transparent;
}

/* Header */
.message-modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 2rem 1rem 2rem;
  border-bottom: 2px solid #14545c;
  background: linear-gradient(135deg, #14545c 0%, #0d353a 100%);
  border-radius: 12px 12px 0 0;
  position: relative;
}

.message-modal-title {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 900;
  margin: 0;
  text-shadow: -1px -1px 0 #0a1a1d, 1px -1px 0 #0a1a1d, -1px 1px 0 #0a1a1d, 1px 1px 0 #0a1a1d;
  text-align: center;
}

.message-modal-close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  transition: all 0.2s ease;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-modal-close:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.message-modal-close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form */
.message-modal-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.message-modal-content {
  padding: 2rem;
  flex-grow: 1;
}

.message-modal-message {
  margin-bottom: 1.5rem;
}

.message-modal-description {
  color: #5d4037;
  font-size: 1rem;
  margin: 0;
  text-align: center;
}

.message-modal-field {
  margin-bottom: 1.5rem;
}

.message-modal-label {
  display: block;
  color: #5d4037;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-align: center;
}

.message-modal-textarea {
  width: 100%;
  min-height: 120px;
  padding: 1rem;
  border: 2px solid #14545c;
  border-radius: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 0.9rem;
  resize: vertical;
  background: #ffffff;
  color: #212529;
  transition: all 0.3s ease;
}

.message-modal-textarea:focus {
  outline: none;
  border-color: #14545c;
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.1);
}

.message-modal-textarea.error {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.message-modal-error {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  text-align: center;
}

.message-modal-character-count {
  text-align: right;
  font-size: 0.875rem;
  color: #6c757d;
  margin-top: 0.25rem;
}

.message-modal-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  border-top: 2px solid #14545c;
  background: rgba(245, 245, 220, 0.5);
}

.message-modal-cancel-btn,
.message-modal-confirm-btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid;
  border-radius: 50px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
  text-align: center;
}

.message-modal-cancel-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: #ffffff;
  border-color: #b91c1c;
  text-shadow: -1px -1px 0 #b91c1c, 1px -1px 0 #b91c1c, -1px 1px 0 #b91c1c, 1px 1px 0 #b91c1c;
}

.message-modal-cancel-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  border-color: #991b1b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.message-modal-confirm-btn {
  background: linear-gradient(135deg, #14545c 0%, #0d353a 100%);
  color: #ffffff;
  border-color: #14545c;
  text-shadow: -1px -1px 0 #0d353a, 1px -1px 0 #0d353a, -1px 1px 0 #0d353a, 1px 1px 0 #0d353a;
}

.message-modal-confirm-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0d353a 0%, #14545c 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 84, 92, 0.3);
}

/* Dark Mode Styles */
.dark-mode .message-modal {
  background-color: rgba(45, 32, 28, 0.95);
  border-color: #14545c;
}

.dark-mode .message-modal-header {
  background: linear-gradient(135deg, #14545c 0%, #0d353a 100%);
  border-bottom-color: #14545c;
}

.dark-mode .message-modal-description {
  color: #d7ccc8;
}

.dark-mode .message-modal-label {
  color: #d7ccc8;
}

.dark-mode .message-modal-textarea {
  background: rgba(69, 48, 42, 0.9);
  color: #d7ccc8;
  border-color: #14545c;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.dark-mode .message-modal-textarea:focus {
  background: rgba(69, 48, 42, 1);
  border-color: #14545c;
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.2);
}

.dark-mode .message-modal-actions {
  background: rgba(26, 26, 26, 0.5);
  border-top-color: #14545c;
}

.dark-mode .message-modal-cancel-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: #ffffff;
  border-color: #b91c1c;
  text-shadow: -1px -1px 0 #b91c1c, 1px -1px 0 #b91c1c, -1px 1px 0 #b91c1c, 1px 1px 0 #b91c1c;
}

.dark-mode .message-modal-cancel-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  border-color: #991b1b;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

.dark-mode .message-modal-confirm-btn {
  background: linear-gradient(135deg, #14545c 0%, #0d353a 100%);
  border-color: #14545c;
}

.dark-mode .message-modal-confirm-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0d353a 0%, #14545c 100%);
  box-shadow: 0 4px 12px rgba(20, 84, 92, 0.3);
}

/* Dream Mode Styles */
.dream-mode .message-modal {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(227, 242, 253, 0.95) 100%);
  border-color: #14545c;
}

.dream-mode .message-modal-header {
  background: linear-gradient(135deg, #14545c 0%, #0d353a 100%);
  border-bottom-color: #14545c;
}

.dream-mode .message-modal-description {
  color: #1a237e;
}

.dream-mode .message-modal-label {
  color: #1a237e;
}

.dream-mode .message-modal-textarea {
  background: rgba(255, 255, 255, 0.9);
  color: #1a237e;
  border-color: #14545c;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.dream-mode .message-modal-textarea:focus {
  background: rgba(255, 255, 255, 1);
  border-color: #14545c;
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.2);
}

.dream-mode .message-modal-actions {
  background: linear-gradient(135deg, rgba(227, 242, 253, 0.5) 0%, rgba(187, 222, 251, 0.5) 100%);
  border-top-color: #14545c;
}

.dream-mode .message-modal-cancel-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: #ffffff;
  border-color: #b91c1c;
  text-shadow: -1px -1px 0 #b91c1c, 1px -1px 0 #b91c1c, -1px 1px 0 #b91c1c, 1px 1px 0 #b91c1c;
}

.dream-mode .message-modal-cancel-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  border-color: #991b1b;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

.dream-mode .message-modal-confirm-btn {
  background: linear-gradient(135deg, #14545c 0%, #0d353a 100%);
  border-color: #14545c;
}

.dream-mode .message-modal-confirm-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0d353a 0%, #14545c 100%);
  box-shadow: 0 4px 12px rgba(20, 84, 92, 0.3);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .message-modal-overlay {
    padding: 0.5rem;
  }

  .message-modal {
    max-width: none;
    width: 100%;
    max-height: 95vh;
  }

  .message-modal-header {
    padding: 1rem 1.5rem 0.75rem 1.5rem;
  }

  .message-modal-title {
    font-size: 1.25rem;
  }

  .message-modal-content {
    padding: 1.5rem;
  }

  .message-modal-actions {
    padding: 1rem 1.5rem;
    flex-direction: column;
  }

  .message-modal-cancel-btn,
  .message-modal-confirm-btn {
    width: 100%;
    min-width: none;
  }
}

@media (max-width: 480px) {
  .message-modal-header {
    padding: 0.75rem 1rem 0.5rem 1rem;
  }

  .message-modal-title {
    font-size: 1.1rem;
  }

  .message-modal-content {
    padding: 1rem;
  }

  .message-modal-field {
    margin-bottom: 1rem;
  }

  .message-modal-textarea {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
  }

  .message-modal-actions {
    padding: 0.75rem 1rem;
    gap: 0.75rem;
  }
}
/* Chat Modal Styles */
.chat-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.chat-modal {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 600px;
  height: 80vh;
  max-height: 700px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 3px solid #14545c;
  position: relative;
}

.chat-modal.dark-mode {
  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
  border-color: #14545c;
  color: #e2e8f0;
}

.chat-modal.dream-mode {
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
  border-color: #14545c;
  color: #1f2937;
}

/* Header */
.chat-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 2px solid #14545c;
  background: linear-gradient(135deg, #14545c 0%, #0d353a 100%);
  min-height: 80px;
  color: white;
}

.chat-modal.dark-mode .chat-modal-header {
  background: linear-gradient(135deg, #14545c 0%, #0d353a 100%);
  border-bottom-color: #14545c;
}

.chat-modal.dream-mode .chat-modal-header {
  background: linear-gradient(135deg, #14545c 0%, #0d353a 100%);
  border-bottom-color: #14545c;
}

.chat-modal-customer-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.chat-modal-customer-avatar {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #ffffff;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-modal.dark-mode .chat-modal-customer-avatar {
  border-color: #ffffff;
  background: #2d3748;
}

.chat-modal.dream-mode .chat-modal-customer-avatar {
  border-color: #ffffff;
  background: #f3e8ff;
}

.chat-modal-customer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.chat-modal-customer-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f8f9fa;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.chat-modal.dark-mode .chat-modal-customer-fallback {
  background: #2d3748;
}

.chat-modal.dream-mode .chat-modal-customer-fallback {
  background: #f3e8ff;
}

.chat-modal-customer-fallback img {
  width: 60%;
  height: 60%;
  object-fit: contain;
  opacity: 0.8;
}

.chat-modal-customer-initial {
  font-size: 1.5rem;
  font-weight: bold;
  color: #14545c;
  font-family: 'The Wanters DEMO', serif;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.chat-modal.dark-mode .chat-modal-customer-initial {
  color: #14545c;
}

.chat-modal.dream-mode .chat-modal-customer-initial {
  color: #14545c;
}

.chat-modal-customer-details {
  display: flex;
  flex-direction: column;
}

.chat-modal-customer-name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
}

.chat-modal.dark-mode .chat-modal-customer-name {
  color: #ffffff;
}

.chat-modal.dream-mode .chat-modal-customer-name {
  color: #ffffff;
}

.chat-modal-customer-email {
  margin: 0;
  font-size: 0.9rem;
  color: #e2e8f0;
  font-family: Verdana, sans-serif;
}

.chat-modal.dark-mode .chat-modal-customer-email {
  color: #e2e8f0;
}

.chat-modal.dream-mode .chat-modal-customer-email {
  color: #e2e8f0;
}

.chat-modal-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.chat-modal-action-btn {
  background: linear-gradient(135deg, #14545c, #0d353a);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(20, 84, 92, 0.3);
}

.chat-modal-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(20, 84, 92, 0.4);
  background: linear-gradient(135deg, #0d353a, #14545c);
}

.chat-modal-close-btn {
  background: linear-gradient(135deg, #dc3545, #c82333);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.chat-modal-close-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

/* Messages - single scroll root inside modal; touch-friendly on mobile */
.chat-modal-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  background: #ffffff;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* Hide scrollbar but maintain scroll functionality */
.chat-modal-messages::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.chat-modal-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-modal-messages::-webkit-scrollbar-thumb {
  background: transparent;
}

.chat-modal.dark-mode .chat-modal-messages {
  background: #1a202c;
}

.chat-modal.dream-mode .chat-modal-messages {
  background: #faf5ff;
}

.chat-modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 1rem;
}

.chat-modal-loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #14545c;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.chat-modal.dark-mode .chat-modal-loading-spinner {
  border-color: #4a5568;
  border-top-color: #14545c;
}

.chat-modal.dream-mode .chat-modal-loading-spinner {
  border-color: #e9d5ff;
  border-top-color: #14545c;
}

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

.chat-modal-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #6c757d;
  font-style: italic;
}

.chat-modal.dark-mode .chat-modal-empty {
  color: #a0aec0;
}

.chat-modal.dream-mode .chat-modal-empty {
  color: #6b7280;
}

.chat-messages-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chat-message {
  display: flex;
  margin-bottom: 1rem;
}

.chat-message.admin-message {
  justify-content: flex-end;
}

.chat-message.customer-message {
  justify-content: flex-start;
}

.chat-message-content {
  max-width: 70%;
  padding: 0.75rem 1rem;
  border-radius: 18px;
  position: relative;
  word-wrap: break-word;
}

.chat-message.admin-message .chat-message-content {
  background: linear-gradient(135deg, #14545c, #0d353a);
  color: white;
  border-bottom-right-radius: 4px;
}

.chat-message.customer-message .chat-message-content {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  color: #212529;
  border-bottom-left-radius: 4px;
}

.chat-modal.dark-mode .chat-message.customer-message .chat-message-content {
  background: linear-gradient(135deg, #4a5568, #2d3748);
  color: #e2e8f0;
}

.chat-modal.dream-mode .chat-message.customer-message .chat-message-content {
  background: linear-gradient(135deg, #e9d5ff, #d8b4fe);
  color: #1f2937;
}

.chat-message.unread .chat-message-content {
  border: 2px solid #14545c;
  box-shadow: 0 0 10px rgba(20, 84, 92, 0.3);
}

.chat-message-text {
  margin: 0 0 0.25rem 0;
  line-height: 1.4;
  font-family: Verdana, sans-serif;
}

.chat-message-timestamp {
  font-size: 0.75rem;
  opacity: 0.7;
  display: block;
  margin-top: 0.25rem;
}

/* Input */
.chat-modal-input {
  padding: 1rem 1.5rem;
  border-top: 2px solid #14545c;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.chat-modal.dark-mode .chat-modal-input {
  border-top-color: #14545c;
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}

.chat-modal.dream-mode .chat-modal-input {
  border-top-color: #14545c;
  background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%);
}

.chat-input-container {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.chat-input-textarea {
  flex: 1;
  border: 2px solid #14545c;
  border-radius: 20px;
  padding: 0.75rem 1rem;
  font-family: Verdana, sans-serif;
  font-size: 0.9rem;
  resize: none;
  background: #ffffff;
  color: #212529;
  transition: all 0.3s ease;
  min-height: 44px;
  max-height: 120px;
}

.chat-input-textarea:focus {
  outline: none;
  border-color: #14545c;
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.1);
}

.chat-modal.dark-mode .chat-input-textarea {
  background: #2d3748;
  border-color: #14545c;
  color: #e2e8f0;
}

.chat-modal.dark-mode .chat-input-textarea:focus {
  border-color: #14545c;
}

.chat-modal.dream-mode .chat-input-textarea {
  background: #ffffff;
  border-color: #14545c;
  color: #1f2937;
}

.chat-modal.dream-mode .chat-input-textarea:focus {
  border-color: #14545c;
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.1);
}

.chat-send-btn {
  background: linear-gradient(135deg, #14545c, #0d353a);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.75rem 1.5rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(20, 84, 92, 0.3);
  min-width: 80px;
  text-align: center;
}

.chat-send-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(20, 84, 92, 0.4);
  background: linear-gradient(135deg, #0d353a, #14545c);
}

.chat-send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Responsive */
@media (max-width: 768px) {
  .chat-modal {
    width: 95%;
    height: 90vh;
    max-height: none;
  }

  .chat-modal-header {
    padding: 0.75rem 1rem;
  }

  .chat-modal-customer-avatar {
    width: 40px;
    height: 40px;
  }

  .chat-modal-customer-name {
    font-size: 1rem;
  }

  .chat-modal-customer-email {
    font-size: 0.8rem;
  }

  .chat-message-content {
    max-width: 85%;
  }

  .chat-modal-input {
    padding: 0.75rem 1rem;
  }
}
/* Base styles for Breakdown Page */
.breakdown-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: 'The Wanters DEMO', serif;
  padding: 20px;
  box-sizing: border-box;

  /* Light mode background */
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 177, 153, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.2) 0%, transparent 50%);
  background-color: #f5f5dc;
}

.breakdown-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 8px solid #5d4037;
  border-radius: 20px;
  padding: 1.5rem;
  max-width: 1600px;
  width: 95%;
  max-height: 90vh;
  position: relative;
  z-index: 1;
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(93, 64, 55, 0.2),
    0 0 20px rgba(93, 64, 55, 0.1);
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.breakdown-background-panel::-webkit-scrollbar {
  display: none;
}

.breakdown-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* Title Panel */
.breakdown-title-panel {
  background: linear-gradient(135deg, #14545c 0%, #2c5f68 100%);
  border: 4px solid #0d4147;
  border-radius: 20px;
  padding: 1.5rem 3rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  text-align: center;
  width: 100%;
  max-width: 800px;
}

.breakdown-title {
  color: #ffffff;
  font-size: 3rem;
  font-weight: 900;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
}

/* Navigation */
.breakdown-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-bottom: 1rem;
}

.breakdown-back-nav-button {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: #ffffff;
  border: 3px solid #b91c1c;
  border-radius: 30px;
  padding: 1rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.breakdown-back-nav-button:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(220, 38, 38, 0.4);
}

.breakdown-new-cost-button {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: #ffffff;
  border: 3px solid #1e8449;
  border-radius: 30px;
  padding: 1rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(39, 174, 96, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.breakdown-new-cost-button:hover {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(39, 174, 96, 0.4);
}

/* Content */
.breakdown-content {
  width: 100%;
  max-width: 1400px;
}

/* Auth Section */
.breakdown-auth-section {
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #8b6f63;
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
  color: #2c1810;
  margin: 2rem 0;
}

.breakdown-auth-section h2 {
  color: #8b6f63;
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.breakdown-auth-section p {
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
}

/* Update Message */
.breakdown-update-message {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #27ae60;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  text-align: center;
  color: #155724;
  font-weight: bold;
  font-size: 1.1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Loading */
.breakdown-loading {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #3498db;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  color: #2980b9;
  font-weight: bold;
  font-size: 1.2rem;
  margin: 2rem 0;
}

/* Section */
.breakdown-section {
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #8b6f63;
  border-radius: 15px;
  padding: 2rem;
  margin: 1rem 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.breakdown-section-title-panel {
  text-align: center;
  margin-bottom: 1.5rem;
}

.breakdown-section-title {
  color: #2c1810;
  font-size: 2rem;
  font-weight: 800;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Search Box */
.breakdown-search-container {
  position: relative;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
}

.breakdown-search-input {
  width: 100%;
  max-width: 600px;
  padding: 1rem 1.5rem;
  font-size: 1.1rem;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif;
  border: 3px solid #8b6f63;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.95);
  color: #2c1810;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.breakdown-search-input:focus {
  border-color: #5d4037;
  box-shadow: 0 0 10px rgba(93, 64, 55, 0.3);
  transform: translateY(-1px);
}

.breakdown-search-input::placeholder {
  color: #8b6f63;
  font-style: italic;
}

.breakdown-search-clear {
  position: absolute;
  right: calc((100% - 600px) / 2 + 15px);
  top: 50%;
  transform: translateY(-50%);
  background: #dc2626;
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.breakdown-search-clear:hover {
  background: #b91c1c;
  transform: translateY(-50%) scale(1.1);
}

/* Table Styles */
.breakdown-table-container {
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #8b6f63;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 1rem 0;
  position: relative;
}

/* Enhanced Mobile Scrolling for Breakdown Table */
@media (max-width: 768px) {
  .breakdown-table-container {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    
    /* Scroll indicators with gradient shadows */
    background: 
      /* Left shadow gradient */
      linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 30px),
      /* Right shadow gradient */  
      linear-gradient(270deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 30px),
      /* Main background */
      rgba(255, 255, 255, 0.95);
    background-position: left, right, center;
    background-size: 30px 100%, 30px 100%, 100% 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll;
  }
  
  .breakdown-table {
    min-width: 700px; /* Prevents crushing - ensures readable columns */
  }
  
  /* Sticky first two columns for context */
  .breakdown-table-header-cell:nth-child(1),
  .breakdown-table-header-cell:nth-child(2),
  .breakdown-table-cell:nth-child(1),
  .breakdown-table-cell:nth-child(2) {
    position: sticky;
    z-index: 10;
    background: inherit;
    border-right: 2px solid rgba(139, 111, 99, 0.3);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  }
  
  /* Position sticky columns with proper widths */
  .breakdown-table-header-cell:nth-child(1),
  .breakdown-table-cell:nth-child(1) {
    left: 0;
    min-width: 150px; /* Item Name column */
    max-width: 150px;
    font-weight: 700; /* Emphasize name for context */
  }
  
  .breakdown-table-header-cell:nth-child(2),
  .breakdown-table-cell:nth-child(2) {
    left: 150px;
    min-width: 100px; /* Category column */
    max-width: 100px;
  }
  
  /* Enhanced touch targets for mobile */
  .breakdown-table-cell button {
    min-height: 44px;
    min-width: 60px;
    padding: 0.6rem 0.8rem;
    margin: 0.2rem;
    touch-action: manipulation;
    font-size: 0.85rem;
  }
  
  /* Better column spacing and readability on mobile */
  .breakdown-table-header-cell,
  .breakdown-table-cell {
    padding: 0.8rem 0.5rem;
    white-space: nowrap;
    font-size: 0.85rem;
  }
  
  /* Scroll hint visual effects */
  .breakdown-table-container::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(270deg, rgba(139, 111, 99, 0.15) 0%, transparent 100%);
    pointer-events: none;
    z-index: 5;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  
  .breakdown-table-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 250px; /* After sticky columns */
    bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, rgba(139, 111, 99, 0.15) 0%, transparent 100%);
    pointer-events: none;
    z-index: 5;
  }
}

.breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'The Wanters DEMO', serif;
}

.breakdown-table-header {
  background: linear-gradient(135deg, #8b6f63 0%, #5d4037 100%);
}

.breakdown-table-header-cell {
  padding: 1rem;
  text-align: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 1.1rem;
  border-bottom: 2px solid #2c1810;
  position: relative;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.breakdown-table-header-cell.sortable {
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.breakdown-table-header-cell.sortable:hover {
  background: rgba(93, 64, 55, 0.8);
  transform: translateY(-1px);
}

.breakdown-table-header-cell.sortable:hover .sort-indicator {
  transform: scale(1.15);
  background: linear-gradient(135deg, #2c5f68 0%, #14545c 100%);
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(20, 84, 92, 0.6),
    0 0 20px rgba(13, 65, 71, 0.4),
    inset 0 1px 3px rgba(245, 245, 220, 0.3);
}

.breakdown-table-header-cell.sortable:hover .sort-arrow {
  filter: drop-shadow(0 0 4px rgba(245, 245, 220, 0.8));
}

.sort-indicator {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14545c 0%, #2c5f68 100%);
  border: 2px solid #0d4147;
  position: relative;
  transition: all 0.3s ease;
  animation: sortIndicatorPulse 0.4s ease-out;
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.4),
    0 0 8px rgba(20, 84, 92, 0.3),
    inset 0 1px 2px rgba(245, 245, 220, 0.2);
}

.sort-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  transition: all 0.3s ease;
}

.sort-indicator.asc .sort-arrow {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid #f5f5dc;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.sort-indicator.desc .sort-arrow {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #f5f5dc;
  filter: drop-shadow(0 -1px 2px rgba(0, 0, 0, 0.6));
}

@keyframes sortIndicatorPulse {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.breakdown-table-row {
  border-bottom: 1px solid #e0e0e0;
  transition: all 0.2s ease;
}

.breakdown-table-row:hover {
  background: rgba(245, 245, 220, 0.3);
  transform: translateX(5px);
}

.breakdown-table-cell {
  padding: 1rem;
  text-align: center;
  vertical-align: middle;
  color: #2c1810;
  font-weight: 600;
  font-size: 1rem;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
}

.breakdown-table-cell.name {
  font-weight: 700;
  color: #1a1a1a;
  text-align: left;
}

.breakdown-table-cell.cost {
  font-weight: 800;
  color: #27ae60;
  font-size: 1.1rem;
}

/* Category Badges */
.breakdown-category-badge {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border: 2px solid transparent;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.breakdown-category-badge.ingredients {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  border-color: #1e8449;
}

.breakdown-category-badge.packaging {
  background: linear-gradient(135deg, #3498db 0%, #5dade2 100%);
  border-color: #2980b9;
}

.breakdown-category-badge.electricity {
  background: linear-gradient(135deg, #ff8c00 0%, #ff7f50 100%);
  border-color: #e67e22;
}

.breakdown-category-badge.misc {
  background: linear-gradient(135deg, #9b59b6 0%, #bb8fce 100%);
  border-color: #8e44ad;
}

/* Action Buttons */
.breakdown-action-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.breakdown-delete-btn,
.breakdown-edit-btn {
  padding: 0.5rem 1rem;
  border: 2px solid;
  border-radius: 20px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.breakdown-delete-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: white;
  border-color: #b91c1c;
}

.breakdown-delete-btn:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.breakdown-edit-btn {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: white;
  border-color: #6d28d9;
  box-shadow: 0 4px 8px rgba(124, 58, 237, 0.3);
}

.breakdown-edit-btn:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(124, 58, 237, 0.4);
}

/* Empty State */
.breakdown-empty {
  text-align: center;
  padding: 3rem 2rem;
  color: #6b7280;
  font-size: 1.2rem;
}

.breakdown-clear-search-btn {
  background: linear-gradient(135deg, #3498db 0%, #5dade2 100%);
  color: white;
  border: 2px solid #2980b9;
  border-radius: 25px;
  padding: 0.8rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  cursor: pointer;
  margin-top: 1rem;
  transition: all 0.3s ease;
}

.breakdown-clear-search-btn:hover {
  background: linear-gradient(135deg, #5dade2 0%, #3498db 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

/* Dark Mode */
.dark-mode .breakdown-page {
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(45, 32, 28, 0.5) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(139, 111, 99, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(45, 32, 28, 0.3) 0%, transparent 50%);
  background-color: #1a1a1a;
}

.dark-mode .breakdown-background-panel {
  background: rgba(45, 32, 28, 0.9);
  border-color: #8b6f63;
}

.dark-mode .breakdown-section {
  background: rgba(45, 32, 28, 0.9);
  border-color: #8b6f63;
}

.dark-mode .breakdown-table-container {
  background: rgba(45, 32, 28, 0.9);
  border-color: #8b6f63;
}

.dark-mode .breakdown-table-cell {
  color: #d7ccc8;
}

.dark-mode .breakdown-table-cell.name {
  color: #ffffff;
}

.dark-mode .breakdown-search-input {
  background: rgba(45, 32, 28, 0.9);
  border-color: #8b6f63;
  color: #d7ccc8;
}

.dark-mode .breakdown-search-input::placeholder {
  color: #8b6f63;
}

.dark-mode .sort-indicator {
  background: linear-gradient(135deg, #3e2723 0%, #5d4037 100%);
  border-color: #2c1810;
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 0 8px rgba(139, 111, 99, 0.4),
    inset 0 1px 2px rgba(215, 204, 200, 0.15);
}

.dark-mode .sort-indicator.asc .sort-arrow {
  border-bottom-color: #d7ccc8;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}

.dark-mode .sort-indicator.desc .sort-arrow {
  border-top-color: #d7ccc8;
  filter: drop-shadow(0 -1px 3px rgba(0, 0, 0, 0.8));
}

.dark-mode .breakdown-table-header-cell.sortable:hover .sort-indicator {
  transform: scale(1.15);
  background: linear-gradient(135deg, #5d4037 0%, #8d6e63 100%);
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.7),
    0 0 12px rgba(139, 111, 99, 0.6),
    0 0 20px rgba(44, 24, 16, 0.5),
    inset 0 1px 3px rgba(215, 204, 200, 0.25);
}

.dark-mode .breakdown-table-header-cell.sortable:hover .sort-arrow {
  filter: drop-shadow(0 0 6px rgba(215, 204, 200, 0.9));
}

/* Dream Mode */
.dream-mode .breakdown-page {
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(184, 134, 11, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(139, 105, 20, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(184, 134, 11, 0.2) 0%, transparent 50%);
  background-color: #fff8e1;
}

.dream-mode .breakdown-background-panel {
  background: rgba(255, 248, 225, 0.9);
  border-color: #8b6914;
  box-shadow:
    0 8px 25px rgba(93, 64, 55, 0.4),
    0 0 0 2px rgba(184, 134, 11, 0.3),
    0 0 30px rgba(184, 134, 11, 0.2);
}

.dream-mode .breakdown-title-panel {
  background: linear-gradient(135deg, #b8860b 0%, #8b6914 100%);
  border-color: #5d4037;
  box-shadow: 0 8px 25px rgba(93, 64, 55, 0.4);
}

.dream-mode .breakdown-section {
  background: rgba(255, 248, 225, 0.95);
  border-color: #b8860b;
}

.dream-mode .breakdown-table-container {
  background: rgba(255, 248, 225, 0.95);
  border-color: #b8860b;
}

.dream-mode .breakdown-search-input {
  background: rgba(255, 248, 225, 0.95);
  border-color: #b8860b;
  color: #5d4037;
}

.dream-mode .breakdown-search-input::placeholder {
  color: #8b6914;
}

.dream-mode .sort-indicator {
  background: linear-gradient(135deg, #b8860b 0%, #8b6914 100%);
  border-color: #5d4037;
  box-shadow: 
    0 2px 8px rgba(93, 64, 55, 0.5),
    0 0 12px rgba(184, 134, 11, 0.4),
    0 0 20px rgba(139, 105, 20, 0.3),
    inset 0 1px 3px rgba(255, 248, 225, 0.3);
}

.dream-mode .sort-indicator.asc .sort-arrow {
  border-bottom-color: #fff8e1;
  filter: drop-shadow(0 1px 4px rgba(93, 64, 55, 0.8));
}

.dream-mode .sort-indicator.desc .sort-arrow {
  border-top-color: #fff8e1;
  filter: drop-shadow(0 -1px 4px rgba(93, 64, 55, 0.8));
}

.dream-mode .breakdown-table-header-cell.sortable:hover .sort-indicator {
  transform: scale(1.15);
  background: linear-gradient(135deg, #8b6914 0%, #b8860b 100%);
  box-shadow: 
    0 4px 12px rgba(93, 64, 55, 0.6),
    0 0 16px rgba(184, 134, 11, 0.7),
    0 0 28px rgba(139, 105, 20, 0.5),
    0 0 40px rgba(255, 248, 225, 0.3),
    inset 0 1px 4px rgba(255, 248, 225, 0.4);
}

.dream-mode .breakdown-table-header-cell.sortable:hover .sort-arrow {
  filter: drop-shadow(0 0 8px rgba(255, 248, 225, 1));
}

/* Responsive Design */
@media (max-width: 1024px) {
  .breakdown-title {
    font-size: 2.5rem;
  }
  
  .breakdown-navigation {
    flex-wrap: wrap;
    gap: 0.8rem;
  }
  
  .breakdown-back-nav-button,
  .breakdown-new-cost-button {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .breakdown-page {
    padding: 10px;
  }
  
  .breakdown-background-panel {
    padding: 1rem;
    width: 98%;
  }
  
  .breakdown-title {
    font-size: 2rem;
  }
  
  .breakdown-navigation {
    flex-direction: column;
    align-items: center;
  }
  
  .breakdown-back-nav-button,
  .breakdown-new-cost-button {
    width: 100%;
    max-width: 200px;
  }
  
  .breakdown-table-container {
    overflow-x: auto;
  }
  
  .breakdown-search-clear {
    right: 15px;
  }
}

@media (max-width: 480px) {
  .breakdown-title {
    font-size: 1.8rem;
    padding: 1rem 2rem;
  }
  
  .breakdown-table-cell {
    padding: 0.8rem 0.5rem;
    font-size: 0.9rem;
  }
  
  .breakdown-action-buttons {
    flex-direction: column;
    gap: 0.3rem;
  }
  
  .breakdown-delete-btn,
  .breakdown-edit-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
}/* Add Inventory Modal Styles */

.add-inventory-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  width: 100vw;
  height: 100vh;
}

.add-inventory-modal {
  background: #f5f5dc;
  border: 3px solid #8d6e63;
  border-radius: 15px;
  min-width: 500px;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(139, 110, 99, 0.2),
    0 0 0 2px rgba(255, 255, 255, 0.1);
  font-family: 'The Wanters DEMO', serif;
  /* Hide scrollbar but maintain scroll functionality */
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  margin: 0;
  left: 0;
  right: 0;
}

/* Hide scrollbar but maintain scroll functionality */
.add-inventory-modal::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.add-inventory-modal::-webkit-scrollbar-track {
  background: transparent;
}

.add-inventory-modal::-webkit-scrollbar-thumb {
  background: transparent;
}

/* Modal Header */
.add-inventory-modal-header {
  background: #8d6e63;
  color: #fff8e1;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
  position: relative;
}

.add-inventory-modal-title {
  font-size: 2.6rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: 1px;
  text-align: center;
  width: 100%;
  position: relative;
  padding: 1rem 0;
  z-index: 2;
}

.add-inventory-modal-title::before {
  content: '';
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  height: calc(100% - 1rem);
  background: #14545c;
  border: 2px solid #0a1a1d;
  border-radius: 10px;
  z-index: -1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

/* Modal Body */
.add-inventory-modal-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.add-inventory-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.add-inventory-form-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}

.add-inventory-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.add-inventory-form-field-half {
  flex: 1;
}

.add-inventory-form-field-narrow {
  flex: 0 0 80px;
  min-width: 80px;
}

.add-inventory-select-narrow {
  width: 100%;
  min-width: 60px;
}

.add-inventory-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0.25rem;
  text-align: center;
}

.add-inventory-input,
.add-inventory-select {
  padding: 0.75rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Verdana', sans-serif;
  background: #ffffff;
  color: #2c3e50;
  transition: all 0.3s ease;
  text-align: center;
  -moz-appearance: textfield;
}

.add-inventory-input::-webkit-outer-spin-button,
.add-inventory-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.add-inventory-input-large {
  padding: 1rem;
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 1rem;
}

.add-inventory-input-narrow {
  max-width: 80px;
  margin: 0 auto;
  text-align: center;
}

.add-inventory-input:focus,
.add-inventory-select:focus {
  outline: none;
  border-color: #14545c;
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.1);
}

.add-inventory-input.error,
.add-inventory-select.error {
  border-color: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.add-inventory-error {
  color: #e74c3c;
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

.add-inventory-general-error {
  background: #f8d7da;
  color: #721c24;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid #f5c6cb;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 1rem;
}

/* Modal Footer */
.add-inventory-modal-footer {
  padding: 1.5rem 2rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  background: #8d6e63;
  border-radius: 0 0 12px 12px;
  border-top: 2px solid #3e2723;
}

.add-inventory-save-btn,
.add-inventory-cancel-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.add-inventory-save-btn {
  background: #27ae60;
  color: white;
}

.add-inventory-save-btn:hover:not(:disabled) {
  background: #229954;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.add-inventory-save-btn:disabled {
  background: #95a5a6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.add-inventory-cancel-btn {
  background: #e74c3c;
  color: white;
}

.add-inventory-cancel-btn:hover:not(:disabled) {
  background: #c0392b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.add-inventory-cancel-btn:disabled {
  background: #95a5a6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Dark mode styles */
.add-inventory-modal-overlay.dark-mode {
  background: rgba(0, 0, 0, 0.8);
}

.add-inventory-modal.dark-mode {
  background: #2c3e50;
  border-color: #34495e;
}

.add-inventory-modal-header.dark-mode {
  background: #34495e;
}

.add-inventory-modal-body.dark-mode {
  background: #2c3e50;
}

.add-inventory-label.dark-mode {
  color: #ecf0f1;
}

.add-inventory-input.dark-mode,
.add-inventory-select.dark-mode {
  background: #34495e;
  border-color: #4a6741;
  color: #ecf0f1;
}

.add-inventory-input-large.dark-mode {
  background: #34495e;
  border-color: #4a6741;
  color: #ecf0f1;
}

.add-inventory-input.dark-mode:focus,
.add-inventory-select.dark-mode:focus {
  border-color: #27ae60;
  box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2);
}

.add-inventory-modal-footer.dark-mode {
  background: #5d4037;
  border-top-color: #3e2723;
}


/* Add Ingredient Modal Styles */

.add-ingredient-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000001 !important;
  backdrop-filter: blur(4px);
  width: 100vw;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.add-ingredient-modal {
  background: #f5f5dc;
  border: 3px solid #8d6e63;
  border-radius: 15px;
  min-width: 800px;
  max-width: 1000px;
  z-index: 10000002 !important;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(139, 110, 99, 0.2),
    0 0 0 2px rgba(255, 255, 255, 0.1);
  font-family: 'The Wanters DEMO', serif;
  /* Hide scrollbar but maintain scroll functionality */
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  margin: 0;
  left: 0;
  right: 0;
}

/* Hide scrollbar but maintain scroll functionality */
.add-ingredient-modal::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

/* Modal Header */
.add-ingredient-modal-header {
  background: #5d4037;
  color: white;
  padding: 1.5rem 2rem;
  border-radius: 12px 12px 0 0;
  text-align: center;
  border-bottom: 3px solid #8d6e63;
}

.add-ingredient-modal-title {
  font-size: 2rem;
  font-weight: 800;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
}

/* Modal Body */
.add-ingredient-modal-body {
  padding: 2rem;
}

/* Search Section */
.add-ingredient-search-section {
  margin-bottom: 2rem;
  text-align: center;
}

.add-ingredient-search-input {
  width: 100%;
  max-width: 400px;
  padding: 1rem 1.5rem;
  border: 3px solid #8d6e63;
  border-radius: 25px;
  font-size: 1.1rem;
  font-family: 'Verdana', sans-serif;
  background: #ffffff;
  color: #3e2723;
  transition: all 0.2s ease;
  text-align: center;
}

.add-ingredient-search-input:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.2);
  background: #fafafa;
}

.add-ingredient-search-input::placeholder {
  color: #8d6e63;
  font-style: italic;
}

/* Custom Ingredient Section */
.add-ingredient-custom-section {
  margin-bottom: 2rem;
  text-align: center;
}

.add-ingredient-custom-btn {
  background: #8d6e63;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'The Wanters DEMO', serif;
  margin-bottom: 1rem;
}

.add-ingredient-custom-btn:hover {
  background: #6d4c41;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.add-ingredient-custom-form {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.add-ingredient-custom-input {
  padding: 0.75rem 1rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Verdana', sans-serif;
  background: #ffffff;
  color: #3e2723;
  min-width: 250px;
}

.add-ingredient-custom-input:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 2px rgba(93, 64, 55, 0.2);
}

.add-ingredient-custom-add-btn {
  background: #4caf50;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'The Wanters DEMO', serif;
}

.add-ingredient-custom-add-btn:hover {
  background: #45a049;
  transform: translateY(-1px);
}

/* Error Messages */
.add-ingredient-general-error {
  background: #ffebee;
  border: 2px solid #d32f2f;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  color: #d32f2f;
  font-weight: 600;
  text-align: center;
  font-family: 'Verdana', sans-serif;
}

.add-ingredient-error {
  color: #d32f2f;
  font-size: 0.9rem;
  font-weight: 600;
  display: block;
  margin-top: 0.5rem;
  font-family: 'Verdana', sans-serif;
}

/* Ingredients Grid */
.add-ingredient-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.add-ingredient-item {
  background: #ffffff;
  border: 2px solid #d7ccc8;
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.2s ease;
  cursor: pointer;
  user-select: none;
}

.add-ingredient-item:hover {
  border-color: #8d6e63;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.add-ingredient-item.selected {
  border-color: #4caf50;
  background: #f1f8e9;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

.add-ingredient-item-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  justify-content: center;
  text-align: center;
}

.add-ingredient-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #4caf50;
  cursor: pointer;
}

.add-ingredient-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
  flex: 1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.add-ingredient-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #d7ccc8;
}

.add-ingredient-detail-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.add-ingredient-price-input {
  flex: 1;
  padding: 0.5rem;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: 'Verdana', sans-serif;
  background: #ffffff;
  color: #3e2723;
  text-align: center;
}

.add-ingredient-price-input:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 2px rgba(93, 64, 55, 0.2);
}

.add-ingredient-price-input.error {
  border-color: #d32f2f;
  background: #ffebee;
}

.add-ingredient-unit-select {
  padding: 0.5rem;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: 'Verdana', sans-serif;
  background: #ffffff;
  color: #3e2723;
  cursor: pointer;
  min-width: 60px;
}

.add-ingredient-unit-select:focus {
  outline: none;
  border-color: #5d4037;
}

.add-ingredient-supplier-input,
.add-ingredient-notes-input {
  width: 100%;
  padding: 0.5rem;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: 'Verdana', sans-serif;
  background: #ffffff;
  color: #3e2723;
}

.add-ingredient-supplier-input:focus,
.add-ingredient-notes-input:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.2);
}

.add-ingredient-supplier-input::placeholder,
.add-ingredient-notes-input::placeholder {
  color: #8d6e63;
  font-style: italic;
}

/* Modal Footer */
.add-ingredient-modal-footer {
  background: #f5f5dc;
  padding: 1.5rem 2rem;
  border-top: 3px solid #8d6e63;
  border-radius: 0 0 12px 12px;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.add-ingredient-save-btn {
  background: #4caf50;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 25px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'The Wanters DEMO', serif;
  min-width: 200px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.add-ingredient-save-btn:hover:not(:disabled) {
  background: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(76, 175, 80, 0.3);
}

.add-ingredient-save-btn:disabled {
  background: #cccccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.add-ingredient-cancel-btn {
  background: #8d6e63;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 25px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'The Wanters DEMO', serif;
  min-width: 150px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.add-ingredient-cancel-btn:hover:not(:disabled) {
  background: #6d4c41;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(141, 110, 99, 0.3);
}

.add-ingredient-cancel-btn:disabled {
  background: #cccccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .add-ingredient-modal {
    min-width: 90vw;
    max-width: 95vw;
    margin: 10px;
  }
  
  .add-ingredient-grid {
    grid-template-columns: 1fr;
  }
  
  .add-ingredient-modal-footer {
    flex-direction: column;
    align-items: center;
  }
  
  .add-ingredient-save-btn,
  .add-ingredient-cancel-btn {
    width: 100%;
    max-width: 300px;
  }
  
  .add-ingredient-custom-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .add-ingredient-custom-input {
    min-width: auto;
    width: 100%;
  }
}

/* Dark Mode Support */
.add-ingredient-modal-overlay.dark-mode {
  background: rgba(0, 0, 0, 0.8);
}

.add-ingredient-modal.dark-mode {
  background: #2d2d2d;
  border-color: #5d4037;
  color: #ffffff;
}

.add-ingredient-modal.dark-mode .add-ingredient-item {
  background: #3d3d3d;
  border-color: #5d4037;
  color: #ffffff;
}

.add-ingredient-modal.dark-mode .add-ingredient-item.selected {
  background: #1b5e20;
  border-color: #4caf50;
}

.add-ingredient-modal.dark-mode .add-ingredient-search-input,
.add-ingredient-modal.dark-mode .add-ingredient-custom-input,
.add-ingredient-modal.dark-mode .add-ingredient-price-input,
.add-ingredient-modal.dark-mode .add-ingredient-unit-select,
.add-ingredient-modal.dark-mode .add-ingredient-supplier-input,
.add-ingredient-modal.dark-mode .add-ingredient-notes-input {
  background: #424242;
  color: #ffffff;
  border-color: #5d4037;
}

.add-ingredient-modal.dark-mode .add-ingredient-search-input::placeholder,
.add-ingredient-modal.dark-mode .add-ingredient-custom-input::placeholder,
.add-ingredient-modal.dark-mode .add-ingredient-supplier-input::placeholder,
.add-ingredient-modal.dark-mode .add-ingredient-notes-input::placeholder {
  color: #9e9e9e;
}
/* Business Type Enhancement Modal Styles */
.business-type-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  padding: 20px;
}

.business-type-modal {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 1000px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
}

.business-type-modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30px;
  text-align: center;
  position: relative;
}

.business-type-modal-header h2 {
  margin: 0 0 10px 0;
  font-size: 2rem;
  font-weight: 700;
}

.business-type-modal-subtitle {
  margin: 0;
  font-size: 1.1rem;
  opacity: 0.9;
  font-weight: 400;
  line-height: 1.5;
}

.business-type-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.business-type-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.business-type-modal-content {
  padding: 30px;
  max-height: 60vh;
  overflow-y: auto;
}

.business-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.business-type-card {
  border: 2px solid #e1e8ed;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  background: white;
  border-left: 4px solid #95a5a6;
}

.business-type-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: #3498db;
}

.business-type-card.selected {
  border-color: #27ae60;
  background: #f8fff9;
  box-shadow: 0 8px 25px rgba(39, 174, 96, 0.2);
}

.business-type-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.business-type-icon {
  font-size: 2.5rem;
  margin-right: 15px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 12px;
}

.business-type-info h3 {
  margin: 0 0 5px 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: #2c3e50;
}

.business-type-category {
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.business-type-description {
  margin: 0 0 20px 0;
  color: #7f8c8d;
  font-size: 0.95rem;
  line-height: 1.4;
}

.business-type-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1;
}

.stat-label {
  font-size: 0.8rem;
  color: #7f8c8d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.business-type-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  gap: 15px;
}

.loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.business-type-modal-footer {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #e1e8ed;
}

.business-type-skip-btn {
  background: #95a5a6;
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-bottom: 15px;
}

.business-type-skip-btn:hover:not(:disabled) {
  background: #7f8c8d;
}

.business-type-skip-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.business-type-footer-note {
  margin: 0;
  color: #7f8c8d;
  font-size: 0.9rem;
  font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
  .business-type-modal {
    margin: 10px;
    max-height: 95vh;
  }
  
  .business-type-modal-header {
    padding: 20px;
  }
  
  .business-type-modal-header h2 {
    font-size: 1.5rem;
  }
  
  .business-type-modal-content {
    padding: 20px;
  }
  
  .business-type-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .business-type-card {
    padding: 15px;
  }
  
  .business-type-stats {
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .business-type-modal-overlay {
    padding: 10px;
  }
  
  .business-type-modal-header h2 {
    font-size: 1.3rem;
  }
  
  .business-type-modal-subtitle {
    font-size: 1rem;
  }
  
  .business-type-card-header {
    flex-direction: column;
    text-align: center;
  }
  
  .business-type-icon {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
/* Inventory Inline Editing Styles */

/* Table Header Styling */
.inventory-table-row.header .inventory-table-cell {
  color: #8B4513 !important; /* Dark brown */
  font-size: 1.1rem !important; /* Larger */
  font-weight: 700 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Editing row styles - default blue for ingredients */
.inventory-table-row.editing {
  background: #f8f9fa;
  border: 2px solid #007bff;
  border-radius: 8px;
  box-shadow: inset 0 0 8px rgba(0, 123, 255, 0.2), 0 0 15px rgba(0, 123, 255, 0.4);
  transform: scale(1.02);
  transition: all 0.3s ease;
  flex-direction: column;
  padding: 1rem;
}

/* Permanent items styling - colored accent on right side */
.inventory-table-row.permanent-item {
  position: relative;
  border-right: 6px solid #fd7e14 !important; /* Orange accent on right side (costs section color) */
  transition: all 0.3s ease;
}

.inventory-table-row.permanent-item:hover:not(.selected):not(.editing) {
  background-color: #fff8e1 !important; /* Light orange background on hover */
  border-right: 8px solid #fd7e14 !important; /* Thicker border on hover */
  box-shadow: 0 2px 8px rgba(253, 126, 20, 0.2) !important; /* Subtle shadow */
  transform: translateX(-2px); /* Slight left movement on hover */
}

.inventory-table-row.permanent-item:active {
  transform: translateX(0px); /* Reset transform when clicked */
  box-shadow: 0 1px 4px rgba(253, 126, 20, 0.3) !important; /* Deeper shadow when active */
}

/* Remove hover effects for selected items */
.inventory-table-row.selected {
  background-color: #e3f2fd !important; /* Light blue background for selected items */
  border-left: 4px solid #007bff !important; /* Blue left border for selected items */
}

.inventory-table-row.selected:hover {
  background-color: #e3f2fd !important; /* Keep same background on hover */
  transform: none !important; /* No transform on hover */
  box-shadow: none !important; /* No shadow on hover */
}

/* Specific handling for permanent items when selected */
.inventory-table-row.permanent-item.selected {
  background-color: #e3f2fd !important; /* Light blue background for selected permanent items */
  border-left: 4px solid #007bff !important; /* Blue left border for selected items */
  border-right: 6px solid #fd7e14 !important; /* Keep orange accent on right side */
}

.inventory-table-row.permanent-item.selected:hover {
  background-color: #e3f2fd !important; /* Keep same background on hover */
  transform: none !important; /* No transform on hover */
  box-shadow: none !important; /* No shadow on hover */
  border-right: 6px solid #fd7e14 !important; /* Keep orange accent on hover */
}

/* Permanent items in editing mode - no hover effects */
.inventory-table-row.permanent-item.editing {
  background: #fff8e1 !important; /* Light orange background for editing */
  border: 2px solid #fd7e14 !important; /* Orange border for editing */
  border-right: 6px solid #fd7e14 !important; /* Keep orange accent on right */
  border-radius: 8px;
  box-shadow: inset 0 0 8px rgba(253, 126, 20, 0.2), 0 0 15px rgba(253, 126, 20, 0.4);
  transform: scale(1.02);
  transition: all 0.3s ease;
  flex-direction: column;
  padding: 1rem;
}

.inventory-table-row.permanent-item.editing:hover {
  background: #fff8e1 !important; /* Keep same background on hover */
  transform: scale(1.02) !important; /* No additional transform on hover */
  box-shadow: inset 0 0 8px rgba(253, 126, 20, 0.2), 0 0 15px rgba(253, 126, 20, 0.4) !important; /* Keep same shadow */
  border-right: 6px solid #fd7e14 !important; /* Keep orange accent on hover */
}

/* General hover effects - only for non-selected items */
.inventory-table-row:hover:not(.selected):not(.editing):not(.header) {
  background-color: #f8f9fa !important;
  transform: translateX(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}


/* Section-specific editing styles */
.inventory-table-row.editing.ingredients-section {
  background-color: #e3f2fd;
  border-color: #007bff;
  border-left: 8px solid #007bff;
  box-shadow: inset 0 0 8px rgba(0, 123, 255, 0.2), 0 0 15px rgba(0, 123, 255, 0.4);
}

.inventory-table-row.editing.packaging-section {
  background-color: #e8f5e8;
  border-color: #28a745;
  border-left: 8px solid #28a745;
  box-shadow: inset 0 0 8px rgba(40, 167, 69, 0.2), 0 0 15px rgba(40, 167, 69, 0.4);
}

.inventory-table-row.editing.appliances-section {
  background-color: #f3e5f5;
  border-color: #6f42c1;
  border-left: 8px solid #6f42c1;
  box-shadow: inset 0 0 8px rgba(111, 66, 193, 0.2), 0 0 15px rgba(111, 66, 193, 0.4);
}

.inventory-table-row.editing.costs-section {
  background-color: #fff8e1;
  border-color: #fd7e14;
  border-left: 8px solid #fd7e14;
  box-shadow: inset 0 0 8px rgba(253, 126, 20, 0.2), 0 0 15px rgba(253, 126, 20, 0.4);
}

/* Mobile Responsive Layout */
@media (max-width: 768px) {
  .inventory-table {
    display: block;
  }
  
  .inventory-table-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.75rem;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .inventory-table-row.header {
    display: none; /* Hide header on mobile */
  }
  
  .inventory-table-row .inventory-table-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
  }
  
  .inventory-table-row .inventory-table-cell:last-child {
    border-bottom: none;
  }
  
  
  /* Mobile tile layout - show only name and price prominently */
  .inventory-table-row .inventory-table-cell.name-cell {
    order: 1;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 0.5rem;
  }
  
  .inventory-table-row .inventory-table-cell.cost-cell {
    order: 2;
    font-size: 1.2rem;
    font-weight: 700;
    color: #28a745;
  }
  
  .inventory-table-row .inventory-table-cell.unit-cell {
    order: 3;
    font-size: 0.9rem;
    color: #666;
  }
  
  .inventory-table-row .inventory-table-cell.quantity-cell {
    order: 4;
    font-size: 0.9rem;
    color: #666;
  }
  
  /* Editing mode on mobile */
  .inventory-table-row.editing {
    padding: 1rem;
    display: flex;
    flex-direction: column;
  }
  
  .inventory-table-row.editing .inventory-table-cell {
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 0;
  }
  
  
  /* Ensure edit actions appear at the bottom on mobile */
  .inventory-table-row.editing .inventory-edit-actions {
    order: 999; /* Ensure it appears last */
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid #ddd;
  }
}

/* Appliance-specific column styles */
.inventory-table-cell.days-cell,
.inventory-table-cell.hours-cell,
.inventory-table-cell.running-cost-cell {
  text-align: center;
  font-size: 0.9rem;
}

.inventory-table-item-days,
.inventory-table-item-hours {
  color: #666;
  font-weight: 500;
}

.inventory-table-item-running-cost {
  color: #28a745;
  font-weight: 700;
  font-size: 1rem;
}

/* Very narrow screens (phones) */
@media (max-width: 480px) {
  .inventory-table-row {
    padding: 0.5rem;
    margin-bottom: 0.75rem;
  }
  
  .inventory-table-row .inventory-table-cell {
    padding: 0.25rem 0;
  }
  
  .inventory-table-row .inventory-table-cell.name-cell {
    font-size: 1.3rem; /* Even larger on very narrow screens */
  }
  
  .inventory-table-row .inventory-table-cell.cost-cell {
    font-size: 1.2rem;
  }
  
  /* Larger titles on very narrow screens */
  .inventory-table-item-name,
  .inventory-table-row.editing .inventory-table-cell.name-cell .inventory-edit-input,
  .inventory-table-row.editing .inventory-table-cell.cost-cell .inventory-edit-input {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
  }
}

/* Edit input styles - default blue for ingredients */
.inventory-edit-input {
  width: 100%;
  padding: 8px 12px;
  border: 2px solid #007bff;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: 'The Wanters DEMO', serif !important;
  background: #ffffff;
  color: #000000 !important; /* Bold black text */
  font-weight: 700 !important; /* Bold font weight */
  transition: all 0.2s ease;
}

.inventory-edit-input:focus {
  outline: none;
  border-color: #0056b3;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
  transform: translateY(-1px);
}

.inventory-edit-input:hover {
  border-color: #0056b3;
}

/* Section-specific input styles */
.ingredients-section .inventory-edit-input {
  border-color: #007bff;
}

.ingredients-section .inventory-edit-input:focus {
  border-color: #0056b3;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.ingredients-section .inventory-edit-input:hover {
  border-color: #0056b3;
}

.packaging-section .inventory-edit-input {
  border-color: #28a745;
}

.packaging-section .inventory-edit-input:focus {
  border-color: #1e7e34;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.packaging-section .inventory-edit-input:hover {
  border-color: #1e7e34;
}

.appliances-section .inventory-edit-input {
  border-color: #6f42c1;
}

.appliances-section .inventory-edit-input:focus {
  border-color: #5a2d91;
  box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.1);
}

.appliances-section .inventory-edit-input:hover {
  border-color: #5a2d91;
}

.costs-section .inventory-edit-input {
  border-color: #fd7e14;
}

.costs-section .inventory-edit-input:focus {
  border-color: #e55a00;
  box-shadow: 0 0 0 3px rgba(253, 126, 20, 0.1);
}

.costs-section .inventory-edit-input:hover {
  border-color: #e55a00;
}

/* Edit select styles - default blue for ingredients */
.inventory-edit-select {
  width: 100%;
  padding: 8px 12px;
  border: 2px solid #007bff;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: Arial, sans-serif !important;
  background: #ffffff;
  color: #000000 !important; /* Bold black text */
  font-weight: 700 !important; /* Bold font weight */
  text-align: center !important; /* Center align the selected text */
  cursor: pointer;
  transition: all 0.2s ease;
}

.inventory-edit-select:focus {
  outline: none;
  border-color: #0056b3;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
  transform: translateY(-1px);
}

.inventory-edit-select:hover {
  border-color: #0056b3;
}

/* Style dropdown options to match selected option */
.inventory-edit-select option {
  font-family: Arial, sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #000000 !important;
  text-align: center !important;
  background: #ffffff !important;
  padding: 8px 12px !important;
}

/* Mobile responsive dropdown options */
@media (max-width: 768px) {
  .inventory-edit-select option {
    font-size: 1rem !important;
  }
}

/* Section-specific select styles */
.ingredients-section .inventory-edit-select {
  border-color: #007bff;
}

.ingredients-section .inventory-edit-select:focus {
  border-color: #0056b3;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.ingredients-section .inventory-edit-select:hover {
  border-color: #0056b3;
}

.packaging-section .inventory-edit-select {
  border-color: #28a745;
}

.packaging-section .inventory-edit-select:focus {
  border-color: #1e7e34;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.packaging-section .inventory-edit-select:hover {
  border-color: #1e7e34;
}

.appliances-section .inventory-edit-select {
  border-color: #6f42c1;
}

.appliances-section .inventory-edit-select:focus {
  border-color: #5a2d91;
  box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.1);
}

.appliances-section .inventory-edit-select:hover {
  border-color: #5a2d91;
}

.costs-section .inventory-edit-select {
  border-color: #fd7e14;
}

.costs-section .inventory-edit-select:focus {
  border-color: #e55a00;
  box-shadow: 0 0 0 3px rgba(253, 126, 20, 0.1);
}

.costs-section .inventory-edit-select:hover {
  border-color: #e55a00;
}


/* Edit actions container */
.inventory-edit-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #ddd;
  grid-column: 1 / -1; /* Span all grid columns */
  width: 100%;
}

/* Hide mobile actions on wider screens */
@media (min-width: 769px) {
  .inventory-edit-actions {
    display: none;
  }
  
  /* Show desktop button cell on larger screens */
  .inventory-table-cell.button-cell {
    display: flex;
  }
}

/* Show mobile actions on smaller screens */
@media (max-width: 768px) {
  .inventory-edit-actions {
    display: flex;
  }
  
  /* Hide desktop button cell on mobile */
  .inventory-table-cell.button-cell {
    display: none;
  }
}

/* Center text in input fields by default */
.inventory-edit-input,
.inventory-edit-select {
  text-align: center;
}

/* Left-align text on wide screens */
@media (min-width: 769px) {
  .inventory-edit-input,
  .inventory-edit-select {
    text-align: left;
  }
}

/* Make name input field much wider in edit mode */
.inventory-table-cell.name-cell .inventory-edit-input {
  width: 100%;
  min-width: 200px;
  max-width: 300px;
  text-align: center; /* Center by default for mobile */
  padding: 0.5rem 0.75rem;
  font-size: 1.1rem;
  font-weight: 700 !important; /* Bold font weight */
  color: #000000 !important; /* Bold black text */
}

/* Make cost input field match name input styling */
.inventory-table-cell.cost-cell .inventory-edit-input {
  width: 100%;
  min-width: 150px;
  max-width: 200px;
  text-align: center; /* Center by default for mobile */
  padding: 0.5rem 0.75rem;
  font-size: 1.1rem;
  font-weight: 700 !important; /* Bold font weight */
  color: #000000 !important; /* Bold black text */
}

/* Make watts input field match name input styling but narrower */
.inventory-table-cell.watts-cell .inventory-edit-input {
  width: 100%;
  min-width: 120px;
  max-width: 180px;
  text-align: center; /* Center by default for mobile */
  padding: 0.5rem 0.75rem;
  font-size: 1.1rem;
  font-weight: 700 !important; /* Bold font weight */
  color: #000000 !important; /* Bold black text */
  font-family: 'The Wanters DEMO', serif !important;
}

/* Left-align name and cost inputs on wide screens */
@media (min-width: 769px) {
  .inventory-table-cell.name-cell .inventory-edit-input,
  .inventory-table-cell.cost-cell .inventory-edit-input,
  .inventory-table-cell.watts-cell .inventory-edit-input {
    text-align: left;
  }
}

/* Make unit dropdown narrower */
.inventory-table-cell.unit-cell .inventory-edit-select {
  width: 100%;
  min-width: 80px;
  max-width: 120px;
  text-align: center;
  padding: 0.5rem 0.75rem;
  font-size: 1.1rem;
  font-weight: 700 !important; /* Bold font weight */
  color: #000000 !important; /* Bold black text */
}

/* Mobile responsive adjustments for unit dropdown */
@media (max-width: 768px) {
  .inventory-table-cell.unit-cell .inventory-edit-select {
    min-width: 60px;
    max-width: 100px;
    font-size: 1rem;
    font-weight: 700 !important; /* Bold font weight */
    color: #000000 !important; /* Bold black text */
  }
}

/* Mobile responsive adjustments for name input */
@media (max-width: 768px) {
  .inventory-table-cell.name-cell .inventory-edit-input {
    min-width: 150px;
    max-width: 250px;
    font-size: 1rem;
    font-weight: 700 !important; /* Bold font weight */
    color: #000000 !important; /* Bold black text */
  }
  
  .inventory-table-cell.cost-cell .inventory-edit-input {
    min-width: 120px;
    max-width: 180px;
    font-size: 1rem;
    font-weight: 700 !important; /* Bold font weight */
    color: #000000 !important; /* Bold black text */
  }
  
  .inventory-table-cell.watts-cell .inventory-edit-input {
    min-width: 100px;
    max-width: 150px;
    font-size: 1rem;
    font-weight: 700 !important; /* Bold font weight */
    color: #000000 !important; /* Bold black text */
  }
}

/* Edit actions responsive layout */
@media (max-width: 768px) {
  .inventory-edit-actions {
    flex-direction: row; /* Buttons side-by-side on mobile */
    justify-content: space-around; /* Distribute space evenly */
    gap: 6px;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
  }
  
  .inventory-edit-save-btn,
  .inventory-edit-cancel-btn,
  .inventory-edit-delete-btn {
    flex: 1; /* Allow buttons to grow and shrink */
    min-width: 80px; /* Ensure a minimum width */
    padding: 8px 12px;
  }
  
  /* Larger titles on narrow mobile screens */
  .inventory-table-item-name,
  .inventory-table-row.editing .inventory-table-cell.name-cell .inventory-edit-input,
  .inventory-table-row.editing .inventory-table-cell.cost-cell .inventory-edit-input {
    font-size: 1.2rem; /* Increase font size for names and cost */
    font-weight: 700; /* Make them bolder too */
  }
}

@media (min-width: 769px) {
  .inventory-edit-actions {
    flex-direction: row;
    gap: 12px;
    flex-wrap: nowrap; /* Prevent wrapping on wide screens */
  }
  
  .inventory-edit-save-btn,
  .inventory-edit-cancel-btn,
  .inventory-edit-delete-btn {
    min-width: 80px;
    padding: 8px 16px;
    flex-shrink: 0; /* Prevent buttons from shrinking */
  }
}

/* Edit action buttons */
.inventory-edit-save-btn,
.inventory-edit-cancel-btn,
.inventory-edit-delete-btn {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 60px;
}

.inventory-edit-save-btn {
  background: #28a745 !important;
  color: white !important;
  border: 2px solid #1e7e34 !important;
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

.inventory-edit-save-btn:hover {
  background: #218838 !important;
  border: 2px solid #1a6b2e !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.inventory-edit-cancel-btn {
  background: #6c757d;
  color: white;
  box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2);
}

.inventory-edit-cancel-btn:hover {
  background: #5a6268;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.inventory-edit-delete-btn {
  background: #dc3545 !important;
  color: white !important;
  border: 2px solid #a71e2a !important;
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

.inventory-edit-delete-btn:hover {
  background: #c82333 !important;
  border: 2px solid #8b1a1f !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

/* Dark mode styles - default blue for ingredients */
.dark-mode .inventory-table-row.editing {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-color: #3498db;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
}

/* Dark mode button styles */
.dark-mode .inventory-edit-save-btn {
  background: #28a745 !important;
  border: 2px solid #1e7e34 !important;
  color: white !important;
}

.dark-mode .inventory-edit-save-btn:hover {
  background: #218838 !important;
  border: 2px solid #1a6b2e !important;
}

.dark-mode .inventory-edit-delete-btn {
  background: #dc3545 !important;
  border: 2px solid #a71e2a !important;
  color: white !important;
}

.dark-mode .inventory-edit-delete-btn:hover {
  background: #c82333 !important;
  border: 2px solid #8b1a1f !important;
}

/* Dark mode pill-button overrides */
.dark-mode .inventory-edit-save-btn.pill-button {
  border: 2px solid #1e7e34 !important;
}

.dark-mode .inventory-edit-save-btn.pill-button:hover {
  border: 2px solid #1a6b2e !important;
}

.dark-mode .inventory-edit-delete-btn.pill-button {
  border: 2px solid #a71e2a !important;
}

.dark-mode .inventory-edit-delete-btn.pill-button:hover {
  border: 2px solid #8b1a1f !important;
}

.dark-mode .inventory-edit-input,
.dark-mode .inventory-edit-select {
  background: #34495e;
  color: #ecf0f1;
  border-color: #3498db;
}

.dark-mode .inventory-edit-input:focus,
.dark-mode .inventory-edit-select:focus {
  border-color: #2980b9;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.dark-mode .inventory-edit-input:hover,
.dark-mode .inventory-edit-select:hover {
  border-color: #2980b9;
}

/* Dark mode section-specific styles */
.dark-mode .inventory-table-row.editing.ingredients-section {
  border-color: #3498db;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
}

.dark-mode .inventory-table-row.editing.packaging-section {
  border-color: #4caf50;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
}

.dark-mode .inventory-table-row.editing.appliances-section {
  border-color: #9c27b0;
  box-shadow: 0 4px 12px rgba(156, 39, 176, 0.15);
}

.dark-mode .inventory-table-row.editing.costs-section {
  border-color: #ff9800;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.15);
}

.dark-mode .ingredients-section .inventory-edit-input,
.dark-mode .ingredients-section .inventory-edit-select {
  border-color: #3498db;
}

.dark-mode .ingredients-section .inventory-edit-input:focus,
.dark-mode .ingredients-section .inventory-edit-select:focus {
  border-color: #2980b9;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.dark-mode .packaging-section .inventory-edit-input,
.dark-mode .packaging-section .inventory-edit-select {
  border-color: #4caf50;
}

.dark-mode .packaging-section .inventory-edit-input:focus,
.dark-mode .packaging-section .inventory-edit-select:focus {
  border-color: #388e3c;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.dark-mode .appliances-section .inventory-edit-input,
.dark-mode .appliances-section .inventory-edit-select {
  border-color: #9c27b0;
}

.dark-mode .appliances-section .inventory-edit-input:focus,
.dark-mode .appliances-section .inventory-edit-select:focus {
  border-color: #7b1fa2;
  box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.1);
}

.dark-mode .costs-section .inventory-edit-input,
.dark-mode .costs-section .inventory-edit-select {
  border-color: #ff9800;
}

.dark-mode .costs-section .inventory-edit-input:focus,
.dark-mode .costs-section .inventory-edit-select:focus {
  border-color: #f57c00;
  box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1);
}


/* Animation for editing state */
@keyframes editModeEnter {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1.02);
  }
}

.inventory-table-row.editing {
  animation: editModeEnter 0.3s ease-out;
}

/* Hover effects for non-editing rows */
.inventory-table-row:not(.editing):not(.multiselect-mode):hover {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.dark-mode .inventory-table-row:not(.editing):not(.multiselect-mode):hover {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Pill-shaped button styling */
.pill-button {
  border-radius: 9999px !important;
  padding: 0.5rem 1.2rem !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  border: 2px solid !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  margin: 0 0.25rem !important;
}

/* Override pill-button border for specific edit buttons */
.inventory-edit-save-btn.pill-button {
  border: 2px solid #1e7e34 !important;
}

.inventory-edit-save-btn.pill-button:hover {
  border: 2px solid #1a6b2e !important;
}

.inventory-edit-delete-btn.pill-button {
  border: 2px solid #a71e2a !important;
}

.inventory-edit-delete-btn.pill-button:hover {
  border: 2px solid #8b1a1f !important;
}

.pill-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Favorite toggle button styling */
.favorite-toggle {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem;
  margin-left: 0.5rem;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  opacity: 0.6;
}

.favorite-toggle:hover {
  opacity: 1;
  transform: scale(1.1);
  background-color: rgba(0, 0, 0, 0.1);
}

.favorite-toggle.favorited {
  opacity: 1;
  color: #ffc107;
  background-color: rgba(255, 193, 7, 0.2);
}

.favorite-toggle.favorited:hover {
  background-color: rgba(255, 193, 7, 0.3);
  transform: scale(1.15);
}

/* Dark mode favorite button */
.dark-mode .favorite-toggle {
  color: #bdc3c7;
}

.dark-mode .favorite-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .favorite-toggle.favorited {
  color: #ffc107;
  background-color: rgba(255, 193, 7, 0.2);
}

.dark-mode .favorite-toggle.favorited:hover {
  background-color: rgba(255, 193, 7, 0.3);
}
/* Inventory Add Button Colors - Match Navigation Button Colors */

/* Ingredients Add Button - Grey (matches ingredients button) */
.inventory-table-add-btn.ingredients-add-btn {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
  border: 2px solid #495057;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(108, 117, 125, 0.2);
}

.inventory-table-add-btn.ingredients-add-btn:hover {
  background: linear-gradient(135deg, #5a6268 0%, #6c757d 100%);
  border-color: #495057;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(108, 117, 125, 0.3);
}

/* Packaging Add Button - Green (matches packaging button) */
.inventory-table-add-btn.packaging-add-btn {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  border: 2px solid #1e7e34;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.2);
}

.inventory-table-add-btn.packaging-add-btn:hover {
  background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
  border-color: #1e7e34;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(40, 167, 69, 0.3);
}

/* Appliances Add Button - Light Blue (matches appliances button) */
.inventory-table-add-btn.appliances-add-btn {
  background: linear-gradient(135deg, #108EBC 0%, #0d7ba8 100%);
  border: 2px solid #0a5d7a;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(16, 142, 188, 0.2);
}

.inventory-table-add-btn.appliances-add-btn:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108EBC 100%);
  border-color: #0a5d7a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.3);
  color: #3e2723 !important;
}

/* Costs Add Button - Orange (matches costs button) */
.inventory-table-add-btn.costs-add-btn {
  background: #EB640A;
  border: 2px solid #B84A08;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(235, 100, 10, 0.2);
}

.inventory-table-add-btn.costs-add-btn:hover {
  background: #C95409;
  border-color: #B84A08;
  transform: translateY(-2px);
  color: #ffffff !important;
  box-shadow: 0 6px 12px rgba(235, 100, 10, 0.3);
}

/* Warehouse Add Button - Teal (matches warehouse button) */
.inventory-table-add-btn.warehouse-add-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  border: 2px solid #0a1a1d;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(20, 84, 92, 0.2);
}

.inventory-table-add-btn.warehouse-add-btn:hover {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  border-color: #0a1a1d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.3);
}

/* Dark mode adjustments */
.dark-mode .inventory-table-add-btn.ingredients-add-btn {
  background: linear-gradient(135deg, #495057 0%, #343a40 100%);
  border-color: #212529;
}

.dark-mode .inventory-table-add-btn.ingredients-add-btn:hover {
  background: linear-gradient(135deg, #343a40 0%, #495057 100%);
  border-color: #212529;
}

.dark-mode .inventory-table-add-btn.packaging-add-btn {
  background: linear-gradient(135deg, #1e7e34 0%, #155724 100%);
  border-color: #0d4f1c;
}

.dark-mode .inventory-table-add-btn.packaging-add-btn:hover {
  background: linear-gradient(135deg, #155724 0%, #1e7e34 100%);
  border-color: #0d4f1c;
}

.dark-mode .inventory-table-add-btn.appliances-add-btn {
  background: linear-gradient(135deg, #0a5d7a 0%, #084a5f 100%);
  border-color: #063a4a;
}

.dark-mode .inventory-table-add-btn.appliances-add-btn:hover {
  background: linear-gradient(135deg, #084a5f 0%, #0a5d7a 100%);
  border-color: #063a4a;
}

.dark-mode .inventory-table-add-btn.costs-add-btn {
  background: #EB640A;
  border-color: #B84A08;
}

.dark-mode .inventory-table-add-btn.costs-add-btn:hover {
  background: #C95409;
  border-color: #B84A08;
}

.dark-mode .inventory-table-add-btn.warehouse-add-btn {
  background: linear-gradient(135deg, #0a1a1d 0%, #14545c 100%);
  border-color: #1a6b75;
}

.dark-mode .inventory-table-add-btn.warehouse-add-btn:hover {
  background: linear-gradient(135deg, #14545c 0%, #0a1a1d 100%);
  border-color: #1a6b75;
}
/* Inventory Table Styles */

.inventory-table-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f5dc;
  border: 3px solid #8d6e63;
  border-radius: 15px;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(139, 110, 99, 0.2);
  font-family: 'The Wanters DEMO', serif;
}

/* Header Section */
.inventory-table-header {
  margin-bottom: 20px;
}

.inventory-table-title-bar {
  background: #14545c;
  color: white;
  padding: 15px 20px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.inventory-table-title {
  font-size: 2.2rem;
  font-weight: 800;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
}

.inventory-table-actions {
  text-align: center;
  margin-bottom: 15px;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.inventory-table-add-btn {
  background: #4caf50;
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 25px;
  font-size: 1.3rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.inventory-table-add-btn:hover {
  background: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Section-specific add button colors */
.inventory-table-add-btn.ingredients-add {
  background: linear-gradient(135deg, #108ebc 0%, #0d7ba8 100%);
  border: 2px solid #0a5d7a;
}

.inventory-table-add-btn.ingredients-add:hover {
  background: linear-gradient(135deg, #0d7ba8 0%, #108ebc 100%);
  border-color: #0a5d7a;
  box-shadow: 0 6px 12px rgba(16, 142, 188, 0.3);
}

.inventory-table-add-btn.packaging-add {
  background: linear-gradient(135deg, #00770A 0%, #005d08 100%);
  border: 2px solid #004d06;
}

.inventory-table-add-btn.packaging-add:hover {
  background: linear-gradient(135deg, #005d08 0%, #00770A 100%);
  border-color: #004d06;
  box-shadow: 0 6px 12px rgba(0, 119, 10, 0.3);
}

.inventory-table-add-btn.appliances-add {
  background: linear-gradient(135deg, #57058A 0%, #45046a 100%);
  border: 2px solid #36034d;
}

.inventory-table-add-btn.appliances-add:hover {
  background: linear-gradient(135deg, #45046a 0%, #57058A 100%);
  border-color: #36034d;
  box-shadow: 0 6px 12px rgba(87, 5, 138, 0.3);
  color: #3e2723 !important;
}

.inventory-table-add-btn.costs-add {
  background: linear-gradient(135deg, #C8990C 0%, #a67c0a 100%);
  border: 2px solid #8a6a08;
}

.inventory-table-add-btn.costs-add:hover {
  background: linear-gradient(135deg, #a67c0a 0%, #C8990C 100%);
  border-color: #8a6a08;
  box-shadow: 0 6px 12px rgba(200, 153, 12, 0.3);
  color: #3e2723 !important;
}

.inventory-table-multiselect-btn {
  background: #ff9800;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 25px;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.inventory-table-multiselect-btn:hover {
  background: #f57c00;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.inventory-table-multiselect-btn.active {
  background: #e65100;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.inventory-table-delete-btn {
  background: #f44336;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 25px;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.inventory-table-delete-btn:hover {
  background: #d32f2f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Sorting Controls */
.inventory-table-sorting {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  background: #e8dcc0;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid #8d6e63;
}

.inventory-table-sort-btn {
  background: #2c5aa0;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.inventory-table-sort-btn:hover {
  background: #1e3d72;
  transform: translateY(-1px);
}

.inventory-table-sort-btn.active {
  background: #ff6b35;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Table Wrapper */
.inventory-table-wrapper {
  background: white;
  border-radius: 10px;
  overflow: visible;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/* Table */
.inventory-table {
  width: 100%;
}

.inventory-table-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr 1fr 1fr 1fr;
  gap: 20px;
  padding: 20px;
  margin-bottom: 15px;
  background: #f8f9fa;
  border: 2px solid #e8dcc0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Packaging section - remove quantity column */
.inventory-table-row.packaging-section {
  grid-template-columns: 1.25fr 1fr 1fr 1fr 1fr;
  gap: 20px;
}

.inventory-table-row.header {
  background: #e8dcc0;
  font-weight: 600;
  cursor: default;
  border: 2px solid #8d6e63;
  margin-bottom: 20px;
  color: #5d4037;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Packaging header - remove quantity column */
.inventory-table-row.header.packaging-section {
  grid-template-columns: 1.25fr 1fr 1fr 1fr 1fr;
  gap: 20px;
}

/* Ensure header titles align with data cells */
.inventory-table-row.header .inventory-table-cell {
  padding-left: 0px; /* Match data cell padding perfectly */
}

.inventory-table-row.multiselect-mode {
  cursor: pointer;
}

.inventory-table-row.selected {
  background: #e3f2fd;
  border: 2px solid #2196f3;
  box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3);
}

.inventory-table-row:not(.header):not(.editing):hover {
  background: #f8f4e6;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-color: #d4af37;
}

.inventory-table-row:last-child {
  border-bottom: none;
}

/* Table Cells */
.inventory-table-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

/* Override alignment for specific cells to match other sections */
.inventory-table-cell.cost-cell {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 0px !important;
  margin-left: 0px !important;
  align-items: flex-start !important;
}

.inventory-table-cell.watts-cell {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 0px !important;
  margin-left: 0px !important;
  align-items: flex-start !important;
}

/* Appliances section specific overrides - more specific targeting */
.inventory-table-row.appliances-section .inventory-table-cell.cost-cell {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 0px !important;
  margin-left: 0px !important;
  align-items: flex-start !important;
}

.inventory-table-row.appliances-section .inventory-table-cell.watts-cell {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 0px !important;
  margin-left: 0px !important;
  align-items: flex-start !important;
}


/* Add padding where checkboxes were removed - half the original checkbox padding */
.inventory-table-cell.name-cell {
  padding-left: 0px; /* Remove padding to align perfectly with header title */
  min-width: 200px; /* Ensure name column has minimum width */
  max-width: 400px; /* Prevent name column from being too wide */
}

.inventory-table-cell.value-cell {
  text-align: center;
  font-weight: 600;
  color: #2e7d32;
}

.inventory-table-item-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 4px;
}

.inventory-table-item-category {
  font-size: 1rem;
  color: #7f8c8d;
  font-style: italic;
}

.inventory-table-item-cost {
  font-size: 1.3rem;
  font-weight: 600;
  color: #27ae60;
}

.inventory-table-item-unit {
  font-size: 1.2rem;
  color: #34495e;
  font-weight: 500;
}

.inventory-table-item-quantity {
  font-size: 1.2rem;
  color: #e67e22;
  font-weight: 600;
}

.inventory-table-item-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2e7d32;
}

.inventory-table-item-hint {
  font-size: 1rem;
  color: #95a5a6;
  font-style: italic;
  text-align: center;
}

/* Empty State */
.inventory-table-empty {
  padding: 40px 20px;
  text-align: center;
}

.inventory-table-empty-content h3 {
  color: #2c3e50;
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.inventory-table-empty-content p {
  color: #7f8c8d;
  font-size: 1.1rem;
}

/* Loading State */
.inventory-table-loading {
  text-align: center;
  padding: 40px;
  color: #7f8c8d;
  font-size: 1.2rem;
}

/* Dark Mode */
.inventory-table-container.dark-mode {
  background: #2c3e50;
  border-color: #34495e;
}

.inventory-table-container.dark-mode .inventory-table-wrapper {
  background: #34495e;
}

.inventory-table-container.dark-mode .inventory-table-row {
  background: #2c3e50;
  border: 2px solid #4a5f7a;
  color: #ecf0f1;
}

.inventory-table-container.dark-mode .inventory-table-row.header {
  background: #e8dcc0;
  color: #5d4037;
  border-color: #8d6e63;
}

.inventory-table-container.dark-mode .inventory-table-row:not(.header):not(.editing):hover {
  background: #3d566b;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  border-color: #d4af37;
}

.inventory-table-container.dark-mode .inventory-table-item-name {
  color: #ecf0f1;
}

.inventory-table-container.dark-mode .inventory-table-item-category {
  color: #bdc3c7;
}

.inventory-table-container.dark-mode .inventory-table-item-cost {
  color: #2ecc71;
}

.inventory-table-container.dark-mode .inventory-table-item-unit {
  color: #ecf0f1;
}

.inventory-table-container.dark-mode .inventory-table-item-quantity {
  color: #f39c12;
}

.inventory-table-container.dark-mode .inventory-table-item-value {
  color: #27ae60;
}

.inventory-table-container.dark-mode .inventory-table-item-hint {
  color: #95a5a6;
}

.inventory-table-container.dark-mode .inventory-table-sorting {
  background: #34495e;
  border-color: #4a5f7a;
}

/* Panel-based Layout Styles */
.inventory-panels-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.inventory-panel-wrapper {
  position: relative;
}

.inventory-panel-main {
  transition: all 0.2s ease;
}

.inventory-edit-panel {
  position: relative;
  z-index: 1;
}

.inventory-edit-fields-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  width: 100%;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}

.inventory-edit-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
  align-items: center;
}

.inventory-edit-field label,
.inventory-edit-label {
  font-size: 1rem;
  font-weight: 700;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
  display: block;
  width: 100%;
}

/* Cost + Unit row (ingredients) - side by side, cost wider, unit narrower to the right */
.inventory-edit-cost-unit-row {
  width: 100%;
}

.inventory-edit-cost-unit-inner {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
}

.inventory-edit-cost-wrap {
  flex: 2;
  min-width: 0;
  max-width: 160px;
}

.inventory-edit-unit-wrap {
  flex: 1;
  min-width: 70px;
  max-width: 85px;
}

.inventory-edit-cost-wrap .inventory-edit-input,
.inventory-edit-unit-wrap .inventory-edit-select {
  width: 100%;
  text-align: center;
}

.inventory-edit-input,
.inventory-edit-select {
  padding: 0.5rem 0.75rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-size: 1rem;
  font-family: Verdana, sans-serif;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background: #ffffff;
  color: #3e2723;
}

/* Unit dropdown: no arrow, The Wanters DEMO font */
.inventory-edit-select {
  font-family: 'The Wanters DEMO', serif;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
  padding-right: 0.75rem;
}

.inventory-edit-input:focus,
.inventory-edit-select:focus {
  outline: none;
  border-color: #5d4037;
}

/* Action buttons - narrower, centred */
.inventory-edit-actions {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  margin-top: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.inventory-edit-save-btn,
.inventory-edit-delete-btn {
  padding: 0.5rem 1.5rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  min-width: 100px;
  max-width: 160px;
  text-align: center;
}

.inventory-edit-save-btn {
  background: #4caf50;
  color: white;
}

.inventory-edit-save-btn:hover {
  background: #45a049;
}

.inventory-edit-delete-btn {
  background: #f44336;
  color: white;
}

.inventory-edit-delete-btn:hover {
  background: #d32f2f;
}

/* Appliances edit panel: larger labels, narrower Watts field */
.inventory-edit-panel.appliances-edit .inventory-edit-label {
  font-size: 1.25rem;
}

.inventory-edit-panel.appliances-edit .inventory-edit-field-watts {
  max-width: 140px;
  width: 100%;
}

.inventory-edit-panel.appliances-edit .inventory-edit-field-watts .inventory-edit-input {
  width: 100%;
}

/* Appliances accordion header: same row as ingredients (price and watts inline) */
.inventory-panel-main[data-section="appliances"] .inventory-panel-meta {
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .inventory-edit-fields-container {
    flex-direction: column;
    align-items: center;
  }

  .inventory-edit-field {
    min-width: 100%;
    width: 100%;
  }

  .inventory-edit-cost-unit-inner {
    flex-wrap: nowrap;
  }

  .inventory-edit-cost-wrap {
    max-width: 75%;
  }

  .inventory-edit-unit-wrap {
    max-width: 85px;
  }

  .inventory-edit-actions {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  .inventory-edit-save-btn,
  .inventory-edit-delete-btn {
    width: auto;
    min-width: 100px;
    max-width: 160px;
  }

  .inventory-table-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 15px;
  }
  
  .inventory-table-cell {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .inventory-table-item-hint {
    display: none;
  }
  
  .inventory-table-sorting {
    flex-wrap: wrap;
    gap: 5px;
  }
  
  .inventory-table-sort-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  /* Narrow-screen accordion style for ingredients, packaging, appliances, costs */
  .inventory-panel-main.responsive-accordion-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 1rem 1.5rem !important;
    min-height: auto !important;
    height: auto !important;
    white-space: normal !important;
  }

  .inventory-panel-main.responsive-accordion-header .accordion-arrow {
    display: none !important;
  }

  .inventory-panel-main.responsive-accordion-header .inventory-panel-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0.75rem !important;
    margin-left: 0 !important;
  }

  .inventory-panel-main.responsive-accordion-header .accordion-name {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 0 !important;
  }

  .inventory-panel-main.responsive-accordion-header .accordion-name > div:first-child {
    font-size: 1.6rem !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .inventory-panel-main.responsive-accordion-header .accordion-name > div:last-child {
    text-align: center !important;
  }

  .inventory-panel-main.responsive-accordion-header .inventory-panel-meta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    margin-left: 0 !important;
    font-size: 1.1rem !important;
  }

  .inventory-panel-main.responsive-accordion-header .inventory-panel-meta > div:first-child {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
  }

  /* Hide category and supplier text on narrow-screen accordions */
  .inventory-panel-main.responsive-accordion-header .inventory-panel-category,
  .inventory-panel-main.responsive-accordion-header .inventory-panel-supplier {
    display: none !important;
  }
}
/* Electricity Cost Modal Styles */
.electricity-cost-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease-out;
}

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

.electricity-cost-modal {
  background: #f5f5dc;
  border: 4px solid #5d4037;
  border-radius: 15px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(93, 64, 55, 0.3);
  animation: modalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Modal Header */
.electricity-cost-modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 2px solid #d35400;
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
  border-radius: 15px 15px 0 0;
}

.electricity-cost-modal-title {
  color: #f5f5dc;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: 2.5rem;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  text-align: center;
}

/* Modal Body */
.electricity-cost-modal-body {
  padding: 2rem 1.5rem;
  text-align: center;
}

.electricity-cost-question {
  color: #5d4037;
  margin: 0 0 1.5rem 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5;
}

.electricity-cost-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 4rem;
}

.electricity-cost-flags-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 0;
}

.electricity-cost-note {
  color: #5d4037;
  font-style: italic;
  font-size: 0.85rem;
  font-family: Verdana, sans-serif;
  margin: 0.75rem 0 0 0;
  text-align: center;
}

.electricity-cost-flag-btn {
  background: #5d4037;
  border: 3px solid #3e2723;
  border-radius: 50px;
  padding: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: Verdana, sans-serif !important;
  color: #ffffff;
  line-height: 1;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 45px;
  box-shadow: 0 2px 4px rgba(93, 64, 55, 0.2);
  text-align: center;
  user-select: none;
}

.electricity-cost-flag-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(93, 64, 55, 0.3);
  border-color: #6d4c41;
  background-color: #6d4c41;
}

.electricity-cost-flag-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(93, 64, 55, 0.2);
}

.electricity-cost-flag-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}


.electricity-cost-input {
  width: 100%;
  max-width: 140px;
  padding: 0.75rem 1rem;
  border: 2px solid #5d4037;
  border-radius: 8px;
  font-size: 1.1rem;
  font-family: 'Verdana', sans-serif;
  text-align: center;
  background: #ffffff;
  color: #5d4037;
  transition: all 0.3s ease;
}

.electricity-cost-input:focus {
  outline: none;
  border-color: #14545c;
  box-shadow: 0 0 0 3px rgba(20, 84, 92, 0.1);
}

.electricity-cost-input.error {
  border-color: #f44336;
  background: #ffebee;
}

.electricity-cost-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.electricity-cost-error {
  color: #f44336;
  font-size: 0.9rem;
  font-family: 'Verdana', sans-serif;
  margin-top: 0.25rem;
}

/* Modal Actions */
.electricity-cost-modal-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 2px solid #5d4037;
  background: linear-gradient(135deg, #5d4037 0%, #8d6e63 50%, #5d4037 100%);
}

.electricity-cost-not-now-btn {
  padding: 0.75rem 2rem;
  border: 3px solid #d32f2f;
  border-radius: 50px;
  background: #f44336;
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.electricity-cost-not-now-btn:hover:not(:disabled) {
  background: #d32f2f;
  border-color: #b71c1c;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

.electricity-cost-not-now-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.electricity-cost-update-btn {
  padding: 0.75rem 2rem;
  border: 3px solid #2e7d32;
  border-radius: 50px;
  background: #4caf50;
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.electricity-cost-update-btn:hover:not(:disabled) {
  background: #45a049;
  border-color: #1b5e20;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.electricity-cost-update-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Dark mode support */
.electricity-cost-modal.dark-mode {
  background: #2d2d2d;
  border-color: #8b4513;
}

.electricity-cost-modal.dark-mode .electricity-cost-modal-body {
  background: #2d2d2d;
}

.electricity-cost-modal.dark-mode .electricity-cost-question {
  color: #f5f5dc;
}

.electricity-cost-modal.dark-mode .electricity-cost-input {
  background: #1a1a1a;
  color: #f5f5dc;
  border-color: #8b4513;
}

.electricity-cost-modal.dark-mode .electricity-cost-modal-actions {
  background: #2d2d2d;
  border-top-color: #8b4513;
}

/* Dream mode support */
.electricity-cost-modal.dream-mode {
  background: #1a1a1a;
  border-color: #000000;
}

.electricity-cost-modal.dream-mode .electricity-cost-modal-body {
  background: #1a1a1a;
}

.electricity-cost-modal.dream-mode .electricity-cost-question {
  color: #ffffff;
}

.electricity-cost-modal.dream-mode .electricity-cost-input {
  background: #0a0a0a;
  color: #ffffff;
  border-color: #000000;
}

.electricity-cost-modal.dream-mode .electricity-cost-modal-actions {
  background: #1a1a1a;
  border-top-color: #000000;
}

/* Edit Item Modal Styles */

.edit-item-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999 !important;
  backdrop-filter: blur(4px);
  width: 100vw;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.edit-item-modal {
  background: #f5f5dc;
  border: 3px solid #8d6e63;
  border-radius: 15px;
  min-width: 500px;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(139, 110, 99, 0.2),
    0 0 0 2px rgba(255, 255, 255, 0.1);
  font-family: 'The Wanters DEMO', serif;
  /* Hide scrollbar but maintain scroll functionality */
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  z-index: 100000 !important;
  margin: 0;
  left: 0;
  right: 0;
}

/* Hide scrollbar but maintain scroll functionality */
.edit-item-modal::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

/* Modal Header */
.edit-item-modal-header {
  background: #5d4037;
  color: white;
  padding: 1.5rem 2rem;
  border-radius: 12px 12px 0 0;
  text-align: center;
  border-bottom: 3px solid #8d6e63;
}

.edit-item-modal-title {
  font-size: 2.2rem;
  font-weight: 800;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
}

/* Modal Body */
.edit-item-modal-body {
  padding: 2rem;
}

/* Form Fields */
.edit-item-form-field {
  margin-bottom: 1.5rem;
}

.edit-item-label {
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  color: #3e2723;
  margin-bottom: 0.5rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.edit-item-input {
  width: 100%;
  padding: 15px 20px;
  border: 3px solid #8d6e63;
  border-radius: 8px;
  font-size: 1.2rem;
  font-family: 'Verdana', sans-serif;
  background: #ffffff;
  color: #3e2723;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.edit-item-input:focus {
  outline: none;
  border-color: #2c5aa0;
  box-shadow: 0 0 0 3px rgba(44, 90, 160, 0.2);
  transform: translateY(-1px);
}

.edit-item-input.error {
  border-color: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);
}

.edit-item-input:disabled {
  background: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

/* Error Messages */
.edit-item-error {
  display: block;
  color: #e74c3c;
  font-size: 0.9rem;
  margin-top: 0.5rem;
  font-weight: 500;
}

.edit-item-general-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Modal Footer */
.edit-item-modal-footer {
  padding: 1.5rem 2rem;
  background: #e8dcc0;
  border-radius: 0 0 12px 12px;
  border-top: 3px solid #8d6e63;
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.edit-item-save-btn {
  background: #27ae60;
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 25px;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  min-width: 180px;
}

.edit-item-save-btn:hover:not(:disabled) {
  background: #229954;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.edit-item-save-btn:disabled {
  background: #95a5a6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.edit-item-delete-btn {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 25px;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  min-width: 180px;
}

.edit-item-delete-btn:hover:not(:disabled) {
  background: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.edit-item-delete-btn:disabled {
  background: #95a5a6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.edit-item-cancel-btn {
  background: #6c757d;
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 25px;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  min-width: 180px;
}

.edit-item-cancel-btn:hover:not(:disabled) {
  background: #5a6268;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.edit-item-cancel-btn:disabled {
  background: #95a5a6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Dark Mode */
.edit-item-modal-overlay.dark-mode {
  background: rgba(0, 0, 0, 0.8);
}

.edit-item-modal.dark-mode {
  background: #2c3e50;
  border-color: #34495e;
}

.edit-item-modal.dark-mode .edit-item-modal-header {
  background: #34495e;
  border-bottom-color: #4a5f7a;
}

.edit-item-modal.dark-mode .edit-item-label {
  color: #ecf0f1;
}

.edit-item-modal.dark-mode .edit-item-input {
  background: #34495e;
  color: #ecf0f1;
  border-color: #4a5f7a;
}

.edit-item-modal.dark-mode .edit-item-input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.edit-item-modal.dark-mode .edit-item-input:disabled {
  background: #2c3e50;
  color: #7f8c8d;
}

.edit-item-modal.dark-mode .edit-item-modal-footer {
  background: #34495e;
  border-top-color: #4a5f7a;
}

/* Responsive Design */
@media (max-width: 768px) {
  .edit-item-modal {
    min-width: 90vw;
    max-width: 95vw;
    margin: 10px;
  }
  
  .edit-item-modal-header {
    padding: 1rem 1.5rem;
  }
  
  .edit-item-modal-title {
    font-size: 1.5rem;
  }
  
  .edit-item-modal-body {
    padding: 1.5rem;
  }
  
  .edit-item-modal-footer {
    padding: 1rem 1.5rem;
    flex-direction: column;
  }
  
  .edit-item-save-btn,
  .edit-item-delete-btn,
  .edit-item-cancel-btn {
    width: 100%;
    min-width: auto;
  }
}
/* Site Map Page Styles - Flip Card Design */
.site-map-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0;
  background-color: #f5f5dc; /* Light beige background for light mode */
  background-image: url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-blend-mode: soft-light;
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow-x: hidden;
}

.site-map-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.site-map-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.site-map-page.dark-mode {
  background-color: #2c2c2c;
}

.site-map-page.dark-mode::before {
  background-color: rgba(44, 44, 44, 0.9);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.site-map-page.dark-mode::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Flip Cards Container */
.site-map-flip-cards-container {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Flip Cards Grid */
.site-map-flip-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 100%;
  padding: 0.75rem 0;
}

/* Flip Card */
.site-map-flip-card {
  perspective: 1000px;
  height: 260px;
  cursor: pointer;
}

.site-map-flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.site-map-flip-card.flipped .site-map-flip-card-inner {
  transform: rotateY(180deg);
}

.site-map-flip-card-front,
.site-map-flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.site-map-flip-card-back {
  transform: rotateY(180deg);
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid rgba(93, 64, 55, 0.3);
}

.site-map-page.dark-mode .site-map-flip-card-back {
  background: rgba(40, 40, 40, 0.95);
  border-color: rgba(141, 110, 99, 0.4);
}

/* Front Card Content */
.site-map-card-front-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  border: 3px solid;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.site-map-card-front-content::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.site-map-card-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.site-map-card-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: white;
  margin: 0.5rem 0;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
  font-family: 'The Wanters DEMO', serif;
  text-transform: capitalize;
  position: relative;
  z-index: 1;
}

.site-map-card-subtitle {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0.5rem 0 0 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  font-family: 'Segoe UI', sans-serif;
  font-style: italic;
  position: relative;
  z-index: 1;
}

/* Back Card Content */
.site-map-card-back-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem;
  overflow-y: auto;
  position: relative;
}

/* Info View Content */
.site-map-card-info-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem;
  overflow-y: auto;
  position: relative;
}

.site-map-card-info-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: white;
  margin: 0;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
}

.site-map-page.dark-mode .site-map-card-info-title {
  color: white;
}

.site-map-card-info-description {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 1rem;
}

.site-map-info-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.site-map-info-points li {
  color: #3e2723;
  font-size: 0.9rem;
  line-height: 1.5;
  padding-left: 1.25rem;
  position: relative;
  font-family: 'Segoe UI', sans-serif;
}

.site-map-info-points li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #14545c;
  font-weight: bold;
  font-size: 1.2rem;
}

.site-map-page.dark-mode .site-map-info-points li {
  color: #d7ccc8;
}

.site-map-page.dark-mode .site-map-info-points li::before {
  color: #1a6b75;
}

.site-map-info-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(93, 64, 55, 0.2);
}

.site-map-page.dark-mode .site-map-info-actions {
  border-top-color: rgba(141, 110, 99, 0.3);
}

.site-map-flip-back-button,
.site-map-go-button {
  padding: 0.5rem 1.5rem;
  border: 2px solid;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: 0.9rem;
  color: white;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  font-family: 'Segoe UI', sans-serif;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 120px;
}

.site-map-flip-back-button:hover,
.site-map-go-button:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.site-map-flip-back-button:active,
.site-map-go-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Colored Header for Cards */
.site-map-card-header {
  width: calc(100% + 2rem);
  padding: 0.75rem 1rem;
  border-bottom: 2px solid;
  border-radius: 16px 16px 0 0;
  margin: -0.75rem -1rem 0.75rem -1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.site-map-card-back-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  margin: 0;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
  text-transform: capitalize;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
}

.site-map-page.dark-mode .site-map-card-back-title {
  color: white;
}

/* Button Bar - Matching the actual page button bars */
.site-map-button-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  row-gap: 0.2rem;
  justify-content: center;
  align-items: center;
  flex: 1;
  margin-bottom: 0.5rem;
  margin-top: 0.25rem;
}

/* Navigation Buttons - Less pill-shaped, shorter buttons */
.site-map-nav-button {
  padding: 0.4rem 0.85rem;
  border: 2px solid;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: 0.85rem;
  color: white;
  text-align: center;
  text-transform: capitalize;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  font-family: 'Segoe UI', sans-serif;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-width: 90px;
  line-height: 1.3;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

/* Ensure entire button area is clickable */
.site-map-nav-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}

.site-map-nav-button:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.site-map-nav-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}


/* Theme Toggle - Bottom */
.site-map-theme-toggle {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

/* Responsive Design */
@media (max-width: 1400px) {
  .site-map-flip-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 1200px) {
  .site-map-flip-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .site-map-flip-card {
    height: 260px;
  }
}

@media (max-width: 768px) {
  .site-map-page {
    padding: 0.75rem 0;
  }

  .site-map-flip-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0.5rem 0;
  }

  .site-map-flip-card {
    height: 280px;
  }
  
  .site-map-card-back-content,
  .site-map-card-info-content {
    padding: 0.75rem;
  }
  
  .site-map-card-header {
    width: calc(100% + 1.5rem);
    padding: 0.625rem 0.75rem;
    margin: -0.75rem -0.75rem 0.625rem -0.75rem;
  }
  
  .site-map-card-back-title,
  .site-map-card-info-title {
    font-size: 1.3rem;
  }
  
  .site-map-button-bar {
    gap: 0.3rem;
    row-gap: 0.15rem;
    margin-bottom: 0.5rem;
  }
  
  .site-map-nav-button {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    min-height: 30px;
    min-width: 85px;
    border-radius: 6px;
  }
  
  .site-map-info-points li {
    font-size: 0.85rem;
    gap: 0.5rem;
    padding-left: 1rem;
  }
  
  .site-map-info-actions {
    gap: 0.5rem;
    padding-top: 0.5rem;
  }
  
  .site-map-flip-back-button,
  .site-map-go-button {
    padding: 0.45rem 1.25rem;
    font-size: 0.85rem;
    min-height: 36px;
  }
}

@media (max-width: 480px) {
  .site-map-flip-card {
    height: 340px;
  }

  .site-map-card-front-content {
    padding: 1.5rem;
  }

  .site-map-card-title {
    font-size: 1.8rem;
  }

  .site-map-card-icon {
    font-size: 2.5rem;
  }

  .site-map-card-back-content {
    padding: 1rem;
  }

  .site-map-card-header {
    width: calc(100% + 1.5rem);
    padding: 0.5rem 0.625rem;
    margin: -0.75rem -0.75rem 0.5rem -0.75rem;
    border-radius: 16px 16px 0 0;
  }
  
  .site-map-card-back-content,
  .site-map-card-info-content {
    padding: 0.625rem;
  }
  
  .site-map-card-back-title,
  .site-map-card-info-title {
    font-size: 1.1rem;
  }
  
  .site-map-button-bar {
    gap: 0.25rem;
    row-gap: 0.1rem;
    margin-top: 0.25rem;
  }
  
  .site-map-nav-button {
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
    min-height: 26px;
    min-width: 75px;
    border-radius: 5px;
  }
  
  .site-map-info-points li {
    font-size: 0.8rem;
    padding-left: 0.875rem;
  }
  
  .site-map-info-actions {
    gap: 0.4rem;
    padding-top: 0.5rem;
  }
  
  .site-map-flip-back-button,
  .site-map-go-button {
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    min-height: 32px;
  }

  .site-map-card-back-title {
    font-size: 1.3rem;
  }

  .site-map-button-bar {
    gap: 0.4rem;
  }

  .site-map-nav-button {
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
    min-width: 85px;
    min-height: 32px;
    border-radius: 6px;
  }

  .site-map-card-info-content {
    padding: 1rem 0.75rem;
  }

  .site-map-card-header {
    width: calc(100% + 1.5rem);
    padding: 0.625rem 0.75rem;
    margin: -0.875rem -0.75rem 0.625rem -0.75rem;
    border-radius: 16px 16px 0 0;
  }
  
  .site-map-card-back-content,
  .site-map-card-info-content {
    padding: 0.75rem;
  }

  .site-map-card-info-title {
    font-size: 1.3rem;
  }

  .site-map-info-points {
    gap: 0.75rem;
  }

  .site-map-info-points li {
    font-size: 0.9rem;
    padding-left: 1rem;
    line-height: 1.5;
  }

  .site-map-info-actions {
    gap: 0.5rem;
    padding-top: 0.75rem;
  }

  .site-map-flip-back-button,
  .site-map-go-button {
    font-size: 0.9rem;
    padding: 0.65rem 1.5rem;
    min-height: 45px;
  }
}
/* Unified Sign In Modal Styles - Admin Panel Inspired */

.unified-signin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 20, 20, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease-out;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

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

.unified-signin-modal {
  background: rgba(255, 255, 255, 0.95);
  border: 6px solid #3e2723;
  border-radius: 15px;
  width: 90%;
  max-width: 500px;
  min-width: 320px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  animation: modalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  font-family: 'The Wanters DEMO', serif;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Dark mode */
.unified-signin-modal.dark {
  background: rgba(30, 30, 30, 0.98);
  border: 6px solid #000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
}

/* Dream mode */
.unified-signin-modal.dream {
  background: rgba(20, 20, 20, 0.98);
  border: 6px solid #000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

/* Header - Admin Panel Style */
.unified-signin-modal-header {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 50%, #14545c 100%);
  border: 4px solid #0a1a1d;
  border-radius: 15px 15px 0 0;
  padding: 2rem 2rem 1.5rem 2rem;
  text-align: center;
  box-shadow: 0 8px 20px rgba(62, 39, 35, 0.3);
  position: relative;
  margin: -6px -6px 0 -6px;
  width: calc(100% + 12px);
}

.unified-signin-modal-title {
  margin: 0;
  color: #f5f5dc;
  font-size: 2rem;
  font-weight: bold;
  font-family: 'The Wanters DEMO', serif;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  text-align: center;
}

.unified-signin-close-button {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #ffffff;
  padding: 0.25rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.unified-signin-close-button:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #f5f5dc;
}

/* Card Container with Flip Animation - Entire Modal Flips */
.unified-signin-card-container {
  position: relative;
  width: 100%;
  min-height: 100%;
  perspective: 1000px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
}

.unified-signin-card-container.flipped {
  transform: rotateY(180deg);
}

.unified-signin-card-front,
.unified-signin-card-back {
  position: absolute;
  width: 100%;
  min-height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  opacity: 1;
  visibility: visible;
}

.unified-signin-card-front {
  transform: rotateY(0deg);
}

.unified-signin-card-back {
  transform: rotateY(180deg);
}

/* Content */
.unified-signin-content {
  padding: 2rem;
  padding-bottom: 3rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

.unified-signin-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0;
}

/* Form Panel - Admin Panel Style */
.unified-signin-form-panel {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 50%, #14545c 100%);
  border: 2px solid #0a1a1d;
  border-radius: 15px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.unified-signin-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  flex: 0 0 auto;
}

.unified-signin-label {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: bold;
  color: #f5f5dc;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.unified-signin-input {
  background: #f5f5dc;
  border: 2px solid #3e2723;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-family: 'Verdana', sans-serif;
  font-size: 1rem;
  color: #3e2723;
  text-align: center;
  transition: all 0.3s ease;
  max-width: 300px;
  margin: 0 auto;
  width: 100%;
}

.unified-signin-input:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 3px rgba(141, 110, 99, 0.2);
}

.unified-signin-input::placeholder {
  color: #8d6e63;
  text-align: center;
}

.unified-signin-password-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

.unified-signin-password-container .unified-signin-input {
  padding-right: 3rem;
  width: 100%;
}

.unified-signin-password-toggle {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #3e2723;
  font-size: 1.2rem;
  padding: 0.25rem;
  transition: color 0.3s ease;
}

.unified-signin-password-toggle:hover {
  color: #8d6e63;
}

/* Error Message */
.unified-signin-error {
  background: #ffebee;
  border: 2px solid #f44336;
  border-radius: 8px;
  padding: 0.75rem;
  color: #c62828;
  font-family: 'Verdana', sans-serif;
  font-size: 0.9rem;
  text-align: center;
  margin-top: 0.5rem;
}

/* Actions */
.unified-signin-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0;
  flex: 0 0 auto;
  width: 100%;
  padding-top: 0.5rem;
}

.unified-signin-button {
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  letter-spacing: 1px;
  max-width: 160px;
  margin: 0 auto;
  width: 100%;
  min-height: 40px;
}

.unified-signin-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.unified-signin-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.unified-signin-primary {
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
  color: #ffffff;
  border: 2px solid #2e7d32;
}

.unified-signin-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
}

.unified-signin-secondary {
  background: linear-gradient(135deg, #9c27b0 0%, #ba68c8 100%);
  color: #ffffff;
  border: 2px solid #6a1b9a;
}

.unified-signin-secondary:hover:not(:disabled) {
  background: linear-gradient(135deg, #ba68c8 0%, #9c27b0 100%);
}

.unified-signin-tertiary {
  background: linear-gradient(135deg, #d32f2f 0%, #a31b00 100%);
  color: #ffffff;
  border: 3px solid #8b0000;
}

.unified-signin-tertiary:hover:not(:disabled) {
  background: linear-gradient(135deg, #a31b00 0%, #d32f2f 100%);
}

.unified-signin-forgot-password {
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  color: #ffffff;
  border: 2px solid #8d0000;
}

.unified-signin-forgot-password:hover:not(:disabled) {
  background: linear-gradient(135deg, #b71c1c 0%, #d32f2f 100%);
}

/* Footer - Admin Panel Style */
.unified-signin-modal-footer {
  background: linear-gradient(135deg, #5d4037 0%, #8d6e63 50%, #5d4037 100%);
  border-top: 2px solid #3e2723;
  border-radius: 0 0 15px 15px;
  height: 40px;
  min-height: 40px;
  margin: 0 -6px -6px -6px;
  width: calc(100% + 12px);
}

/* Dark mode overrides */
.dark .unified-signin-modal-header {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 50%, #14545c 100%);
  border: 4px solid #0a1a1d;
}

.dark .unified-signin-form-panel {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 50%, #14545c 100%);
  border: 2px solid #0a1a1d;
}

.dark .unified-signin-modal-footer {
  background: linear-gradient(135deg, #3e2723 0%, #5d4037 50%, #3e2723 100%);
  border-top: 2px solid #1a1a1a;
  height: 40px;
  min-height: 40px;
}

/* Dream mode overrides */
.dream .unified-signin-modal-header {
  background: rgba(45, 20, 60, 0.95);
  border: 4px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream .unified-signin-form-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 2px solid #000000;
}

.dream .unified-signin-modal-footer {
  background: linear-gradient(135deg, #2c1810 0%, #5d4037 50%, #2c1810 100%);
  border-top: 2px solid #000;
  height: 40px;
  min-height: 40px;
}

/* Responsive design */
@media (max-width: 600px) {
  .unified-signin-modal-overlay {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y; /* Enable vertical scrolling on overlay */
  }
  
  .unified-signin-card-container {
    position: relative;
    display: block;
    width: 100%;
    max-width: 500px;
    min-height: auto;
    height: auto;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;
    pointer-events: none;
  }
  
  .unified-signin-card-front,
  .unified-signin-card-back {
    position: relative;
    width: 100%;
    min-height: auto;
    height: auto;
    flex-shrink: 0;
    pointer-events: none;
  }
  
  /* On mobile, hide the inactive card face instead of using absolute positioning */
  .unified-signin-card-container .unified-signin-card-back {
    display: none;
  }
  
  .unified-signin-card-container.flipped .unified-signin-card-front {
    display: none;
  }
  
  .unified-signin-card-container.flipped .unified-signin-card-back {
    display: block;
  }
  
  .unified-signin-modal {
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
    max-height: none;
    overflow-y: visible;
    overflow-x: hidden;
    position: relative;
    pointer-events: none; /* Let touches pass through to overlay for scrolling */
  }
  
  /* Re-enable pointer events ONLY on interactive elements */
  .unified-signin-modal input,
  .unified-signin-modal button,
  .unified-signin-modal select,
  .unified-signin-modal textarea,
  .unified-signin-modal a,
  .unified-signin-modal .unified-signin-close-button {
    pointer-events: auto;
  }
  
  /* Card container and faces need pointer-events none */
  .unified-signin-card-container,
  .unified-signin-card-front,
  .unified-signin-card-back,
  .unified-signin-content,
  .unified-signin-form,
  .unified-signin-form-panel,
  .unified-signin-form-group,
  .unified-signin-modal-header,
  .unified-signin-modal-footer,
  .unified-signin-modal-title,
  .unified-signin-label {
    pointer-events: none;
  }
  
  .unified-signin-modal-title {
    font-size: 1.5rem;
  }
  
  .unified-signin-content {
    padding: 1.5rem;
    padding-bottom: 2.5rem;
    overflow-y: visible;
    min-height: auto;
  }
  
  .unified-signin-form-panel {
    padding: 1rem;
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .unified-signin-modal-overlay {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem 0.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y; /* Enable vertical scrolling on overlay */
  }
  
  .unified-signin-card-container {
    position: relative;
    display: block;
    width: 100%;
    max-width: 500px;
    min-height: auto;
    height: auto;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;
    pointer-events: none;
  }
  
  .unified-signin-card-front,
  .unified-signin-card-back {
    position: relative;
    width: 100%;
    min-height: auto;
    height: auto;
    flex-shrink: 0;
    pointer-events: none;
  }
  
  /* On mobile, hide the inactive card face instead of using absolute positioning */
  .unified-signin-card-container .unified-signin-card-back {
    display: none;
  }
  
  .unified-signin-card-container.flipped .unified-signin-card-front {
    display: none;
  }
  
  .unified-signin-card-container.flipped .unified-signin-card-back {
    display: block;
  }
  
  .unified-signin-modal {
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
    max-height: none;
    overflow-y: visible;
    overflow-x: hidden;
    position: relative;
    pointer-events: none; /* Let touches pass through to overlay for scrolling */
  }
  
  /* Re-enable pointer events ONLY on interactive elements */
  .unified-signin-modal input,
  .unified-signin-modal button,
  .unified-signin-modal select,
  .unified-signin-modal textarea,
  .unified-signin-modal a,
  .unified-signin-modal .unified-signin-close-button {
    pointer-events: auto;
  }
  
  /* Card container and faces need pointer-events none */
  .unified-signin-card-container,
  .unified-signin-card-front,
  .unified-signin-card-back,
  .unified-signin-content,
  .unified-signin-form,
  .unified-signin-form-panel,
  .unified-signin-form-group,
  .unified-signin-modal-header,
  .unified-signin-modal-footer,
  .unified-signin-modal-title,
  .unified-signin-label {
    pointer-events: none;
  }
  
  .unified-signin-modal-title {
    font-size: 1.2rem;
  }
  
  .unified-signin-content {
    padding: 1rem;
    padding-bottom: 2rem;
    overflow-y: visible;
    min-height: auto;
  }
}
/* Customer Sign-In Modal - Green Theme Override */

/* Override the teal header with green to match buying button - ONLY for customer modal */
.customer-signin-modal .unified-signin-modal-header {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 50%, #2e7d32 100%) !important;
  border: 4px solid #0a1a1d !important;
  box-shadow: 0 8px 20px rgba(46, 125, 50, 0.3) !important;
}

/* Override the form panel background with green theme - ONLY for customer modal */
.customer-signin-modal .unified-signin-form-panel {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 50%, #2e7d32 100%) !important;
  border: 2px solid #0a1a1d !important;
}

/* Dark mode overrides for customer modal ONLY */
.customer-signin-modal.dark .unified-signin-modal-header {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 50%, #2e7d32 100%) !important;
  border: 4px solid #0a1a1d !important;
}

.customer-signin-modal.dark .unified-signin-form-panel {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 50%, #2e7d32 100%) !important;
  border: 2px solid #0a1a1d !important;
}

/* Dream mode overrides for customer modal ONLY */
.customer-signin-modal.dream .unified-signin-modal-header {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 50%, #2e7d32 100%) !important;
  border: 4px solid #000000 !important;
  box-shadow: 
    0 8px 25px rgba(46, 125, 50, 0.4),
    0 0 40px rgba(46, 125, 50, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1) !important;
}

.customer-signin-modal.dream .unified-signin-form-panel {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 50%, #2e7d32 100%) !important;
  border: 2px solid #000000 !important;
}
/* Customer Creation Loading Modal Styles */

.customer-creation-loading-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'The Wanters DEMO', serif;
}

.loading-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.loading-modal-content {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #8d6e63;
  border-radius: 16px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

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

/* Loading Header */
.loading-header {
  margin-bottom: 2rem;
}

.loading-icon {
  margin-bottom: 1rem;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e0e0e0;
  border-top: 4px solid #8d6e63;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

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

.loading-header h2 {
  color: #5d4037;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  font-family: 'The Wanters DEMO', serif;
}

.loading-header p {
  color: #666;
  font-size: 1rem;
  margin: 0;
  font-family: Verdana, sans-serif;
}

/* Progress Bar */
.loading-progress {
  margin-top: 1.5rem;
}

.progress-percentage-large {
  font-size: 2.5rem;
  font-weight: 700;
  color: #5d4037;
  text-align: center;
  margin-bottom: 0.75rem;
  font-family: 'The Wanters DEMO', serif;
  line-height: 1;
}

.progress-bar-container {
  width: 100%;
  height: 12px;
  background: #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.75rem;
  border: 1px solid #d0d0d0;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #8d6e63 0%, #a1887f 50%, #8d6e63 100%);
  border-radius: 6px;
  transition: width 0.3s ease-out;
  position: relative;
  overflow: hidden;
}

.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.progress-status {
  color: #666;
  font-family: Verdana, sans-serif;
  text-align: center;
  font-size: 0.9rem;
  margin: 0.5rem 0 0 0;
}

/* Typing Animation Styles */
.typing-cursor {
  animation: blink 1s infinite;
  color: #8d6e63;
  font-weight: bold;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.uid-generation-section {
  margin-top: 1rem;
  text-align: center;
}

.uid-label {
  font-size: 0.9rem;
  color: #666;
  font-family: Verdana, sans-serif;
  margin-bottom: 0.5rem;
}

.uid-typing-text {
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: #8d6e63;
  background: rgba(139, 110, 99, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(139, 110, 99, 0.2);
  display: inline-block;
  margin-top: 0.5rem;
}

/* Business ID Generation Sequence Styles */
.business-id-generation-sequence {
  margin-top: 1.5rem;
  text-align: center;
}

.id-generation-section {
  margin-bottom: 1rem;
}

.id-label {
  font-size: 0.9rem;
  color: #666;
  font-family: Verdana, sans-serif;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.id-typing-text {
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: #000000;
  background: rgba(139, 110, 99, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(139, 110, 99, 0.2);
  display: inline-block;
  margin: 0.25rem;
  font-weight: 600;
}

.multiple-codes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.dots-animation {
  margin-top: 0.5rem;
}

.dots-text {
  font-size: 1.2rem;
  color: #8d6e63;
  font-weight: bold;
  animation: dotsFade 0.5s ease-in-out infinite alternate;
}

@keyframes dotsFade {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* Dark Theme */
.dark .loading-modal-content {
  background: rgba(60, 60, 60, 0.98);
  border: 3px solid #333;
}

.dark .loading-header h2 {
  color: #ffffff;
}

.dark .loading-header p {
  color: #cccccc;
}

.dark .progress-bar-container {
  background: #444;
  border: 1px solid #555;
}

.dark .progress-bar-fill {
  background: linear-gradient(90deg, #666 0%, #777 50%, #666 100%);
}

.dark .progress-percentage-large {
  color: #ffffff;
}

.dark .progress-status {
  color: #cccccc;
}

/* Dream Theme */
.dream .loading-modal-content {
  background: rgba(50, 50, 50, 0.98);
  border: 3px solid #333;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%);
}

.dream .loading-header h2 {
  color: #ffffff;
}

.dream .loading-header p {
  color: #cccccc;
}

.dream .progress-bar-container {
  background: #444;
  border: 1px solid #555;
}

.dream .progress-bar-fill {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
}

.dream .progress-percentage-large {
  color: #ffffff;
}

.dream .progress-status {
  color: #cccccc;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .loading-modal-content {
    padding: 1.5rem;
    max-width: 350px;
  }
  
  .loading-header h2 {
    font-size: 1.6rem;
  }
  
  .loading-header p {
    font-size: 0.9rem;
  }
  
  .progress-percentage-large {
    font-size: 2rem;
  }
  
  .progress-status {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .loading-modal-content {
    padding: 1.25rem;
    max-width: 320px;
  }
  
  .loading-header h2 {
    font-size: 1.4rem;
  }
  
  .loading-header p {
    font-size: 0.85rem;
  }
  
  .spinner {
    width: 32px;
    height: 32px;
    border-width: 3px;
  }
  
  .progress-percentage-large {
    font-size: 1.75rem;
  }
  
  .progress-status {
    font-size: 0.8rem;
  }
}
































/* Auth Conflict Modal Styles */
.auth-conflict-modal {
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  background: #d7ccc8 !important;
  border: 6px solid #5d4037 !important;
  border-radius: 15px;
  box-shadow: 0 20px 60px rgba(93, 64, 55, 0.3) !important;
}

.auth-conflict-message-box {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #5d4037;
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.auth-conflict-message {
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
  color: #5d4037;
  font-family: 'Verdana', sans-serif;
  font-weight: 600;
  white-space: pre-line;
}

/* Modal Header Styling */
.modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 2px solid #5d4037 !important;
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 50%, #14545c 100%) !important;
  border-radius: 15px 15px 0 0;
  position: relative;
  margin: -6px -6px 0 -6px;
  width: calc(100% + 12px);
}

/* Confirmation Dialog Header - Dark Red */
.confirmation-header {
  background: linear-gradient(135deg, #c62828 0%, #d32f2f 50%, #c62828 100%) !important;
  border-bottom: 2px solid #8d0000 !important;
}

.modal-title {
  color: #f5f5dc !important;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.5rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  text-align: center;
  font-weight: 800;
}

.modal-close-btn {
  position: absolute;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #ffffff;
  padding: 0.25rem;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #f5f5dc;
}

/* Modal Body Styling */
.modal-body {
  padding: 1.5rem;
  text-align: center;
}

/* Modal Footer Styling */
.modal-footer {
  background: #5d4037;
  border-radius: 0 0 15px 15px;
  padding: 1.5rem;
  border-top: 2px solid #3e2723;
  margin: 0 -6px -6px -6px;
  width: calc(100% + 12px);
}

/* Action Buttons Styling */
.auth-conflict-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

/* Primary Button - Teal like selling button */
.auth-conflict-primary-btn {
  background: #14545c;
  color: #fff;
  border: 3px solid #0a1a1d;
  border-radius: 9999px;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  font-family: 'The Wanters DEMO', serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  white-space: nowrap;
}

.auth-conflict-primary-btn:hover {
  background: #0e3a40;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(20, 84, 92, 0.4);
}

/* Secondary Button - Green like buying button */
.auth-conflict-secondary-btn {
  background: #2e7d32;
  color: #fff;
  border: 3px solid #1b5e20;
  border-radius: 9999px;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  font-family: 'The Wanters DEMO', serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  white-space: nowrap;
}

.auth-conflict-secondary-btn:hover {
  background: #1b5e20;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(46, 125, 50, 0.4);
}

/* Back Button - Red styling */
.auth-conflict-back-btn {
  background: #d32f2f !important;
  color: #fff !important;
  border: 3px solid #b71c1c !important;
}

.auth-conflict-back-btn:hover {
  background: #b71c1c !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(211, 47, 47, 0.4) !important;
}

/* Dark mode adjustments */
.dark-mode .auth-conflict-modal {
  background: #3e2723 !important;
  border-color: #5d4037 !important;
}

.dark-mode .auth-conflict-message {
  color: #ecf0f1;
}

.dark-mode .auth-conflict-message-box {
  background: rgba(52, 73, 94, 0.8);
  border-color: #34495e;
}

.dark-mode .modal-header {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #2c3e50 100%) !important;
  border-color: #34495e !important;
}

.dark-mode .modal-title {
  color: #ecf0f1 !important;
}

.dark-mode .modal-footer {
  background: #34495e;
  border-color: #2c3e50;
}

.dark-mode .confirmation-header {
  background: linear-gradient(135deg, #8d0000 0%, #b71c1c 50%, #8d0000 100%) !important;
  border-color: #5d0000 !important;
}

/* Responsive design */
@media (max-width: 768px) {
  .auth-conflict-modal {
    width: 95%;
    max-width: none;
  }
  
  .auth-conflict-message {
    font-size: 1rem;
  }
  
  .auth-conflict-actions {
    flex-direction: column;
    gap: 0.8rem;
  }
  
  .auth-conflict-primary-btn,
  .auth-conflict-secondary-btn {
    padding: 0.7rem 1.5rem;
    font-size: 1rem;
    min-width: 180px;
    width: 100%;
    max-width: 250px;
  }
}

/* Business Creation Failed Modal Styles - SmoothSales Design System */

.business-creation-failed-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease-out;
}

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

.business-creation-failed-modal {
  background: #f5f5dc; /* Cream background */
  border: 6px solid #3e2723; /* Brown border */
  border-radius: 15px;
  width: 90%;
  max-width: 500px;
  min-width: 320px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  animation: modalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  font-family: 'The Wanters DEMO', serif;
  margin: 0 auto;
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Dark mode */
.business-creation-failed-modal-overlay.dark-mode .business-creation-failed-modal {
  background: rgba(30, 30, 30, 0.98);
  border: 6px solid #000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
}

/* Dream mode */
.business-creation-failed-modal-overlay.dream-mode .business-creation-failed-modal {
  background: rgba(20, 20, 20, 0.98);
  border: 6px solid #000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

/* Header - Error Theme with Red Accents */
.business-creation-failed-modal-header {
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 50%, #d32f2f 100%); /* Red gradient for error */
  border: 4px solid #8b0000;
  border-radius: 15px 15px 0 0;
  padding: 2rem 2rem 1.5rem 2rem;
  text-align: center;
  box-shadow: 0 8px 20px rgba(211, 47, 47, 0.3);
  position: relative;
  margin: -6px -6px 0 -6px;
  width: calc(100% + 12px);
}

.business-creation-failed-modal-title {
  margin: 0;
  color: #f5f5dc;
  font-size: 1.8rem;
  font-weight: bold;
  font-family: 'The Wanters DEMO', serif;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  text-align: center;
  line-height: 1.3;
}

.error-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: errorPulse 2s infinite;
}

@keyframes errorPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Modal Body */
.business-creation-failed-modal-body {
  padding: 2rem;
  text-align: center;
  background: linear-gradient(135deg, #14545c 0%, #1a5f68 50%, #14545c 100%); /* Teal background */
  border: 4px solid #0e3a40;
  margin: 1rem;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(20, 84, 92, 0.3);
}

.dark-mode .business-creation-failed-modal-body {
  background: linear-gradient(135deg, #0e3a40 0%, #14545c 50%, #0e3a40 100%);
  border: 4px solid #000;
}

.dream-mode .business-creation-failed-modal-body {
  background: linear-gradient(135deg, #000 0%, #0e3a40 50%, #000 100%);
  border: 4px solid #000;
}

.error-message {
  color: #f5f5dc;
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0 0 1rem 0;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.suggestion-message {
  color: rgba(245, 245, 220, 0.9);
  font-size: 1rem;
  line-height: 1.5;
  margin: 1rem 0 0 0;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif;
  font-style: italic;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Modal Footer */
.business-creation-failed-modal-footer {
  padding: 1.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: rgba(245, 245, 220, 0.1);
  border-radius: 0 0 15px 15px;
}

.dark-mode .business-creation-failed-modal-footer {
  background: rgba(0, 0, 0, 0.1);
}

.dream-mode .business-creation-failed-modal-footer {
  background: rgba(0, 0, 0, 0.2);
}

/* Pill-shaped buttons */
.business-creation-failed-btn {
  padding: 1rem 2rem;
  border: 3px solid;
  border-radius: 9999px; /* Pill shape */
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: none;
  letter-spacing: 0.5px;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  min-width: 200px;
  margin: 0 auto;
}

.business-creation-failed-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.business-creation-failed-btn:disabled {
  background: #cccccc;
  border-color: #999999;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Customer Section Button - Teal */
.customer-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  color: #f5f5dc;
  border-color: #0d353a;
}

.customer-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0d353a 0%, #14545c 100%);
  border-color: #0a1a1d;
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.4);
}

/* Try Again Button - Brown */
.try-again-btn {
  background: linear-gradient(135deg, #5d4037 0%, #8d6e63 100%);
  color: #f5f5dc;
  border-color: #3e2723;
}

.try-again-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #3e2723 0%, #5d4037 100%);
  border-color: #2e1b14;
  box-shadow: 0 6px 12px rgba(93, 64, 55, 0.4);
}

/* Home Button - Cream with Brown border */
.home-btn {
  background: linear-gradient(135deg, #f5f5dc 0%, #e8e8d3 100%);
  color: #3e2723;
  border-color: #5d4037;
}

.home-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #e8e8d3 0%, #d4d4c4 100%);
  border-color: #3e2723;
  box-shadow: 0 6px 12px rgba(93, 64, 55, 0.3);
}

/* Dark mode button adjustments */
.dark-mode .home-btn {
  background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
  color: #f5f5dc;
  border-color: #000;
}

.dark-mode .home-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
  border-color: #000;
}

.dream-mode .home-btn {
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
  color: #f5f5dc;
  border-color: #000;
}

.dream-mode .home-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0d0d0d 0%, #000 100%);
  border-color: #000;
}

/* Responsive design */
@media (max-width: 600px) {
  .business-creation-failed-modal {
    width: 95%;
    margin: 20px;
  }
  
  .business-creation-failed-modal-header {
    padding: 1.5rem 1rem 1rem 1rem;
  }
  
  .business-creation-failed-modal-title {
    font-size: 1.5rem;
  }
  
  .business-creation-failed-modal-body {
    padding: 1.5rem;
    margin: 0.5rem;
  }
  
  .error-message {
    font-size: 1rem;
  }
  
  .suggestion-message {
    font-size: 0.9rem;
  }
  
  .business-creation-failed-modal-footer {
    padding: 1rem 1rem 1.5rem;
  }
  
  .business-creation-failed-btn {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    min-width: 180px;
  }
}









.landing-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */
  background-image: url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
  transition: opacity 0.4s ease-out;
}

.landing-screen.landing-screen-fade-out {
  opacity: 0;
  pointer-events: none;
}

.landing-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.landing-screen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.landing-background-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #8d6e63;
  border-radius: 25px;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
  margin: clamp(1rem, 3vw, 2rem);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(5px);
  max-width: 600px;
  width: 90%;
}

.landing-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
  max-width: 100%;
  width: 100%;
  padding: 0;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.landing-screen .title-panel {
  background-color: rgba(245, 245, 220, 0.9);
  border: 1.5px solid #3e2723;
  border-radius: 20px;
  padding: clamp(0.75rem, 2.5vw, 1.5rem) clamp(1rem, 4vw, 2.5rem); /* Reduced responsive padding */
  margin-bottom: 1rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  position: relative;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  min-width: 0; /* Allow shrinking */
}

.app-title {
  font-size: clamp(2.2rem, 4.5vw, 4rem); /* More conservative scaling for iOS */
  font-weight: 1000; /* Extra bold */
  margin: 0;
  color: #14545c; /* Teal color matching selling button */
  animation: fadeIn 1s ease-in-out;
  line-height: 1.1;
  letter-spacing: clamp(0.5px, 0.2vw, 1px); /* More conservative letter spacing */
  text-align: center;
  word-break: break-word; /* Allow breaking if needed */
  max-width: 100%;
  cursor: pointer;
  transition: color 0.3s ease;
}

.tagline-container {
  margin-bottom: 2rem;
  text-align: center;
  animation: fadeIn 1s ease-in-out 0.3s forwards;
  opacity: 0;
}

.app-subtitle {
  font-size: 1.5rem;
  margin: 0;
  color: #5d4037; /* Medium brown text */
  font-style: italic;
  font-weight: 500;
  transition: opacity 0.8s ease-in-out;
  min-height: 1.5rem; /* Prevent layout shift */
}

.app-subtitle.visible {
  opacity: 1;
}

.app-subtitle.hidden {
  opacity: 0;
}

.typewriter-cursor {
  animation: blink 1s infinite;
  color: #5d4037;
  font-weight: 300;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.landing-buttons {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
  animation: fadeIn 1s ease-in-out 0.6s forwards;
  opacity: 0;
  width: 100%;
  max-width: 300px;
}

.landing-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63; /* Medium brown */
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  font-family: var(--landing-button-font);
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
  cursor: pointer;
}

/* Ensure button elements inherit the same styling */
.landing-button[type="button"],
.landing-button[type="submit"] {
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  font-family: var(--landing-button-font);
  font-size: 1.6rem;
  font-weight: 600;
  padding: 1rem 2rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Special button colors - ULTRA HIGH SPECIFICITY to override ALL duplicates */
.landing-screen .landing-buttons .landing-button.buying-button,
body .landing-screen .landing-button.buying-button,
html body .landing-button.buying-button {
  background-color: #2e7d32 !important;
  border: 3px solid #1b5e20 !important;
  animation: slideInFromTop 1s ease-out 1s both !important;
  color: white !important;
}

.landing-screen .landing-buttons .landing-button.buying-button:hover,
body .landing-screen .landing-button.buying-button:hover {
  background-color: #1b5e20 !important;
  box-shadow: 0 6px 20px rgba(46, 125, 50, 0.4) !important;
}

.landing-screen .landing-buttons .landing-button.selling-button,
body .landing-screen .landing-button.selling-button,
html body .landing-button.selling-button {
  background-color: #14545c !important;
  border: 3px solid #0a1a1d !important;
  animation: slideInFromBottom 1s ease-out 1s both !important;
  color: white !important;
}

.landing-screen .landing-buttons .landing-button.selling-button:hover,
body .landing-screen .landing-button.selling-button:hover {
  background-color: #0e3a40 !important;
  box-shadow: 0 6px 20px rgba(20, 84, 92, 0.4) !important;
}

/* Browsing button - green like confirm buttons */
.landing-screen .landing-buttons .landing-button.browsing-button,
body .landing-screen .landing-button.browsing-button,
html body .landing-button.browsing-button {
  background-color: #4caf50 !important;
  border: 3px solid #45a049 !important;
  color: white !important;
}

.landing-screen .landing-buttons .landing-button.browsing-button:hover,
body .landing-screen .landing-button.browsing-button:hover {
  background-color: #45a049 !important;
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4) !important;
}

/* Dark mode button borders */
.dark-mode .landing-button.buying-button,
.dark-mode .landing-button.selling-button,
.dark-mode .landing-button.browsing-button {
  border: 3px solid #000000 !important;
}

/* Dream mode button borders */
.dream-mode .landing-button.buying-button,
.dream-mode .landing-button.selling-button,
.dream-mode .landing-button.browsing-button {
  border: 3px solid #000000 !important;
}

.landing-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f; /* Lighter brown on hover */
}

/* Enhanced hover effects for all modes */
.light-mode .landing-button:hover {
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(141, 110, 99, 0.4),
    0 0 25px rgba(93, 64, 55, 0.3);
}

.dark-mode .landing-button:hover {
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(161, 136, 127, 0.5),
    0 0 25px rgba(93, 64, 55, 0.4);
}

.theme-toggle {
  position: fixed;
  bottom: 2rem;
  padding: 0.75rem 1.5rem;
  background-color: #6d4c41; /* Darker brown */
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 1rem;
  font-family: var(--font-family);
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  animation: fadeIn 1s ease-in-out 0.9s forwards;
  opacity: 0;
  z-index: 1;
}

.theme-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  background-color: #795548;
}

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

@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-70px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Dark mode specific styles */
.dark-mode .landing-screen {
  background-color: #3e2723; /* Dark brown background */
  background-blend-mode: multiply;
  background-image: 
    url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 84 48'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23412f2a' fill-opacity='0.25'%3E%3Cpath d='M42 48c23.196 0 42-10.745 42-24S65.196 0 42 0 0 10.745 0 24s18.804 24 42 24zm0-5c19.33 0 35-8.954 35-19s-15.67-19-35-19S7 13.954 7 24s15.67 19 35 19z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 120px 120px;
  background-position: center, center;
  position: relative;
}

.dark-mode .landing-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode .landing-screen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Light mode title with no outline for clean look */
.landing-screen:not(.dark-mode):not(.dream-mode) .app-title {
  color: #14545c !important; /* Teal color matching selling button */
  text-shadow: none !important; /* No outline in light mode */
}

/* More specific light mode rule to ensure text-shadow is removed */
.light-mode .landing-screen .app-title {
  text-shadow: none !important; /* Force remove text-shadow in light mode */
}

.dark-mode.landing-screen .app-title {
  color: #14545c !important; /* Teal color matching selling button */
  text-shadow: 
    -1.5px -1.5px 0 #000,
    1.5px -1.5px 0 #000,
    -1.5px 1.5px 0 #000,
    1.5px 1.5px 0 #000 !important; /* 1.5px black outline */
  cursor: pointer;
  transition: color 0.3s ease;
}

/* Dark mode title panel */
.dark-mode.landing-screen .title-panel {
  background-color: rgba(62, 39, 35, 0.9);
  border: 3px solid #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark-mode .tagline-container .app-subtitle {
  color: #8d6e63 !important; /* Same cream brown as the title */
}

.dark-mode .typewriter-cursor {
  color: #8d6e63 !important;
}

.dark-mode .app-subtitle {
  color: #8d6e63 !important; /* Same cream brown as the title */
}

.dark-mode .theme-toggle {
  background-color: #4e342e;
  border: 3px solid #000000;
}

.dark-mode .landing-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .landing-button {
  border: 3px solid #000000;
}

/* Dream mode styles */
.dream-mode.landing-screen {
  background-color: #222;
  background-image: 
    url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80'),
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
    linear-gradient(45deg, transparent 24%, rgba(75, 0, 130, 0.05) 25%, rgba(75, 0, 130, 0.05) 26%, transparent 27%, transparent 74%, rgba(138, 43, 226, 0.05) 75%, rgba(138, 43, 226, 0.05) 76%, transparent 77%),
    linear-gradient(-45deg, transparent 24%, rgba(102, 51, 153, 0.05) 25%, rgba(102, 51, 153, 0.05) 26%, transparent 27%, transparent 74%, rgba(60, 30, 80, 0.05) 75%, rgba(60, 30, 80, 0.05) 76%, transparent 77%);
  background-size: cover, 300px 300px, 300px 300px, 60px 60px, 60px 60px;
  background-position: center, 0 0, 150px 150px, 0 0, 30px 30px;
  background-blend-mode: color-burn;
}

.dream-mode.landing-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.landing-screen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

/* Dream mode abstract symmetrical title panel - specific to landing screen */
.dream-mode.landing-screen .title-panel {
  background: #111111 !important;
  background-color: #111111 !important;
  background-image: none !important;
  border: 3px solid #000000;
  border-radius: 20px;
  position: relative;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(26, 26, 26, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .landing-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

/* Dream mode title with black border */
.dream-mode .app-title {
  text-shadow: 
    -1.3px -1.3px 0 #000,
    1.3px -1.3px 0 #000,
    -1.3px 1.3px 0 #000,
    1.3px 1.3px 0 #000 !important;
}

/* Dream mode subtitle with white teal color - FORCE override global dream mode text animation */
.landing-screen.dream-mode .landing-background-panel .landing-content p.app-subtitle,
.dream-mode.landing-screen .landing-background-panel .landing-content .app-subtitle,
.dream-mode .landing-screen .landing-content .app-subtitle,
.dream-mode.landing-screen .landing-content .app-subtitle,
.dream-mode .landing-background-panel .app-subtitle,
.dream-mode p.app-subtitle {
  color: #b0f0f0 !important; /* White teal color */
  animation: none !important;
  text-shadow: none !important;
  background: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Dream mode tagline container styling */
.dream-mode .tagline-container .app-subtitle {
  color: #b0f0f0 !important; /* White teal color */
  animation: none !important;
  text-shadow: none !important;
  background: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.dream-mode .typewriter-cursor {
  color: #b0f0f0 !important;
  animation: blink 1s infinite !important;
}

/* Dream mode button text styling - clean bold black text */
.dream-mode .landing-button {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 900 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.5px !important;
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
}

/* Override any global dream mode text effects for landing buttons */
.dream-mode .landing-button:not(:hover) {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-size: 1.6rem !important;
}

/* Ultra-high specificity to ensure dream mode landing buttons match light/dark mode font size */
body.dream-mode .landing-screen .landing-button,
.dream-mode.landing-screen .landing-button,
.dream-mode .landing-screen .landing-button {
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}

/* Dream mode psychedelic smoke button effects */
.dream-mode .landing-button:hover,
.dream-mode .theme-toggle:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleLanding 1.5s ease-in-out infinite alternate !important;
}

.dream-mode .landing-button {
  border: 3px solid #000000;
}

.dream-mode .theme-toggle {
  border: 3px solid #000000;
}

@keyframes dreamSparkleLanding {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

/* Desktop/Large screen styles */
@media (min-width: 1024px) {
  .landing-screen {
    padding: 3rem;
  }
  
  .landing-background-panel {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    padding: 4rem 3rem 3rem 3rem;
  }
  
  .app-subtitle {
    font-size: 1.8rem;
    margin-bottom: 4rem;
  }
  
  .landing-buttons {
    max-width: 350px;
    gap: 2rem;
  }
  
  .landing-button {
    font-size: 1.8rem;
    padding: 1.2rem 2.5rem;
  }
  
  /* Ensure dream mode landing buttons match font size in desktop */
  .dream-mode .landing-button {
    font-size: 1.8rem !important;
  }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1023px) {
  .landing-background-panel {
    max-width: 650px;
    width: 85%;
    margin: 0 auto;
    padding: 3.5rem 2.5rem 2.5rem 2.5rem;
  }
  
  .app-subtitle {
    font-size: 1.6rem;
    margin-bottom: 3.5rem;
  }
  
  .landing-buttons {
    max-width: 320px;
    gap: 1.8rem;
  }
  
  .landing-button {
    font-size: 1.7rem;
    padding: 1.1rem 2.2rem;
  }
  
  /* Ensure dream mode landing buttons match font size in tablet */
  .dream-mode .landing-button {
    font-size: 1.7rem !important;
  }
}

@media (max-width: 768px) {
  .landing-background-panel {
    margin: 1rem;
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    width: 95%;
  }
  
  .app-subtitle {
    font-size: 1.2rem;
  }
  
  .landing-buttons {
    flex-direction: column;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .landing-background-panel {
    margin: 0.25rem;
    padding: 1rem 0.75rem 0.75rem 0.75rem;
    width: 99%;
  }
  
  .app-title {
    font-size: 2.4rem;
    line-height: 1.2;
    letter-spacing: 0.5px;
  }
  
  .title-panel {
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
  }
  
  .app-subtitle {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  
  .landing-buttons {
    gap: 0.75rem;
  }
  
  .landing-button {
    font-size: 1.2rem;
    padding: 0.6rem 1.2rem;
  }
}

/* Extra small mobile screens */
@media (max-width: 360px) {
  .landing-background-panel {
    margin: 0.125rem;
    padding: 0.75rem 0.5rem 0.5rem 0.5rem;
    width: 99.5%;
  }
  
  .app-title {
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: 0.3px;
  }
  
  .title-panel {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
  }
  
  .app-subtitle {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
  }
  
  .landing-buttons {
    gap: 0.5rem;
  }
  
  .landing-button {
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
  }
}

/* Apple device specific fixes for consistent sizing */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari specific styles - comprehensive fixes */
  .landing-screen .title-panel {
    padding: 0.75rem 1rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .landing-screen .app-title {
    font-size: clamp(1.8rem, 3.5vw, 3rem) !important;
    line-height: 1.1 !important;
    letter-spacing: 0.3px !important;
  }
  
  .landing-screen .app-subtitle {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .landing-screen .landing-background-panel {
    padding: 1.5rem 1rem 1rem 1rem !important;
    margin: 0.75rem !important;
    width: 96% !important;
  }
  
  .landing-screen .landing-buttons {
    gap: 1rem !important;
    max-width: 280px !important;
  }
  
  .landing-screen .landing-button {
    font-size: 1.3rem !important;
    padding: 0.8rem 1.5rem !important;
  }
  
  /* Larger iOS devices get slightly bigger elements */
  @media (min-width: 768px) {
    .landing-screen .app-title {
      font-size: clamp(2.2rem, 4vw, 3.5rem) !important;
    }
    .landing-screen .app-subtitle {
      font-size: 1.2rem !important;
    }
    .landing-screen .landing-button {
      font-size: 1.5rem !important;
    }
  }
  
  @media (min-width: 1024px) {
    .landing-screen .app-title {
      font-size: clamp(2.8rem, 4.5vw, 4rem) !important;
    }
    .landing-screen .app-subtitle {
      font-size: 1.4rem !important;
    }
    .landing-screen .landing-button {
      font-size: 1.6rem !important;
    }
  }
}

/* Additional Apple device targeting for better consistency */
@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px) {
  .landing-screen .title-panel {
    padding: 0.75rem 1.25rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .landing-screen .app-title {
    font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
    line-height: 1.05 !important;
  }
  
  .landing-screen .app-subtitle {
    font-size: 1.1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .landing-screen .landing-background-panel {
    padding: 1.5rem 1.25rem 1.25rem 1.25rem !important;
    margin: 0.75rem !important;
  }
}

/* Landscape orientation styles - more specific selectors */
@media screen and (orientation: landscape) and (max-height: 768px) {
  .landing-screen .landing-background-panel {
    max-width: 850px !important;
    width: 90% !important;
    margin: 0.5rem auto !important;
    padding: 1.5rem 2.5rem 1rem 2.5rem !important;
  }
  
  .landing-screen .landing-content {
    margin-bottom: 1rem;
  }
  
  .landing-screen .app-title {
    font-size: 3.5rem !important;
    letter-spacing: 1px;
  }
  
  .landing-screen .title-panel {
    padding: 1rem 2rem !important;
    margin-bottom: 0.8rem !important;
  }
  
  .landing-screen .app-subtitle {
    font-size: 1.2rem !important;
    margin-bottom: 1rem !important;
  }
  
  .landing-screen .landing-buttons {
    flex-direction: row !important;
    gap: 2rem !important;
    margin-top: 0.8rem !important;
    justify-content: center;
    max-width: 500px;
  }
  
  .landing-screen .landing-button {
    font-size: 1.3rem !important;
    padding: 0.7rem 1.5rem !important;
    flex: 1;
    max-width: 180px;
  }
  
  /* Ensure dream mode landing buttons match font size in landscape */
  .dream-mode .landing-screen .landing-button {
    font-size: 1.3rem !important;
  }
}

/* Very small landscape screens (phones in landscape) */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .landing-screen .landing-background-panel {
    max-width: 750px !important;
    width: 95% !important;
    margin: 0.3rem auto !important;
    padding: 1rem 2rem 0.8rem 2rem !important;
  }
  
  .landing-screen .app-title {
    font-size: 2.8rem !important;
  }
  
  .landing-screen .title-panel {
    padding: 0.8rem 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .landing-screen .app-subtitle {
    font-size: 1rem !important;
    margin-bottom: 0.8rem !important;
  }
  
  .landing-screen .landing-buttons {
    gap: 1.5rem !important;
    margin-top: 0.5rem !important;
  }
  
  .landing-screen .landing-button {
    font-size: 1.1rem !important;
    padding: 0.6rem 1.2rem !important;
  }
  
  /* Ensure dream mode landing buttons match font size in small landscape */
  .dream-mode .landing-screen .landing-button {
    font-size: 1.1rem !important;
  }
}

/* Utility for Wanters DEMO font with 1px black outline */
.wantersdemo-outline {
  font-family: 'The Wanters DEMO', serif;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* Themed loading bar base styles */
.daydreamers-loading-bar {
  border-radius: 12px;
  height: 28px;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
}

.daydreamers-loading-bar.light {
  background: #f5f5dc;
  border: 3px solid #3e2723;
}
.daydreamers-loading-bar.dark {
  background: #3e2723;
  border: 3px solid #000;
}
.daydreamers-loading-bar.dream {
  background: linear-gradient(90deg, rgba(26, 13, 35, 0.9), rgba(45, 20, 60, 0.9));
  border: 3px solid #000;
  box-shadow: 0 0 8px rgba(45, 20, 60, 0.4);
}

.daydreamers-loading-bar-fill {
  height: 100%;
  border-radius: 12px;
  transition: width 0.5s;
}
.daydreamers-loading-bar-fill.light {
  background: #8d6e63;
}
.daydreamers-loading-bar-fill.dark {
  background: #fff8e1;
}
.daydreamers-loading-bar-fill.dream {
  background: linear-gradient(90deg, rgba(139, 110, 99, 0.9), rgba(93, 64, 55, 0.9));
} .landing-under-construction-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(4px);
}

.landing-under-construction-panel {
  max-width: 22rem;
  width: 100%;
  text-align: center;
  padding: 1.75rem 1.5rem;
  border-radius: 16px;
  background: linear-gradient(145deg, #f5f5dc 0%, #efe8d8 100%);
  border: 3px solid #14545c;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.landing-under-construction-title {
  margin: 0 0 1rem 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: #14545c;
  letter-spacing: 0.02em;
}

.landing-under-construction-message {
  margin: 0 0 1.5rem 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #3e2723;
}

.landing-under-construction-ok {
  display: block;
  width: 100%;
  max-width: 12rem;
  margin: 0 auto;
  padding: 0.65rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #14545c, #1a6b75);
  border: 2px solid #0a1a1d;
  border-radius: 10px;
  cursor: pointer;
}

.landing-under-construction-ok:hover {
  filter: brightness(1.06);
}

.landing-under-construction-ok:focus-visible {
  outline: 3px solid #2e7d32;
  outline-offset: 2px;
}
/* ==========================================================================
   Customer Loyalty Section
   Customer-facing, read-only view of a specific business's loyalty offering.
   ========================================================================== */

.customer-loyalty-section {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
  color: #3e2723;
  font-family: inherit;
  text-align: center;
}

.customer-loyalty-loading,
.customer-loyalty-error {
  padding: 2rem;
  font-size: 1.1rem;
  text-align: center;
  color: #5d4037;
}

.customer-loyalty-error h3 {
  margin: 0 0 0.5rem;
  color: #b71c1c;
}

/* ----------------- Header ----------------- */

.customer-loyalty-header {
  border-radius: 18px;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(20, 84, 92, 0.12), rgba(46, 125, 50, 0.10));
  border: 2px solid rgba(20, 84, 92, 0.25);
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.customer-loyalty-header.inactive {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: #8d6e63;
}

.customer-loyalty-header-title {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.customer-loyalty-header-title h2 {
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  color: inherit;
}

.customer-loyalty-badge {
  padding: 0.2rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.badge-muted {
  background: rgba(0, 0, 0, 0.08);
  color: #6d4c41;
}

.badge-success {
  background: rgba(46, 125, 50, 0.15);
  color: #1b5e20;
  border: 1px solid rgba(46, 125, 50, 0.35);
  padding: 0.2rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.badge-pending {
  background: rgba(141, 110, 99, 0.12);
  color: #5d4037;
  border: 1px solid rgba(141, 110, 99, 0.25);
  padding: 0.2rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.customer-loyalty-header-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.customer-loyalty-pc-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
}

.customer-loyalty-pc-tab {
  border: 2px solid #8d6e63;
  background: rgba(245, 245, 220, 0.9);
  border-radius: 9999px;
  padding: 0.45rem 0.9rem;
  font-family: 'The Wanters DEMO', serif;
  color: #3e2723;
  cursor: pointer;
}

.customer-loyalty-pc-tab.active {
  background: #14545c;
  color: #fff;
  border-color: #0b3940;
}

.loyalty-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  padding: 0.6rem 0.5rem;
  min-height: 72px;
}

.loyalty-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #14545c;
}

.loyalty-stat-label {
  font-size: 0.8rem;
  color: #5d4037;
  margin-top: 0.2rem;
  text-align: center;
}

/* ----------------- Panel ----------------- */

.customer-loyalty-panel {
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(141, 110, 99, 0.25);
  border-radius: 18px;
  padding: 1rem;
  min-height: 200px;
}

.loyalty-notice {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-weight: 500;
}

.loyalty-notice-muted {
  background: rgba(0, 0, 0, 0.06);
  color: #6d4c41;
  border: 1px dashed rgba(0, 0, 0, 0.2);
}

.loyalty-notice-info {
  background: rgba(20, 84, 92, 0.1);
  color: #14545c;
  border: 1px solid rgba(20, 84, 92, 0.25);
}

/* ----------------- Overview grid ----------------- */

.loyalty-overview-grid {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.loyalty-accordion-item {
  position: relative;
  border: 2px solid #8d6e63;
  border-radius: 12px;
  background: rgba(245, 245, 220, 0.92);
  overflow: hidden;
}

.loyalty-accordion-left-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: #32cd32;
}

.loyalty-accordion-header {
  border: none;
  width: 100%;
  background: rgba(245, 245, 220, 0.9);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  align-items: center;
  justify-items: center;
  padding: 0.95rem 1rem 0.95rem calc(8px + 1rem);
  cursor: pointer;
  text-align: center;
}

.loyalty-accordion-header.loyalty-nested-accordion-btn {
  background: rgba(245, 245, 220, 0.9);
  padding: 0.95rem 1rem 0.95rem calc(8px + 1rem);
}

.loyalty-accordion-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #3e2723;
}

.loyalty-accordion-content {
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid rgba(141, 110, 99, 0.45);
  padding: 0.8rem 1rem 1rem calc(8px + 1rem);
  text-align: center;
}

.overview-card-back-content p {
  margin: 0 0 0.45rem;
  text-align: center;
}

.overview-stamp-card-checks {
  margin: 0.7rem 0;
  padding: 0.6rem;
  border: 2px solid rgba(141, 110, 99, 0.55);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
}

.overview-stamp-card-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.overview-stamp-count {
  font-size: 0.85rem;
  color: #5d4037;
}

.overview-stamp-card-checks p {
  margin: 0 0 0.35rem;
  font-weight: 600;
  text-align: center;
}

.overview-stamp-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22px, 1fr));
  gap: 0.25rem;
}

.overview-stamp-check {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
}

.overview-stamp-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  border: 2px solid #8d6e63 !important;
  border-radius: 5px !important;
  background: #fff;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 0 !important;
}

.overview-stamp-check input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #2e7d32, #1b5e20);
  border-color: #1b5e20;
}

.loyalty-card {
  text-align: center;
}

.loyalty-card-inactive {
  opacity: 0.55;
  filter: grayscale(0.25);
  background: #f5f5f5;
  border-color: rgba(0, 0, 0, 0.1);
}

.loyalty-card-body {
  font-size: 0.95rem;
  color: #3e2723;
  line-height: 1.4;
  text-align: center;
}

.loyalty-card-body p {
  margin: 0;
}

/* ----------------- Progress ----------------- */

.loyalty-progress-shell {
  margin-top: 0.4rem;
}

.loyalty-progress-caption {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: #5d4037;
}

/* ----------------- Levels list ----------------- */

.loyalty-levels-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.loyalty-level-row {
  display: block;
  background: transparent;
  border-radius: 0;
  padding: 0;
  border: none;
  text-align: center;
}

.loyalty-level-row.reached {
  border-color: rgba(46, 125, 50, 0.4);
  background: linear-gradient(90deg, rgba(46, 125, 50, 0.08), #ffffff 60%);
}

.loyalty-level-index {
  display: none;
}

.loyalty-level-row.reached .loyalty-level-index {
  background: #2e7d32;
}

.loyalty-level-info h4 {
  margin: 0;
  font-size: 1rem;
  color: #14545c;
  text-align: center;
}

.loyalty-level-points {
  margin: 0.1rem 0 0;
  font-size: 0.85rem;
  color: #5d4037;
}

.loyalty-level-message {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: #6d4c41;
}

.loyalty-level-reward {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: #6d4c41;
  font-style: italic;
}

.loyalty-level-progress {
  margin-top: 0.45rem;
}

/* ----------------- Stamp cards ----------------- */

.loyalty-stamp-cards {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.loyalty-stamp-card {
  background: transparent;
  border-radius: 0;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: center;
  box-shadow: none;
}

.loyalty-stamp-card-head {
  display: flex;
  flex-direction: column;
}

.loyalty-stamp-card-head h4 {
  margin: 0;
  font-size: 1.05rem;
  color: #14545c;
}

.loyalty-stamp-card-reward {
  font-size: 0.8rem;
  color: #6d4c41;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 0.2rem;
}

.loyalty-stamp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
  gap: 8px;
  max-width: 280px;
  margin: 0.35rem auto 0;
}

.loyalty-stamp-check {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
}

.loyalty-stamp-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  border: 2px solid #8d6e63 !important;
  border-radius: 5px !important;
  background: #fff;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.loyalty-stamp-check input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #2e7d32, #1b5e20);
  border-color: #1b5e20;
}

.loyalty-stamp-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #5d4037;
}

/* ----------------- Achievements ----------------- */

.loyalty-achievements-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.loyalty-achievement-card {
  background: transparent;
  border-radius: 0;
  border: none;
  padding: 0;
  text-align: center;
}

.loyalty-achievement-card.secret {
  opacity: 0.75;
}

.loyalty-achievement-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.loyalty-nested-accordion-btn {
  width: 100%;
  border: none;
  background: inherit;
  cursor: pointer;
  text-align: center;
}

.loyalty-achievement-head h4 {
  margin: 0;
  font-size: 1.02rem;
  color: #14545c;
}

.loyalty-achievement-category {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #6d4c41;
}

.loyalty-achievement-tiers {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.loyalty-achievement-tier {
  border: 1px solid rgba(141, 110, 99, 0.25);
  border-radius: 10px;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.6);
}

.loyalty-achievement-tier-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 600;
  color: #5d4037;
  padding: 0;
}

.loyalty-achievement-tier-progress {
  margin-top: 0.3rem;
}

.loyalty-achievement-reward {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: #6d4c41;
}

/* ----------------- Promo codes ----------------- */

.loyalty-promo-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.loyalty-promo-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  text-align: center;
}

.loyalty-promo-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1rem 0.95rem calc(8px + 1rem);
}

.loyalty-promo-head h4 {
  margin: 0;
  font-size: 1rem;
  color: #14545c;
}

.loyalty-promo-description {
  margin: 0.5rem 0 0;
  color: #3e2723;
  font-size: 0.9rem;
}

.loyalty-promo-meta {
  margin: 0.35rem 0 0;
  color: #6d4c41;
  font-size: 0.82rem;
}

/* ----------------- Empty / coming soon ----------------- */

.loyalty-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: #5d4037;
  background: rgba(141, 110, 99, 0.06);
  border: 1px dashed rgba(141, 110, 99, 0.3);
  border-radius: 14px;
}

.loyalty-empty h3 {
  margin: 0 0 0.4rem;
  color: #14545c;
  font-family: 'The Wanters DEMO', serif;
}

.loyalty-empty p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

.loyalty-coming-soon {
  opacity: 0.85;
}

/* ----------------- Dark / dream tweaks ----------------- */

.dark-mode .customer-loyalty-section {
  color: #f5f5f5;
}

.dark-mode .customer-loyalty-header {
  background: linear-gradient(135deg, rgba(20, 84, 92, 0.35), rgba(46, 125, 50, 0.25));
  border-color: rgba(255, 255, 255, 0.2);
}

.dark-mode .loyalty-card,
.dark-mode .loyalty-level-row,
.dark-mode .loyalty-stamp-card,
.dark-mode .customer-loyalty-panel {
  background: rgba(20, 20, 20, 0.7);
  border-color: rgba(255, 255, 255, 0.15);
  color: #f5f5f5;
}

.dark-mode .loyalty-accordion-title,
.dark-mode .loyalty-level-info h4,
.dark-mode .loyalty-stamp-card-head h4,
.dark-mode .loyalty-empty h3,
.dark-mode .loyalty-stat-value {
  color: #5ad0c3;
}

.dark-mode .loyalty-accordion-item {
  background: rgba(20, 20, 20, 0.7);
  border-color: rgba(255, 255, 255, 0.2);
}

.dark-mode .loyalty-accordion-header {
  background: rgba(30, 30, 30, 0.75);
}

.dark-mode .loyalty-accordion-header.loyalty-nested-accordion-btn {
  background: rgba(30, 30, 30, 0.75);
}

.dark-mode .loyalty-accordion-content {
  background: rgba(20, 20, 20, 0.8);
}

.dark-mode .loyalty-level-points,
.dark-mode .loyalty-level-message,
.dark-mode .loyalty-stamp-card-reward,
.dark-mode .loyalty-stamp-card-foot,
.dark-mode .loyalty-stat-label,
.dark-mode .loyalty-progress-caption,
.dark-mode .loyalty-empty p {
  color: #e0d6d0;
}

.dark-mode .loyalty-achievement-card,
.dark-mode .loyalty-achievement-tier,
.dark-mode .loyalty-promo-card {
  background: rgba(20, 20, 20, 0.7);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ----------------- Mobile tweaks ----------------- */

@media (max-width: 600px) {
  .customer-loyalty-header-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loyalty-level-row {
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
  }

  .loyalty-level-status {
    grid-column: 1 / -1;
    justify-self: start;
  }
}
/* Linking Loading Modal Styles */

.linking-loading-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'The Wanters DEMO', serif;
  animation: fadeIn 0.3s ease-out;
}

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

.loading-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
}

.loading-modal-content {
  position: relative;
  background: linear-gradient(135deg, #f5f5dc 0%, #f0f0e8 100%);
  border: 3px solid #8d6e63;
  border-radius: 20px;
  padding: 2.5rem;
  max-width: 500px;
  width: 90%;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.4s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Loading Header */
.loading-header {
  margin-bottom: 2rem;
}

.loading-icon {
  margin-bottom: 1.5rem;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e0e0e0;
  border-top: 4px solid #8d6e63;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

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

.loading-header h2 {
  color: #5d4037;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  font-family: 'The Wanters DEMO', serif;
}

.loading-header p {
  color: #666;
  font-size: 1.1rem;
  margin: 0;
  font-family: Verdana, sans-serif;
}

/* Progress Bar */
.loading-progress {
  margin: 2rem 0;
}

.progress-bar-container {
  width: 100%;
  height: 16px;
  background: #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1rem;
  border: 2px solid #d0d0d0;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #8d6e63 0%, #a1887f 50%, #8d6e63 100%);
  border-radius: 6px;
  transition: width 0.5s ease-out;
  position: relative;
  overflow: hidden;
}

.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  color: #5d4037;
  font-weight: 600;
}

.progress-percentage {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
}

/* Current Step */
.current-step-container {
  margin: 1.5rem 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.current-step-text {
  font-size: 1rem;
  color: #5d4037;
  font-family: Verdana, sans-serif;
  font-weight: 500;
  line-height: 1.4;
}

.cursor {
  animation: blink 1s infinite;
  color: #8d6e63;
  font-weight: bold;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Features Preview */
.features-preview {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid #e0e0e0;
}

.features-preview h3 {
  color: #5d4037;
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  font-family: 'The Wanters DEMO', serif;
}

.features-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  text-align: left;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #666;
  font-family: Verdana, sans-serif;
}

.feature-icon {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
}

/* Dark Mode */
.linking-loading-modal.dark-mode .loading-modal-content {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border-color: #555;
}

.linking-loading-modal.dark-mode .loading-header h2,
.linking-loading-modal.dark-mode .progress-text,
.linking-loading-modal.dark-mode .current-step-text,
.linking-loading-modal.dark-mode .features-preview h3 {
  color: #e0e0e0;
}

.linking-loading-modal.dark-mode .loading-header p,
.linking-loading-modal.dark-mode .feature-item {
  color: #ccc;
}

.linking-loading-modal.dark-mode .progress-bar-container {
  background: #444;
  border-color: #555;
}

.linking-loading-modal.dark-mode .features-preview {
  border-top-color: #555;
}

/* Responsive */
@media (max-width: 600px) {
  .loading-modal-content {
    padding: 2rem 1.5rem;
    max-width: 95%;
  }
  
  .features-list {
    grid-template-columns: 1fr;
  }
  
  .loading-header h2 {
    font-size: 1.6rem;
  }
}

/* LinkId Typing Animation Styles */
.linkid-generation-section {
  margin-top: 1rem;
  text-align: center;
}

.linkid-label {
  font-size: 0.9rem;
  color: #666;
  font-family: Verdana, sans-serif;
  margin-bottom: 0.5rem;
}

.linkid-typing-container {
  display: inline-block;
  margin-top: 0.5rem;
}

.linkid-typing-text {
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: #8d6e63;
  background: rgba(139, 110, 99, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(139, 110, 99, 0.2);
  display: inline-block;
}

/* Dark mode for link ID typing */
.linking-loading-modal.dark-mode .linkid-label {
  color: #ccc;
}

.linking-loading-modal.dark-mode .linkid-typing-text {
  color: #a1887f;
  background: rgba(161, 136, 127, 0.1);
  border-color: rgba(161, 136, 127, 0.2);
}/* ===============================================================================
                              CUSTOMER STATS PAGE STYLING
=============================================================================== */

/* Main stats page container - matching app's dual geometry pattern */
.customer-stats-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background */
  background-image: url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  background-attachment: fixed;
  padding: 1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  overflow-y: auto;
  font-family: 'The Wanters DEMO', sans-serif;
  pointer-events: auto;
  
  /* Hide scrollbar while maintaining scroll functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
.customer-stats-container::-webkit-scrollbar {
  display: none;
}

/* Dual geometry background patterns - exactly like other pages */
.customer-stats-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.customer-stats-container::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Back Button for Achievements Menu */
.customer-stats-container .customer-settings-back-button {
  background-color: #8d6e63;
  color: white;
  border: 2px solid #3e2723;
  border-radius: 25px;
  padding: 0.75rem 2rem;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.customer-stats-container .customer-settings-back-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Dark mode back button - High specificity to ensure it overrides */
body.dark .customer-stats-container .customer-settings-back-button,
.dark .customer-stats-container .customer-settings-back-button,
.dark-mode .customer-stats-container .customer-settings-back-button {
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  border-color: #000000 !important;
  color: #000000 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

body.dark .customer-stats-container .customer-settings-back-button:hover,
.dark .customer-stats-container .customer-settings-back-button:hover,
.dark-mode .customer-stats-container .customer-settings-back-button:hover {
  background-color: #a1887f !important;
  border: 3px solid #000000 !important;
  border-color: #000000 !important;
  color: #000000 !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Dream mode back button */
.dream .customer-stats-container .customer-settings-back-button {
  background: linear-gradient(135deg, rgba(26, 13, 35, 1) 0%, rgba(45, 20, 60, 1) 50%, rgba(26, 13, 35, 1) 100%);
  border-color: #000000;
  color: #ffffff;
}

.dream .customer-stats-container .customer-settings-back-button:hover {
  background: linear-gradient(135deg, rgba(45, 20, 60, 1) 0%, rgba(60, 30, 80, 1) 50%, rgba(45, 20, 60, 1) 100%);
}

/* Background panel matching app structure */
.stats-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  max-height: calc(100vh - 2rem);
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  margin: 1rem auto;
  overflow: hidden;
}

/* Main container inside background panel */
.stats-main-container {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 5rem);
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  overflow-y: auto;
  
  /* Hide scrollbar while maintaining scroll functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
.stats-main-container::-webkit-scrollbar {
  display: none;
}

/* Header with title and close button */
.customer-stats-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  width: 100%;
  position: relative;
}

/* Title panel matching app style */
.stats-title-panel {
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  padding: 1rem 2rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 400px;
}

.stats-title-panel h2 {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

/* Close button */
.close-btn {
  background: #8d6e63;
  border: 3px solid #3e2723;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.close-btn:hover {
  background: #a1887f;
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Content area */
.customer-stats-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Individual stat sections */
.stats-section {
  width: 100%;
  max-width: 800px;
  background-color: rgba(255, 255, 255, 0.95);
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.stats-section h3 {
  font-size: 2rem;
  font-weight: 900;
  color: #3e2723;
  margin: 0 0 1.5rem 0;
  text-align: center;
}

/* User info and purchase stats */
.user-info, .purchase-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  background-color: rgba(245, 245, 220, 0.9);
}

.stat-label {
  font-size: 1rem;
  color: #5d4037;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 900;
  color: #3e2723;
}

/* Progress bars */
.progress-info {
  text-align: center;
}

.progress-info p {
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
  color: #3e2723;
  font-weight: 600;
}

.progress-bar {
  width: 100%;
  height: 20px;
  border: 2px solid #8d6e63;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background-color: rgba(245, 245, 220, 0.9);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #8d6e63, #5d4037);
  border-radius: 8px;
  transition: width 0.3s ease;
}

/* Tier 3 achievement progress bar - cream colored but empty when completed */
.achievement-card.unlocked[data-tier="3"] .progress-fill {
  background: #f5f5dc !important; /* Cream color like in the image */
  width: 0% !important; /* Empty progress bar when completed */
}

/* Secret achievement progress bar - cream colored but empty when completed */
.hidden-achievement.completed .progress-fill {
  background: #f5f5dc !important; /* Cream color like in the image */
  width: 0% !important; /* Empty progress bar when completed */
}

/* Light mode only: Tier 3 achievement progress bar using daydreamers-loading-bar - cream colored but empty when completed */
.achievement-card.unlocked[data-tier="3"] .daydreamers-loading-bar-fill.light {
  background: #f5f5dc !important; /* Cream color like in the image */
  width: 0% !important; /* Empty progress bar when completed */
}

/* Light mode only: Secret achievement progress bar using daydreamers-loading-bar - cream colored but empty when completed */
.hidden-achievement.completed .daydreamers-loading-bar-fill.light {
  background: #f5f5dc !important; /* Cream color like in the image */
  width: 0% !important; /* Empty progress bar when completed */
}

/* Flavor breakdown */
.flavor-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.flavor-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  background-color: rgba(245, 245, 220, 0.9);
}

.flavor-name {
  font-weight: 900;
  font-size: 1.1rem;
  color: #3e2723;
}

.flavor-counts {
  font-size: 1rem;
  color: #5d4037;
  font-weight: 600;
}

/* Achievements grid */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.achievement-card {
  padding: 1.5rem;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  background-color: rgba(245, 245, 220, 0.9);
  transition: all 0.3s ease;
  position: relative;
  text-align: center;
}

.achievement-card.unlocked {
  /* Base unlocked achievement styling */
  border-color: #8d6e63;
}

/* Tier-specific background colors for unlocked achievements - Light Mode */
.achievement-card.unlocked[data-tier="1"] {
  background-color: #F5F5DC; /* Very light cream - Tier 1 */
  border-color: #a1887f; /* Lighter border */
}

.achievement-card.unlocked[data-tier="2"] {
  background-color: #d4c4a8; /* Light brown like tier 3 panel - Tier 2 */
  border-color: #5d4037; /* Dark brown border like tier 3 */
}

.achievement-card.unlocked[data-tier="3"] {
  background-color: #8d6e63; /* Medium brown like the panel in the image - Tier 3 */
  border-color: #3e2723; /* Darker brown border */
}

.achievement-card.locked {
  background-color: #ffffff; /* White background for light mode */
  border: 3px solid #8d6e63;
}

.achievement-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  text-align: center;
}

.achievement-name {
  font-weight: 900;
  font-size: 1.7rem;
  color: #5d4037;
  text-align: center;
  text-shadow: none; /* No outline in light mode */
  letter-spacing: 0.01em;
  margin: 0 auto 0.2em auto;
  display: block;
  /* Light mode panel */
  background: rgba(245, 245, 220, 0.8);
  border: 2px solid #8d6e63;
  border-radius: 12px;
  padding: 0.8rem 1.2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.achievement-card.unlocked .achievement-name {
  color: #3e2723;
}

/* Tier-specific achievement name colors for light mode */
.achievement-card.unlocked[data-tier="1"] .achievement-name {
  color: #5d4037; /* Lighter brown */
}

.achievement-card.unlocked[data-tier="2"] .achievement-name {
  color: #1b0f0a; /* Dark brown like tier 3 achievements */
}

.achievement-card.unlocked[data-tier="3"] .achievement-name {
  color: #1b0f0a; /* Dark brown text */
  background-color: #f5f5dc !important; /* Light cream background like title bar */
  border: 2px solid #3e2723 !important; /* Dark brown border */
}

/* Tier 2 and 3 special text colors for light mode */
.achievement-card.unlocked[data-tier="2"] .achievement-description {
  color: #5d4037; /* Brown color for description like tier 3 */
}

.achievement-card.unlocked[data-tier="2"] .progress-text {
  color: #5d4037; /* Brown color for progress text like tier 3 */
}

/* Tier 3 special text colors for light mode */
.achievement-card.unlocked[data-tier="3"] .achievement-description {
  color: #ffffff; /* White color for description */
}

.achievement-card.unlocked[data-tier="3"] .progress-text {
  color: #ffffff; /* White color for progress text */
}

.achievement-card.locked .achievement-name {
  /* Use default achievement name color - no greying out */
}

.dark .achievement-name {
  color: #8d6e63 !important;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000 !important;
  /* Dark mode panel */
  background: rgba(62, 39, 35, 0.9);
  border: 2px solid #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dream .achievement-name {
  color: #00ffff; /* Cyan text for dream mode */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* 1px black outline around text */
  animation: none; /* Override color cycling animation */
  /* Dream mode panel - match the achievements title banner */
  background: rgba(45, 20, 60, 0.95); /* Match the achievements title panel color */
  border: 2px solid #000000; /* Black border instead of purple */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Dream mode overrides for all achievement tiers to ensure cyan color */
.dream .achievement-card.unlocked[data-tier="1"] .achievement-name {
  color: #00ffff !important; /* Cyan text for dream mode - Tier 1 */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream .achievement-card.unlocked[data-tier="2"] .achievement-name {
  color: #00ffff !important; /* Cyan text for dream mode - Tier 2 */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream .achievement-card.unlocked[data-tier="3"] .achievement-name {
  color: #00ffff !important; /* Cyan text for dream mode - Tier 3 */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  background-color: #1a1a1a !important; /* Dark grey background for dream mode tier 3 */
  border: 2px solid #000000 !important; /* Black border */
}

.achievement-tier {
  font-size: 1.5rem;
}

.achievement-description {
  margin: 0.5rem 0 1rem 0;
  font-size: 1.12rem;
  color: #5d4037;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.dark .achievement-description {
  color: #fff8e1;
}

.dream .achievement-description {
  color: #fff !important;
  text-shadow: none !important;
}

.achievement-progress {
  margin-top: 1rem;
}

.progress-text {
  font-size: 1rem;
  font-weight: 600;
  color: #3e2723;
  display: block;
  margin-bottom: 0.5rem;
  text-align: center;
}

.achievement-tiers-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 0.5em;
}

.achievement-tier-icon {
  font-size: 1.2em;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.achievement-tier-icon.active {
  opacity: 1;
  color: #ffd700;
  text-shadow: 0 0 4px #000;
}

/* Dark mode override for tier 3 achievement medals - use dark brown instead of gold */
.dark .achievement-tier-icon.active {
  color: #5d4037;
  text-shadow: 0 0 4px #000;
}

/* ===============================================================================
                                DARK MODE STYLES
=============================================================================== */

.customer-stats-container.dark {
  background-color: #3e2723;
  background-blend-mode: multiply;
}

.customer-stats-container.dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.customer-stats-container.dark::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark .stats-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border-color: #000000;
}

.dark .stats-main-container {
  background-color: rgba(62, 39, 35, 0.9);
  border-color: #8d6e63 !important;
}

.dark .stats-title-panel {
  background-color: #3e2723;
  border-color: #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark .stats-title-panel h2 {
  color: #8d6e63 !important;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000 !important;
  animation: none;
}

.dark .close-btn {
  background: #8d6e63;
  border-color: #000000;
  color: #000000;
}

.dark .close-btn:hover {
  background: #a1887f;
  color: #000000;
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.dark .stats-section {
  background-color: #1a1a1a;
  border-color: #000000;
}

.dark .stats-section h3 {
  color: #8d6e63;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
}

.dark .stat-item {
  background-color: #8d6e63;
  border-color: #5d4037;
}

.dark .stat-label {
  color: #fff8e1;
}

.dark .stat-value {
  color: #fff8e1;
}

.dark .progress-info p {
  color: #fff8e1;
}

.dark .progress-bar {
  background-color: #8d6e63;
  border-color: #5d4037;
}

.dark .progress-fill {
  background: linear-gradient(135deg, #8d6e63, #5d4037);
}

.dark .flavor-item {
  background-color: #8d6e63;
  border-color: #5d4037;
}

.dark .flavor-name {
  color: #fff8e1;
}

.dark .flavor-counts {
  color: #fff8e1;
}

.dark .achievement-card {
  background-color: #8d6e63;
  border-color: #000000;
}

/* Override for secret achievements to ensure dark brown color */
.dark .achievement-card.hidden-achievement.unlocked.completed {
  background-color: #3e2723 !important; /* Dark brown matching tier 3 achievements */
  border-color: #000000 !important;
}

/* Nuclear option - force dark brown color for secret achievements with maximum specificity */
body.dark .achievement-card.hidden-achievement.unlocked.completed,
.dark-mode .achievement-card.hidden-achievement.unlocked.completed,
html.dark .achievement-card.hidden-achievement.unlocked.completed,
html body.dark .achievement-card.hidden-achievement.unlocked.completed {
  background-color: #3e2723 !important; /* FORCE dark brown matching tier 3 achievements */
  background: #3e2723 !important; /* Override any background shorthand */
  border-color: #000000 !important;
}

.dark .achievement-card.locked {
  background-color: #e6d7c3; /* Lighter cream brown for dark mode locked */
  border-color: #000000;
}

.dark .achievement-card.unlocked {
  /* Base unlocked achievement styling for dark mode */
  border-color: #000000;
}

/* Dark mode tier-specific background colors for unlocked achievements */
.dark .achievement-card.unlocked[data-tier="1"] {
  background-color: #c4a690; /* Light cream brown - Tier 1 */
  border-color: #4e342e; /* Lighter border */
}

.dark .achievement-card.unlocked[data-tier="2"] {
  background-color: #8d6e63 !important; /* Solid color matching secret achievements - Tier 2 */
  border-color: #3e2723; /* Medium border */
}

.dark .achievement-card.unlocked[data-tier="3"] {
  background-color: #3e2723 !important; /* Dark brown matching title panel - Tier 3 */
  border-color: #000000; /* Black border */
}

.dark .achievement-description {
  color: #fff8e1;
}

.dark .progress-text {
  color: #fff8e1;
}

/* Dark mode Tier 3 special text colors - override light mode styling */
.dark .achievement-card.unlocked[data-tier="3"] .achievement-description {
  color: #fff8e1 !important; /* Light cream brown color for description */
}

.dark .achievement-card.unlocked[data-tier="3"] .progress-text {
  color: #fff8e1 !important; /* Light cream brown color for progress text */
}

/* Ensure dark mode overrides light mode tier 3 styling */
.dark .achievement-card.unlocked[data-tier="3"] .achievement-description {
  color: #fff8e1 !important;
}

.dark .achievement-card.unlocked[data-tier="3"] .progress-text {
  color: #fff8e1 !important;
}

/* Dark mode Tier 3 title text - match achievements title color */
.dark .achievement-card.unlocked[data-tier="3"] .achievement-name {
  color: #8d6e63 !important; /* Darker brown color to match dark mode panels */
  background-color: #3e2723 !important; /* Dark brown background matching tier 3 achievements */
  border: 2px solid #000000 !important; /* Black border */
}

/* ===============================================================================
                                DREAM MODE STYLES
=============================================================================== */

.customer-stats-container.dream {
  background-color: #222;
  background-image: 
    url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80'),
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%);
  background-size: cover, 300px 300px, 300px 300px;
  background-position: center, 0 0, 150px 150px;
  background-blend-mode: color-burn;
}

.customer-stats-container.dream::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.customer-stats-container.dream::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream .stats-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream .stats-main-container {
  background: rgba(24, 24, 24, 0.99);
  border: 3px solid #000000;
  color: #ffffff;
}

.dream .stats-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream .stats-title-panel h2 {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
  animation: none;
}

.dream .close-btn {
  background: #8d6e63;
  border: 3px solid #000000;
  color: #000000;
}

.dream .close-btn:hover {
  background: #a1887f;
  color: #000000;
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.dream .stats-section {
  background: #ffffff;
  border: 3px solid #4a148c;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2),
    0 0 40px rgba(0, 0, 0, 0.1),
    inset 0 0 20px rgba(0, 0, 0, 0.05);
}

.dream .stats-section h3 {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .stat-item {
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid #000000;
}

.dream .stat-label {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .stat-value {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .progress-info p {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .progress-bar {
  background: rgba(45, 20, 60, 0.95); /* Match the achievements title panel color */
  border: 3px solid #000000;
}

.dream .progress-fill {
  background: linear-gradient(135deg, #8d6e63, #5d4037);
}

.dream .flavor-item {
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid #000000;
}

.dream .flavor-name {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .flavor-counts {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .achievement-card {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000 !important; /* Black border for all achievement cards */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2),
    0 0 40px rgba(0, 0, 0, 0.1),
    inset 0 0 20px rgba(0, 0, 0, 0.05);
}

.dream .achievement-card.locked {
  background-color: #1a1a1a; /* Grey background for dream mode locked */
  border: 3px solid #000000 !important; /* Black border */
}

.dream .achievement-card.unlocked {
  /* Base unlocked achievement styling for dream mode */
  border: 3px solid #000000 !important; /* Black border */
}

/* Dream mode tier-specific background colors for unlocked achievements */
.dream .achievement-card.unlocked[data-tier="1"] {
  background: #8A6FB3; /* Lighter purple - Tier 1 */
  border: 3px solid #000000 !important; /* Black border */
}

.dream .achievement-card.unlocked[data-tier="2"] {
  background: #5A3D7A; /* Medium purple - Tier 2 */
  border: 3px solid #000000 !important; /* Black border */
}

.dream .achievement-card.unlocked[data-tier="3"] {
  background: #1a1a1a !important; /* Dark grey for tier 3 achievements in dream mode */
  border: 3px solid #000000 !important; /* Black border */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2),
    0 0 40px rgba(0, 0, 0, 0.1),
    inset 0 0 20px rgba(0, 0, 0, 0.05) !important;
}

/* Force tier 3 achievements to match secret achievement styling exactly */
body.dream .achievement-card.unlocked[data-tier="3"],
.dream-mode .achievement-card.unlocked[data-tier="3"],
.dream .achievement-card.unlocked[data-tier="3"] {
  background: #1a1a1a !important; /* Dark grey for tier 3 achievements in dream mode */
  border: 3px solid #000000 !important; /* Black border */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2),
    0 0 40px rgba(0, 0, 0, 0.1),
    inset 0 0 20px rgba(0, 0, 0, 0.05) !important;
}

/* Ultra-high specificity for dream mode achievement borders */
body.dream .achievement-card,
.dream-mode .achievement-card,
.dream .achievement-card.locked,
.dream .achievement-card.unlocked,
.dream .achievement-card.unlocked[data-tier="1"],
.dream .achievement-card.unlocked[data-tier="2"],
.dream .achievement-card.unlocked[data-tier="3"] {
  border: 3px solid #000000 !important; /* Force black border on all achievement cards */
}

.dream .achievement-description {
  color: #000000;
  text-shadow: none;
}

.dream .progress-text {
  color: #ff0000; /* Red text for dream mode */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* 1px black outline around text */
  animation: none;
}

/* Dream mode overrides for tier-specific achievement progress text */
.dream .achievement-card.unlocked[data-tier="2"] .progress-text {
  color: #ff0000 !important; /* Red text for dream mode tier 2 achievements */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream .achievement-card.unlocked[data-tier="3"] .progress-text {
  color: #ff0000 !important; /* Red text for dream mode tier 3 achievements */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

/* Dream mode animations */
@keyframes dreamText {
  0% { color: #000080; } /* Dark Blue */
  16.67% { color: #008080; } /* Teal */
  33.33% { color: #00ffff; } /* Cyan */
  50% { color: #008000; } /* Green */
  66.67% { color: #006400; } /* Dark Green */
  83.33% { color: #800080; } /* Purple */
  100% { color: #000080; } /* Back to Dark Blue */
}

/* ===============================================================================
                                RESPONSIVE DESIGN
=============================================================================== */

@media (max-width: 768px) {
  .stats-background-panel {
    padding: 1rem;
    margin: 0.5rem;
    width: calc(100% - 1rem);
    border-width: 1px;
  }
  
  .stats-main-container {
    padding: 1rem;
    border-width: 1px;
  }
  
  .stats-title-panel {
    padding: 0.75rem 1rem;
  }
  
  .stats-title-panel h2 {
    font-size: 2rem;
  }
  
  .achievements-grid {
    grid-template-columns: 1fr;
  }
  
  .user-info, .purchase-stats {
    grid-template-columns: 1fr;
  }
  
  .stat-item {
    padding: 1rem;
  }
  
  .close-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .stats-background-panel {
    padding: 0.75rem;
    border-width: 1px;
  }
  
  .stats-main-container {
    padding: 0.75rem;
    border-width: 1px;
  }
  
  .stats-section {
    padding: 1rem;
  }
  
  .stats-title-panel h2 {
    font-size: 1.8rem;
  }
  
  .achievement-card {
    padding: 1rem;
    border-width: 1px;
  }
} 

/* Level Up Popup Styles */
.level-up-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease-in-out;
}

/* Theme-appropriate background panel */
.level-up-background-panel {
  padding: 2rem;
  border-radius: 20px;
  max-width: 500px;
  width: 90%;
  position: relative;
}

/* Light mode background panel */
.level-up-background-panel.light-mode {
  background: linear-gradient(135deg, #f5f5dc, #e8e8dc);
  border: 3px solid #8d6e63;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Dark mode background panel */
.level-up-background-panel.dark-mode {
  background: #2a2a2a;
  border: 3px solid #000000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Dream mode background panel */
.level-up-background-panel.dream-mode {
  background: linear-gradient(135deg, #4a148c, #6a1b9a);
  border: 3px solid #000000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}



/* Main container */
.level-up-main-container {
  width: 100%;
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
}

/* Light mode main container */
.level-up-main-container.light-mode {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #8d6e63;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dark mode main container */
.level-up-main-container.dark-mode {
  background: rgba(62, 39, 35, 0.9);
  border: 2px solid #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Dream mode main container */
.level-up-main-container.dream-mode {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}



.level-up-popup {
  border-radius: 12px;
  text-align: center;
  position: relative;
}

/* Remove old background styles since we now have the panel structure */
.level-up-popup.light-mode,
.level-up-popup.dark-mode,
.level-up-popup.dream-mode {
  background: transparent;
  border: none;
  box-shadow: none;
}

.level-up-content h2 {
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 15px;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}

.level-up-content p {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 20px;
  text-shadow: 1px 1px 0 #000;
}

/* Dark mode specific styles for level-up popup */
.level-up-title.dark-mode {
  color: #4CAF50 !important;
  font-size: 2.6rem;
  margin-bottom: 15px;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
}

/* Standard level number styling - matches title text exactly */
.level-number-standard {
  color: inherit !important;
  text-shadow: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  background: inherit !important;
  background-clip: inherit !important;
  -webkit-background-clip: inherit !important;
  animation: inherit !important;
}

/* Ensure level number matches title styling in dark mode */
.level-up-title.dark-mode .level-number-standard {
  color: #4CAF50 !important;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  animation: none !important;
}

/* Ensure level number matches title styling in light mode */
.level-up-title.light-mode .level-number-standard {
  color: #4CAF50 !important;
  text-shadow: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  animation: none !important;
}

/* Ensure level number matches title styling in dream mode */
.level-up-title.dream-mode .level-number-standard {
  color: #4CAF50 !important;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  animation: none !important;
}





/* Level 13 title styling - Dark mode (perfect as-is) */
.level-up-background-panel.dark-mode .level-up-title.level-13-title {
  color: transparent !important;
  background: linear-gradient(45deg, #4b0082, #000080, #0072b1, #2e8b57, #006400, #ff6347, #ff69b4, #dda0dd);
  background-size: 400% 400%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: dreamGradient 15s infinite alternate;
  text-shadow: 
    1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000,
    0 1px 0 #000,
    0 -1px 0 #000,
    1px 0 0 #000,
    -1px 0 0 #000;
  font-size: 2.6rem;
  margin-bottom: 15px;
  font-weight: bold;
}

/* Level 13 title styling - Light mode (cycle color animation) */
.level-up-background-panel.light-mode .level-up-title.level-13-title {
  color: #00ffff !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  animation: colorCycle 4s infinite !important;
  text-shadow: 
    1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000,
    0 1px 0 #000,
    0 -1px 0 #000,
    1px 0 0 #000,
    -1px 0 0 #000;
  font-size: 2.6rem;
  margin-bottom: 15px;
  font-weight: bold;
}

/* Level 13 title styling - Dream mode (cycle color animation) */
.level-up-background-panel.dream-mode .level-up-title.level-13-title {
  color: #00ffff !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  animation: colorCycle 4s infinite !important;
  text-shadow: 
    1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000,
    0 1px 0 #000,
    0 -1px 0 #000,
    1px 0 0 #000,
    -1px 0 0 #000;
  font-size: 2.6rem;
  margin-bottom: 15px;
  font-weight: bold;
}

/* Level 13 number styling - Dark mode (gradient effect) */
.level-up-background-panel.dark-mode .level-up-title.level-13-title .level-number-standard {
  color: transparent !important;
  background: linear-gradient(45deg, #4b0082, #000080, #0072b1, #2e8b57, #006400, #ff6347, #ff69b4, #dda0dd);
  background-size: 400% 400%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: dreamGradient 15s infinite alternate;
  text-shadow: 
    1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000,
    0 1px 0 #000,
    0 -1px 0 #000,
    1px 0 0 #000,
    -1px 0 0 #000;
}

/* Level 13 number styling - Light mode (cycle color animation) */
.level-up-background-panel.light-mode .level-up-title.level-13-title .level-number-standard {
  color: inherit !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  animation: inherit !important;
  text-shadow: inherit !important;
}

/* Level 13 number styling - Dream mode (cycle color animation) */
.level-up-background-panel.dream-mode .level-up-title.level-13-title .level-number-standard {
  color: inherit !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  animation: inherit !important;
  text-shadow: inherit !important;
}

/* Level 13 message text with color changing effect - maximum specificity to override all themes */
.level-up-overlay .level-up-background-panel .level-up-main-container .reward-section .message-text.level-13-message-text.level-13-message-text.level-13-message-text,
.level-up-overlay .level-up-background-panel .level-up-main-container.light-mode .reward-section .message-text.level-13-message-text.level-13-message-text.level-13-message-text.level-13-message-text,
.level-up-overlay .level-up-background-panel .level-up-main-container.dark-mode .reward-section .message-text.level-13-message-text.level-13-message-text.level-13-message-text.level-13-message-text,
.level-up-overlay .level-up-background-panel .level-up-main-container.dream-mode .reward-section .message-text.level-13-message-text.level-13-message-text.level-13-message-text.level-13-message-text {
  color: #00ffff !important;
  font-family: 'The Wanters DEMO', serif !important;
  font-size: 1.4rem !important;
  margin-bottom: 0 !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
  font-weight: bold !important;
  animation: colorCycle 4s infinite !important;
}

/* Removed - level numbers now inherit title styling */

.level-up-message.dark-mode {
  color: #000 !important;
  font-size: 1.2rem;
  margin-bottom: 5px;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

.level-up-level.dark-mode {
  color: #4CAF50 !important;
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
  font-family: 'The Wanters DEMO', serif;
}

.reward-section {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  padding: 20px;
  margin: 20px 0;
}

/* Dark mode reward section */
.level-up-main-container.dark-mode .reward-section {
  background: #8d6e63;
  border: 2px solid #000;
}

.reward-section h3 {
  color: #FFD700;
  font-size: 1.8rem;
  margin-bottom: 10px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* Light mode reward section h3 - black with no outline */
.level-up-main-container.light-mode .reward-section h3 {
  color: #000000 !important;
  text-shadow: none !important;
}

/* Dream mode reward section h3 */
.level-up-main-container.dream-mode .reward-section h3 {
  color: #ffffff !important;
  background: linear-gradient(135deg, #4a148c, #6a1b9a);
  padding: 8px 16px;
  border-radius: 6px;
  border: 2px solid #000000;
  display: inline-block;
  text-shadow: none !important;
}



.reward-text {
  color: #FFD700 !important;
  font-size: 1.3rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.reward-text.dark-mode {
  color: #4CAF50 !important;
  font-size: 1.1rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

/* Free bag rewards styling - cyan and larger */
.reward-text.dark-mode.free-bag-reward {
  color: #00ffff !important;
  font-size: 1.4rem !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

/* Higher specificity override for free bag rewards in dark mode */
.level-up-overlay .level-up-background-panel .level-up-main-container .reward-section .reward-text.dark-mode.free-bag-reward,
.level-up-overlay .level-up-background-panel .level-up-main-container.dark-mode .reward-section .reward-text.free-bag-reward {
  color: #00ffff !important;
  font-size: 1.4rem !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

/* Maximum specificity override for ALL free bag rewards - nuclear option */
.level-up-overlay .level-up-background-panel .level-up-main-container .reward-section .reward-text.free-bag-reward,
.level-up-overlay .level-up-background-panel .level-up-main-container.dark-mode .reward-section .reward-text.free-bag-reward,
.level-up-overlay .level-up-background-panel .level-up-main-container.light-mode .reward-section .reward-text.free-bag-reward,
.level-up-overlay .level-up-background-panel .level-up-main-container.dream-mode .reward-section .reward-text.free-bag-reward,
.reward-text.free-bag-reward,
.reward-text.dark-mode.free-bag-reward,
.reward-text.light-mode.free-bag-reward,
.reward-text.dream-mode.free-bag-reward {
  color: #00ffff !important;
  font-size: 1.4rem !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

/* Nuclear option - target ANY reward text that might be free bag related */
.reward-text.free-bag-reward,
.reward-text.dark-mode.free-bag-reward,
.reward-text.light-mode.free-bag-reward,
.reward-text.dream-mode.free-bag-reward {
  color: #00ffff !important;
  font-size: 1.4rem !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

/* Ultimate override for free bag rewards - ensure cyan color in ALL cases */
.reward-text[class*="free-bag-reward"],
.reward-text:contains("Free"),
.reward-text:contains("bag") {
  color: #00ffff !important;
  font-size: 1.4rem !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

.message-text {
  color: #fff !important;
  font-size: 1rem !important;
  margin-bottom: 0 !important;
}

.message-text.dark-mode {
  color: #000 !important;
  font-size: 1.1rem !important;
  margin-bottom: 0 !important;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

/* Light mode specific styles for level-up popup */
.level-up-title.light-mode {
  color: #4CAF50 !important;
  font-size: 2.6rem;
  margin-bottom: 15px;
  text-shadow: none !important;
}

.level-up-message.light-mode {
  color: #000 !important;
  font-size: 1.2rem;
  margin-bottom: 5px;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

.level-up-level.light-mode {
  color: #4CAF50 !important;
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-shadow: none !important;
  font-family: 'The Wanters DEMO', serif;
}

.reward-text.light-mode {
  color: #4CAF50 !important;
  font-size: 1.1rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: none !important;
}

.reward-text.light-mode.free-bag-reward {
  color: #00ffff !important;
  font-size: 1.4rem !important;
  text-shadow: none !important;
}

.message-text.light-mode {
  color: #000 !important;
  font-family: Verdana, sans-serif !important;
  font-size: 1.1rem !important;
  margin-bottom: 0 !important;
  text-shadow: none !important;
}

/* Dream mode specific styles for level-up popup */
.level-up-title.dream-mode {
  color: #00ff00 !important;
  font-size: 2.6rem;
  margin-bottom: 15px;
  text-shadow: none !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  display: inline-block;
}

.level-up-message.dream-mode {
  color: #000 !important;
  font-size: 1.2rem;
  margin-bottom: 5px;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

.level-up-level.dream-mode {
  color: #ff0000 !important;
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-shadow: none !important;
  font-family: 'The Wanters DEMO', serif;
}

.reward-text.dream-mode {
  color: #ff0000 !important;
  font-size: 1.1rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: none !important;
}

.reward-text.dream-mode.free-bag-reward {
  color: #00ffff !important;
  font-size: 1.4rem !important;
  text-shadow: none !important;
}

.message-text.dream-mode {
  color: #000 !important;
  font-family: Verdana, sans-serif !important;
  font-size: 1.1rem !important;
  margin-bottom: 0 !important;
  text-shadow: none !important;
}

/* Dream mode reward section */
.level-up-main-container.dream-mode .reward-section {
  background: #f5f5f5;
  border: 2px solid #000;
}

/* Dream mode tier unlocked text */
.level-up-main-container.dream-mode .reward-section h3 {
  color: #000000 !important;
  border: none !important;
  background: none !important;
}

.close-popup-btn {
  background: linear-gradient(135deg, #FFD700, #FFA000);
  color: #000;
  border: 2px solid #000;
  border-radius: 25px;
  padding: 12px 30px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: none;
  margin-top: 15px;
}

.close-popup-btn:hover {
  background: linear-gradient(135deg, #FFA000, #FF8F00);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Dream gradient animation for level 13 color changing text */
@keyframes dreamGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Color cycle animation for level 13 message text */
@keyframes colorCycle {
  0% { color: #00ffff !important; } /* Cyan */
  14% { color: #ff69b4 !important; } /* Hot Pink */
  28% { color: #32cd32 !important; } /* Lime Green */
  42% { color: #ff6347 !important; } /* Tomato */
  57% { color: #9370db !important; } /* Medium Purple */
  71% { color: #ffd700 !important; } /* Gold */
  85% { color: #00bfff !important; } /* Deep Sky Blue */
  100% { color: #00ffff !important; } /* Back to Cyan */
}

/* Secret Achievement Popup Styles - Only achievement names are cyan */
.secret-achievement-popup .level-up-level.light-mode {
  color: #00BCD4 !important; /* Cyan for light mode - only achievement names */
}

.secret-achievement-popup .level-up-level.dark-mode {
  color: #00BCD4 !important; /* Cyan for dark mode - only achievement names */
}

.secret-achievement-popup .level-up-level.dream-mode {
  color: #00BCD4 !important; /* Cyan for dream mode - only achievement names */
}

.secret-achievement-popup .reward-text.light-mode {
  color: #00BCD4 !important; /* Cyan for light mode - reward text */
}

.secret-achievement-popup .reward-text.dark-mode {
  color: #00BCD4 !important; /* Cyan for dark mode - reward text */
}

.secret-achievement-popup .reward-text.dream-mode {
  color: #00BCD4 !important; /* Cyan for dream mode - reward text */
}

/* Hidden Achievement Styles */
.hidden-achievement {
  background: linear-gradient(135deg, #4a4a4a, #2e2e2e) !important;
  border: 2px solid #666 !important;
}

/* Light mode completed secret achievements - match tier 3 styling */
.hidden-achievement.completed {
  background-color: #8d6e63 !important; /* Medium brown like tier 3 panel */
  border: 3px solid #3e2723 !important; /* Darker brown border like tier 3 */
}

.hidden-achievement .achievement-name {
  color: #8d6e63; /* Light brown for better visibility in light mode */
}

.hidden-achievement.completed .achievement-name {
  color: #1b0f0a !important; /* Dark brown text */
  background-color: #f5f5dc !important; /* Light cream background like title bar */
  border: 2px solid #3e2723 !important; /* Dark brown border */
  text-shadow: none !important;
}

.hidden-achievement .achievement-description {
  color: #999;
}

.hidden-achievement.completed .achievement-description {
  color: #ffffff !important; /* White like tier 3 achievements */
}

.hidden-achievement.completed .progress-text {
  color: #ffffff !important; /* White like tier 3 achievements */
}

/* Dark mode overrides for hidden achievements */
.dark .hidden-achievement:not(.completed) {
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a) !important;
  border: 2px solid #444 !important;
}

/* Ultra-high specificity for dark mode completed secret achievements */
.dark .hidden-achievement.completed,
body.dark .hidden-achievement.completed,
.dark-mode .hidden-achievement.completed,
.dark .achievement-card.hidden-achievement.completed,
body.dark .achievement-card.hidden-achievement.completed,
.dark-mode .achievement-card.hidden-achievement.completed,
.dark .achievement-card.hidden-achievement.unlocked.completed,
body.dark .achievement-card.hidden-achievement.unlocked.completed,
.dark-mode .achievement-card.hidden-achievement.unlocked.completed {
  background-color: #3e2723 !important; /* Dark brown matching tier 3 achievements */
  border: 2px solid #000000 !important;
}

.dark .hidden-achievement .achievement-name {
  color: #8d6e63 !important;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000 !important;
}

/* Dark mode locked secret achievement description text */
.dark .hidden-achievement:not(.completed) .achievement-description {
  color: #f5f5dc !important; /* Cream color as requested */
}

.dark .hidden-achievement.completed .achievement-name {
  color: #00ffff !important; /* Cyan color like locked achievements */
  background-color: #3e2723 !important; /* Dark brown background matching tier 3 achievements */
  border: 2px solid #000000 !important; /* Black border */
}

/* Ultra-high specificity override for secret achievements in dark mode */
body.dark .achievement-card.hidden-achievement.unlocked.completed .achievement-name,
.dark-mode .achievement-card.hidden-achievement.unlocked.completed .achievement-name,
.dark .achievement-card.hidden-achievement.unlocked.completed .achievement-name {
  color: #00ffff !important; /* Cyan color like locked achievements */
  background-color: #3e2723 !important; /* Dark brown background matching tier 3 achievements */
  border: 2px solid #000000 !important; /* Black border */
}

/* Dream mode overrides for hidden achievements */
.dream .hidden-achievement {
  background: #1a1a1a !important; /* Grey background like locked achievements */
  border: 3px solid #000000 !important; /* Black border */
}

.dream .hidden-achievement.completed {
  background: #2d1b3d !important; /* Dark purple matching tier 3 achievements */
  border: 3px solid #000000 !important; /* Black border like tier 3 achievements */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2),
    0 0 40px rgba(0, 0, 0, 0.1),
    inset 0 0 20px rgba(0, 0, 0, 0.05) !important;
}

/* Override for locked secret achievements - more specific than general rule */
.dream .hidden-achievement:not(.completed) .achievement-name,
body.dream .hidden-achievement:not(.completed) .achievement-name,
.dream-mode .hidden-achievement:not(.completed) .achievement-name {
  color: #4a7c7c !important; /* Darker inactive teal for locked secret achievements */
  text-shadow: none !important;
}

.dream .hidden-achievement.completed .achievement-name {
  color: #00ffff !important; /* Cyan text matching tier 3 achievements */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  background-color: #1a1a1a !important; /* Dark grey background for dream mode secret achievements */
  border: 2px solid #000000 !important; /* Black border */
}

/* Ultra-high specificity for dream mode completed secret achievements */
body.dream .hidden-achievement.completed .achievement-name,
.dream-mode .hidden-achievement.completed .achievement-name,
.dream .achievement-card.hidden-achievement.completed .achievement-name {
  color: #00ffff !important; /* Cyan text matching tier 3 achievements */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  background-color: #1a1a1a !important; /* Dark grey background for dream mode secret achievements */
  border: 2px solid #000000 !important; /* Black border */
}

/* Maximum specificity for dream mode secret achievement titles */
body.dream .achievement-card.hidden-achievement.completed .achievement-name,
body.dream .hidden-achievement.completed .achievement-name,
.dream-mode .achievement-card.hidden-achievement.completed .achievement-name,
.dream-mode .hidden-achievement.completed .achievement-name,
.dream .achievement-card.hidden-achievement.completed .achievement-name,
.dream .hidden-achievement.completed .achievement-name,
.dream .achievement-card .hidden-achievement.completed .achievement-name,
.dream .achievement-card.hidden-achievement .completed .achievement-name {
  color: #00ffff !important; /* FORCE cyan text matching tier 3 achievements */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  background-color: #1a1a1a !important; /* Dark grey background for dream mode secret achievements */
  border: 2px solid #000000 !important; /* Black border */
}

/* Nuclear option - target all achievement names in dream mode and force cyan for completed ones */
.dream .achievement-name {
  color: #00ffff !important; /* Force cyan for ALL achievement names in dream mode */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Override for locked achievements to keep them cyan too */
.dream .achievement-card.locked .achievement-name {
  color: #00ffff !important; /* Force cyan for locked achievements in dream mode */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream .hidden-achievement .achievement-description {
  color: #666666 !important;
}

.dream .hidden-achievement.completed .achievement-description {
  color: #ffffff !important; /* White text for completed */
}

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

@keyframes popupSlideIn {
  from {
    transform: translateY(-50px) scale(0.8);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* FINAL OVERRIDE: Level 13 color changing effect - placed at end to ensure it loads last */
body .level-up-overlay .level-up-background-panel .level-up-main-container.light-mode .reward-section .message-text.level-13-message-text,
body .level-up-overlay .level-up-background-panel .level-up-main-container.dream-mode .reward-section .message-text.level-13-message-text,
body .level-up-overlay .level-up-background-panel .level-up-main-container .reward-section .message-text.level-13-message-text {
  color: #00ffff !important;
  font-family: 'The Wanters DEMO', serif !important;
  font-size: 1.4rem !important;
  margin-bottom: 0 !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
  font-weight: bold !important;
  animation: colorCycle 4s infinite !important;
}.options-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */
  background-image: url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.options-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.options-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.options-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: clamp(2px, 0.5vw, 3px) solid #5d4037;
  border-radius: clamp(10px, 3vw, 15px);
  padding: clamp(1rem, 3vw, 1.5rem);
  max-width: 650px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  /* Improved mobile scaling */
  min-width: 280px;
  box-sizing: border-box;
}

/* Dream mode overrides for base shadow */
.dream-mode .options-background-panel,
body.dream-mode .options-background-panel,
html.dream-mode .options-background-panel {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

/* User stats background panel */
.daydreamers-user-stats-background-panel {
  background-color: rgba(215, 204, 200, 0.8);
  border: clamp(2px, 0.5vw, 3px) solid #8d6e63;
  border-radius: clamp(10px, 3vw, 15px);
  padding: clamp(1rem, 3vw, 2rem);
  margin: 1rem auto;
  max-width: 450px;
  width: 95%;
  position: relative;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  /* Improved mobile scaling */
  min-width: 260px;
  box-sizing: border-box;
}

.daydreamers-user-stats-background-panel.dark-mode {
  background-color: rgba(215, 204, 200, 0.8);
  border: 3px solid #8d6e63;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.daydreamers-user-stats-background-panel.dream-mode {
  background-color: #ffffff !important;
  border: 3px solid #000000 !important;
  box-shadow: none !important;
  background-image: none !important;
  background: #ffffff !important;
}

/* Additional high-specificity selectors to ensure shadow removal */
body.dream-mode .daydreamers-user-stats-background-panel,
html.dream-mode .daydreamers-user-stats-background-panel,
.dream-mode .daydreamers-user-stats-background-panel {
  box-shadow: none !important;
  background-color: #ffffff !important;
  background-image: none !important;
  background: #ffffff !important;
  filter: none !important;
  -webkit-filter: none !important;
  -moz-filter: none !important;
}

.options-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 10px;
  padding: 2rem;
  margin: 0;
  max-width: 100%;
  width: 100%;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.options-title-panel {
  font-weight: bold;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 400px;
}

.options-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

/* STANDARDIZED BUTTON STYLING - All Options buttons look identical */
.options-page .home-button,
.options-page .contact-button,
.options-page .theme-button,
.options-page .admin-button,
.options-page .back-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  color: white !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #3e2723 !important;
  text-align: center !important;
  cursor: pointer !important;
  font-family: 'The Wanters DEMO', serif !important;
  min-width: 120px !important;
  width: auto !important;
  height: auto !important;
}

/* Home button specific spacing - consistent across all themes */
.options-page .home-button {
  margin-bottom: 2rem !important;
}

/* Ensure consistent spacing in all themes - using light mode as reference */
.options-page .options-list {
  width: 100% !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

/* Dark mode spacing override with ultra-high specificity */
body.dark-mode .options-page .options-list,
.dark-mode.options-page .options-list,
.dark-mode .options-page .options-list {
  width: 100% !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

/* Dark mode home button spacing override */
body.dark-mode .options-page .home-button,
.dark-mode.options-page .home-button,
.dark-mode .options-page .home-button {
  margin-bottom: 2rem !important;
  margin-top: 0 !important;
}

/* Dream mode spacing override with ultra-high specificity */
body.dream-mode .options-page .options-list,
.dream-mode.options-page .options-list,
.dream-mode .options-page .options-list {
  width: 100% !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

/* Dream mode home button spacing override */
body.dream-mode .options-page .home-button,
.dream-mode.options-page .home-button,
.dream-mode .options-page .home-button {
  margin-bottom: 2rem !important;
  margin-top: 0 !important;
}

/* CRITICAL FIX: Remove all individual button margins and rely only on flex gap */
/* Reset any conflicting margins on all buttons in all themes */
.options-page .home-button,
.options-page .contact-button,
.options-page .theme-button,
.options-page .back-button {
  margin: 0 !important;
}

/* Only home button gets bottom margin for spacing from title */
.options-page .home-button {
  margin-bottom: 2rem !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure Contact, Theme, and Admin buttons have NO margins - rely on flex gap only */
.options-page .contact-button,
.options-page .theme-button,
.options-page .admin-button {
  margin: 0 !important;
}

/* Admin button specific styling - uses admin teal color */
.options-page .admin-button {
  background-color: #14545c !important;
  color: #ffffff !important;
  border: 3px solid #0a1a1d !important;
}

.options-page .admin-button:hover {
  background-color: #1a6b75 !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Ultra-high specificity for dark mode to override any global styles */
body.dark-mode .options-page .contact-button,
body.dark-mode .options-page .theme-button,
.dark-mode.options-page .contact-button,
.dark-mode.options-page .theme-button,
.dark-mode .options-page .contact-button,
.dark-mode .options-page .theme-button {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ultra-high specificity for dream mode */
body.dream-mode .options-page .contact-button,
body.dream-mode .options-page .theme-button,
body.dream-mode .options-page .admin-button,
.dream-mode.options-page .contact-button,
.dream-mode.options-page .theme-button,
.dream-mode.options-page .admin-button,
.dream-mode .options-page .contact-button,
.dream-mode .options-page .theme-button,
.dream-mode .options-page .admin-button {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Hover effects - consistent across all buttons */
.options-page .home-button:hover,
.options-page .contact-button:hover,
.options-page .theme-button:hover,
.options-page .back-button:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  background-color: #a1887f !important;
  text-decoration: none !important;
  color: white !important;
}

/* Light mode admin button hover - keep teal color */
.options-page .admin-button:hover {
  background-color: #1a6b75 !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Dark mode - consistent black borders and styling with ultra-high specificity */
body.dark-mode .options-page .home-button,
body.dark-mode .options-page .contact-button,
body.dark-mode .options-page .theme-button,
body.dark-mode .options-page .back-button,
.dark-mode.options-page .home-button,
.dark-mode.options-page .contact-button,
.dark-mode.options-page .theme-button,
.dark-mode.options-page .back-button,
.dark-mode .options-page .home-button,
.dark-mode .options-page .contact-button,
.dark-mode .options-page .theme-button,
.dark-mode .options-page .back-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #000000 !important;
  text-align: center !important;
  cursor: pointer !important;
  font-family: 'The Wanters DEMO', serif !important;
  min-width: 120px !important;
  width: auto !important;
  height: auto !important;
}

/* Dark mode admin button - keep admin teal color but with black text */
body.dark-mode .options-page .admin-button,
.dark-mode.options-page .admin-button,
.dark-mode .options-page .admin-button {
  background-color: #14545c !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
}

body.dark-mode .options-page .admin-button:hover,
.dark-mode.options-page .admin-button:hover,
.dark-mode .options-page .admin-button:hover {
  background-color: #1a6b75 !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
}

body.dark-mode .options-page .home-button:hover,
body.dark-mode .options-page .contact-button:hover,
body.dark-mode .options-page .theme-button:hover,
body.dark-mode .options-page .back-button:hover,
.dark-mode.options-page .home-button:hover,
.dark-mode.options-page .contact-button:hover,
.dark-mode.options-page .theme-button:hover,
.dark-mode.options-page .back-button:hover,
.dark-mode .options-page .home-button:hover,
.dark-mode .options-page .contact-button:hover,
.dark-mode .options-page .theme-button:hover,
.dark-mode .options-page .back-button:hover {
  transform: translateY(-4px) !important;
  background-color: #a1887f !important;
  color: #ffffff !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  text-decoration: none !important;
}

/* Dream mode - consistent black borders and styling with ultra-high specificity */
body.dream-mode .options-page .home-button,
body.dream-mode .options-page .contact-button,
body.dream-mode .options-page .theme-button,
body.dream-mode .options-page .back-button,
.dream-mode.options-page .home-button,
.dream-mode.options-page .contact-button,
.dream-mode.options-page .theme-button,
.dream-mode.options-page .back-button,
.dream-mode .options-page .home-button,
.dream-mode .options-page .contact-button,
.dream-mode .options-page .theme-button,
.dream-mode .options-page .back-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #000000 !important;
  text-align: center !important;
  cursor: pointer !important;
  font-family: 'The Wanters DEMO', serif !important;
  min-width: 120px !important;
  width: auto !important;
  height: auto !important;
  text-shadow: none !important;
  animation: none !important;
  letter-spacing: 0.5px !important;
}

/* Dream mode admin button - keep admin teal color but with black text */
body.dream-mode .options-page .admin-button,
.dream-mode.options-page .admin-button,
.dream-mode .options-page .admin-button {
  background-color: #14545c !important;
  color: #000000 !important;
  border: 3px solid #0a1a1d !important;
  text-shadow: none !important;
  animation: none !important;
}

body.dream-mode .options-page .admin-button:hover,
.dream-mode.options-page .admin-button:hover,
.dream-mode .options-page .admin-button:hover {
  background-color: #1a6b75 !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  text-shadow: none !important;
  animation: none !important;
}

body.dream-mode .options-page .home-button:hover,
body.dream-mode .options-page .contact-button:hover,
body.dream-mode .options-page .theme-button:hover,
body.dream-mode .options-page .back-button:hover,
.dream-mode.options-page .home-button:hover,
.dream-mode.options-page .contact-button:hover,
.dream-mode.options-page .theme-button:hover,
.dream-mode.options-page .back-button:hover,
.dream-mode .options-page .home-button:hover,
.dream-mode .options-page .contact-button:hover,
.dream-mode .options-page .theme-button:hover,
.dream-mode .options-page .back-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleOptions 1.5s ease-in-out infinite alternate !important;
  text-decoration: none !important;
}

/* Dream mode admin button hover - keep teal color with dream effects */
body.dream-mode .options-page .admin-button:hover,
.dream-mode.options-page .admin-button:hover,
.dream-mode .options-page .admin-button:hover {
  background-color: #1a6b75 !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleOptions 1.5s ease-in-out infinite alternate !important;
  text-shadow: none !important;
}

/* Ultra-high specificity dream mode admin button hover - override all other styles */
body.dream-mode .options-page .admin-button:hover,
.dream-mode.options-page .admin-button:hover,
.dream-mode .options-page .admin-button:hover,
body.dream-mode.options-page .admin-button:hover,
.dream-mode .options-page .admin-button:hover {
  background-color: #1a6b75 !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleOptions 1.5s ease-in-out infinite alternate !important;
  text-shadow: none !important;
}

/* MAXIMUM SPECIFICITY - Dream mode admin button hover - MUST override everything */
body.dream-mode .options-page .admin-button:hover,
.dream-mode.options-page .admin-button:hover,
.dream-mode .options-page .admin-button:hover,
body.dream-mode.options-page .admin-button:hover,
.dream-mode .options-page .admin-button:hover,
body.dream-mode .options-page .admin-button:hover,
.dream-mode.options-page .admin-button:hover,
.dream-mode .options-page .admin-button:hover {
  background-color: #1a6b75 !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleOptions 1.5s ease-in-out infinite alternate !important;
  text-shadow: none !important;
}

/* Legacy theme container styles - DISABLED to prevent spacing conflicts */
.theme-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.theme-toggle-container {
  margin-top: 0 !important; /* CHANGED: was -0.5rem, now 0 to prevent spacing issues */
}

.theme-toggle-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 !important; /* ADDED: ensure no margins */
}

/* Override theme container styles in Options page specifically */
.options-page .theme-section,
.options-page .theme-toggle-container {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Ensure no theme containers affect button spacing in any theme */
.options-page .theme-section .theme-button,
.options-page .theme-toggle-container .theme-button {
  margin: 0 !important;
}

.options-list {
  width: 100% !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

.option-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #d7ccc8;
}

.option-label {
  font-size: 1.2rem;
  font-weight: 600;
  color: #5d4037;
}

/* Back button now inherits from standardized button styling above */

/* Dark mode styles */
.dark-mode .options-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode .options-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode .options-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .options-background-panel {
  background-color: #8d6e63;
  border: 3px solid #8d6e63;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.dark-mode .options-container {
  background-color: #8d6e63;
  border: 3px solid #8d6e63 !important;
}

.dark-mode .options-title {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .option-item {
  border-bottom: 1px solid #6d4c41;
}

.dark-mode .option-label {
  color: #ffffff;
}

/* Dark mode button borders now handled by standardized styling above */

/* Dream mode styles */
.dream-mode.options-page {
  background-color: #222;
  background-image: 
    url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80'),
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
    linear-gradient(45deg, transparent 24%, rgba(75, 0, 130, 0.05) 25%, rgba(75, 0, 130, 0.05) 26%, transparent 27%, transparent 74%, rgba(138, 43, 226, 0.05) 75%, rgba(138, 43, 226, 0.05) 76%, transparent 77%),
    linear-gradient(-45deg, transparent 24%, rgba(102, 51, 153, 0.05) 25%, rgba(102, 51, 153, 0.05) 26%, transparent 27%, transparent 74%, rgba(60, 30, 80, 0.05) 75%, rgba(60, 30, 80, 0.05) 76%, transparent 77%);
  background-size: cover, 300px 300px, 300px 300px, 60px 60px, 60px 60px;
  background-position: center, 0 0, 150px 150px, 0 0, 30px 30px;
  background-blend-mode: color-burn;
}

.dream-mode.options-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.options-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .options-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: none !important;
}

/* Aggressive shadow removal for dream mode */
body.dream-mode .options-background-panel,
html.dream-mode .options-background-panel,
.dream-mode .options-background-panel,
body.dream-mode .options-background-panel *,
html.dream-mode .options-background-panel *,
.dream-mode .options-background-panel * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  -moz-filter: none !important;
}

/* Remove geometric patterns from white panel in dream mode */
.dream-mode .daydreamers-user-stats-background-panel::before,
.dream-mode .daydreamers-user-stats-background-panel::after,
body.dream-mode .daydreamers-user-stats-background-panel::before,
body.dream-mode .daydreamers-user-stats-background-panel::after,
html.dream-mode .daydreamers-user-stats-background-panel::before,
html.dream-mode .daydreamers-user-stats-background-panel::after {
  display: none !important;
  background: none !important;
  background-image: none !important;
  content: none !important;
}

/* Ensure white panel has no inherited geometric effects */
.dream-mode .daydreamers-user-stats-background-panel,
body.dream-mode .daydreamers-user-stats-background-panel,
html.dream-mode .daydreamers-user-stats-background-panel {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  background-blend-mode: normal !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  -moz-filter: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.dream-mode .options-container {
  background-color: #1a1a1a;
  border: 3px solid #000000;
}

.dream-mode .options-title {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  animation: none !important;
}

/* Dream mode button borders now handled by standardized styling above */

/* Old button styling removed - now handled by standardized styling above */

@keyframes dreamSparkleOptions {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

/* Dream mode button text styling now handled by standardized styling above */

/* Dark mode button glow effects now handled by standardized styling above */

/* Dark mode styles */
.dark-mode .options-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode .options-title-panel {
  background-color: #3e2723;
  border: 3px solid #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark-mode .options-title {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dream-mode .options-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .options-title {
  /* Let the global dreamText animation handle the color changes */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* Daydreamers menu button: fixed size and shape for all themes */
.daydreamers-menu-button {
  width: 220px;
  height: 56px;
  padding: 0;
  font-size: 1.35rem;
  font-family: 'The Wanters DEMO', serif;
  border-radius: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.02em;
  margin-bottom: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  border-width: 3px;
  border-style: solid;
}

/* Daydreamers Enter Email button: slightly smaller, consistent across all themes */
.daydreamers-email-button {
  width: 160px;
  height: 44px;
  padding: 0 10px;
  font-size: 1.02rem;
  font-family: 'The Wanters DEMO', serif;
  border-radius: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.02em;
  margin-bottom: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  border-width: 3px;
  border-style: solid;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
}

/* Email button specific styles only - home buttons now handled by standardized styling above */
.daydreamers-email-button {
  font-size: 1.02rem;
}

.dark-mode .daydreamers-email-button {
  width: 170px !important;
  height: 48px !important;
}

/* Dream mode email button styling */
.dream-mode .daydreamers-email-button {
  background-color: #808080 !important;
  color: #ffffff !important;
  border: 3px solid #000000 !important;
}

/* Additional high-specificity selectors for dream mode email button */
body.dream-mode .daydreamers-email-button,
html.dream-mode .daydreamers-email-button {
  background-color: #808080 !important;
  color: #ffffff !important;
  border: 3px solid #000000 !important;
}

/* Dream mode email input field styling - comprehensive overrides */
.dream-mode .daydreamers-email-button,
body.dream-mode .daydreamers-email-button,
html.dream-mode .daydreamers-email-button,
.dream-mode input[type="email"],
.dream-mode input[type="text"],
body.dream-mode input[type="email"],
body.dream-mode input[type="text"],
html.dream-mode input[type="email"],
html.dream-mode input[type="text"] {
  background-color: #808080 !important;
  color: #ffffff !important;
  border: 3px solid #000000 !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Override placeholder text color */
.dream-mode .daydreamers-email-button::placeholder,
body.dream-mode .daydreamers-email-button::placeholder,
html.dream-mode .daydreamers-email-button::placeholder,
.dream-mode input[type="email"]::placeholder,
.dream-mode input[type="text"]::placeholder,
body.dream-mode input[type="email"]::placeholder,
body.dream-mode input[type="text"]::placeholder,
html.dream-mode input[type="email"]::placeholder,
html.dream-mode input[type="text"]::placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Welcome panel styles - appears behind welcome section when logged in */
.welcome-panel {
  background-color: #f5f5dc; /* Light mode: solid cream color to match background */
  border: 3px solid #8d6e63;
  border-radius: 15px;
  padding: 2rem;
  margin: 1rem 0;
  width: 100%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
}

.dark-mode .welcome-panel {
  background-color: rgba(26, 26, 26, 0.9);
  border: 3px solid #444;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.dream-mode .welcome-panel {
  background: linear-gradient(135deg, 
    rgba(26, 13, 35, 0.85) 0%,
    rgba(45, 20, 60, 0.8) 50%,
    rgba(26, 13, 35, 0.85) 100%);
  border: 3px solid #000;
  box-shadow: 0 6px 20px rgba(255, 0, 204, 0.3);
  animation: dreamSparkleWelcome 3s ease-in-out infinite;
}

@keyframes dreamSparkleWelcome {
  0%, 100% { box-shadow: 0 6px 20px rgba(255, 0, 204, 0.3); }
  50% { box-shadow: 0 6px 30px rgba(255, 0, 204, 0.5), 0 0 40px rgba(255, 0, 204, 0.2); }
}

/* Dark mode welcome panel text overrides */
.dark-mode .welcome-panel .welcome-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .welcome-panel .customer-name {
  color: red !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .welcome-panel .level-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .welcome-panel .level-number {
  color: cyan !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .welcome-panel .progress-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Dream Mode - Welcome panel text overrides */
.dream-mode .welcome-panel .welcome-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream-mode .welcome-panel .customer-name {
  /* Keep the color changing animation but add black outline */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream-mode .welcome-panel .level-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream-mode .welcome-panel .level-number {
  color: #00ffff !important;
  animation: none !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream-mode .welcome-panel .progress-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Light mode welcome panel text - remove outlines from name and progress text */
.welcome-panel .customer-name {
  text-shadow: none !important;
}

.welcome-panel .progress-text {
  text-shadow: -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000 !important;
}

/* Logout button styles */
.daydreamers-logout-button {
  width: auto;
  min-width: 180px;
  min-height: 54px;
  padding: 1.1rem 2.5rem;
  font-size: 1.4rem;
  font-family: 'The Wanters DEMO', serif;
  border-radius: 18px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  border-width: 4px;
  border-style: solid;
  background: #d32f2f !important;
  color: #fff !important;
  border-color: #000 !important;
  transition: all 0.2s;
}

.daydreamers-logout-button:hover {
  background: #b71c1c !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  transform: translateY(-2px) scale(1.03);
}

/* Dream mode logout button - ensure it stays red */
.dream-mode .daydreamers-logout-button {
  background: #d32f2f !important;
  color: #000 !important;
  border-color: #000 !important;
  text-shadow: none !important;
}

.dream-mode .daydreamers-logout-button:hover {
  background: #b71c1c !important;
  color: #000 !important;
  border-color: #000 !important;
  animation: none !important;
  text-shadow: none !important;
  box-shadow: 0 0 18px 4px #d32f2f, 0 4px 16px rgba(0,0,0,0.22) !important;
}

/* Ultra-high specificity for dream mode logout button text */
body.dream-mode .daydreamers-logout-button,
.dream-mode .daydreamers-logout-button,
.dream-mode .daydreamers-logout-button {
  color: #000 !important;
  text-shadow: none !important;
}

body.dream-mode .daydreamers-logout-button:hover,
.dream-mode .daydreamers-logout-button:hover,
.dream-mode .daydreamers-logout-button:hover {
  color: #000 !important;
  text-shadow: none !important;
}

/* MAXIMUM SPECIFICITY - Dream mode logout button text - MUST override everything */
body.dream-mode .daydreamers-logout-button,
.dream-mode .daydreamers-logout-button,
.dream-mode .daydreamers-logout-button,
body.dream-mode .daydreamers-logout-button,
.dream-mode .daydreamers-logout-button,
.dream-mode .daydreamers-logout-button,
body.dream-mode .daydreamers-logout-button,
.dream-mode .daydreamers-logout-button,
.dream-mode .daydreamers-logout-button {
  color: #000 !important;
  text-shadow: none !important;
  background: #d32f2f !important;
  border-color: #000 !important;
}

body.dream-mode .daydreamers-logout-button:hover,
.dream-mode .daydreamers-logout-button:hover,
.dream-mode .daydreamers-logout-button:hover,
body.dream-mode .daydreamers-logout-button:hover,
.dream-mode .daydreamers-logout-button:hover,
.dream-mode .daydreamers-logout-button:hover,
body.dream-mode .daydreamers-logout-button:hover,
.dream-mode .daydreamers-logout-button:hover,
.dream-mode .daydreamers-logout-button:hover {
  color: #000 !important;
  text-shadow: none !important;
  background: #b71c1c !important;
  border-color: #000 !important;
  animation: none !important;
  box-shadow: 0 0 18px 4px #d32f2f, 0 4px 16px rgba(0,0,0,0.22) !important;
}

/* ULTIMATE OVERRIDE - Dream mode logout button - highest possible specificity */
body.dream-mode .daydreamers-logout-button,
.dream-mode .daydreamers-logout-button,
.dream-mode .daydreamers-logout-button,
body.dream-mode .daydreamers-logout-button,
.dream-mode .daydreamers-logout-button,
.dream-mode .daydreamers-logout-button,
body.dream-mode .daydreamers-logout-button,
.dream-mode .daydreamers-logout-button,
.dream-mode .daydreamers-logout-button,
body.dream-mode .daydreamers-logout-button,
.dream-mode .daydreamers-logout-button,
.dream-mode .daydreamers-logout-button,
body.dream-mode .daydreamers-logout-button,
.dream-mode .daydreamers-logout-button,
.dream-mode .daydreamers-logout-button {
  color: #000 !important;
  text-shadow: none !important;
  background: #d32f2f !important;
  border-color: #000 !important;
  animation: none !important;
}

body.dream-mode .daydreamers-logout-button:hover,
.dream-mode .daydreamers-logout-button:hover,
.dream-mode .daydreamers-logout-button:hover,
body.dream-mode .daydreamers-logout-button:hover,
.dream-mode .daydreamers-logout-button:hover,
.dream-mode .daydreamers-logout-button:hover,
body.dream-mode .daydreamers-logout-button:hover,
.dream-mode .daydreamers-logout-button:hover,
.dream-mode .daydreamers-logout-button:hover,
body.dream-mode .daydreamers-logout-button:hover,
.dream-mode .daydreamers-logout-button:hover,
.dream-mode .daydreamers-logout-button:hover,
body.dream-mode .daydreamers-logout-button:hover,
.dream-mode .daydreamers-logout-button:hover,
.dream-mode .daydreamers-logout-button:hover {
  color: #000 !important;
  text-shadow: none !important;
  background: #b71c1c !important;
  border-color: #000 !important;
  animation: none !important;
  box-shadow: 0 0 18px 4px #d32f2f, 0 4px 16px rgba(0,0,0,0.22) !important;
}

/* Dream mode enter email button - ensure it stays green */
.dream-mode .daydreamers-enter-email-button {
  background: #4caf50 !important;
  color: #000 !important;
  border-color: #000 !important;
}

.dream-mode .daydreamers-enter-email-button:hover {
  background: #4caf50 !important;
  color: #000 !important;
  border-color: #000 !important;
  animation: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22) !important;
}

/* Ultra-high specificity for dream mode enter email button hover */
body.dream-mode .daydreamers-enter-email-button:hover,
.dream-mode .daydreamers-enter-email-button:hover,
.dream-mode .daydreamers-enter-email-button:hover {
  background: #4caf50 !important;
  color: #000 !important;
  border-color: #000 !important;
  animation: none !important;
  text-shadow: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22) !important;
}

/* ULTIMATE OVERRIDE - Dream mode enter email button - highest possible specificity */
body.dream-mode .daydreamers-enter-email-button,
.dream-mode .daydreamers-enter-email-button,
.dream-mode .daydreamers-enter-email-button,
body.dream-mode .daydreamers-enter-email-button,
.dream-mode .daydreamers-enter-email-button,
.dream-mode .daydreamers-enter-email-button,
body.dream-mode .daydreamers-enter-email-button,
.dream-mode .daydreamers-enter-email-button,
.dream-mode .daydreamers-enter-email-button,
body.dream-mode .daydreamers-enter-email-button,
.dream-mode .daydreamers-enter-email-button,
.dream-mode .daydreamers-enter-email-button,
body.dream-mode .daydreamers-enter-email-button,
.dream-mode .daydreamers-enter-email-button,
.dream-mode .daydreamers-enter-email-button {
  background: #4caf50 !important;
  color: #000 !important;
  border-color: #000 !important;
  animation: none !important;
  text-shadow: none !important;
}

/* I Hate Jerky button - underline text only for this specific button */
.user-menu-delete-button,
.customer-settings-delete-button {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Save buttons in dream mode - green with black text */
.dream-mode .user-menu-edit-button,
.dream-mode .customer-settings-save-button {
  background: #4caf50 !important;
  color: #000 !important;
  border-color: #000 !important;
  animation: none !important;
  text-shadow: none !important;
}

.dream-mode .user-menu-edit-button:hover,
.dream-mode .customer-settings-save-button:hover {
  background: #45a049 !important;
  color: #000 !important;
  border-color: #000 !important;
  animation: none !important;
  text-shadow: none !important;
}

body.dream-mode .daydreamers-enter-email-button:hover,
.dream-mode .daydreamers-enter-email-button:hover,
.dream-mode .daydreamers-enter-email-button:hover,
body.dream-mode .daydreamers-enter-email-button:hover,
.dream-mode .daydreamers-enter-email-button:hover,
.dream-mode .daydreamers-enter-email-button:hover,
body.dream-mode .daydreamers-enter-email-button:hover,
.dream-mode .daydreamers-enter-email-button:hover,
.dream-mode .daydreamers-enter-email-button:hover,
body.dream-mode .daydreamers-enter-email-button:hover,
.dream-mode .daydreamers-enter-email-button:hover,
.dream-mode .daydreamers-enter-email-button:hover,
body.dream-mode .daydreamers-enter-email-button:hover,
.dream-mode .daydreamers-enter-email-button:hover,
.dream-mode .daydreamers-enter-email-button:hover {
  background: #4caf50 !important;
  color: #000 !important;
  border-color: #000 !important;
  animation: none !important;
  text-shadow: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22) !important;
}

/* Simple Loading Spinner */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid transparent;
  border-top: 4px solid #8d6e63;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

/* Theme-specific colors for spinner */
.dark-mode .loading-spinner {
  border-top-color: #f5f5dc;
}

.dream-mode .loading-spinner {
  border-top-color: #ff00cc;
}

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

/* Loading container */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 1rem 0;
  gap: 0.5rem;
}

.loading-text {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.achievements-button,
.dark-mode .achievements-button,
.dream-mode .achievements-button,
.light-mode .achievements-button {
  background: #228B22 !important;
  color: #fff !important;
  border: 3px solid #000 !important;
}

.achievements-button:hover {
  background: #17641a !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  transform: translateY(-2px) scale(1.03);
}

/* Dream mode achievements button - ensure it stays green */
.dream-mode .achievements-button:hover {
  background: #17641a !important;
  color: #fff !important;
  border: 3px solid #000 !important;
  animation: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22) !important;
}

.light-mode .achievements-button {
  border: none !important;
}

/* Ensure red glow on hover in DREAM MODE ONLY */
.dream-mode .daydreamers-logout-button:hover {
  box-shadow: 0 0 18px 4px #d32f2f, 0 4px 16px rgba(0,0,0,0.22) !important;
}

/* FINAL OVERRIDE - Dream mode admin button MUST stay teal */
body.dream-mode .options-page .admin-button:hover,
.dream-mode.options-page .admin-button:hover,
.dream-mode .options-page .admin-button:hover {
  background-color: #1a6b75 !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleOptions 1.5s ease-in-out infinite alternate !important;
  text-shadow: none !important;
}

/* ULTIMATE OVERRIDE - Dream mode admin button - highest possible specificity */
body.dream-mode .options-page .admin-button:hover,
.dream-mode.options-page .admin-button:hover,
.dream-mode .options-page .admin-button:hover,
body.dream-mode.options-page .admin-button:hover,
.dream-mode .options-page .admin-button:hover,
body.dream-mode .options-page .admin-button:hover,
.dream-mode.options-page .admin-button:hover,
.dream-mode .options-page .admin-button:hover,
body.dream-mode .options-page .admin-button:hover,
.dream-mode.options-page .admin-button:hover,
.dream-mode .options-page .admin-button:hover {
  background-color: #1a6b75 !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleOptions 1.5s ease-in-out infinite alternate !important;
  text-shadow: none !important;
} 

/* Mobile scaling improvements for options page */
@media (max-width: 768px) {
  .options-background-panel {
    padding: clamp(0.75rem, 2.5vw, 1rem);
    width: 95%;
    /* Enhanced mobile scaling */
    min-width: 300px;
    max-width: 95vw;
  }
  
  .daydreamers-user-stats-background-panel {
    padding: clamp(0.75rem, 2.5vw, 1rem);
    width: 95%;
    /* Enhanced mobile scaling */
    min-width: 280px;
    max-width: 95vw;
  }
}

@media (max-width: 480px) {
  .options-background-panel {
    padding: clamp(0.75rem, 2.5vw, 1rem);
    width: 98%;
    /* Enhanced mobile scaling for smaller screens */
    min-width: 280px;
    max-width: 98vw;
  }
  
  .daydreamers-user-stats-background-panel {
    padding: clamp(0.75rem, 2.5vw, 1rem);
    width: 98%;
    /* Enhanced mobile scaling for smaller screens */
    min-width: 260px;
    max-width: 98vw;
  }
}

@media (max-width: 360px) {
  .options-background-panel {
    padding: clamp(0.5rem, 2vw, 0.75rem);
    width: 99%;
    /* Enhanced mobile scaling for very small screens */
    min-width: 260px;
    max-width: 99vw;
  }
  
  .daydreamers-user-stats-background-panel {
    padding: clamp(0.5rem, 2vw, 0.75rem);
    width: 99%;
    /* Enhanced mobile scaling for very small screens */
    min-width: 240px;
    max-width: 99vw;
  }
} .contact-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */
  background-image: url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.contact-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.contact-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.contact-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: clamp(2px, 0.5vw, 3px) solid #5d4037;
  border-radius: clamp(10px, 3vw, 15px);
  padding: clamp(1rem, 3vw, 1.5rem);
  max-width: 850px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  /* Improved mobile scaling */
  min-width: 280px;
  box-sizing: border-box;
}

.contact-container {
  width: 100%;
  max-width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: clamp(2px, 0.5vw, 3px) solid #5d4037;
  border-radius: clamp(6px, 2vw, 8px);
  padding: clamp(1.5rem, 4vw, 2rem);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  /* Improved mobile scaling */
  min-width: 260px;
  box-sizing: border-box;
}

.contact-title-panel {
  font-weight: bold;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 400px;
}

.contact-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

.home-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
  margin-bottom: 2rem;
}

.home-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
}

.contact-details {
  width: 100%;
  text-align: center;
  padding: 2rem;
  margin-bottom: 2rem;
  background-color: rgba(141, 110, 99, 0.1);
  border-radius: 8px;
  border: 2px solid #d7ccc8;
}

.contact-welcome-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 3.4rem;
  color: #3e2723;
  margin-bottom: 2rem;
  text-align: center;
  font-weight: 900;
}

.contact-details p {
  margin: 0.5rem 0;
  font-size: 1.2rem;
  color: #3e2723;
  line-height: 1.6;
  font-family: Verdana, sans-serif;
}

.contact-details-placeholder {
  width: 100%;
  text-align: center;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 2px dashed #d7ccc8;
  border-radius: 8px;
}

.contact-details-placeholder p {
  margin: 0.5rem 0;
  font-size: 1.2rem;
  color: #5d4037;
}

.contact-actions {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
}

.privacy-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
}

.privacy-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
  text-decoration: none;
}

/* Dark mode styles */
.dark-mode.contact-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode.contact-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode.contact-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .contact-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .contact-container {
  background-color: rgba(62, 39, 35, 0.9);
  color: #fff8e1;
}

.dark-mode .contact-title {
  text-shadow: none;
}

.dark-mode .contact-title-panel {
  background-color: #3e2723;
  border: 3px solid #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark-mode .contact-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dark-mode .contact-details {
  border-color: #5d4037;
  background-color: #8d6e63;
}

.dark-mode .contact-welcome-title {
  color: #000000 !important;
}

.dark-mode .contact-details p {
  color: #fff8e1;
  font-family: Verdana, sans-serif;
}

.dark-mode .contact-details-placeholder {
  border-color: #5d4037;
}

.dark-mode .contact-details-placeholder p {
  color: #d7ccc8;
}

/* Light mode button base styling */
.contact-page:not(.dark-mode):not(.dream-mode) .home-button,
.contact-page:not(.dark-mode):not(.dream-mode) .privacy-button {
  border: 3px solid #3e2723 !important;
  border-radius: 9999px !important; /* Ensure pill shape in light mode */
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  background-color: #8d6e63 !important;
  color: white !important;
  display: inline-block !important;
  text-decoration: none !important;
}

/* Dark mode button base styling with ultra-high specificity */
body.dark-mode .contact-page .home-button,
body.dark-mode .contact-page .privacy-button,
.dark-mode.contact-page .home-button,
.dark-mode.contact-page .privacy-button,
.dark-mode .contact-page .home-button,
.dark-mode .contact-page .privacy-button,
.dark-mode .home-button,
.dark-mode .privacy-button {
  border: 3px solid #000000 !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  text-decoration: none !important;
  font-family: 'The Wanters DEMO', serif !important;
}

/* Dark mode home button glow with ultra-high specificity */
body.dark-mode .contact-page .home-button:hover,
.dark-mode.contact-page .home-button:hover,
.dark-mode .contact-page .home-button:hover,
.dark-mode .home-button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  background-color: #a1887f !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  text-decoration: none !important;
}

/* Dark mode privacy policy button glow with ultra-high specificity */
body.dark-mode .contact-page .privacy-button:hover,
.dark-mode.contact-page .privacy-button:hover,
.dark-mode .contact-page .privacy-button:hover,
.dark-mode .privacy-button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  background-color: #a1887f !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  text-decoration: none !important;
}

@media (max-width: 768px) {
  .contact-title {
    font-size: 2.5rem;
  }
  
  .contact-background-panel {
    padding: clamp(0.5rem, 2vw, 0.75rem); /* Reduced padding for more width */
    width: 98%; /* Increased from 95% for wider text box */
    /* Enhanced mobile scaling */
    min-width: 300px;
    max-width: 98vw; /* Increased from 95vw */
  }
  
  .contact-container {
    padding: clamp(0.75rem, 2.5vw, 1rem); /* Reduced padding for more width */
    width: 98%; /* Increased from 95% for wider text box */
    /* Enhanced mobile scaling */
    min-width: 280px;
    max-width: 98vw; /* Increased from 95vw */
  }
  
  .contact-details {
    padding: 1rem; /* Reduced from 1.5rem for more width */
    margin: 0 0 2rem 0;
  }
  
  .contact-welcome-title {
    font-size: 3.2rem;
  }
  
  .contact-details p {
    font-size: 1.1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none;
    line-height: 1.7;
    font-family: Verdana, sans-serif;
  }
}

@media (max-width: 480px) {
  .contact-background-panel {
    padding: clamp(0.4rem, 1.5vw, 0.6rem); /* Reduced padding for more width */
    width: 99%; /* Increased from 98% for wider text box */
    /* Enhanced mobile scaling for smaller screens */
    min-width: 280px;
    max-width: 99vw; /* Increased from 98vw */
  }
  
  .contact-container {
    padding: clamp(0.5rem, 2vw, 0.75rem); /* Reduced padding for more width */
    width: 99%; /* Increased from 98% for wider text box */
    /* Enhanced mobile scaling for smaller screens */
    min-width: 260px;
    max-width: 99vw; /* Increased from 98vw */
  }
  
  .contact-details {
    padding: 0.75rem; /* Reduced from 1.25rem for more width */
    margin: 0 0 2rem 0;
  }
  
  .contact-welcome-title {
    font-size: 3rem;
  }
  
  .contact-details p {
    font-size: 1rem;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none;
    font-family: Verdana, sans-serif;
  }
}

@media (max-width: 360px) {
  .contact-background-panel {
    padding: clamp(0.3rem, 1.5vw, 0.5rem); /* Reduced padding for more width */
    width: 99.5%; /* Increased from 99% for wider text box */
    /* Enhanced mobile scaling for very small screens */
    min-width: 260px;
    max-width: 99.5vw; /* Increased from 99vw */
  }
  
  .contact-container {
    padding: clamp(0.4rem, 1.5vw, 0.6rem); /* Reduced padding for more width */
    width: 99.5%; /* Increased from 99% for wider text box */
    /* Enhanced mobile scaling for very small screens */
    min-width: 240px;
    max-width: 99.5vw; /* Increased from 99vw */
  }
  
  .contact-details {
    padding: 0.5rem 0.75rem; /* Reduced from 0.75rem 1rem for more width */
    margin: 0 0 2rem 0;
    width: 100%;
    box-sizing: border-box;
  }
  
  .contact-welcome-title {
    font-size: 2.8rem;
  }
  
  .contact-details p {
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    hyphens: none;
    word-break: break-word;
    text-align: center;
    margin: 0.3rem 0;
    font-family: Verdana, sans-serif;
  }
  
  .contact-details .email-address {
    font-size: 0.8rem;
    font-weight: 600;
    word-break: break-all;
    overflow-wrap: anywhere;
    letter-spacing: -0.8px;
    transform: scaleX(0.95);
    transform-origin: center;
  }
}

@media (max-width: 340px) {
  .contact-background-panel {
    width: 99%;
    max-width: 340px;
    padding: 0.15rem;
  }
  
  .contact-container {
    padding: 0.35rem;
  }
  
  .contact-details {
    padding: 0.5rem 0.75rem;
    margin: 0 0 2rem 0;
    width: 100%;
    box-sizing: border-box;
  }
  
  .contact-welcome-title {
    font-size: 2.6rem;
  }
  
  .contact-details p {
    font-size: 0.85rem;
    line-height: 1.3;
    margin: 0.25rem 0;
    font-family: Verdana, sans-serif;
  }
  
  .contact-details .email-address {
    font-size: 0.75rem;
    font-weight: 600;
    word-break: break-all;
    overflow-wrap: anywhere;
    letter-spacing: -1px;
    transform: scaleX(0.9);
    transform-origin: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Dream mode styles */
.dream-mode.contact-page {
  background-color: #222;
  background-image: 
    url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80'),
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
    linear-gradient(45deg, transparent 24%, rgba(75, 0, 130, 0.05) 25%, rgba(75, 0, 130, 0.05) 26%, transparent 27%, transparent 74%, rgba(138, 43, 226, 0.05) 75%, rgba(138, 43, 226, 0.05) 76%, transparent 77%),
    linear-gradient(-45deg, transparent 24%, rgba(102, 51, 153, 0.05) 25%, rgba(102, 51, 153, 0.05) 26%, transparent 27%, transparent 74%, rgba(60, 30, 80, 0.05) 75%, rgba(60, 30, 80, 0.05) 76%, transparent 77%);
  background-size: cover, 300px 300px, 300px 300px, 60px 60px, 60px 60px;
  background-position: center, 0 0, 150px 150px, 0 0, 30px 30px;
  background-blend-mode: color-burn;
}

.dream-mode.contact-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.contact-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .contact-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream-mode .contact-container {
  border: 3px solid #000000;
}

.dream-mode .contact-title {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  animation: none !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dream-mode .contact-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .contact-welcome-title {
  color: #00ffff !important;
  text-shadow: 
    -1px -1px 0 #000000,
    1px -1px 0 #000000,
    -1px 1px 0 #000000,
    1px 1px 0 #000000 !important;
  animation: none !important;
}

.dream-mode .contact-details p {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: none;
  font-family: Verdana, sans-serif !important;
}

/* Ensure dream mode contact details have clean black text */
.dream-mode .contact-details p,
.dream-mode .contact-details span,
.dream-mode .contact-details a {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
  font-family: Verdana, sans-serif !important;
}

/* Dream mode responsive text fixes */
@media (max-width: 768px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
    font-family: Verdana, sans-serif !important;
  }
}

@media (max-width: 480px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
    font-family: Verdana, sans-serif !important;
  }
}

@media (max-width: 360px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
    font-family: Verdana, sans-serif !important;
  }
  
  .dream-mode .contact-details .email-address {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
    font-family: Verdana, sans-serif !important;
  }
}

@media (max-width: 340px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
    font-family: Verdana, sans-serif !important;
  }
  
  .dream-mode .contact-details .email-address {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
    font-family: Verdana, sans-serif !important;
  }
}

/* Dream mode button base styling - black text when idle */
.dream-mode .home-button:not(:hover),
.dream-mode .privacy-button:not(:hover) {
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}

/* Dream mode psychedelic button hover effects - white text on hover */
.dream-mode .home-button:hover,
.dream-mode .privacy-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  animation: dreamSparkleContactLanding 1.5s ease-in-out infinite alternate !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
}

@keyframes dreamSparkleContactLanding {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
} .privacy-policy-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */
  background-image: url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.privacy-policy-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.privacy-policy-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.privacy-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: clamp(2px, 0.5vw, 3px) solid #5d4037;
  border-radius: clamp(10px, 3vw, 15px);
  padding: clamp(1rem, 3vw, 1.5rem);
  max-width: 850px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  /* Improved mobile scaling */
  min-width: 280px;
  box-sizing: border-box;
}

.privacy-container {
  width: 100%;
  max-width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: clamp(2px, 0.5vw, 3px) solid #5d4037;
  border-radius: clamp(6px, 2vw, 8px);
  padding: clamp(0.5rem, 2vw, 1rem);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  /* Improved mobile scaling */
  min-width: 260px;
  box-sizing: border-box;
}

.privacy-title-panel {
  font-weight: bold;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 400px;
}

.privacy-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

.home-button {
  display: inline-block;
  padding: 0.75rem 2rem;
  background-color: #14545c !important;
  color: white !important;
  border-radius: 25px;
  font-size: 1.2rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 2px solid #0a1a1d !important;
  margin-bottom: 2rem;
}

.home-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #1a6b75;
  color: white;
}

.privacy-details {
  width: 100%;
  text-align: center;
  padding: 1rem;
  margin-bottom: 2rem;
  background-color: rgba(141, 110, 99, 0.1);
  border-radius: 8px;
  border: 2px solid #d7ccc8;
  max-height: 90vh;
  overflow-y: auto;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.privacy-details::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.privacy-details h2 {
  font-size: 1.8rem;
  color: #3e2723;
  margin-bottom: 1rem;
  text-align: center;
}

.privacy-details h3 {
  font-size: 1.4rem;
  color: #5d4037;
  margin: 1.5rem 0 0.8rem 0;
}

.privacy-details p {
  margin: 0.8rem 0;
  font-size: 1rem;
  color: #3e2723;
  line-height: 1.6;
}

.privacy-details ul {
  margin: 0.8rem 0;
  padding-left: 1.5rem;
}

.privacy-details li {
  margin: 0.5rem 0;
  font-size: 1rem;
  color: #3e2723;
  line-height: 1.6;
}

.privacy-details a {
  color: #8d6e63;
  text-decoration: underline;
}

.privacy-details a:hover {
  color: #5d4037;
}

.app-info {
  background-color: rgba(141, 110, 99, 0.15);
  padding: 1rem;
  border-radius: 6px;
  margin: 1rem 0;
}

.app-details {
  font-size: 1rem;
  margin: 0;
}

.effective-date {
  font-style: italic;
  font-weight: 600;
  color: #5d4037;
  text-align: center;
  margin: 1rem 0 2rem 0;
}

.agreement {
  background-color: rgba(141, 110, 99, 0.2);
  padding: 1.5rem;
  border-radius: 8px;
  border: 2px solid #8d6e63;
  margin-top: 2rem;
  text-align: center;
}

.privacy-actions {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
}

.contact-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
}

.contact-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
  text-decoration: none;
}

/* Dark mode styles */
.dark-mode.privacy-policy-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode.privacy-policy-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode.privacy-policy-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .privacy-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .privacy-container {
  background-color: rgba(62, 39, 35, 0.9);
  color: #fff8e1;
  padding: 2rem 2rem 0.5rem 2rem !important; /* Further reduced bottom padding to exactly match light mode */
}

.dark-mode .privacy-title {
  color: #000000 !important;
  text-shadow: none;
}

.dark-mode .privacy-title-panel {
  background-color: #3e2723;
  border: 3px solid #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark-mode .privacy-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dark-mode .privacy-details {
  border-color: #5d4037;
  background-color: #8d6e63;
}

.dark-mode .privacy-details h2,
.dark-mode .privacy-details h3,
.dark-mode .privacy-details p,
.dark-mode .privacy-details li {
  color: #000000 !important;
}

.dark-mode .privacy-details a {
  color: #3e2723;
}

.dark-mode .privacy-details a:hover {
  color: #000000;
}

.dark-mode .app-info {
  background-color: rgba(93, 64, 55, 0.3);
}

.dark-mode .agreement {
  background-color: rgba(93, 64, 55, 0.4);
  border-color: #5d4037;
}

.privacy-policy-page:not(.dark-mode):not(.dream-mode) .home-button,
.privacy-policy-page:not(.dark-mode):not(.dream-mode) .contact-button {
  border: 2px solid #0a1a1d !important;
  border-radius: 25px !important; /* Match customer settings back button */
  padding: 0.75rem 2rem !important;
  font-size: 1.2rem !important;
}

/* Extra specificity for light mode home button pill shape */
.privacy-policy-page:not(.dark-mode):not(.dream-mode) .home-button {
  border-radius: 25px !important; /* Match customer settings back button */
  display: inline-block !important;
  text-decoration: none !important;
  background-color: #14545c !important;
  color: white !important;
  border: 2px solid #0a1a1d !important;
  padding: 0.75rem 2rem !important;
  font-size: 1.2rem !important;
}

/* Dark mode button styling with ultra-high specificity */
body.dark-mode .privacy-policy-page .home-button,
body.dark-mode .privacy-policy-page .contact-button,
.dark-mode.privacy-policy-page .home-button,
.dark-mode.privacy-policy-page .contact-button,
.dark-mode .privacy-policy-page .home-button,
.dark-mode .privacy-policy-page .contact-button,
.dark-mode .home-button,
.dark-mode .contact-button {
  display: inline-block !important;
  padding: 0.75rem 2rem !important;
  background-color: #14545c !important;
  color: #ffffff !important;
  border-radius: 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 2px solid #0a1a1d !important;
  margin-bottom: 2rem !important;
  font-family: 'The Wanters DEMO', serif !important;
}

/* Dark mode button hover styling with ultra-high specificity */
body.dark-mode .privacy-policy-page .home-button:hover,
body.dark-mode .privacy-policy-page .contact-button:hover,
.dark-mode.privacy-policy-page .home-button:hover,
.dark-mode.privacy-policy-page .contact-button:hover,
.dark-mode .privacy-policy-page .home-button:hover,
.dark-mode .privacy-policy-page .contact-button:hover,
.dark-mode .home-button:hover,
.dark-mode .contact-button:hover {
  background-color: #1a6b75 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Dream mode styles */
.dream-mode.privacy-policy-page {
  background-color: #222;
  background-image: 
    url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80'),
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%);
  background-size: cover, 300px 300px, 300px 300px;
  background-position: center, 0 0, 150px 150px;
  background-blend-mode: color-burn;
}

.dream-mode.privacy-policy-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.privacy-policy-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .privacy-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream-mode .privacy-container {
  background-color: rgba(26, 26, 26, 0.9);
  border: 3px solid #000000;
}

.dream-mode .privacy-title {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  animation: none !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dream-mode .privacy-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .privacy-details {
  background-color: rgba(26, 26, 26, 0.8);
  border: 2px solid #000000;
}

.dream-mode .privacy-details h2,
.dream-mode .privacy-details h3,
.dream-mode .privacy-details p,
.dream-mode .privacy-details li {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Override for privacy-content specifically */
.dream-mode .privacy-details .privacy-content h2,
.dream-mode .privacy-details .privacy-content h3,
.dream-mode .privacy-details .privacy-content h4 {
  color: #00ffff !important;
  text-shadow: 
    -1px -1px 0 #000000,
    1px -1px 0 #000000,
    -1px 1px 0 #000000,
    1px 1px 0 #000000 !important;
}

.dream-mode .privacy-details .privacy-content p,
.dream-mode .privacy-details .privacy-content li,
.dream-mode .privacy-details .privacy-content ul,
.dream-mode .privacy-details .privacy-content ol,
.dream-mode .privacy-details .privacy-content strong,
.dream-mode .privacy-details .privacy-content .centered-intro {
  color: #333333 !important;
}

.dream-mode .privacy-details a {
  color: #8d6e63;
}

.dream-mode .app-info {
  background-color: rgba(26, 26, 26, 0.6);
  border: 1px solid #444;
}

.dream-mode .agreement {
  background-color: rgba(26, 26, 26, 0.7);
  border-color: #444;
}

.dream-mode .home-button:not(:hover),
.dream-mode .contact-button:not(:hover) {
  background-color: #14545c !important;
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 600 !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.5px !important;
  border: 2px solid #0a1a1d !important;
  padding: 0.75rem 2rem !important;
  border-radius: 25px !important;
}

.dream-mode .home-button:hover {
  background-color: #1a6b75 !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparklePrivacy 1.5s ease-in-out infinite alternate !important;
  text-decoration: none !important;
}

.dream-mode .contact-button:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  animation: none !important;
  text-decoration: none !important;
}

@keyframes dreamSparklePrivacy {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

/* Privacy Policy Content Styling */
.privacy-content {
  width: 100%;
  text-align: center;
  padding: 1rem;
  margin-bottom: 2rem;
  background-color: rgba(141, 110, 99, 0.1);
  border-radius: 8px;
  border: 2px solid #d7ccc8;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.privacy-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.privacy-content h2 {
  font-family: 'The Wanters DEMO', serif;
  font-size: 3.4rem;
  color: #3e2723;
  margin-bottom: 2rem;
  text-align: center;
  font-weight: 900;
}

.privacy-content h3 {
  font-family: 'The Wanters DEMO', serif;
  font-size: 2.6rem;
  color: #5d4037;
  margin: 2rem 0 1rem 0;
  text-align: center;
  font-weight: 700;
}

.privacy-content h4 {
  font-family: 'The Wanters DEMO', serif;
  font-size: 2.2rem;
  color: #5d4037;
  margin: 1.5rem 0 0.8rem 0;
  text-align: center;
  font-weight: 600;
}

.privacy-content p {
  font-family: Verdana, sans-serif;
  margin: 0.8rem 0;
  font-size: 1rem;
  color: #3e2723;
  line-height: 1.6;
  text-align: left;
}

.privacy-content .centered-intro {
  text-align: center;
}

.privacy-content ul, .privacy-content ol {
  font-family: Verdana, sans-serif;
  margin: 0.8rem 0;
  padding-left: 1.5rem;
  text-align: left;
}

.privacy-content li {
  font-family: Verdana, sans-serif;
  margin: 0.5rem 0;
  font-size: 1rem;
  color: #3e2723;
  line-height: 1.6;
}

.privacy-content strong {
  font-weight: 600;
  color: #5d4037;
}

.policy-section {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(141, 110, 99, 0.2);
}

.policy-section:last-child {
  border-bottom: none;
}

.policy-agreement {
  background-color: rgba(141, 110, 99, 0.2);
  padding: 1.5rem;
  border-radius: 8px;
  border: 2px solid #8d6e63;
  margin-top: 2rem;
  text-align: center;
}

.policy-agreement p {
  text-align: center;
  margin: 0.5rem 0;
}

/* Dark mode styles for privacy content */
.dark-mode .privacy-content {
  border-color: #5d4037;
  background-color: #8d6e63;
}

.dark-mode .privacy-content h2,
.dark-mode .privacy-content h3,
.dark-mode .privacy-content h4 {
  color: #000000 !important;
}

.dark-mode .privacy-content p,
.dark-mode .privacy-content li {
  color: #000000 !important;
}

.dark-mode .privacy-content strong {
  color: #000000 !important;
}

.dark-mode .privacy-content ul,
.dark-mode .privacy-content ol {
  color: #000000 !important;
}

.dark-mode .privacy-content .centered-intro {
  color: #000000 !important;
}

.dark-mode .policy-section {
  border-bottom-color: rgba(255, 248, 225, 0.2);
}

.dark-mode .policy-agreement {
  background-color: rgba(255, 248, 225, 0.1);
  border-color: #5d4037;
}

/* Dream mode styles for privacy content */
.dream-mode .privacy-content {
  border-color: #000000;
  background-color: rgba(255, 255, 255, 0.9);
}

.dream-mode .privacy-content h2,
.dream-mode .privacy-content h3,
.dream-mode .privacy-content h4 {
  color: #00ffff !important;
  text-shadow: 
    -1px -1px 0 #000000,
    1px -1px 0 #000000,
    -1px 1px 0 #000000,
    1px 1px 0 #000000 !important;
  animation: none !important;
}

.dream-mode .privacy-content p,
.dream-mode .privacy-content li {
  color: #333333 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .privacy-content strong {
  color: #333333 !important;
}

.dream-mode .privacy-content ul,
.dream-mode .privacy-content ol {
  color: #333333 !important;
}

.dream-mode .privacy-content .centered-intro {
  color: #333333 !important;
}

.dream-mode .policy-section {
  border-bottom-color: rgba(0, 0, 0, 0.2);
}

.dream-mode .policy-agreement {
  background-color: rgba(0, 0, 0, 0.1);
  border-color: #000000;
}

/* Responsive design for privacy content */
@media (max-width: 768px) {
  .privacy-content {
    padding: 0.5rem;
    max-height: 75vh;
  }
  
  .privacy-content h2 {
    font-size: 3.2rem;
  }
  
  .privacy-content h3 {
    font-size: 2.4rem;
  }
  
  .privacy-content h4 {
    font-size: 2rem;
  }
  
  .privacy-content p,
  .privacy-content li {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .privacy-content {
    padding: 0.3rem;
    max-height: 80vh;
  }
  
  .privacy-content h2 {
    font-size: 3rem;
  }
  
  .privacy-content h3 {
    font-size: 2.2rem;
  }
  
  .privacy-content h4 {
    font-size: 1.8rem;
  }
  
  .privacy-content p,
  .privacy-content li {
    font-size: 0.9rem;
  }
}

@media (max-width: 360px) {
  .privacy-content {
    padding: 0.2rem;
    max-height: 85vh;
  }
  
  .privacy-content h2 {
    font-size: 2.8rem;
  }
  
  .privacy-content h3 {
    font-size: 2rem;
  }
  
  .privacy-content h4 {
    font-size: 1.6rem;
  }
  
  .privacy-content p,
  .privacy-content li {
    font-size: 0.85rem;
  }
}

/* Ultra-specific override to match customer settings back button exactly */
.privacy-policy-page .home-button,
.privacy-policy-page .home-button:not(:hover),
.privacy-policy-page .home-button:visited,
.privacy-policy-page .home-button:active,
.privacy-policy-page .home-button:focus {
  background-color: #14545c !important;
  color: white !important;
  border: 2px solid #0a1a1d !important;
  padding: 0.75rem 2rem !important;
  font-size: 1.2rem !important;
  border-radius: 25px !important;
  font-weight: 600 !important;
  font-family: 'The Wanters DEMO', serif !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  margin-bottom: 2rem !important;
  display: inline-block !important;
  text-decoration: none !important;
}

.privacy-policy-page .home-button:hover {
  background-color: #0e3a40 !important;
  color: white !important;
  border: 2px solid #0a1a1d !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.4) !important;
}

/* Responsive design */
@media (max-width: 768px) {
  .privacy-title {
    font-size: 2.5rem;
  }
  
  .privacy-background-panel {
    padding: clamp(0.3rem, 1.5vw, 0.5rem);
    width: 99.5%;
    min-width: 300px;
    max-width: 99.5vw;
  }
  
  .privacy-container {
    padding: clamp(0.4rem, 1.5vw, 0.6rem);
    width: 99.5%;
    min-width: 280px;
    max-width: 99.5vw;
  }
  
  .privacy-details {
    padding: 0.5rem;
    font-size: 0.9rem;
    max-height: 80vh;
  }
}

@media (max-width: 480px) {
  .privacy-background-panel {
    padding: clamp(0.2rem, 1vw, 0.4rem);
    width: 99.8%;
    min-width: 280px;
    max-width: 99.8vw;
  }
  
  .privacy-container {
    padding: clamp(0.3rem, 1vw, 0.5rem);
    width: 99.8%;
    min-width: 260px;
    max-width: 99.8vw;
  }
  
  .privacy-details {
    padding: 0.3rem;
    max-height: 85vh;
  }
  
  .privacy-details h2 {
    font-size: 1.5rem;
  }
  
  .privacy-details h3 {
    font-size: 1.2rem;
  }
  
  .privacy-details p,
  .privacy-details li {
    font-size: 0.9rem;
  }
  
  .privacy-title-panel {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
  }
}

/* Extra small mobile screens */
@media (max-width: 360px) {
  .privacy-background-panel {
    padding: clamp(0.1rem, 0.8vw, 0.3rem);
    width: 100%;
    min-width: 260px;
    max-width: 100vw;
  }
  
  .privacy-container {
    padding: clamp(0.2rem, 0.8vw, 0.4rem);
    width: 100%;
    min-width: 240px;
    max-width: 100vw;
  }
  
  .privacy-details {
    padding: 0.2rem;
    max-height: 90vh;
  }
  
  .privacy-title-panel {
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.5rem;
  }
}

/* FINAL OVERRIDE - Match customer settings back button exactly */
.privacy-policy-page .home-button {
  background-color: #14545c !important;
  color: white !important;
  border: 2px solid #0a1a1d !important;
  border-radius: 25px !important;
  padding: 0.75rem 2rem !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  font-family: 'The Wanters DEMO', serif !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  margin-bottom: 2rem !important;
  display: inline-block !important;
  text-decoration: none !important;
}

.privacy-policy-page .home-button:hover {
  background-color: #0e3a40 !important;
  color: white !important;
  border: 2px solid #0a1a1d !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.4) !important;
}

/* MAXIMUM SPECIFICITY OVERRIDE - Override App.css */
.privacy-policy-page .home-button,
.privacy-policy-page .home-button:not(:hover),
.privacy-policy-page .home-button:visited,
.privacy-policy-page .home-button:active,
.privacy-policy-page .home-button:focus,
.privacy-policy-page .home-button:link {
  background-color: #14545c !important;
  color: white !important;
  border: 2px solid #0a1a1d !important;
  border-radius: 25px !important;
  padding: 0.75rem 2rem !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  font-family: 'The Wanters DEMO', serif !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  margin-bottom: 2rem !important;
  display: inline-block !important;
  text-decoration: none !important;
}

.privacy-policy-page .home-button:hover {
  background-color: #0e3a40 !important;
  color: white !important;
  border: 2px solid #0a1a1d !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.4) !important;
} .product-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */
  background-image: url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.product-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.product-detail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.product-detail-title-panel {
  background: radial-gradient(circle at 50% 50%, rgba(245, 245, 220, 1) 70%, rgba(245, 245, 220, 0.92) 90%, rgba(245, 245, 220, 0.7) 100%) !important;
  border: clamp(2px, 0.5vw, 3px) solid #3e2723;
  border-radius: clamp(12px, 3vw, 20px);
  padding: clamp(1rem, 3vw, 1.5rem) clamp(2rem, 5vw, 3rem);
  margin-bottom: 1rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.dark-mode .product-detail-title-panel {
  background-color: #3e2723 !important;
  background-image: none !important;
}

.dream-mode .product-detail-title-panel {
  background: unset;
}

.product-detail-title {
  font-size: 3rem;
  font-weight: 900; /* Extra bold */
  margin: 0;
  color: #3e2723; /* Dark brown text */
  position: relative;
  z-index: 1;
}

.top-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 800px;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.back-to-products {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
  text-align: center;
  cursor: pointer;
  min-width: 120px;
}

.back-to-products:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  text-decoration: none;
}

.nav-button {
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 120px;
}

.nav-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Combined background panel for product and nutritional sections */
.combined-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: clamp(2px, 0.5vw, 3px) solid #3e2723;
  border-radius: clamp(12px, 3vw, 16px);
  padding: clamp(1rem, 3vw, 2rem);
  max-width: 900px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  margin-bottom: 2rem;
  /* Improved mobile scaling */
  min-width: 280px; /* Minimum width to prevent excessive shrinking */
  box-sizing: border-box;
}

/* Light mode specific styling to match options menu exactly */
.light-mode .combined-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #3e2723;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.product-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 800px;
  background-color: #a1887f;
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
  /* Improved mobile scaling */
  min-width: 260px;
  box-sizing: border-box;
}

.flavor-panel {
  background-color: #8d6e63;
  border: 3px solid #3e2723;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  /* Improved mobile scaling */
  min-width: 240px;
  box-sizing: border-box;
}

.product-detail-name {
  font-size: clamp(2rem, 8vw, 5.5rem);
  font-weight: 900;
  margin-bottom: 1.5rem;
  color: #3e2723;
  text-align: center;
  letter-spacing: clamp(0.5px, 0.2vw, 1px);
  white-space: normal;
  word-wrap: break-word;
  transition: color 0.3s ease;
  text-shadow: none;
  background-color: rgba(255, 255, 255, 0.9);
  border: clamp(2px, 0.5vw, 3px) solid #3e2723;
  border-radius: clamp(8px, 2vw, 12px);
  padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 3vw, 2rem);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  line-height: 1.2;
  word-break: break-word;
  max-width: 100%;
}

.product-detail-name:hover {
  color: #5d4037;
}

.product-detail-image-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
  height: clamp(250px, 50vw, 300px); /* Responsive height instead of fixed */
  overflow: hidden;
  position: relative;
  /* Ensure square aspect ratio */
  aspect-ratio: 1 / 1;
  max-width: clamp(250px, 50vw, 300px);
}

.product-detail-image {
  width: 100%;
  height: 100%;
  max-width: clamp(250px, 50vw, 300px);
  max-height: clamp(250px, 50vw, 300px);
  object-fit: contain; /* Changed from cover to contain to prevent clipping */
  border-radius: clamp(6px, 2vw, 8px);
  border: clamp(2px, 0.5vw, 3px) solid #8d6e63;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  /* Ensure square aspect ratio */
  aspect-ratio: 1 / 1;
}

/* Sold-out overlay on product image: 1px black outline for readability */
.product-detail .sold-out-overlay .sold-out-main,
.product-detail .sold-out-overlay .sold-out-sub {
  -webkit-text-stroke: 1px #000;
  paint-order: stroke fill;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.product-detail-description {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: #5d4037;
  text-align: center;
  max-width: 600px;
}

.product-size-options {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  width: 100%;
}

.size-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: clamp(2px, 0.5vw, 3px) solid #3e2723;
  border-radius: clamp(6px, 1.5vw, 8px);
  cursor: pointer;
  transition: all 0.3s ease;
  width: clamp(120px, 25vw, 150px);
  background-color: rgba(255, 255, 255, 0.7);
}

/* Light mode unselected bag - cream color */
.light-mode .size-option:not(.selected) {
  background-color: #f5f5dc;
}

/* Ensure quantity panel is not purple in any theme */
.product-quantity {
  background-color: transparent !important;
}

.quantity-controls {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Dark mode quantity panel */
.dark-mode .quantity-controls {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Dream mode quantity panel */
.dream-mode .quantity-controls {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

.size-option:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.size-option.selected {
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Selected size: size name in black; price always has 1px black outline */
.size-option.selected .size-name {
  color: #000 !important;
}

.size-name {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 900;
  margin-bottom: 0.5rem;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}

.size-price {
  font-size: clamp(1.4rem, 3.5vw, 1.8rem);
  font-weight: 900;
  font-family: 'The Wanters DEMO', serif;
  color: #ff0000;
  text-align: center;
  /* 1px black outline whether selected or not */
  -webkit-text-stroke: 1px #000;
  paint-order: stroke fill;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.product-quantity {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}

.product-quantity label {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #3e2723;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 900;
}

.max-quantity-info {
  font-size: 1.1rem;
  color: #3e2723;
  margin: 0.5rem 0 0 0;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 900;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1rem);
  background-color: rgba(255, 255, 255, 0.9);
  border: clamp(2px, 0.5vw, 3px) solid #3e2723;
  border-radius: clamp(8px, 2vw, 12px);
  padding: clamp(0.75rem, 2vw, 1rem);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.quantity-button {
  width: clamp(44px, 8vw, 48px);
  height: clamp(44px, 8vw, 48px);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white !important;
  border: clamp(2px, 0.5vw, 3px) solid #3e2723 !important;
  border-radius: 50%;
  cursor: pointer;
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  font-weight: 900;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.15s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  min-height: 44px;
  min-width: 44px;
}

/* Minus button - Red */
.quantity-button.quantity-minus {
  background-color: #dc3545 !important;
  border-color: #c82333 !important;
}

.quantity-button.quantity-minus:hover {
  background-color: #c82333 !important;
}

/* Plus button - Green */
.quantity-button.quantity-plus {
  background-color: #28a745 !important;
  border-color: #1e7e34 !important;
}

.quantity-button.quantity-plus:hover {
  background-color: #1e7e34 !important;
}

.quantity-button.holding {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important;
  animation: pulse 0.5s ease-in-out infinite alternate;
}

/* Minus button holding state */
.quantity-button.quantity-minus.holding {
  background-color: #c82333 !important;
  box-shadow: 0 6px 12px rgba(220, 53, 69, 0.4) !important;
}

/* Plus button holding state */
.quantity-button.quantity-plus.holding {
  background-color: #1e7e34 !important;
  box-shadow: 0 6px 12px rgba(40, 167, 69, 0.4) !important;
}

@keyframes pulse {
  from {
    box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4);
  }
  to {
    box-shadow: 0 8px 16px rgba(76, 175, 80, 0.6);
  }
}

.quantity-value {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  font-weight: 900;
  color: #3e2723;
  min-width: clamp(40px, 8vw, 50px);
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
}

.product-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

/* Add to Cart: green (like buying button); Sold Out state: red */
.add-to-cart-button,
.product-detail .add-to-cart-button {
  padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2rem);
  background-color: #2e7d32 !important;
  color: white;
  border: clamp(2px, 0.5vw, 3px) solid #1b5e20;
  border-radius: 9999px;
  cursor: pointer;
  font-size: clamp(1.4rem, 3.5vw, 1.6rem);
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: clamp(160px, 30vw, 200px);
  text-align: center;
  min-width: clamp(100px, 20vw, 120px);
}

.add-to-cart-button:hover:not(:disabled),
.product-detail .add-to-cart-button:hover:not(:disabled) {
  background-color: #4caf50 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.add-to-cart-button.sold-out,
.add-to-cart-button.sold-out:hover {
  background-color: #c62828;
  border-color: #b71c1c;
  color: white;
}

.add-to-cart-button.sold-out:hover {
  background-color: #d32f2f;
}

/* Cart link: teal (same as selling/business); teal on hover and click */
.view-cart-button {
  padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2rem);
  background-color: #9333ea;
  color: white;
  border: clamp(2px, 0.5vw, 3px) solid #6b21a8;
  border-radius: 9999px;
  cursor: pointer;
  font-size: clamp(1.4rem, 3.5vw, 1.6rem);
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: clamp(160px, 30vw, 200px);
  text-align: center;
  text-decoration: none;
  min-width: clamp(100px, 20vw, 120px);
}

.view-cart-button:hover {
  background-color: #a855f7;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  color: white;
}

/* Product detail page: Cart button teal (not brown on click) */
.product-detail .view-cart-button.product-detail-cart-link,
.product-detail a.view-cart-button.product-detail-cart-link {
  background-color: #14545c;
  border-color: #0a2d31;
  color: white;
}

.product-detail .view-cart-button.product-detail-cart-link:hover,
.product-detail a.view-cart-button.product-detail-cart-link:hover {
  background-color: #1a6b75;
  border-color: #0a2d31;
  color: white;
}

.product-detail .view-cart-button.product-detail-cart-link:active,
.product-detail .view-cart-button.product-detail-cart-link:focus,
.product-detail a.view-cart-button.product-detail-cart-link:active,
.product-detail a.view-cart-button.product-detail-cart-link:focus {
  background-color: #1a6b75;
  border-color: #0a2d31;
  color: white;
  box-shadow: 0 0 0 2px rgba(20, 84, 92, 0.4);
}

/* ========== Business-style accordions (same as products page, packs page) – larger, neat ========== */
/* One white panel – larger */
.product-detail-accordions-wrapper {
  width: 100%;
  max-width: 920px;
  background-color: #ffffff;
  border: 2px solid #8d6e63;
  border-radius: 14px;
  padding: 1.25rem;
  margin-top: 2rem;
  box-sizing: border-box;
  overflow: hidden;
}

.product-detail-accordions-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-sizing: border-box;
}

/* Each accordion row: larger cream panel, 2px brown border, 8px left accent (no dropdown arrow) */
.product-detail-accordions-wrapper .nutritional-info-section {
  margin: 0;
  padding: 0;
  border: 2px solid #8d6e63;
  border-radius: 14px;
  background: rgba(245, 245, 220, 0.9);
  box-shadow: none;
  transition: border-radius 0.2s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
}

.product-detail-accordions-wrapper .nutritional-info-section.product-detail-accordion-nutritional {
  border-left: 8px solid #6f42c1; /* purple – same as products */
}

.product-detail-accordions-wrapper .nutritional-info-section.product-detail-accordion-ingredients {
  border-left: 8px solid #2e7d32; /* green – same as items */
}

/* When expanded: white content area, rounded bottom; title stays cream */
.product-detail-accordions-wrapper .nutritional-info-section.is-expanded {
  border-radius: 14px;
  background: #ffffff;
}

.product-detail-accordions-wrapper .nutritional-info-section:hover {
  box-shadow: none;
}

/* Title: larger, cream, dark brown text. No arrow. When expanded, title stays cream and has dividing line. */
.product-detail-accordions-wrapper .nutritional-info-title {
  margin: 0;
  padding: 1.25rem 1.75rem 1.25rem calc(8px + 1.75rem);
  background: transparent !important;
  border: none;
  border-radius: 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #3e2723 !important;
  text-align: left;
  cursor: pointer;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}

.product-detail-accordions-wrapper .nutritional-info-section.is-expanded .nutritional-info-title {
  background: rgba(245, 245, 220, 0.98) !important;
  border-bottom: 2px solid #8d6e63;
}

.product-detail-accordions-wrapper .nutritional-info-title::before,
.product-detail-accordions-wrapper .nutritional-info-title::after {
  content: none !important;
  display: none !important;
}

/* Expanded body: full-height 8px left accent, cream background; rounded bottom like reference */
.product-detail-accordions-wrapper .nutritional-panel {
  background: rgba(245, 245, 220, 0.85);
  border: 2px solid #8d6e63;
  border-top: none;
  border-radius: 0 0 14px 14px;
  padding: 1.5rem 1.75rem 2.5rem calc(8px + 1.75rem);
  margin: 0;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.product-detail-accordions-wrapper .nutritional-info-section.product-detail-accordion-nutritional .nutritional-panel {
  border-left: 8px solid #6f42c1;
}

/* Ingredients accordion: no green accent, no inner panel border (same as nutritional) */
.product-detail-accordions-wrapper .nutritional-info-section.product-detail-accordion-ingredients .nutritional-panel {
  border: none;
  background: #ffffff;
}

/* Ingredients inner panel: same look as nutritional – dark brown border, no padding so content reaches edges; margin and spacing */
.product-detail-accordions-wrapper .nutritional-info-section.product-detail-accordion-ingredients .nutritional-panel-inner {
  border: 3px solid #3e2723;
  border-radius: 10px;
  padding: 0;
  box-shadow: none;
  margin: 1.25rem 1.75rem 1.75rem 1.75rem;
}

/* Sub-headers for Ingredients and Allergens */
.ingredients-allergens-subheader {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #3e2723;
  margin: 0 0 0.75rem 0;
  padding: 0 0 0.35rem 0;
  border-bottom: 2px solid #8d6e63;
  text-align: center;
}

/* Spacing: ingredients section has padding; no top border (subheader defines it) */
.product-detail-accordions-wrapper .nutritional-info-section.product-detail-accordion-ingredients .ingredients-section {
  padding: 1.5rem 1.25rem 1.5rem 1.25rem;
  border-top: none;
}

.product-detail-accordions-wrapper .nutritional-info-section.product-detail-accordion-ingredients .allergens-section.allergens-section-styled {
  padding: 1.5rem 1.25rem 1.5rem 1.25rem;
  margin-top: 0;
  border-top: 1px solid #e0d5c8;
}

/* Housed table/content: white sub-panel with dark brown border */
.product-detail-accordions-wrapper .nutritional-panel-inner {
  background: #ffffff;
  border: 3px solid #3e2723;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  box-sizing: border-box;
  overflow: hidden;
}

/* Nutritional Information accordion: no border and no second purple accent on expanded panel */
.product-detail-accordions-wrapper .nutritional-info-section.product-detail-accordion-nutritional .nutritional-panel {
  border: none;
}

/* Nutritional inner panel: no accent, dark brown border, no padding so table reaches edges; margin when no outer panel */
.product-detail-accordions-wrapper .nutritional-info-section.product-detail-accordion-nutritional .nutritional-panel-inner {
  border: 3px solid #3e2723;
  padding: 0;
  box-shadow: none;
  margin: 0.75rem 1.75rem 1.5rem 1.75rem;
}

.product-detail-accordions-wrapper .nutritional-panel-inner .nutritional-table {
  margin-top: 0.5rem;
}

/* Standalone (e.g. outside wrapper): keep card style */
.nutritional-info-section {
  width: 100%;
  max-width: 100%;
  background: rgba(245, 245, 220, 0.95);
  border: 2px solid #8d6e63;
  border-left: 8px solid #6f42c1;
  border-radius: 12px;
  padding: 0;
  margin-top: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  box-sizing: border-box;
  transition: all 0.2s ease;
  overflow: hidden;
}

.nutritional-info-section:first-child {
  margin-top: 0;
}

.nutritional-info-section:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Title (standalone) */
.nutritional-info-title {
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 700;
  margin: 0;
  padding: 1rem 1.5rem 1rem calc(8px + 1.5rem);
  background: transparent !important;
  border: none;
  border-radius: 12px 12px 0 0;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
  color: #3e2723 !important;
  text-align: left;
  position: relative;
}

.nutritional-info-title::before,
.nutritional-info-title::after {
  content: none !important;
  display: none !important;
}

.nutritional-panel {
  width: 100%;
  max-width: 100%;
  background: rgba(245, 245, 220, 0.98); /* Cream to match accordion */
  border: none;
  border-top: 1px solid #8d6e63;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  margin-top: 0;
  padding: clamp(0.5rem, 1.5vw, 0.75rem) 0; /* Minimal horizontal padding so table fits to edges */
  min-width: 0;
  box-sizing: border-box;
}

/* Serves / Serving size strip – neat, larger */
.nutritional-header {
  width: 100%;
  background-color: #f5f0e6;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #8d6e63;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 1.25rem;
  box-sizing: border-box;
  margin-bottom: 0;
}

.nutritional-header-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 120px;
}

.header-label {
  font-size: 1.05rem;
  color: #5d4037;
  font-weight: 700;
  margin-bottom: 0.35rem;
  font-family: 'The Wanters DEMO', serif;
  letter-spacing: 0.02em;
}

.header-value {
  font-size: 1.25rem;
  color: #3e2723;
  font-weight: 700;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* Housed table – neater grid, larger type */
.nutritional-table {
  width: 100%;
  max-width: 100%;
  background: transparent;
  box-sizing: border-box;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

.nutritional-table-header {
  width: 100%;
  background-color: #3e2723;
  color: #ffffff;
  padding: 0.85rem 1.25rem;
  font-weight: 700;
  font-size: 1.15rem;
  border-bottom: none;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
  box-sizing: border-box;
  font-family: 'The Wanters DEMO', serif;
  letter-spacing: 0.03em;
}

.nutritional-label-header {
  text-align: left;
}

.nutritional-value-header {
  text-align: center;
  font-weight: 700;
}

.nutritional-row {
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #e0d5c8;
  transition: background-color 0.2s ease;
  box-sizing: border-box;
  align-items: center;
}

.nutritional-row:hover {
  background-color: #faf8f5;
}

.nutritional-row:last-child {
  border-bottom: none;
}

.nutritional-label {
  font-weight: 700;
  color: #3e2723;
  text-align: left;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
}

.nutritional-value {
  font-weight: normal;
  color: #5d4037;
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.05rem;
}

/* Removed border extensions for consistent table appearance
.fat-section,
.fat-subsection {
  border-left: 4px solid #8d6e63;
}
*/

.fat-subsection .nutritional-label,
.sugar-subsection .nutritional-label {
  padding-left: 1.25rem;
  font-style: italic;
  color: #6d4c41;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.05rem;
}

/* Removed border extensions for consistent table appearance
.sugar-subsection {
  border-left: 4px solid #8d6e63;
}
*/

.ingredients-section {
  background: transparent;
  padding: 1.25rem 0;
  border-top: 1px solid #e0d5c8;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.product-detail-accordions-wrapper .nutritional-panel-inner .ingredients-section {
  border-top: 1px solid #e0d5c8;
  padding: 1.25rem 0;
}

/* Ingredients: 3 per row, dark brown text, same as allergen size */
.product-detail-accordions-wrapper .nutritional-info-section.product-detail-accordion-ingredients .ingredients-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem 1rem;
  text-align: center;
}

.product-detail-accordions-wrapper .nutritional-info-section.product-detail-accordion-ingredients .ingredient-item {
  color: #3e2723 !important;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 0.5rem 0.25rem;
  border-bottom: none;
  text-align: center;
}

.product-detail-accordions-wrapper .nutritional-info-section.product-detail-accordion-ingredients .ingredient-item span {
  color: #3e2723 !important;
}

.ingredients-section p {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.ingredients-title {
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff !important;
  margin-bottom: 1.5rem;
  text-align: center;
  padding: 1rem;
  border: 2px solid #000000;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  box-sizing: border-box;
}

.allergen-info {
  font-size: 1.5rem;
  color: #3e2723;
  margin: 1.5rem 0 0 0;
  line-height: 1.4;
  font-family: var(--font-family);
}

.allergen-info strong {
  color: #d32f2f;
  font-weight: normal;
  font-family: var(--font-family);
}

/* Allergens list – neater table (product detail accordion) */
.product-detail-accordions-wrapper .allergens-section-styled {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.product-detail-accordions-wrapper .allergens-table {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e0d5c8;
  border-radius: 10px;
  overflow: hidden;
  background: #faf8f5;
  box-sizing: border-box;
}

.product-detail-accordions-wrapper .allergens-table tbody tr {
  border-bottom: 1px solid #e0d5c8;
  transition: background-color 0.2s ease;
}

.product-detail-accordions-wrapper .allergens-table tbody tr:last-child {
  border-bottom: none;
}

.product-detail-accordions-wrapper .allergens-table tbody tr:hover {
  background-color: #f5f0e6;
}

.product-detail-accordions-wrapper .allergens-table-label {
  padding: 0.75rem 1rem;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #3e2723;
  width: 100%;
}

.product-detail-accordions-wrapper .allergens-table-indicator {
  padding: 0.75rem 1rem;
  text-align: center;
  width: 56px;
  vertical-align: middle;
}

.product-detail-accordions-wrapper .allergen-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 1.15rem;
  font-weight: 700;
  border: 2px solid #8d6e63;
  background: #ffffff;
  color: #8d6e63;
}

.product-detail-accordions-wrapper .allergen-indicator.present {
  background: #dc2626;
  border-color: #b91c1c;
  color: #ffffff;
}

/* Dark mode styles */
.dark-mode .product-detail {
  background-color: #3e2723;
  background-image: url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 84 48'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23412f2a' fill-opacity='0.25'%3E%3Cpath d='M42 48c23.196 0 42-10.745 42-24S65.196 0 42 0 0 10.745 0 24s18.804 24 42 24zm0-5c19.33 0 35-8.954 35-19s-15.67-19-35-19S7 13.954 7 24s15.67 19 35 19z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 120px 120px;
  background-position: center, center;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode .combined-background-panel {
  background-color: #1a1a1a;
  border: 3px solid #000000;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.dark-mode .product-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode .product-detail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .product-detail-title-panel {
  background-color: #3e2723;
  border: clamp(2px, 0.5vw, 3px) solid #000000;
  border-radius: clamp(12px, 3vw, 20px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  padding: clamp(1rem, 3vw, 1.5rem) clamp(2rem, 5vw, 3rem);
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.dark-mode .product-detail-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  font-size: 3rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
  font-family: var(--font-family);
  cursor: pointer;
  transition: color 0.3s ease;
}

.dark-mode .product-detail-title:hover {
  color: #a1887f !important;
}

.dark-mode .product-content {
  background-color: #a1887f;
  border: clamp(2px, 0.5vw, 3px) solid #000000;
}

.dark-mode .product-detail-description {
  color: #fff8e1;
}

.dark-mode .product-detail-name {
  color: #8d6e63 !important;
  text-shadow: 
    -1.5px -1.5px 0 #000,
    1.5px -1.5px 0 #000,
    -1.5px 1.5px 0 #000,
    1.5px 1.5px 0 #000 !important;
  background-color: #3e2723;
  border: clamp(2px, 0.5vw, 3px) solid #000000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.dark-mode .product-detail-name:hover {
  color: #a1887f !important;
}

.dark-mode .product-detail-image {
  border: clamp(2px, 0.5vw, 3px) solid #000000;
}

.dark-mode .flavor-panel {
  background-color: #8d6e63 !important;
  border: clamp(2px, 0.5vw, 3px) solid #000000;
}

.dark-mode .size-option {
  background-color: #444444;
  border: clamp(2px, 0.5vw, 3px) solid #000000;
  color: #fff8e1;
}

.dark-mode .size-option.selected {
  background-color: #a1887f;
  border: clamp(2px, 0.5vw, 3px) solid #000000;
}

.dark-mode .size-option.selected .size-name {
  color: #000 !important;
}

.dark-mode .size-name {
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.dark-mode .size-price {
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-text-stroke: 1px #000;
  paint-order: stroke fill;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: #ff0000 !important;
}

.dark-mode .product-quantity label,
.dark-mode .max-quantity-info {
  color: #ffffff !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 900 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .quantity-value {
  background-color: #444444;
  color: #c4a690 !important;
  padding: 0.5rem;
  border-radius: 4px;
  border: 2px solid #000000;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .product-detail-accordions-wrapper {
  background-color: #2a2a2a;
  border-color: #444;
}

.dark-mode .product-detail-accordions-wrapper .nutritional-info-section.product-detail-accordion-nutritional {
  background: rgba(62, 39, 35, 0.95);
  border-color: #000000;
  border-left: 8px solid #6f42c1;
}

.dark-mode .product-detail-accordions-wrapper .nutritional-info-section.product-detail-accordion-ingredients {
  background: rgba(62, 39, 35, 0.95);
  border-color: #000000;
  border-left: 8px solid #2e7d32;
}

.dark-mode .product-detail-accordions-wrapper .nutritional-info-section.product-detail-accordion-ingredients .nutritional-panel {
  background: #3a3530;
}

.dark-mode .product-detail-accordions-wrapper .nutritional-panel-inner {
  border-color: #5d4037;
}

.dark-mode .product-detail-accordions-wrapper .allergens-table {
  background: #2a2520;
  border-color: #5d4037;
}

.dark-mode .product-detail-accordions-wrapper .allergens-table tbody tr {
  border-bottom-color: #5d4037;
}

.dark-mode .product-detail-accordions-wrapper .allergens-table tbody tr:hover {
  background-color: #443a35;
}

.dark-mode .product-detail-accordions-wrapper .allergens-table-label {
  color: #d7ccc8;
}

.dark-mode .product-detail-accordions-wrapper .allergen-indicator {
  background: #3e2723;
  border-color: #8d6e63;
  color: #a1887f;
}

.dark-mode .product-detail-accordions-wrapper .allergen-indicator.present {
  background: #c62828;
  border-color: #b71c1c;
  color: #ffffff;
}

.dark-mode .nutritional-info-section {
  background: rgba(62, 39, 35, 0.95);
  color: #fff8e1;
  border: 2px solid #000000;
  border-left: 8px solid #6f42c1;
}

.dark-mode .nutritional-info-title {
  color: #d7ccc8 !important;
  background: rgba(62, 39, 35, 0.95) !important; /* dark panel, not teal */
}

.dark-mode .nutritional-label {
  color: #fff8e1;
  font-family: var(--font-family);
}

.dark-mode .nutritional-value {
  color: #fff8e1;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}


.dark-mode .nutritional-info-item {
  background-color: rgba(141, 110, 99, 0.2);
  border-color: #5d4037;
}

.dream-mode .product-detail-accordions-wrapper {
  background-color: #ffffff !important;
  border-color: #333;
}

.dream-mode .product-detail-accordions-wrapper .nutritional-info-section.product-detail-accordion-nutritional {
  background: rgba(245, 245, 220, 0.9) !important;
  border-color: #000000;
  border-left: 8px solid #6f42c1 !important;
}

.dream-mode .product-detail-accordions-wrapper .nutritional-info-section.product-detail-accordion-ingredients {
  background: rgba(245, 245, 220, 0.9) !important;
  border-color: #000000;
  border-left: 8px solid #2e7d32 !important;
}

.dream-mode .product-detail-accordions-wrapper .nutritional-info-section.product-detail-accordion-ingredients .nutritional-panel {
  background: #fffef9 !important;
}

.dream-mode .product-detail-accordions-wrapper .allergens-table {
  background: #f5f0e6;
  border-color: #8d6e63;
}

.dream-mode .product-detail-accordions-wrapper .allergens-table tbody tr:hover {
  background-color: #ebe6dc;
}

.dream-mode .nutritional-info-section {
  background: rgba(245, 245, 220, 0.95) !important;
  color: #000000 !important;
  border: 2px solid #000000;
  border-left: 8px solid #6f42c1 !important;
}

.dream-mode .product-detail {
  background-color: #0d0d0d;
  background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  position: relative;
}

.dream-mode .combined-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .product-detail-title-panel {
  background: #1a0d23 !important;
  background-color: #1a0d23 !important;
  background-image: none !important;
  border: clamp(2px, 0.5vw, 3px) solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .product-content {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: clamp(2px, 0.5vw, 3px) solid #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dream-mode .flavor-panel {
  background: #111111 !important;
  background-color: #111111 !important;
  background-image: none !important;
  border: clamp(2px, 0.5vw, 3px) solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .nav-button,
.dream-mode .back-to-products,
.dream-mode .add-to-cart-button,
.dream-mode .view-cart-button {
  border: clamp(1px, 0.3vw, 2px) solid #000000;
}

/* Dream mode quantity button styles */
.dream-mode .quantity-button.quantity-minus {
  background-color: #dc3545 !important;
  border: clamp(1px, 0.3vw, 2px) solid #000000 !important;
}

.dream-mode .quantity-button.quantity-plus {
  background-color: #28a745 !important;
  border: clamp(1px, 0.3vw, 2px) solid #000000 !important;
}

.dream-mode .size-option {
  border: clamp(2px, 0.5vw, 3px) solid #000000;
}

.dream-mode .size-option {
  background-color: #8d6e63 !important; /* Match add-to-cart button color */
  border: clamp(2px, 0.5vw, 3px) solid #000000;
}

.dream-mode .size-option.selected {
  background-color: #888888 !important; /* Grey selected state instead of brown */
  border: clamp(2px, 0.5vw, 3px) solid #000000;
  color: white !important;
}

.dream-mode .nutritional-info-item {
  background-color: #111111 !important;
  border-color: #000000;
}

.dream-mode .nutritional-panel {
  background-color: #ffffff !important;
  border: clamp(2px, 0.5vw, 3px) solid #000000;
}

.dream-mode .nutritional-header {
  background-color: #e8e8e8 !important;
  border-bottom: clamp(1px, 0.3vw, 2px) solid #000000;
}

.dream-mode .nutritional-table {
  background-color: #e8e8e8 !important;
}

.dream-mode .nutritional-table-header {
  background-color: #8d6e63 !important;
  color: #ffffff !important;
  border-bottom: 1px solid #6d4c41;
  font-size: 1.6rem;
}

.dream-mode .nutritional-label,
.dream-mode .nutritional-value,
.dream-mode .header-label,
.dream-mode .header-value,
.dream-mode .nutritional-label-header,
.dream-mode .nutritional-value-header,
.dream-mode .fat-subsection .nutritional-label,
.dream-mode .sugar-subsection .nutritional-label {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .product-detail .ingredients-section,
.dream-mode .nutritional-info-section .ingredients-section {
  background-color: #e8e8e8 !important;
  border-top: 2px solid #000000;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .product-detail .ingredients-section p,
.dream-mode .product-detail .ingredients-section span,
.dream-mode .nutritional-info-section .ingredients-section p,
.dream-mode .nutritional-info-section .ingredients-section span {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .product-detail .allergen-info,
.dream-mode .product-detail .allergen-info p,
.dream-mode .product-detail .allergen-info span,
.dream-mode .nutritional-info-section .allergen-info,
.dream-mode .nutritional-info-section .allergen-info p,
.dream-mode .nutritional-info-section .allergen-info span {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .product-detail .allergen-info strong,
.dream-mode .nutritional-info-section .allergen-info strong {
  color: #d32f2f !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dark-mode .product-detail .ingredients-section,
.dark-mode .product-detail .ingredients-section p,
.dark-mode .product-detail .ingredients-section span,
.dark-mode .nutritional-info-section .ingredients-section,
.dark-mode .nutritional-info-section .ingredients-section p,
.dark-mode .nutritional-info-section .ingredients-section span {
  color: #d7ccc8 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dark-mode .product-detail .allergen-info,
.dark-mode .product-detail .allergen-info p,
.dark-mode .product-detail .allergen-info span,
.dark-mode .nutritional-info-section .allergen-info,
.dark-mode .nutritional-info-section .allergen-info p,
.dark-mode .nutritional-info-section .allergen-info span {
  color: #d7ccc8 !important;
  text-shadow: none !important;
  animation: none !important;
}



.dream-mode .ingredients-title {
  background-color: #111111 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  border: 3px solid #000000;
}

.dark-mode .nutritional-label,
.dark-mode .nutritional-value {
  color: #fff8e1;
}

.dark-mode .nutritional-panel {
  background-color: #8d6e63;
  border: 3px solid #000000;
}

.dark-mode .nutritional-header {
  background-color: #8d6e63;
  border-bottom: 2px solid #000000;
}

.dark-mode .header-label {
  color: #d7ccc8;
}

.dark-mode .header-value {
  color: #fff8e1;
}

.dark-mode .nutritional-table {
  background-color: #8d6e63;
}



.dark-mode .nutritional-label-header,
.dark-mode .nutritional-value-header {
  color: #fff8e1;
}

.dark-mode .nutritional-label,
.dark-mode .nutritional-value {
  color: #fff8e1;
}

.dark-mode .nutritional-value {
  color: #d7ccc8;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.dark-mode .nutritional-table-header {
  background-color: #5d4037;
  color: #d7ccc8;
  border-bottom: 1px solid #3e2723;
}

.dark-mode .nutritional-row {
  border-bottom: 1px solid #666666;
}

.dark-mode .nutritional-row:hover {
  background-color: #8d6e63;
}

/* Removed border extensions for consistent table appearance
.dark-mode .fat-section,
.dark-mode .fat-subsection,
.dark-mode .sugar-subsection {
  border-left: 4px solid #000000;
}
*/

.dark-mode .fat-subsection .nutritional-label,
.dark-mode .sugar-subsection .nutritional-label {
  color: #b0b0b0;
}

.dark-mode .ingredients-section {
  background-color: #3a3a3a;
  border-top: 2px solid #000000;
}

.dark-mode .allergen-info {
  color: #fff8e1;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .allergen-info strong {
  color: #d32f2f;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .nutritional-info-item {
  background-color: rgba(141, 110, 99, 0.2);
  border-color: #5d4037;
}

.dream-mode .nutritional-info-title {
  color: #3e2723 !important;
  background: rgba(245, 245, 220, 0.95) !important; /* cream, not teal */
  animation: none !important;
}

.dream-mode .product-detail-name {
  background-color: #1a0d23 !important;
  background: #1a0d23 !important;
  border: 3px solid #000000 !important;
  text-shadow: 
    -1.5px -1.5px 0 #000,
    1.5px -1.5px 0 #000,
    -1.5px 1.5px 0 #000,
    1.5px 1.5px 0 #000;
}

/* Dream mode product detail title - remove glow, add clean black outline like flavor title */
.dream-mode .product-detail-title {
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important; /* Clean 1px black outline, override global glow */
  animation: dreamText 20s infinite linear !important; /* Keep the color-changing animation */
}

/* Dream mode size option text - black by default */
.dream-mode .size-name {
  color: #000000 !important;
  text-shadow: none !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.dream-mode .size-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Dream mode size option text - white on hover */
.dream-mode .size-option:hover .size-name,
.dream-mode .size-option:hover .size-price {
  color: #ffffff !important;
  text-shadow: none !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Dream mode quantity value override - red with 1px black border */
.dream-mode .quantity-value {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  border: 2px solid #000000;
}

/* Dream mode quantity label and max info - black with no outline */
.dream-mode .product-quantity label,
.dream-mode .max-quantity-info {
  color: #000000 !important;
  text-shadow: none !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 900 !important;
}

/* Dream mode max quantity number - cyan with outline */
.dream-mode .max-quantity-info .max-quantity-num {
  color: #40e0d0 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream-mode .product-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(13, 13, 13, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode .product-detail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dark-mode .product-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode .product-detail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Responsive scaling for product detail name - consistent across all themes */
@media (max-width: 768px) {
  .product-detail-name {
    font-size: clamp(2.5rem, 6vw, 4rem);
    white-space: normal;
    word-wrap: break-word;
    padding: clamp(0.5rem, 2vw, 0.8rem) clamp(1rem, 3vw, 1.5rem);
    /* Ensure consistent text rendering across themes */
    text-shadow: none !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Theme-specific overrides for mobile to ensure consistency */
  .dark-mode .product-detail-name {
    text-shadow: none !important;
  }
  
  .dream-mode .product-detail-name {
    text-shadow: none !important;
  }
  
  .product-detail-title {
    font-size: clamp(2rem, 5vw, 2.5rem);
  }
  
  .product-detail-title-panel {
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2rem);
    max-width: 90%;
    border-width: 1px;
  }
  
  .flavor-panel {
    max-width: 90%;
    padding: clamp(0.5rem, 2vw, 0.8rem);
    border-width: 1px;
  }
  
  .product-content {
    padding: clamp(1rem, 3vw, 1.5rem);
    max-width: 90%;
    border-width: 1px;
  }
  
  .combined-background-panel {
    padding: clamp(1rem, 3vw, 1.5rem);
    width: 95%;
    /* Enhanced mobile scaling */
    min-width: 300px;
    max-width: 95vw;
    border-width: 1px;
  }
  
  .light-mode .combined-background-panel {
    border-width: 1px;
  }
  
  .dark-mode .combined-background-panel {
    border-width: 1px;
  }
  
  .dark-mode .product-content {
    border-width: 1px;
  }
  
  .dark-mode .flavor-panel {
    border-width: 1px;
  }
  
  .dark-mode .product-detail-name {
    border-width: 1px;
  }
  
  .dark-mode .product-detail-image {
    border-width: 1px;
  }
  
  .dark-mode .size-option {
    border-width: 1px;
  }
  
  .dark-mode .size-option.selected {
    border-width: 1px;
  }
  
  .dark-mode .nutritional-info-section {
    border-width: 1px;
  }
  
  .dark-mode .nutritional-info-title {
    border-width: 1px !important;
  }
  
  .product-detail-image-container {
    height: clamp(200px, 50vw, 250px);
    max-width: clamp(200px, 50vw, 250px);
  }
  
  .product-detail-image {
    width: 100%;
    height: 100%;
    max-width: clamp(200px, 50vw, 250px);
    max-height: clamp(200px, 50vw, 250px);
  }
  
  .nutritional-info-section {
    max-width: 95%;
    padding: clamp(0.75rem, 2vw, 1rem);
    /* Enhanced mobile scaling */
    min-width: 280px;
    max-width: 95vw;
  }
  
  .nutritional-panel {
    /* Enhanced mobile scaling */
    min-width: 260px;
    max-width: 100%;
  }
  
  .nutritional-info-title {
    font-size: clamp(1.2rem, 3vw, 1.4rem);
    margin-bottom: clamp(0.5rem, 2vw, 0.8rem);
  }
  
  .nutritional-table-header {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    padding: clamp(0.3rem, 1vw, 0.5rem) clamp(0.2rem, 1vw, 0.3rem);
  }
  
  .nutritional-label,
  .nutritional-value {
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    padding: clamp(0.2rem, 1vw, 0.3rem) clamp(0.1rem, 1vw, 0.2rem);
  }
  
  .nutritional-row {
    padding: clamp(0.3rem, 1vw, 0.4rem) clamp(0.2rem, 1vw, 0.3rem);
  }
  
  .nutritional-header {
    flex-direction: row;
    gap: clamp(0.5rem, 2vw, 1rem);
    margin-bottom: clamp(0.5rem, 2vw, 0.8rem);
  }
  
  .nutritional-header-item {
    flex: 1;
    min-width: 0;
  }
  
  /* Mobile-specific nutritional table improvements */
  .nutritional-table-header {
    font-size: clamp(1rem, 3vw, 1.6rem);
    padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.5rem, 2vw, 1rem);
    grid-template-columns: 1.5fr 1fr 1fr;
  }
  
  .nutritional-row {
    padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.5rem, 2vw, 1rem);
    grid-template-columns: 1.5fr 1fr 1fr;
  }
  
  .nutritional-label {
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    line-height: 1.3;
  }
  
  .nutritional-value {
    font-size: clamp(0.8rem, 2.2vw, 1rem);
    line-height: 1.3;
    min-width: 0;
    word-break: break-word;
  }
  
  .nutritional-header {
    padding: clamp(0.5rem, 2vw, 1rem);
    gap: clamp(0.25rem, 1vw, 1rem);
  }
  
  .header-label {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  }
  
  .header-value {
    font-size: clamp(1rem, 3vw, 1.3rem);
  }
}

@media (max-width: 480px) {
  .product-detail-name {
    font-size: 2.5rem;
    white-space: normal;
    word-wrap: break-word;
    padding: 0.6rem 1rem;
    /* Ensure consistent text rendering across themes */
    text-shadow: none !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Theme-specific overrides for mobile to ensure consistency */
  .dark-mode .product-detail-name {
    text-shadow: none !important;
  }
  
  .dream-mode .product-detail-name {
    text-shadow: none !important;
  }
  
  .product-detail-title {
    font-size: 1.8rem;
  }
  
  .product-detail-title-panel {
    padding: 0.6rem 1rem;
    max-width: 95%;
    border-width: 1px;
  }
  
  .flavor-panel {
    padding: 0.6rem;
    max-width: 95%;
    border-width: 1px;
  }
  
  .product-content {
    padding: 1rem;
    max-width: 95%;
    border-width: 1px;
  }
  
  .combined-background-panel {
    padding: 1rem;
    width: 98%;
    /* Enhanced mobile scaling for smaller screens */
    min-width: 280px;
    max-width: 98vw;
    border-width: 1px;
  }
  
  .light-mode .combined-background-panel {
    border-width: 1px;
  }
  
  .dark-mode .combined-background-panel {
    border-width: 1px;
  }
  
  .dark-mode .product-content {
    border-width: 1px;
  }
  
  .dark-mode .flavor-panel {
    border-width: 1px;
  }
  
  .dark-mode .product-detail-name {
    border-width: 1px;
  }
  
  .dark-mode .product-detail-image {
    border-width: 1px;
  }
  
  .dark-mode .size-option {
    border-width: 1px;
  }
  
  .dark-mode .size-option.selected {
    border-width: 1px;
  }
  
  .dark-mode .nutritional-info-section {
    border-width: 1px;
  }
  
  .dark-mode .nutritional-info-title {
    border-width: 1px !important;
  }
  
  .product-detail-image-container {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
  }
  
  .product-detail-image {
    width: 100%;
    height: 100%;
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
  }
  
  .product-detail {
    padding: 1rem;
  }
  
  .size-option {
    width: 120px;
    padding: 1rem;
    text-align: center;
  }
  
  .size-name,
  .size-price {
    text-align: center;
    display: block;
  }
  
  .size-name {
    font-size: 1.2rem;
  }
  
  .size-price {
    font-size: 1.4rem;
  }
  
  .quantity-value {
    font-size: 1.8rem;
  }
  
  .quantity-button {
    width: 44px;
    height: 44px;
    font-size: 1.8rem;
    border-width: 2px;
    border-radius: 50%;
  }
  
  .add-to-cart-button,
  .view-cart-button {
    width: 180px;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    border-width: 1px;
  }
  
  .nav-button,
  .back-to-products {
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
    border-width: 1px;
  }
  
  .top-navigation {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  
  .nav-button,
  .back-to-products {
    flex: 1;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
  }
  
  .nutritional-info-section {
    max-width: 98%;
    padding: clamp(0.5rem, 2vw, 1rem);
    /* Enhanced mobile scaling for smaller screens */
    min-width: 260px;
    max-width: 98vw;
    /* Thinner borders for more content space */
    border-width: clamp(1px, 0.2vw, 2px);
    border-radius: clamp(3px, 1vw, 6px);
  }
  
  .nutritional-panel {
    /* Enhanced mobile scaling for smaller screens */
    min-width: 240px;
    max-width: 100%;
    /* Thinner borders for more content space */
    border-width: clamp(1px, 0.1vw, 1px);
    border-radius: clamp(3px, 1vw, 6px);
  }
  
  .nutritional-info-title {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    padding: clamp(0.4rem, 1.5vw, 0.75rem);
    border-width: clamp(1px, 0.1vw, 1px);
    border-radius: clamp(3px, 1vw, 6px);
  }
  
  .nutritional-table-header {
    font-size: 1.1rem;
  }
  
  .nutritional-label,
  .nutritional-value {
    font-size: 0.8rem;
  }
  
  .nutritional-header {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .nutritional-header-item {
    min-width: auto;
  }
  
  /* Enhanced mobile nutritional table for smaller screens */
  .nutritional-table-header {
    font-size: clamp(0.8rem, 2.5vw, 1.1rem);
    padding: clamp(0.4rem, 1.5vw, 0.5rem) clamp(0.3rem, 1.5vw, 0.5rem);
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: clamp(0.3rem, 1.5vw, 0.5rem);
  }
  
  .nutritional-row {
    padding: clamp(0.4rem, 1.5vw, 0.5rem) clamp(0.3rem, 1.5vw, 0.5rem);
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: clamp(0.3rem, 1.5vw, 0.5rem);
  }
  
  .nutritional-label {
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    line-height: 1.4;
    padding-right: clamp(0.2rem, 1vw, 0.3rem);
  }
  
  .nutritional-value {
    font-size: clamp(0.6rem, 1.6vw, 0.7rem);
    line-height: 1.4;
    min-width: 0;
    word-break: break-word;
    text-align: center;
  }
  
  .nutritional-header {
    padding: clamp(0.4rem, 1.5vw, 0.5rem);
    gap: clamp(0.2rem, 1vw, 0.25rem);
    flex-direction: column;
  }
  
  .nutritional-header-item {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
  }
  
  .header-label {
    font-size: clamp(0.8rem, 2vw, 0.9rem);
  }
  
  .header-value {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
  }
}

@media (max-width: 360px) {
  .product-detail-name {
    font-size: 2rem;
    padding: 0.5rem 0.8rem;
    /* Ensure consistent text rendering across themes */
    text-shadow: none !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Theme-specific overrides for mobile to ensure consistency */
  .dark-mode .product-detail-name {
    text-shadow: none !important;
  }
  
  .dream-mode .product-detail-name {
    text-shadow: none !important;
  }
  
  .product-detail-title {
    font-size: 1.5rem;
  }
  
  .product-detail-title-panel {
    padding: 0.5rem 0.8rem;
    border-width: 1px;
  }
  
  .flavor-panel {
    padding: 0.5rem;
    border-width: 1px;
  }
  
  .product-content {
    padding: 0.8rem;
    border-width: 1px;
  }
  
  .combined-background-panel {
    padding: 0.8rem;
    /* Enhanced mobile scaling for very small screens */
    min-width: 260px;
    max-width: 99vw;
    border-width: 1px;
  }
  
  .light-mode .combined-background-panel {
    border-width: 1px;
  }
  
  .dark-mode .combined-background-panel {
    border-width: 1px;
  }
  
  .dark-mode .product-content {
    border-width: 1px;
  }
  
  .dark-mode .flavor-panel {
    border-width: 1px;
  }
  
  .dark-mode .product-detail-name {
    border-width: 1px;
  }
  
  .dark-mode .product-detail-image {
    border-width: 1px;
  }
  
  .dark-mode .size-option {
    border-width: 1px;
  }
  
  .dark-mode .size-option.selected {
    border-width: 1px;
  }
  
  .dark-mode .nutritional-info-section {
    border-width: 1px;
  }
  
  .dark-mode .nutritional-info-title {
    border-width: 1px !important;
  }
  
  .product-detail-image-container {
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.3rem;
  }
  
  .product-detail-image {
    width: 100%;
    height: 100%;
    max-width: 160px;
    max-height: 160px;
    object-fit: contain;
  }
  
  .size-option {
    width: 100px;
    padding: 0.8rem;
    text-align: center;
  }
  
  .size-name,
  .size-price {
    text-align: center;
    display: block;
  }
  
  .size-name {
    font-size: 1rem;
  }
  
  .size-price {
    font-size: 1.2rem;
  }
  
  .quantity-value {
    font-size: 1.5rem;
  }
  
  .quantity-button {
    width: 40px;
    height: 40px;
    font-size: 1.6rem;
    border-width: 2px;
    border-radius: 50%;
  }
  
  .add-to-cart-button,
  .view-cart-button {
    width: 160px;
    padding: 0.7rem 1.2rem;
    font-size: 0.9rem;
    border-width: 1px;
  }
  
  .nav-button,
  .back-to-products {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border-width: 1px;
  }
  
  .top-navigation {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  
  .nav-button,
  .back-to-products {
    flex: 1;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
  }
  
  .nutritional-info-section {
    max-width: 99%;
    padding: clamp(0.25rem, 1.5vw, 0.6rem);
    /* Enhanced mobile scaling for very small screens */
    min-width: 240px;
    max-width: 99vw;
    /* Very thin borders for maximum content space */
    border-width: 1px;
    border-radius: 2px;
  }
  
  .nutritional-panel {
    /* Enhanced mobile scaling for very small screens */
    min-width: 220px;
    max-width: 100%;
    /* Very thin borders for maximum content space */
    border-width: 1px;
    border-radius: 2px;
  }
  
  .nutritional-info-title {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    margin-bottom: 0.6rem;
    padding: clamp(0.3rem, 1vw, 0.5rem);
    border-width: 1px;
    border-radius: 2px;
  }
  
  .nutritional-table-header {
    font-size: 0.9rem;
    padding: 0.4rem 0.2rem;
  }
  
  .nutritional-label,
  .nutritional-value {
    font-size: 0.75rem;
    padding: 0.25rem 0.15rem;
  }
  
  .nutritional-row {
    padding: 0.3rem 0.2rem;
  }
  
  .nutritional-header {
    flex-direction: row;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
  }
  
  .nutritional-header-item {
    flex: 1;
    min-width: 0;
  }
  
  .header-label,
  .header-value {
    font-size: 0.8rem;
  }
  
  .nutritional-row {
    padding: 0.5rem 0.8rem;
  }
  
  /* Ultra-compact nutritional table for very small screens */
  .nutritional-table-header {
    font-size: clamp(0.7rem, 2vw, 0.9rem);
    padding: clamp(0.3rem, 1vw, 0.4rem) clamp(0.2rem, 1vw, 0.2rem);
    grid-template-columns: 1fr 0.8fr 0.8fr;
    gap: clamp(0.2rem, 1vw, 0.3rem);
  }
  
  .nutritional-row {
    padding: clamp(0.3rem, 1vw, 0.5rem) clamp(0.2rem, 1vw, 0.8rem);
    grid-template-columns: 1fr 0.8fr 0.8fr;
    gap: clamp(0.2rem, 1vw, 0.3rem);
  }
  
  .nutritional-label {
    font-size: clamp(0.7rem, 1.8vw, 0.75rem);
    line-height: 1.5;
    padding-right: clamp(0.1rem, 0.5vw, 0.15rem);
  }
  
  .nutritional-value {
    font-size: clamp(0.5rem, 1.3vw, 0.6rem);
    line-height: 1.5;
    min-width: 0;
    word-break: break-word;
    text-align: center;
  }
  
  .nutritional-header {
    padding: clamp(0.3rem, 1vw, 0.4rem);
    gap: clamp(0.1rem, 0.5vw, 0.2rem);
    flex-direction: column;
  }
  
  .nutritional-header-item {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
  }
  
  .header-label {
    font-size: clamp(0.7rem, 1.8vw, 0.8rem);
  }
  
  .header-value {
    font-size: clamp(0.8rem, 2vw, 0.8rem);
  }
}

/* Sold Out and Stock Warning Styles */
.sold-out-info {
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', sans-serif !important;
  font-weight: bold;
  margin: 5px 0;
  text-align: center;
  font-size: 1.3rem;
}

.dark-mode .sold-out-info,
.dream-mode .sold-out-info {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.light-mode .sold-out-info {
  text-shadow: none !important;
}

.low-stock-warning {
  color: #ff6b35;
  font-weight: bold;
  font-size: 0.8rem;
}

.add-to-cart-button:disabled {
  background-color: #666 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

.quantity-button:disabled {
  background-color: #666 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Disabled state for specific button types */
.quantity-button.quantity-minus:disabled {
  background-color: #666 !important;
  border-color: #666 !important;
}

.quantity-button.quantity-plus:disabled {
  background-color: #666 !important;
  border-color: #666 !important;
}

.max-quantity-num, .max-quantity-num.low-stock-max, .dark-mode .max-quantity-num, .dark-mode .max-quantity-num.low-stock-max, .dream-mode .max-quantity-num, .dream-mode .max-quantity-num.low-stock-max {
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important;
}

.max-num-light {
  color: #3e2723;
  text-shadow: none;
}

.max-num-dark {
  color: #fff;
  text-shadow:
    -0.5px -0.5px 0 #000,
    0.5px -0.5px 0 #000,
    -0.5px 0.5px 0 #000,
    0.5px 0.5px 0 #000;
}

.dark-mode .max-quantity-num {
  color: #fff !important;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important;
}

.dark-mode .max-quantity-num.low-stock-max {
  color: #d32f2f !important;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important;
}

.low-stock-max {
  color: #ff3333 !important;
}

.dream-mode .max-quantity-num {
  color: unset !important; /* Let animation set the color */
  animation: dreamText 20s infinite linear !important;
  text-shadow:
    -0.75px -0.75px 0 #000,
    0.75px -0.75px 0 #000,
    -0.75px 0.75px 0 #000,
    0.75px 0.75px 0 #000 !important;
  filter: none !important;
}

.dream-mode .max-quantity-num.low-stock-max {
  color: #d32f2f !important;
  animation: none !important;
  text-shadow:
    -0.75px -0.75px 0 #000,
    0.75px -0.75px 0 #000,
    -0.75px 0.75px 0 #000,
    0.75px 0.75px 0 #000 !important;
}

.dark-mode .sold-out-info {
  color: #d32f2f !important;
  font-family: 'The Wanters DEMO', Tahoma, sans-serif !important;
  font-size: 1.3rem;
  font-weight: 900;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important;
  letter-spacing: 0.5px;
  margin: 5px 0;
  text-align: center;
}

.light-mode .sold-out-info {
  text-shadow: none !important;
}

.light-mode .max-quantity-num {
  text-shadow: none !important;
} 

.size-option:not(.selected) .size-name {
  color: #000;
}

.ingredients-section p, .ingredients-section span {
  color: #8d6e63;
} /* ===============================================================================
                                CART PAGE STYLING
=============================================================================== */

/* Main cart page container */
.cart-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background */
  background-image: url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 1rem;
  position: relative;
}

.cart-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.cart-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Background panel similar to contacts page */
.cart-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  /* Improved mobile scaling */
  min-width: 280px;
  box-sizing: border-box;
}

/* Main container inside background panel */
.cart-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Improved mobile scaling */
  min-width: 260px;
  box-sizing: border-box;
}

/* Orders title panel */
  .orders-title-panel {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 2rem;
    color: #ffffff;
    text-align: center;
    padding: 1rem;
    border: 2px solid #3e2723;
    border-radius: 8px;
    background-color: #5d4037;
    width: 100%;
    max-width: 400px;
  }
  
  @media (max-width: 768px) {
    .orders-title-panel {
      border-width: 1px;
    }
  }

.orders-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

/* Navigation button */
.cart-navigation {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  width: 100%;
}

.nav-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  color: white !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #3e2723 !important;
}

.nav-button:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  background-color: #a1887f !important;
  color: white !important;
  text-decoration: none !important;
}

/* Cart content area */
.cart-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Empty cart state */
.empty-cart {
  text-align: center;
  padding: 3rem 2rem;
}

.empty-cart p {
  font-size: 1.5rem;
  color: #5d4037;
  margin: 0;
  font-weight: 600;
}

/* Cart loading state */
.cart-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.cart-loading p {
  font-size: 1.5rem;
  color: #5d4037;
  margin: 1rem 0 0 0;
  font-weight: 600;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e0e0e0;
  border-top: 4px solid #8d6e63;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

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

/* Cart items container */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 2rem;
}

/* Individual cart item */
  .cart-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    border: 3px solid #8d6e63;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
  
  @media (max-width: 768px) {
    .cart-item {
      border-width: 1px;
    }
  }

/* Light mode cart item styling */
.light-mode .cart-item {
  background-color: #f5f5dc;
  border: 3px solid #8d6e63;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cart-item-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
  width: 100%;
}

.cart-item-name {
  font-size: 2.5rem;
  font-weight: 900;
  color: #3e2723;
  margin-bottom: 1rem;
  text-align: center;
}

.cart-item-size-price {
  font-size: 1.7rem;
  font-weight: 900;
  color: #3e2723;
  margin-bottom: 1rem;
  text-align: center;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.size-unit {
  font-size: 0.7em; /* 30% smaller - 70% of parent font size */
  font-weight: 900;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.cart-item-size {
  font-size: 1.1rem;
  color: #5d4037;
  margin-bottom: 0.25rem;
}

.cart-item-price {
  font-size: 1.2rem;
  color: #5d4037;
  font-weight: 600;
}

/* Quantity controls */
.cart-item-quantity {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1rem);
  margin-bottom: 1rem;
  padding: clamp(0.5rem, 1vw, 0.75rem);
}

.quantity-button {
  width: clamp(50px, 12vw, 60px);
  height: clamp(50px, 12vw, 60px);
  border: clamp(2px, 0.5vw, 3px) solid #3e2723;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  min-width: 50px;
  min-height: 50px;
}

/* Minus button - Red */
.quantity-button.quantity-minus {
  background-color: #dc3545;
  border-color: #c82333;
}

.quantity-button.quantity-minus:hover {
  background-color: #c82333;
}

/* Plus button - Green */
.quantity-button.quantity-plus {
  background-color: #28a745;
  border-color: #1e7e34;
}

.quantity-button.quantity-plus:hover {
  background-color: #1e7e34;
}

.quantity-button.holding {
  transform: scale(1.1) !important;
  animation: pulse 0.5s ease-in-out infinite alternate;
}

/* Minus button holding state */
.quantity-button.quantity-minus.holding {
  background-color: #c82333 !important;
  box-shadow: 0 6px 12px rgba(220, 53, 69, 0.4) !important;
}

/* Plus button holding state */
.quantity-button.quantity-plus.holding {
  background-color: #1e7e34 !important;
  box-shadow: 0 6px 12px rgba(40, 167, 69, 0.4) !important;
}

@keyframes pulse {
  from {
    box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4);
  }
  to {
    box-shadow: 0 8px 16px rgba(76, 175, 80, 0.6);
  }
}

.quantity-value {
  font-size: clamp(1.2rem, 3vw, 1.4rem);
  font-weight: bold;
  color: #3e2723;
  min-width: clamp(45px, 10vw, 50px);
  text-align: center;
  background-color: rgba(141, 110, 99, 0.1);
  padding: clamp(0.4rem, 1vw, 0.5rem);
  border-radius: clamp(6px, 1.5vw, 8px);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Subtotal and remove button */
.cart-item-subtotal {
  font-size: 1.5rem;
  font-weight: 900;
  color: #d32f2f;
  margin-bottom: 1rem;
  text-align: center;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.remove-item-button {
  padding: clamp(0.8rem, 2vw, 1.2rem) clamp(1.5rem, 3vw, 2rem);
  background-color: #d32f2f;
  color: white;
  border: clamp(2px, 0.5vw, 3px) solid #3e2723;
  border-radius: clamp(6px, 1.5vw, 8px);
  cursor: pointer;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  font-weight: 600;
  transition: all 0.2s ease;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  min-width: clamp(80px, 20vw, 100px);
  min-height: clamp(40px, 10vw, 50px);
}

.remove-item-button:hover {
  background-color: #f44336;
  transform: translateY(-2px);
}

/* Cart summary */
.cart-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2rem;
  border-top: 3px solid #d7ccc8;
  width: 100%;
  max-width: 400px;
}

.cart-totals {
  margin-bottom: 1.5rem;
  text-align: center;
}

.cart-total-items, 
.cart-total-price {
  font-size: 1.4rem;
  margin: 0.5rem 0;
  color: #3e2723;
  font-weight: 900;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.cart-total-price {
  font-size: 2.2rem;
  font-weight: 900;
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.checkout-button {
  padding: 1.2rem 2.5rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.checkout-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* ===============================================================================
                                DARK MODE STYLES
=============================================================================== */

.dark-mode.cart-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
}

.dark-mode.cart-page::before {
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
}

.dark-mode.cart-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .cart-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .cart-container {
  background-color: rgba(62, 39, 35, 0.9);
  border: 3px solid #000000;
}

.dark-mode .orders-title-panel {
  background-color: #8d6e63;
  border: 2px solid #000000;
}

.dark-mode .orders-title {
  color: #8d6e63;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.dark-mode .nav-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

.dark-mode .nav-button:hover {
  background-color: #a1887f !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
}

.dark-mode .empty-cart p {
  color: #fff8e1;
}

.dark-mode .cart-loading p {
  color: #fff8e1;
}

.dark-mode .loading-spinner {
  border: 4px solid #424242;
  border-top: 4px solid #a1887f;
}

.dark-mode .cart-item {
  background-color: #8d6e63;
  border: 3px solid #000000;
}

.dark-mode .cart-item-name {
  color: #fff8e1;
}

.dark-mode .cart-item-size-price {
  color: #000000;
  text-shadow: none;
}

.dark-mode .size-unit {
  color: #000000;
  text-shadow: none;
}

.dark-mode .cart-item-size,
.dark-mode .cart-item-price {
  color: #d7ccc8;
}

.dark-mode .quantity-button {
  background-color: #8d6e63 !important;
  border: 3px solid #000000;
}

.dark-mode .quantity-button:hover {
  background-color: #a1887f;
}

.dark-mode .quantity-value {
  color: #000000 !important;
  background-color: transparent;
  text-shadow: none;
  border: none;
}

.dark-mode .cart-item-subtotal {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .remove-item-button {
  border: 3px solid #000000;
}

.dark-mode .cart-totals {
  border-top: 3px solid #666666;
}

.dark-mode .cart-total-items {
  color: #c4a690 !important;
}

.dark-mode .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .checkout-button {
  background-color: #8d6e63;
  border: 3px solid #000000;
  color: #fff8e1;
}

.dark-mode .checkout-button:hover {
  background-color: #a1887f;
}

/* ===============================================================================
                                DREAM MODE STYLES
=============================================================================== */

.dream-mode.cart-page {
  background-color: #222;
}

.dream-mode.cart-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.cart-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .cart-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .cart-container {
  background-color: rgba(26, 26, 26, 0.9);
  border: 3px solid #000000;
}

.dream-mode .orders-title-panel {
  background-color: rgba(45, 20, 60, 0.95);
  border: 2px solid #000000;
}

.dream-mode .orders-title {
  color: #ffffff;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  animation: dreamText 20s infinite linear;
}

@keyframes dreamText {
  0% {
    color: #000080; /* Dark Blue */
  }
  16.67% {
    color: #008080; /* Teal */
  }
  33.33% {
    color: #00ffff; /* Cyan */
  }
  50% {
    color: #008000; /* Green */
  }
  66.67% {
    color: #006400; /* Dark Green */
  }
  83.33% {
    color: #800080; /* Purple */
  }
  100% {
    color: #000080; /* Back to Dark Blue for smooth loop */
  }
}

.dream-mode .nav-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .nav-button:hover {
  background-color: #a1887f;
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4);
  animation: dreamSparkle 1.5s ease-in-out infinite alternate;
}

.dream-mode .empty-cart p {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .cart-loading p {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .loading-spinner {
  border: 4px solid #333333;
  border-top: 4px solid #ff00cc;
  box-shadow: 0 0 10px rgba(255, 0, 204, 0.5);
}

.dream-mode .cart-item {
  background-color: rgba(120, 120, 120, 0.6);
  border: 3px solid #000000;
}

.dream-mode .cart-item-name {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .cart-item-size-price {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .size-unit {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .cart-item-size,
.dream-mode .cart-item-price {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .quantity-button {
  background-color: #8d6e63;
  border: 3px solid #000000;
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream-mode .quantity-button:hover {
  background-color: #a1887f;
  color: #ffffff;
  box-shadow: 
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6);
  animation: dreamSparkle 1.5s ease-in-out infinite alternate;
}

.dream-mode .quantity-value {
  color: #ffffff;
  background-color: rgba(45, 20, 60, 0.3);
  text-shadow: none;
  animation: none;
}

.dream-mode .cart-item-subtotal {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .remove-item-button {
  background-color: #d32f2f !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .remove-item-button:hover {
  background-color: #f44336 !important;
  color: #000000 !important;
  transform: translateY(-2px);
  box-shadow: 
    0 0 15px rgba(220, 20, 60, 0.8),
    0 0 25px rgba(255, 69, 0, 0.6);
}

.dream-mode .cart-totals {
  border-top: 3px solid #555555;
}

.dream-mode .cart-total-items {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .checkout-button {
  background-color: #8d6e63;
  border: 3px solid #000000 !important;
  color: #000000;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .checkout-button:hover {
  background-color: #a1887f;
  color: #ffffff;
  border: 3px solid #000000 !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 128, 0, 0.8),
    0 0 25px rgba(34, 139, 34, 0.6),
    0 0 35px rgba(46, 139, 87, 0.4);
  animation: dreamSparkle 1.5s ease-in-out infinite alternate;
}

/* Additional overrides for any remaining glow effects */
.dream-mode .cart-page .cart-item-size,
.dream-mode .cart-page .cart-item-price {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
}

.dream-mode .cart-page .cart-item-size-price,
.dream-mode .cart-page .cart-total-items {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
}

.dream-mode .cart-page .size-unit {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
}

.dream-mode .cart-page .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
}

.dark-mode .cart-page .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Dream mode remove button override - ensure red background with black text */
.dream-mode .cart-page .remove-item-button {
  background-color: #d32f2f !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
}

.dream-mode .cart-page .remove-item-button:hover {
  background-color: #f44336 !important;
  color: #000000 !important;
}

@keyframes dreamSparkle {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-2px) rotate(0deg) scale(1);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-2px) rotate(1deg) scale(1.02);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-2px) rotate(0deg) scale(1.04);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-2px) rotate(-1deg) scale(1.02);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-2px) rotate(0.5deg) scale(1.01);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-2px) rotate(0deg) scale(1);
  }
}

/* ===============================================================================
                            RESPONSIVE DESIGN
=============================================================================== */

/* Mobile-specific optimizations for better touch responsiveness - consistent across themes */
@media (max-width: 768px) {
  .cart-background-panel {
    padding: clamp(1rem, 3vw, 1.5rem);
    width: 95%;
    /* Enhanced mobile scaling */
    min-width: 300px;
    max-width: 95vw;
    border-width: 1px;
  }
  
  .cart-container {
    padding: clamp(1rem, 3vw, 1.5rem);
    /* Enhanced mobile scaling */
    min-width: 280px;
    max-width: 95vw;
    border-width: 1px;
  }
  
  .quantity-button {
    width: clamp(55px, 15vw, 65px);
    height: clamp(55px, 15vw, 65px);
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    border-width: clamp(2px, 0.6vw, 3px);
    /* Ensure consistent rendering across themes */
    text-shadow: none !important;
  }
  
  /* Theme-specific overrides for mobile consistency */
  .dark-mode .quantity-button {
    text-shadow: none !important;
  }
  
  .dream-mode .quantity-button {
    text-shadow: none !important;
  }
  
  .quantity-button.quantity-minus:hover {
    transform: scale(1.02);
  }
  
  .quantity-button.quantity-plus:hover {
    transform: scale(1.02);
  }
  
  .quantity-button.holding {
    transform: scale(1.05) !important;
  }
  
  .cart-item-quantity {
    gap: clamp(1rem, 3vw, 1.5rem);
    padding: clamp(0.75rem, 2vw, 1rem);
  }
  
  .quantity-value {
    min-width: clamp(50px, 12vw, 60px);
    font-size: clamp(1.3rem, 3.5vw, 1.5rem);
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
  }
  
  .remove-item-button {
    padding: clamp(1rem, 2.5vw, 1.5rem) clamp(2rem, 4vw, 2.5rem);
    font-size: clamp(1rem, 3vw, 1.2rem);
    min-width: clamp(90px, 25vw, 110px);
    min-height: clamp(45px, 12vw, 55px);
  }
}

@media (max-width: 480px) {
  .cart-background-panel {
    padding: 1rem;
    width: 98%;
    /* Enhanced mobile scaling for smaller screens */
    min-width: 280px;
    max-width: 98vw;
    border-width: 1px;
  }
  
  .cart-container {
    padding: 1rem;
    /* Enhanced mobile scaling for smaller screens */
    min-width: 260px;
    max-width: 98vw;
    border-width: 1px;
  }
  
  .quantity-button {
    width: clamp(60px, 18vw, 70px);
    height: clamp(60px, 18vw, 70px);
    font-size: clamp(1.6rem, 5vw, 2rem);
    border-width: clamp(2px, 0.8vw, 3px);
    /* Ensure consistent rendering across themes */
    text-shadow: none !important;
  }
  
  /* Theme-specific overrides for mobile consistency */
  .dark-mode .quantity-button {
    text-shadow: none !important;
  }
  
  .dream-mode .quantity-button {
    text-shadow: none !important;
  }
  
  .quantity-button:hover {
    transform: scale(1.01);
  }
  
  .quantity-button.holding {
    transform: scale(1.03) !important;
  }
  
  .cart-item-quantity {
    gap: clamp(1.25rem, 4vw, 2rem);
    padding: clamp(1rem, 3vw, 1.5rem);
  }
  
  .quantity-value {
    min-width: clamp(55px, 15vw, 65px);
    font-size: clamp(1.4rem, 4vw, 1.6rem);
    padding: clamp(0.6rem, 2vw, 1rem);
  }
  
  .remove-item-button {
    padding: clamp(1.2rem, 3vw, 1.8rem) clamp(2.5rem, 5vw, 3rem);
    font-size: clamp(1.1rem, 3.5vw, 1.3rem);
    min-width: clamp(100px, 30vw, 120px);
    min-height: clamp(50px, 15vw, 60px);
  }
}

@media (max-width: 360px) {
  .cart-background-panel {
    padding: 0.8rem;
    /* Enhanced mobile scaling for very small screens */
    min-width: 260px;
    max-width: 99vw;
    border-width: 1px;
  }
  
  .cart-container {
    padding: 0.8rem;
    /* Enhanced mobile scaling for very small screens */
    min-width: 240px;
    max-width: 99vw;
    border-width: 1px;
  }
  
  .quantity-button {
    width: clamp(65px, 20vw, 75px);
    height: clamp(65px, 20vw, 75px);
    font-size: clamp(1.8rem, 6vw, 2.2rem);
    border-width: clamp(2px, 1vw, 3px);
    /* Ensure consistent rendering across themes */
    text-shadow: none !important;
  }
  
  /* Theme-specific overrides for mobile consistency */
  .dark-mode .quantity-button {
    text-shadow: none !important;
  }
  
  .dream-mode .quantity-button {
    text-shadow: none !important;
  }
  
  .cart-item-quantity {
    gap: clamp(1.5rem, 5vw, 2.5rem);
    padding: clamp(1.25rem, 4vw, 2rem);
  }
  
  .quantity-value {
    min-width: clamp(60px, 18vw, 70px);
    font-size: clamp(1.5rem, 4.5vw, 1.7rem);
    padding: clamp(0.75rem, 2.5vw, 1.25rem);
  }
  
  .remove-item-button {
    padding: clamp(1.5rem, 4vw, 2rem) clamp(3rem, 6vw, 3.5rem);
    font-size: clamp(1.2rem, 4vw, 1.4rem);
    min-width: clamp(110px, 35vw, 130px);
    min-height: clamp(55px, 18vw, 65px);
  }
}

/* Desktop styles - these styles apply to screens 480px and larger */
@media (min-width: 480px) {
  .cart-item {
    max-width: 600px;
  }
  
  .orders-title {
    font-size: 2.8rem;
  }
}

/* Tablet styles - 768px and larger */
@media (min-width: 768px) {
  .cart-page {
    padding: 2rem;
  }
  
  .cart-background-panel {
    padding: 2rem;
  }
  
  .cart-container {
    padding: 3rem;
  }
  
     .cart-item {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     max-width: 900px;
     padding: 2.5rem;
   }
   
   .cart-item-details {
     flex: 1;
     align-items: flex-start;
     text-align: left;
     margin-bottom: 0;
     margin-right: 2rem;
   }
   
   .cart-item-name {
     font-size: 3rem;
   }
   
       .cart-item-size-price {
      font-size: 2.2rem;
    }
  
  .cart-item-quantity {
    margin-bottom: 0;
    margin-right: 2rem;
  }
  
  .cart-item-subtotal {
    margin-bottom: 0;
    margin-right: 1rem;
    font-size: 1.6rem;
  }
  
  .orders-title {
    font-size: 4rem;
  }
}

 /* Desktop styles - 1024px and larger */
 @media (min-width: 1024px) {
   .cart-background-panel {
     max-width: 1000px;
   }
   
   .cart-item {
     max-width: 1000px;
   }
   
   .cart-item-name {
     font-size: 3.2rem;
   }
   
       .cart-item-size-price {
      font-size: 2.4rem;
    }
   
   .orders-title {
     font-size: 3.2rem;
   }
 }

 /* Large desktop styles - 1200px and larger */
 @media (min-width: 1200px) {
   .cart-background-panel {
     max-width: 1200px;
   }
   
   .cart-item {
     max-width: 1100px;
   }
   
   .cart-item-name {
     font-size: 3.5rem;
   }
   
       .cart-item-size-price {
      font-size: 2.7rem;
    }
   
   .orders-title {
     font-size: 3.5rem;
   }
 } /* ===============================================================================
                              ORDER SUBMISSION STYLING
=============================================================================== */

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

/* Main order submission page container */
.order-submission {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background */
  background-image: url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 1rem;
  position: relative;
}

/* Mobile optimization - reduce background complexity on narrow screens */
@media (max-width: 480px) {
  .order-submission {
    padding: 0.5rem;
    background-blend-mode: normal;
  }
  
  .order-submission::before,
  .order-submission::after {
    opacity: 0.3; /* Reduce background pattern opacity */
  }
}

.order-submission::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.order-submission::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Background panel similar to cart page */
.order-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: clamp(2px, 0.5vw, 3px) solid #5d4037;
  border-radius: clamp(10px, 3vw, 15px);
  padding: clamp(1rem, 3vw, 1.5rem);
  max-width: 900px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  /* Improved mobile scaling */
  min-width: 280px;
  box-sizing: border-box;
}

/* Mobile optimization - reduce background panel complexity */
@media (max-width: 480px) {
  .order-background-panel {
    background-color: rgba(139, 110, 99, 0.1);
    border: 1px solid #5d4037;
    border-radius: 8px;
    padding: 0.5rem;
    width: 100%;
    max-width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}

/* Main container inside background panel */
.order-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: clamp(2px, 0.5vw, 3px) solid #5d4037;
  border-radius: clamp(6px, 2vw, 8px);
  padding: clamp(1rem, 3vw, 2rem);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Improved mobile scaling */
  min-width: 260px;
  box-sizing: border-box;
}

/* Mobile optimization - reduce container complexity */
@media (max-width: 480px) {
  .order-container {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #5d4037;
    border-radius: 6px;
    padding: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }
}

/* Order title panel */
.order-title-panel {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: center;
  padding: clamp(0.75rem, 2vw, 1rem);
  border: clamp(1px, 0.3vw, 2px) solid #3e2723;
  border-radius: clamp(6px, 2vw, 8px);
  background-color: #5d4037;
  width: 100%;
  max-width: 500px;
}

/* Mobile optimization - reduce title panel complexity */
@media (max-width: 480px) {
  .order-title-panel {
    margin-bottom: 1rem;
    padding: 0.5rem;
    border: 1px solid #3e2723;
    border-radius: 4px;
  }
}

.order-title {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
  text-decoration: none !important;
}

/* Back to cart button */
.back-to-cart-button,
.light-mode .back-to-cart-button {
  display: inline-block;
  padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2rem) !important;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: clamp(1.2rem, 3.5vw, 1.6rem) !important;
  text-decoration: none;
  font-weight: 600 !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: clamp(2px, 0.5vw, 3px) solid #3e2723;
  margin-bottom: 2rem;
}

.back-to-cart-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
  text-decoration: none;
}

/* Section styling */
.order-process-info,
.order-summary {
  width: 100%;
  margin-bottom: 2rem;
  padding: clamp(0.75rem, 2.5vw, 1.5rem); /* Reduced padding */
  background-color: rgba(141, 110, 99, 0.1);
  border-radius: clamp(4px, 1.5vw, 8px); /* Smaller border radius */
  border: clamp(1px, 0.2vw, 2px) solid #d7ccc8; /* Thinner border */
}

.section-title {
  font-size: clamp(1.2rem, 3.5vw, 1.8rem); /* Smaller font size */
  font-weight: 700;
  margin-bottom: 0.75rem; /* Reduced margin */
  color: #3e2723;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
}

.order-process-info p {
  font-size: clamp(0.85rem, 2.5vw, 1.1rem); /* Smaller font size */
  line-height: 1.5; /* Reduced line height */
  color: #5d4037;
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Special scaling for email address on mobile */
.order-process-info p strong {
  font-size: clamp(0.85rem, 1.5vw, 1rem); /* Smaller font size */
  word-break: break-all;
  white-space: nowrap;
}

/* Order items styling */
.order-items {
  display: table !important;
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 1rem;
}

.order-items::before {
  content: '';
  display: table-row;
}

.order-items::after {
  content: '';
  display: table-row;
}

.order-submission .summary-item,
.order-items .summary-item {
  display: table-row !important;
  padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.3rem, 1.5vw, 0.5rem) !important;
  border-bottom: clamp(1px, 0.2vw, 1px) solid #d7ccc8 !important;
  align-items: center !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  margin: 0 !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  flex-direction: row !important;
  justify-content: stretch !important;
  text-align: center !important;
  width: 100% !important;
}

.order-submission .summary-item span,
.order-items .summary-item span {
  display: table-cell !important;
  padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.3rem, 1.5vw, 0.5rem) !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #d7ccc8 !important;
  transition: none !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* Remove all hover effects from order summary */
.order-summary,
.order-summary *,
.order-items,
.order-items *,
.summary-item,
.summary-item * {
  transition: none !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: default !important;
  pointer-events: none !important;
}

.order-summary:hover,
.order-summary:hover *,
.order-items:hover,
.order-items:hover *,
.summary-item:hover,
.summary-item:hover * {
  background: none !important;
  transform: none !important;
  box-shadow: none !important;
  color: inherit !important;
  text-decoration: none !important;
  border-color: inherit !important;
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

.order-submission .item-name,
.order-items .item-name {
  font-weight: 700;
  color: #3e2723;
  text-align: center !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: clamp(1rem, 3vw, 1.2rem);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.order-submission .item-details,
.order-items .item-details {
  color: #5d4037;
  text-align: center !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  font-weight: 600;
}

.order-submission .item-price,
.order-items .item-price {
  font-weight: 600;
  color: #3e2723;
  text-align: center !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
}

.order-total {
  display: flex;
  justify-content: space-between;
  padding-top: clamp(0.75rem, 2vw, 1rem);
  border-top: clamp(1px, 0.3vw, 2px) solid #d7ccc8;
  font-weight: 700;
  font-size: clamp(1.2rem, 3.5vw, 1.4rem);
  color: #3e2723;
}

.total-price-value {
  color: #d32f2f; /* Red color for total price */
  font-weight: 900;
  font-size: clamp(1.4rem, 4vw, 1.8rem) !important;
  font-family: 'The Wanters DEMO', serif !important;
}

/* Total items number styling - brown for light mode */
.total-items-number {
  color: #3e2723 !important; /* Dark brown color for light mode */
  font-weight: 900 !important;
  font-size: clamp(1.4rem, 4vw, 1.8rem) !important;
  font-family: 'The Wanters DEMO', serif !important;
  /* No border/outline */
}

/* Light mode: Match dark mode total text size */
.light-mode .order-total {
  font-size: 1.4rem !important;
}

/* Form styling */
.submission-form {
  width: 100%;
  margin-bottom: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
}

.form-input {
  width: 100%;
  max-width: 400px;
  padding: clamp(0.6rem, 2vw, 0.8rem);
  border: clamp(1px, 0.3vw, 2px) solid #d7ccc8;
  border-radius: clamp(3px, 1vw, 4px);
  font-size: clamp(0.9rem, 2.5vw, 1rem);
  background-color: rgba(255, 255, 255, 0.9);
  transition: border-color 0.3s ease;
  color: #3e2723;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  text-align: center !important;
  margin: 0 auto;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.3);
}

/* Submission actions */
.submission-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.submit-button {
  padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2rem) !important;
  background: linear-gradient(135deg, #FFD700, #FFA000); /* Same yellowy gold as Awesome button */
  color: #000; /* Black text for better contrast on gold */
  border: 2px solid #000; /* Black border like Awesome button */
  border-radius: 25px; /* Pill-shaped like Awesome button */
  font-size: clamp(1.2rem, 3.5vw, 1.4rem) !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.submit-button:hover {
  background: linear-gradient(135deg, #FFA000, #FF8F00); /* Same hover as Awesome button */
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.submit-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  background: linear-gradient(135deg, #ccc, #999); /* Grayed out when disabled */
}

.submission-note {
  text-align: center;
  font-size: 0.9rem;
  color: #5d4037;
  max-width: 400px;
  margin: 1rem auto 0 auto;
  width: 100%;
}

/* Success state */
.submission-success {
  text-align: center;
  padding: 2rem;
  margin-bottom: 2rem;
}

.submission-success p {
  font-size: 1.1rem;
  color: #3e2723;
  margin-bottom: 1rem;
  line-height: 1.6;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

/* Order success text box */
.order-success-text-box {
  background-color: rgba(255, 255, 255, 0.95);
  border: 3px solid #4CAF50;
  border-radius: 12px;
  padding: clamp(2rem, 5vw, 3rem);
  margin: 2rem 0;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  /* Improved mobile scaling - taller box */
  min-height: clamp(200px, 40vh, 300px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.order-success-text-box.light-mode {
  background-color: rgba(255, 255, 255, 0.95);
  border-color: #4CAF50;
}

.order-success-text-box.dark-mode {
  background-color: rgba(33, 33, 33, 0.95);
  border-color: #4CAF50;
}

.submission-success .order-success-text-box.dark-mode p {
  color: #ffffff;
}

.order-success-text-box.dream-mode {
  background: linear-gradient(135deg, rgba(45, 20, 60, 0.95), rgba(26, 13, 35, 0.95));
  border: 3px solid #ff00cc;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.order-success-text-box.dream-mode::before,
.order-success-text-box.dream-mode::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 0, 204, 0.1) 50%, transparent 70%);
  animation: dreamSparkleOrderSubmission 3s ease-in-out infinite;
  pointer-events: none;
}

.order-success-text-box.dream-mode * {
  position: relative;
  z-index: 2;
}

.order-success-text-box p,
.submission-success .order-success-text-box p {
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  line-height: clamp(1.4, 4vw, 1.6);
  margin: clamp(0.5rem, 2vw, 1rem) 0;
  font-weight: 500;
}

.submission-success .order-success-text-box.dream-mode p {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.home-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 9999px;
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.home-button:hover {
  background-color: #a1887f;
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* ===============================================================================
                                DARK MODE STYLING
=============================================================================== */

.dark-mode.order-submission {
  background-color: #3e2723;
}

.dark-mode.order-submission::before {
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
}

.dark-mode.order-submission::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .order-background-panel {
  background-color: rgba(26, 26, 26, 0.9);
  border-color: #000000;
}

.dark-mode .order-container {
  background-color: rgba(62, 39, 35, 0.9);
  border-color: #000000;
}

.dark-mode .order-title-panel {
  background-color: #8d6e63;
  border-color: #000000;
}

.dark-mode .order-title {
  color: #8d6e63;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}

.dark-mode .back-to-cart-button {
  background-color: #8d6e63;
  color: white;
  border-color: #000000;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
}

.dark-mode .back-to-cart-button:hover {
  background-color: #a1887f;
}

.dark-mode .order-process-info,
.dark-mode .order-summary {
  background-color: #8d6e63;
  color: #3e2723;
  border-color: #000000;
}

.dark-mode .order-process-info p,
.dark-mode .order-summary p,
.dark-mode .order-summary li {
  color: #c4a690;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.dark-mode .order-container input,
.dark-mode .order-container textarea {
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  border-radius: 8px;
  font-size: 1.1rem;
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
  transition: background 0.2s, color 0.2s;
  display: block;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

.dark-mode .order-container input:disabled,
.dark-mode .order-container textarea:disabled,
.dark-mode .order-container .postal-address-disabled {
  background-color: #424242 !important;
  color: #bdbdbd !important;
  border: 2px solid #000000 !important;
  opacity: 0.7;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center !important;
}

.dark-mode .order-container label {
  color: #8d6e63 !important;
  font-weight: 900;
  font-size: 1.4rem;
  text-align: center;
  display: block;
  margin-bottom: 0.4rem;
  margin-top: 1.2rem;
}

/* Old dark mode checkbox styles removed */

.dark-mode .input:focus,
.dark-mode .textarea:focus {
  outline: 2px solid #3e2723;
  background-color: #a1887f;
}

.dark-mode .section-title {
  color: #8d6e63;
}

.dark-mode .order-submission .item-details,
.dark-mode .order-items .item-details {
  color: #8d6e63;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center !important;
}

.dark-mode .order-submission .item-name,
.dark-mode .order-items .item-name {
  color: #8d6e63;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center !important;
}

.dark-mode .order-submission .item-price,
.dark-mode .order-items .item-price {
  color: #8d6e63;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center !important;
}

.dark-mode .order-submission .summary-item,
.dark-mode .order-items .summary-item {
  display: table-row !important;
  padding: 0.75rem 0.5rem !important;
  border-bottom: 1px solid #d7ccc8 !important;
  align-items: center !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  margin: 0 !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  flex-direction: row !important;
  justify-content: stretch !important;
  text-align: center !important;
  width: 100% !important;
}

.dark-mode .order-submission .summary-item span,
.dark-mode .order-items .summary-item span {
  display: table-cell !important;
  padding: 0.75rem 0.5rem !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #d7ccc8 !important;
  transition: none !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* Remove all hover effects from order summary in dark mode */
.dark-mode .order-summary,
.dark-mode .order-summary *,
.dark-mode .order-items,
.dark-mode .order-items *,
.dark-mode .summary-item,
.dark-mode .summary-item * {
  transition: none !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: default !important;
  pointer-events: none !important;
}

.dark-mode .order-summary:hover,
.dark-mode .order-summary:hover *,
.dark-mode .order-items:hover,
.dark-mode .order-items:hover *,
.dark-mode .summary-item:hover,
.dark-mode .summary-item:hover * {
  background: none !important;
  transform: none !important;
  box-shadow: none !important;
  color: inherit !important;
  text-decoration: none !important;
  border-color: inherit !important;
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

.dark-mode .order-total {
  color: #8d6e63;
  font-size: 1.4rem;
}

.dark-mode .total-price-value {
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.8rem !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .total-items-number {
  color: #000000 !important; /* Black color for dark mode */
  font-weight: 900 !important;
  font-size: 1.8rem !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  /* No border/outline */
}

.dark-mode .form-group label {
  color: #8d6e63;
}

.dark-mode .form-input {
  background-color: rgba(26, 26, 26, 0.9);
  border-color: #000000;
  color: #8d6e63;
  text-align: center !important;
  max-width: 400px;
  margin: 0 auto;
}

.dark-mode .form-input:focus {
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.3);
}

.dark-mode .submit-button {
  background: linear-gradient(135deg, #FFD700, #FFA000); /* Same yellowy gold as Awesome button */
  border: 2px solid #000; /* Black border like Awesome button */
  border-radius: 25px; /* Pill-shaped like Awesome button */
  padding: 1rem 2rem !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: #000; /* Black text for better contrast on gold */
}

.dark-mode .submit-button:hover {
  background: linear-gradient(135deg, #FFA000, #FF8F00); /* Same hover as Awesome button */
}

.dark-mode .order-submission .submission-note,
.dark-mode .submission-note,
.dark-mode .submission-note p {
  color: #c4a690 !important;
}

.dark-mode .submission-success p {
  color: #c4a690 !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

.dark-mode .home-button {
  display: inline-block !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 1rem 2rem !important;
  border-radius: 9999px !important;
  transition: all 0.3s ease !important;
  font-size: 1.4rem !important;
  font-family: var(--font-family) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #000000 !important;
}

.dark-mode .home-button:hover {
  background-color: #a1887f !important;
  transform: translateY(-2px) !important;
  color: #000000 !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
}

.dark-mode .order-container label {
  color: #8d6e63 !important;
  font-weight: 700;
  font-size: 1.1rem;
}

.dark-mode .order-container .postal-address-disabled {
  background-color: #424242 !important;
  color: #bdbdbd !important;
  border: 2px solid #757575 !important;
  opacity: 0.7;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center !important;
}

/* Additional old dark mode checkbox styles removed */

/* ===============================================================================
                                DREAM MODE STYLING
=============================================================================== */

.dream-mode.order-submission {
  background-color: #222;
}

.dream-mode.order-submission::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(45, 20, 60, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.order-submission::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .order-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: 18px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  position: relative;
  z-index: 1;
}

.dream-mode .order-container {
  background: #18151c;
  border-radius: 14px;
  border: 3px solid #000;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.25);
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dream-mode .order-process-info,
.dream-mode .order-summary {
  background: #fff !important;
  color: #000 !important;
  border-radius: 12px;
  border: 2px solid #8a2be2;
  box-shadow: 0 2px 12px 0 rgba(138,43,226,0.08);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.dream-mode .order-submission .summary-item,
.dream-mode .order-items .summary-item {
  display: table-row !important;
  padding: 0.75rem 0.5rem !important;
  border-bottom: 1px solid #d7ccc8 !important;
  align-items: center !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  margin: 0 !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  flex-direction: row !important;
  justify-content: stretch !important;
  text-align: center !important;
  width: 100% !important;
}

.dream-mode .order-submission .summary-item span,
.dream-mode .order-items .summary-item span {
  display: table-cell !important;
  padding: 0.75rem 0.5rem !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #d7ccc8 !important;
  transition: none !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* Remove all hover effects from order summary in dream mode */
.dream-mode .order-summary,
.dream-mode .order-summary *,
.dream-mode .order-items,
.dream-mode .order-items *,
.dream-mode .summary-item,
.dream-mode .summary-item * {
  transition: none !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: default !important;
  pointer-events: none !important;
}

.dream-mode .order-summary:hover,
.dream-mode .order-summary:hover *,
.dream-mode .order-items:hover,
.dream-mode .order-items:hover *,
.dream-mode .summary-item:hover,
.dream-mode .summary-item:hover * {
  background: none !important;
  transform: none !important;
  box-shadow: none !important;
  color: inherit !important;
  text-decoration: none !important;
  border-color: inherit !important;
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

.dream-mode .order-process-info .section-title,
.dream-mode .order-summary .section-title {
  color: #000 !important;
  text-shadow: none !important;
}

.dream-mode .order-process-info p,
.dream-mode .order-summary p,
.dream-mode .order-summary li {
  color: #000 !important;
  text-shadow: none !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
  font-size: 1.1rem !important;
  text-align: center !important;
}

.dream-mode .order-submission .item-name,
.dream-mode .order-items .item-name {
  color: #000 !important;
  text-shadow: none !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.dream-mode .order-submission .item-details,
.dream-mode .order-items .item-details {
  color: #000 !important;
  text-shadow: none !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  text-align: center !important;
}

.dream-mode .order-submission .item-price,
.dream-mode .order-items .item-price {
  color: #000 !important;
  text-shadow: none !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  text-align: center !important;
}

.dream-mode .order-title-panel {
  background-color: rgba(45, 20, 60, 0.95);
  border-color: #000000;
}

.dream-mode .order-title {
  animation: dreamText 20s linear infinite;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}

@keyframes dreamText {
  0% { color: #000080; } /* Dark Blue */
  16.67% { color: #008080; } /* Teal */
  33.33% { color: #00ffff; } /* Cyan */
  50% { color: #008000; } /* Green */
  66.67% { color: #006400; } /* Dark Green */
  83.33% { color: #800080; } /* Purple */
  100% { color: #000080; } /* Back to Dark Blue */
}

.dream-mode .back-to-cart-button {
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 600 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0px !important;
  padding: 1rem 2rem !important;
}

.dream-mode .submit-button {
  background: linear-gradient(135deg, #FFD700, #FFA000) !important; /* Same yellowy gold as Awesome button */
  border: 2px solid #000 !important; /* Black border like Awesome button */
  border-radius: 25px !important; /* Pill-shaped like Awesome button */
  color: #000 !important; /* Black text for better contrast on gold */
  text-shadow: none !important;
  animation: none !important;
  font-weight: 600 !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.5px !important;
  padding: 1rem 2rem !important;
  filter: none !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  background-image: none !important;
  backdrop-filter: none !important;
}

.dream-mode .back-to-cart-button:hover,
.dream-mode .submit-button:hover {
  background: linear-gradient(135deg, #FFA000, #FF8F00) !important; /* Same hover as Awesome button */
  color: #000 !important; /* Black text for better contrast on gold */
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  filter: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  animation: none !important;
}

.dream-mode .section-title {
  color: white;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}

.dream-mode .submission-note {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.dream-mode .submission-success p {
  color: white !important;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

.dream-mode .home-button {
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 600 !important;
  font-size: 1.4rem !important;
  padding: 1rem 2rem !important;
  letter-spacing: 0px !important;
}

.dream-mode .home-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleOrderSubmission 1.5s ease-in-out infinite alternate !important;
}

@keyframes dreamSparkleOrderSubmission {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

/* ===============================================================================
                                RESPONSIVE DESIGN
=============================================================================== */

@media (max-width: 768px) {
  .order-background-panel {
    padding: clamp(0.75rem, 2.5vw, 1.5rem);
    width: 95%;
    /* Enhanced mobile scaling */
    min-width: 300px;
    max-width: 95vw;
    border-width: 1px;
  }
  
  .order-container {
    padding: clamp(0.75rem, 2.5vw, 1.5rem);
    /* Enhanced mobile scaling */
    min-width: 280px;
    max-width: 95vw;
    border-width: 1px;
  }
  
  .order-title {
    font-size: clamp(1.6rem, 4.5vw, 2rem);
  }
  
  .order-title-panel {
    border-width: 1px;
  }
  
  .back-to-cart-button,
  .submit-button,
  .home-button {
    font-size: clamp(1rem, 3vw, 1.2rem);
    padding: clamp(0.6rem, 2vw, 0.8rem) clamp(1rem, 3vw, 1.5rem);
  }
  
  /* Enhanced mobile scaling for order summary */
  .order-summary {
    padding: clamp(0.5rem, 1.5vw, 1rem);
    border-width: 1px;
  }
  
  .order-process-info {
    padding: clamp(0.4rem, 1.5vw, 1rem);
    /* Thinner borders for more content space */
    border-width: 1px;
    border-radius: clamp(3px, 1vw, 6px);
  }
  
  .order-process-info p {
    font-size: clamp(0.8rem, 2.2vw, 0.9rem);
    line-height: 1.5;
  }
  
  .order-process-info p strong {
    font-size: clamp(0.85rem, 1.8vw, 0.95rem);
  }
  
  .section-title {
    font-size: clamp(1.2rem, 3.5vw, 1.4rem);
    margin-bottom: clamp(0.75rem, 2vw, 1rem);
  }
  
  /* Mobile order items optimization - make text less bold to save space */
  .order-submission .summary-item,
  .order-items .summary-item {
    padding: clamp(0.3rem, 1vw, 0.5rem) clamp(0.1rem, 0.5vw, 0.3rem) !important;
    border-width: 1px !important;
  }
  
  .order-submission .summary-item span,
  .order-items .summary-item span {
    padding: clamp(0.3rem, 1vw, 0.5rem) clamp(0.1rem, 0.5vw, 0.3rem) !important;
  }
  
  .order-submission .item-name,
  .order-items .item-name {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    font-weight: 600; /* Reduced from 700 to save space */
  }
  
  .order-submission .item-details,
  .order-items .item-details {
    font-size: clamp(0.8rem, 2.2vw, 0.9rem);
    font-weight: 500; /* Reduced from 600 to save space */
  }
  
  .order-submission .item-price,
  .order-items .item-price {
    font-size: clamp(0.8rem, 2.2vw, 0.9rem);
    font-weight: 500; /* Reduced from 600 to save space */
  }
  
  .order-total {
    font-size: clamp(1rem, 3vw, 1.2rem);
    padding-top: clamp(0.5rem, 1.5vw, 0.75rem);
  }
  
  .total-price-value {
    font-size: clamp(1.2rem, 3.5vw, 1.4rem) !important;
  }
  
  .total-items-number {
    font-size: clamp(1.2rem, 3.5vw, 1.4rem) !important;
  }
  
  /* Mobile form optimization */
  .form-group label {
    font-size: clamp(0.8rem, 2.2vw, 0.9rem);
  }
  
  .form-input {
    font-size: clamp(0.8rem, 2.2vw, 0.9rem);
    padding: clamp(0.5rem, 1.5vw, 0.6rem);
  }
  
  .form-label-large {
    font-size: clamp(1.5rem, 4vw, 1.9rem);
  }
  
  /* Mobile scaling for order success text box */
  .order-success-text-box {
    padding: clamp(1.5rem, 4vw, 2rem) !important;
    border-width: clamp(2px, 0.5vw, 3px) !important;
    border-radius: clamp(10px, 2.5vw, 12px) !important;
    margin: clamp(1rem, 3vw, 1.5rem) 0 !important;
    min-height: clamp(180px, 35vh, 250px) !important;
  }
  
  .order-success-text-box p {
    font-size: clamp(1.1rem, 3.5vw, 1.3rem) !important;
    line-height: clamp(1.3, 3.5vw, 1.5) !important;
  }
}

/* Additional mobile breakpoints for better scaling */
@media (max-width: 480px) {
  .order-background-panel {
    padding: 0.25rem;
    width: 100%;
    /* Enhanced mobile scaling for smaller screens */
    min-width: 260px;
    max-width: 100vw;
    border-width: 1px;
  }
  
  .order-container {
    padding: 0.5rem;
    /* Enhanced mobile scaling for smaller screens */
    min-width: 240px;
    max-width: 100vw;
    border-width: 1px;
  }
  
  .order-title {
    font-size: clamp(1.4rem, 4vw, 1.6rem);
  }
  
  .order-process-info {
    padding: 0.25rem;
    /* Thinner borders for more content space */
    border-width: 1px;
    border-radius: 2px;
  }
  
  .order-process-info p {
    font-size: clamp(0.75rem, 2vw, 0.8rem);
    line-height: 1.4;
  }
  
  .order-process-info p strong {
    font-size: clamp(0.8rem, 1.6vw, 0.9rem);
  }
  
  .section-title {
    font-size: clamp(1.1rem, 3vw, 1.2rem);
  }
  
  /* Enhanced mobile order items - even less bold text */
  .order-submission .item-name,
  .order-items .item-name {
    font-size: clamp(0.8rem, 2.2vw, 0.9rem);
    font-weight: 500; /* Further reduced to save space */
  }
  
  .order-submission .item-details,
  .order-items .item-details {
    font-size: clamp(0.7rem, 2vw, 0.8rem);
    font-weight: 400; /* Further reduced to save space */
  }
  
  .order-submission .item-price,
  .order-items .item-price {
    font-size: clamp(0.7rem, 2vw, 0.8rem);
    font-weight: 400; /* Further reduced to save space */
  }
  
  .order-total {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
  }
  
  .total-price-value {
    font-size: clamp(1.1rem, 3vw, 1.2rem) !important;
  }
  
  .total-items-number {
    font-size: clamp(1.1rem, 3vw, 1.2rem) !important;
  }
  
  .form-label-large {
    font-size: clamp(1.3rem, 3.5vw, 1.5rem);
  }
  
  .form-group label {
    font-size: clamp(0.75rem, 2vw, 0.8rem);
    margin-bottom: 0.25rem;
  }
  
  .form-input {
    font-size: clamp(0.75rem, 2vw, 0.8rem);
    padding: 0.4rem;
    margin-bottom: 0.5rem;
  }
  
  .form-group {
    margin-bottom: 0.75rem;
  }
  
  /* Compact buttons for mobile */
  .submit-button,
  .back-to-cart-button,
  .home-button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    margin: 0.25rem 0;
  }
  
  .submission-actions {
    margin-top: 0.5rem;
  }
  
  /* Enhanced mobile scaling for order success text box */
  .order-success-text-box {
    padding: 0.75rem !important;
    border-width: 1px !important;
    border-radius: 6px !important;
    margin: 0.5rem 0 !important;
    min-height: 140px !important;
  }
  
  .order-success-text-box p {
    font-size: clamp(0.8rem, 2.2vw, 0.9rem) !important;
    line-height: clamp(1.2, 2.5vw, 1.3) !important;
  }
}

@media (max-width: 360px) {
  .order-background-panel {
    padding: 0.125rem;
    width: 100%;
    /* Enhanced mobile scaling for very small screens */
    min-width: 240px;
    max-width: 100vw;
    border-width: 1px;
    background-color: transparent;
  }
  
  .order-container {
    padding: 0.25rem;
    /* Enhanced mobile scaling for very small screens */
    min-width: 220px;
    max-width: 100vw;
    border-width: 1px;
  }
  
  .order-title {
    font-size: clamp(1.2rem, 3.5vw, 1.4rem);
  }
  
  .order-process-info {
    padding: 0.125rem;
    /* Very thin borders for maximum content space */
    border-width: 1px;
    border-radius: 2px;
  }
  
  .order-process-info p {
    font-size: clamp(0.7rem, 1.8vw, 0.75rem);
    line-height: 1.3;
  }
  
  .order-process-info p strong {
    font-size: clamp(0.75rem, 1.4vw, 0.85rem);
  }
  
  .section-title {
    font-size: clamp(1rem, 2.8vw, 1.1rem);
  }
  
  /* Maximum mobile optimization for order items */
  .order-submission .item-name,
  .order-items .item-name {
    font-size: clamp(0.75rem, 2vw, 0.8rem);
    font-weight: 400; /* Minimum weight to save maximum space */
  }
  
  .order-submission .item-details,
  .order-items .item-details {
    font-size: clamp(0.65rem, 1.8vw, 0.7rem);
    font-weight: 400; /* Minimum weight to save maximum space */
  }
  
  .order-submission .item-price,
  .order-items .item-price {
    font-size: clamp(0.65rem, 1.8vw, 0.7rem);
    font-weight: 400; /* Minimum weight to save maximum space */
  }
  
  .order-total {
    font-size: clamp(0.8rem, 2.2vw, 0.9rem);
  }
  
  .total-price-value {
    font-size: clamp(1rem, 2.8vw, 1.1rem) !important;
  }
  
  .total-items-number {
    font-size: clamp(1rem, 2.8vw, 1.1rem) !important;
  }
  
  .form-label-large {
    font-size: clamp(1.1rem, 3vw, 1.3rem);
  }
  
  .form-group label {
    font-size: clamp(0.7rem, 1.8vw, 0.75rem);
  }
  
  .form-input {
    font-size: clamp(0.7rem, 1.8vw, 0.75rem);
  }
  
  /* Maximum mobile scaling for order success text box */
  .order-success-text-box {
    padding: clamp(1rem, 2.5vw, 1.2rem) !important;
    border-width: clamp(1px, 0.3vw, 1.5px) !important;
    border-radius: clamp(6px, 1.5vw, 8px) !important;
    margin: clamp(0.6rem, 1.5vw, 0.8rem) 0 !important;
    min-height: clamp(140px, 25vh, 200px) !important;
  }
  
  .order-success-text-box p {
    font-size: clamp(1rem, 2.5vw, 1.1rem) !important;
    line-height: clamp(1.2, 2.5vw, 1.4) !important;
  }
}

/* Loyalty congratulations text styling */
.loyalty-congratulations.light-mode {
  text-shadow: none;
}

.loyalty-congratulations.dark-mode {
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}

.loyalty-congratulations.dream-mode {
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}

/* Removed old checkbox base styles */

/* Removed light mode checkbox styles */

/* Removed dark/dream mode checkbox styles */

/* All old checkbox styles removed */

.dream-mode .order-container input:not(:disabled),
.dream-mode .order-container textarea:not(:disabled) {
  background-color: #808080 !important;
  color: #ffffff !important;
  border: 2.5px solid #000 !important;
  text-align: center !important;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Additional high-specificity selectors for dream mode inputs */
body.dream-mode .order-container input:not(:disabled),
body.dream-mode .order-container textarea:not(:disabled),
html.dream-mode .order-container input:not(:disabled),
html.dream-mode .order-container textarea:not(:disabled),
.dream-mode .form-input,
body.dream-mode .form-input,
html.dream-mode .form-input {
  background-color: #808080 !important;
  color: #ffffff !important;
  border: 2.5px solid #000 !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.dream-mode .order-container input:disabled,
.dream-mode .order-container .postal-address-disabled {
  background-color: #555555 !important;
  color: #ffffff !important;
  border: 2.5px solid #000 !important;
  opacity: 0.8;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center !important;
}

/* Additional high-specificity selectors for disabled inputs in dream mode */
body.dream-mode .order-container input:disabled,
body.dream-mode .order-container .postal-address-disabled,
html.dream-mode .order-container input:disabled,
html.dream-mode .order-container .postal-address-disabled {
  background-color: #555555 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.light-mode .order-container .postal-address-disabled {
  background-color: #f5e3c3 !important;
  color: #3e2723 !important;
  border: 2.5px solid #8d6e63 !important;
  opacity: 1;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center !important;
}

.light-mode .order-container input:not(:disabled),
.light-mode .order-container textarea:not(:disabled) {
  background-color: #fff !important;
  color: #000 !important;
  border: 2.5px solid #8d6e63 !important;
  text-align: center !important;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Ensure postal address textarea is centered when active in light mode */
.light-mode .order-container .postal-address-input:not(.postal-address-disabled) {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 400px !important;
}

.dream-mode .order-container label,
.dream-mode .order-container .postal-address-disabled {
  color: #fff !important;
}

/* Dream mode: Make total items black, total price red, no glow */
.dream-mode .order-summary .order-total,
.dream-mode .order-total {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Dream mode: Specifically target total items text */
.dream-mode .total-items-text {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.dream-mode .order-summary .total-price-value {
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.8rem !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.dream-mode .total-items-number {
  color: #000000 !important; /* Black color for dream mode */
  font-weight: 900 !important;
  font-size: 1.8rem !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  /* No border/outline */
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.dream-mode .order-total {
  font-size: 1.4rem !important;
}

/* Dream mode: Make submission note white, no glow */
.dream-mode .submission-note,
.dream-mode .order-submission .submission-note,
.dream-mode .submission-note p {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Dream mode: Center align text input fields */
.dream-mode .form-input {
  text-align: center !important;
}

/* Dream mode: Remove ALL glow effects from order submission text */
.dream-mode .order-submission * {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Override global dream mode rule for Enter Code button specifically */
.dream-mode .order-submission .enter-code-button,
.dream-mode.order-submission .enter-code-button {
  background-color: #8d6e63 !important;
  color: #000 !important;
  border: 2px solid #000 !important;
  min-width: 110px !important;
  padding: 0.5em 1.2em !important;
  font-size: 1rem !important;
  font-family: 'The Wanters DEMO', serif !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .order-submission .order-total,
.dream-mode .order-submission .submission-note,
.dream-mode .order-submission .submission-note p {
  text-shadow: none !important;
  filter: none !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Dream mode: Apply black outline to total price value (more specific rule) */
.dream-mode .order-submission .total-price-value {
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.8rem !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Styles for free bag code selection */
.free-bag-group, .promo-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 1.5rem;
}

.free-bag-select {
  width: 100%;
  max-width: 400px;
  padding: 0.8rem;
  border: 2px solid #d7ccc8;
  border-radius: 4px;
  font-size: 1rem;
  background-color: rgba(255, 255, 255, 0.9);
  transition: border-color 0.3s ease;
  color: #3e2723;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  text-align: center !important;
  cursor: pointer;
  margin: 0 auto;
}

.free-bag-select:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.3);
}

/* Light mode specific */
.light-mode .free-bag-group {
  color: #3e2723;
}

.light-mode .free-bag-select {
  background-color: rgba(255, 255, 255, 0.9);
  color: #3e2723;
  border: 2px solid #d7ccc8;
}

.light-mode .free-bag-select:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.3);
}

/* Dark mode specific */
.dark-mode .free-bag-group {
  color: #ffffff;
}

.dark-mode .free-bag-select {
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  max-width: 400px;
  margin: 0 auto;
}

.dark-mode .free-bag-select:focus {
  outline: none;
  border-color: #a1887f !important;
  box-shadow: 0 0 0 2px rgba(161, 136, 127, 0.3);
}

/* Dream mode specific */
.dream-mode .free-bag-group {
  color: #ffffff;
}

.dream-mode .free-bag-select {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(5px);
  max-width: 400px;
  margin: 0 auto;
}

.dream-mode .free-bag-select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

/* ===============================================================================
                          SUPER AGGRESSIVE CHECKBOX STYLING
=============================================================================== */

/* Base checkbox - completely override everything */
input[type='checkbox'].order-checkbox {
  position: relative !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  border: 2px solid #8d6e63 !important;
  margin: 0 !important;
  margin-right: 0.8rem !important;
  padding: 0 !important;
  vertical-align: middle !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  outline: none !important;
  cursor: pointer !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.1s ease !important;
}

/* Checkbox checked state */
input[type='checkbox'].order-checkbox:checked::after {
  content: '✓' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 12px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  color: #8d6e63 !important;
  font-family: Arial, sans-serif !important;
}

/* Checkbox row */
.checkbox-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1.5rem !important;
  gap: 0.3rem !important;
}

/* Label styling */
.checkbox-label {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  user-select: none !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Light mode overrides */
.light-mode input[type='checkbox'].order-checkbox {
  border-color: #8d6e63 !important;
  background: #ffffff !important;
}

.light-mode input[type='checkbox'].order-checkbox:checked::after {
  color: #8d6e63 !important;
}

.light-mode .checkbox-label {
  color: #5d4037 !important;
}

/* Dark mode overrides */
.dark-mode input[type='checkbox'].order-checkbox {
  border-color: #8d6e63 !important;
  background: #ffffff !important;
}

.dark-mode input[type='checkbox'].order-checkbox:checked::after {
  color: #8d6e63 !important;
}

.dark-mode .checkbox-label {
  color: #8d6e63 !important;
}

/* Dream mode overrides */
.dream-mode input[type='checkbox'].order-checkbox {
  border-color: #000000 !important;
  background: #ffffff !important;
}

.dream-mode input[type='checkbox'].order-checkbox:checked::after {
  color: #000000 !important;
}

.dream-mode .checkbox-label {
  color: #ffffff !important;
}

.enter-code-button {
  background-color: #4CAF50 !important;
  color: #000000 !important;
}

.enter-code-button.light-mode {
  background-color: #4CAF50 !important;
  color: #000000 !important;
  border: 2px solid #3e2723;
}
.enter-code-button.light-mode:hover {
  background-color: #45a049 !important;
}
.dark-mode .enter-code-button {
  background-color: #4CAF50 !important;
  color: #000000 !important;
  border: 2px solid #000 !important;
  min-width: 110px !important;
  padding: 0.5em 1.2em !important;
  font-size: 1rem !important;
  font-family: 'The Wanters DEMO', serif !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}
.dark-mode .enter-code-button:hover {
  background-color: #45a049 !important;
}
.dream-mode .order-submission .enter-code-button,
.dream-mode.order-submission .enter-code-button,
.dream-mode .enter-code-button {
  background-color: #4CAF50 !important;
  color: #000000 !important;
  border: 2px solid #000 !important;
  min-width: 110px !important;
  padding: 0.5em 1.2em !important;
  font-size: 1rem !important;
  font-family: 'The Wanters DEMO', serif !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
  filter: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
  animation: none !important;
}
.dream-mode .order-submission .enter-code-button:hover,
.dream-mode.order-submission .enter-code-button:hover,
.dream-mode .enter-code-button:hover {
  background-color: #45a049 !important;
  filter: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  animation: none !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
} 

/* Submit effect animations */
.submit-effect-active {
  animation: submitPulse 0.6s ease-in-out;
}

.light-mode .submit-effect-active {
  animation: lightSubmitEffect 0.8s ease-in-out;
}

.dark-mode .submit-effect-active {
  animation: darkSubmitEffect 0.8s ease-in-out;
}

.dream-mode .submit-effect-active {
  animation: dreamSubmitEffect 1s ease-in-out;
}

@keyframes lightSubmitEffect {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  25% { 
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(141, 110, 99, 0.4);
  }
  50% { 
    transform: scale(1.1);
    box-shadow: 0 8px 16px rgba(93, 64, 55, 0.5);
  }
  75% { 
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(141, 110, 99, 0.4);
  }
}

@keyframes darkSubmitEffect {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  25% { 
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(141, 110, 99, 0.6);
  }
  50% { 
    transform: scale(1.1);
    box-shadow: 0 8px 16px rgba(141, 110, 99, 0.8);
  }
  75% { 
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(141, 110, 99, 0.6);
  }
}

@keyframes dreamSubmitEffect {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  20% { 
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 107, 157, 0.6);
  }
  40% { 
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.7);
  }
  60% { 
    transform: scale(1.08);
    box-shadow: 0 0 30px rgba(75, 0, 130, 0.8);
  }
  80% { 
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 107, 157, 0.6);
  }
}

.order-divider {
  width: 90%;
  margin: 1.2rem auto 1.2rem auto;
  border: none;
  border-top: 2px solid #bdbdbd;
  opacity: 0.7;
}

.form-label-large {
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  font-weight: 900;
  text-align: center;
  display: block;
  margin-bottom: 0.4rem;
  margin-top: 1.2rem;
  color: #8d6e63;
  letter-spacing: 0.01em;
}/* Free Bag Flavour Selection Modal */
.free-bag-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(3px);
}

.free-bag-modal-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  /* Hide scrollbar but maintain scroll functionality */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hide scrollbar but maintain scroll functionality */
.free-bag-background-panel::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.free-bag-background-panel::-webkit-scrollbar-track {
  background: transparent;
}

.free-bag-background-panel::-webkit-scrollbar-thumb {
  background: transparent;
}

.free-bag-modal {
  width: 100%;
  max-width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.free-bag-modal-title-panel {
  font-weight: bold;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem 2rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 500px;
}

.free-bag-modal-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 3.2rem;
  font-weight: 900;
  margin: 0 0 0.5rem 0;
  color: #ffffff !important;
  text-align: center;
  text-shadow: none !important;
}

.free-bag-modal-subtitle {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
  color: #ffffff !important;
  text-align: center;
  opacity: 0.9;
}

.free-bag-flavors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  width: 100%;
  margin-bottom: 2rem;
  padding: 1rem 0;
  justify-content: center;
  justify-items: center;
}

/* Wide screen layout - 4 columns */
@media (min-width: 768px) {
  .free-bag-flavors-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 800px;
    gap: 1.5rem;
  }
}

.free-bag-flavor-option {
  background-color: rgba(141, 110, 99, 0.1);
  border: 2px solid #d7ccc8;
  border-radius: 12px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'The Wanters DEMO', serif;
  min-height: 220px;
  position: relative;
  text-align: center;
  width: 100%;
  max-width: 170px;
  margin: 0 auto;
}

.free-bag-flavor-option:hover:not(.sold-out) {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  border-color: #27ae60;
  background-color: rgba(141, 110, 99, 0.2);
}

.free-bag-flavor-option.sold-out {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.7);
}

/* Light mode flavor option styling */
.light-mode .free-bag-flavor-option {
  background-color: #f5f5dc;
  border: 2px solid #d7ccc8;
}

.light-mode .free-bag-flavor-option:hover:not(.sold-out) {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  border-color: #27ae60;
  background-color: #f5f5dc;
}

.free-bag-flavor-image-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 1rem auto;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.free-bag-flavor-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}

.free-bag-flavor-name {
  font-family: 'The Wanters DEMO', serif;
  font-size: 2rem;
  font-weight: 700;
  color: #3e2723;
  text-align: center;
  line-height: 1.2;
  margin: 0;
  width: 100%;
  display: block;
  flex-shrink: 0;
}

/* Sold out overlay (matching MainMenu styling) */
.sold-out-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  z-index: 10;
}

.sold-out-text {
  color: white;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
  text-align: center;
  line-height: 1.2;
  font-size: 0.8rem;
}

.sold-out-main {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.sold-out-sub {
  display: block;
  font-size: 0.7rem;
  opacity: 0.8;
}

.free-bag-modal-footer {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
}

.free-bag-modal-cancel {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.3rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
}

.free-bag-modal-cancel:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
}

/* Dark mode styles */
.dark-mode .free-bag-modal-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000 !important;
}

.dark-mode .free-bag-modal {
  background-color: rgba(62, 39, 35, 0.9);
  color: #fff8e1;
  border: 3px solid #8d6e63 !important;
}

.dark-mode .free-bag-modal-title-panel {
  background-color: #3e2723;
  border: 3px solid #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark-mode .free-bag-modal-title {
  color: #8d6e63 !important;
  font-size: 3rem;
  text-shadow: 
    -1px -1px 0 #000,
    -1px 0px 0 #000,
    -1px 1px 0 #000,
    0px -1px 0 #000,
    0px 1px 0 #000,
    1px -1px 0 #000,
    1px 0px 0 #000,
    1px 1px 0 #000 !important;
}

/* Force override with maximum specificity */
body.dark-mode .free-bag-modal-title,
html.dark-mode .free-bag-modal-title,
.dark-mode .free-bag-modal-title {
  color: #8d6e63 !important;
  text-shadow: 
    -1px -1px 0 #000,
    -1px 0px 0 #000,
    -1px 1px 0 #000,
    0px -1px 0 #000,
    0px 1px 0 #000,
    1px -1px 0 #000,
    1px 0px 0 #000,
    1px 1px 0 #000 !important;
}

/* Additional specificity for dark mode */
.free-bag-modal-title.dark-mode {
  color: #8d6e63 !important;
  text-shadow: 
    -1px -1px 0 #000,
    -1px 0px 0 #000,
    -1px 1px 0 #000,
    0px -1px 0 #000,
    0px 1px 0 #000,
    1px -1px 0 #000,
    1px 0px 0 #000,
    1px 1px 0 #000 !important;
}

.dark-mode .free-bag-modal-subtitle {
  color: #8d6e63 !important;
  text-shadow: none !important;
}

.dark-mode .free-bag-flavor-option {
  border: 2px solid #000000 !important;
  background-color: #8d6e63;
}

.dark-mode .free-bag-flavor-option:hover:not(.sold-out) {
  border-color: #27ae60;
  background-color: #a1887f;
}

.dark-mode .free-bag-flavor-name {
  color: #000000;
}

.dark-mode .free-bag-modal-cancel {
  background-color: #8d6e63;
  color: #000000;
  border: 2px solid #000000;
}

.dark-mode .free-bag-modal-cancel:hover {
  background-color: #a1887f;
  color: #000000;
}

/* Dream mode styles */
.dream-mode .free-bag-modal-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream-mode .free-bag-modal {
  background-color: #1a1a1a !important;
  background-image: none !important;
  background-attachment: initial !important;
  background-blend-mode: initial !important;
  background-clip: initial !important;
  background-origin: initial !important;
  background-position: initial !important;
  background-repeat: initial !important;
  background-size: initial !important;
  border: 3px solid #000000;
  box-shadow: none !important;
  position: relative !important;
  z-index: 1000 !important;
  isolation: isolate !important;
  overflow: hidden !important;
  contain: layout style paint !important;
}

/* Nuclear override for middle panel pseudo-elements */
.dream-mode .free-bag-modal::before,
.dream-mode .free-bag-modal::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/* Remove patterns from middle panel child elements */
.dream-mode .free-bag-modal * {
  background-image: none !important;
}

.dream-mode .free-bag-modal-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .free-bag-modal-title {
  color: #ffffff !important;
  text-shadow: 
    -1px -1px 0 #000,
    -1px 0px 0 #000,
    -1px 1px 0 #000,
    0px -1px 0 #000,
    0px 1px 0 #000,
    1px -1px 0 #000,
    1px 0px 0 #000,
    1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .free-bag-modal-subtitle {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .free-bag-flavor-option {
  background-color: #8d6e63 !important;
  background-image: none !important;
  background-attachment: initial !important;
  background-blend-mode: initial !important;
  background-clip: initial !important;
  background-origin: initial !important;
  background-position: initial !important;
  background-repeat: initial !important;
  background-size: initial !important;
  border: 2px solid #000000;
  box-shadow: none !important;
  position: relative !important;
  z-index: 1000 !important;
  isolation: isolate !important;
  overflow: hidden !important;
  contain: layout style paint !important;
}

/* Nuclear override for flavor option pseudo-elements */
.dream-mode .free-bag-flavor-option::before,
.dream-mode .free-bag-flavor-option::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/* Remove patterns from child elements */
.dream-mode .free-bag-flavor-option * {
  background-image: none !important;
}

.dream-mode .free-bag-flavor-option:hover:not(.sold-out) {
  border-color: #27ae60;
  background-color: rgba(60, 30, 80, 0.9);
}

.dream-mode .free-bag-flavor-name {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  animation: none;
}

.dream-mode .free-bag-modal-cancel {
  background-color: #8d6e63 !important;
  background-image: none !important;
  background-attachment: initial !important;
  background-blend-mode: initial !important;
  background-clip: initial !important;
  background-origin: initial !important;
  background-position: initial !important;
  background-repeat: initial !important;
  background-size: initial !important;
  color: #000000;
  text-shadow: none;
  animation: none;
  font-weight: 900;
  border: 3px solid #000000;
  box-shadow: none !important;
  position: relative !important;
  z-index: 1000 !important;
  isolation: isolate !important;
  overflow: hidden !important;
  contain: layout style paint !important;
}

/* Nuclear override for cancel button pseudo-elements */
.dream-mode .free-bag-modal-cancel::before,
.dream-mode .free-bag-modal-cancel::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/* Remove patterns from cancel button child elements */
.dream-mode .free-bag-modal-cancel * {
  background-image: none !important;
}

.dream-mode .free-bag-modal-cancel:hover {
  background-color: #a1887f;
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4);
}

/* Responsive design */
@media (max-width: 768px) {
  .free-bag-modal-background-panel {
    padding: 1rem;
    width: 98%;
  }
  
  .free-bag-modal {
    padding: 1.5rem;
  }
  
  .free-bag-modal-title {
    font-size: 2.6rem;
  }
  
  .free-bag-modal-subtitle {
    font-size: 1.1rem;
  }
  
  .free-bag-flavors-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.8rem;
  }
  
  .free-bag-flavor-option {
    min-height: 160px;
    padding: 0.8rem;
  }
  
  .free-bag-flavor-image-container {
    width: 85px;
    height: 85px;
  }
  
  .free-bag-flavor-name {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .free-bag-modal-background-panel {
    width: 99%;
    padding: 0.75rem;
  }
  
  .free-bag-modal {
    padding: 1.25rem;
  }
  
  .free-bag-modal-title {
    font-size: 2.2rem;
  }
  
  .free-bag-flavors-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
  
  .free-bag-flavor-option {
    min-height: 140px;
    padding: 0.6rem;
  }
  
  .free-bag-flavor-image-container {
    width: 75px;
    height: 75px;
  }
  
  .free-bag-flavor-name {
    font-size: 1.1rem;
  }
  
  .free-bag-modal-cancel {
    font-size: 1.1rem;
    padding: 0.8rem 1.5rem;
  }
} /* Customer Signup Modal Styles - Everdream Theme */

.customer-signup-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 20, 20, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease-out;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

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

.customer-signup-modal {
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #5d4037;
  border-radius: 15px;
  width: 90%;
  max-width: 500px;
  min-width: 320px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  animation: modalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  font-family: 'The Wanters DEMO', serif;
  margin: 0 auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hide scrollbar but maintain scroll functionality */
.customer-signup-modal::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.customer-signup-modal::-webkit-scrollbar-track {
  background: transparent;
}

.customer-signup-modal::-webkit-scrollbar-thumb {
  background: transparent;
}

/* Dark mode */
.customer-signup-modal.dark {
  background: rgba(30, 30, 30, 0.98);
  border: 3px solid #000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
}

/* Dream mode */
.customer-signup-modal.dream {
  background: rgba(20, 20, 20, 0.98);
  border: 3px solid #000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header - Green like SimpleSignInModal */
.customer-signup-modal .modal-header.unified-signin-modal-header {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 50%, #14545c 100%);
  border: 4px solid #0a1a1d;
  border-radius: 15px 15px 0 0;
  padding: 2rem 2rem 1.5rem 2rem;
  text-align: center;
  box-shadow: 0 8px 20px rgba(62, 39, 35, 0.3);
  position: relative;
  margin: -3px -3px 0 -3px;
  width: calc(100% + 6px);
}

.customer-signup-modal .modal-header.unified-signin-modal-header h2 {
  margin: 0;
  color: #f5f5dc;
  font-size: 2rem;
  font-weight: bold;
  font-family: 'The Wanters DEMO', serif;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  text-align: center;
}

/* Content */
.customer-signup-modal-content {
  padding: 1rem 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Title Panel - Like Daydreamers Menu */
.customer-signup-modal-title-panel {
  font-weight: bold;
  margin: 0 auto 2rem auto;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #3e2723;
  border-radius: 8px;
  background-color: #5d4037;
  width: 100%;
  max-width: 350px;
}

.customer-signup-modal-title {
  font-size: 1.8rem;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
}

.dark .customer-signup-modal-title-panel {
  background-color: #333;
  border: 2px solid #000;
  color: #ffffff;
}

.dream .customer-signup-modal-title-panel {
  background-color: #222;
  border: 2px solid #000;
  color: #ffffff;
}

/* Account Type Buttons */
.account-type-buttons {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin: 0 auto 2rem auto;
  width: 100%;
  max-width: 350px;
}

.account-type-button {
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
  min-width: 120px;
  flex: 0 0 auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.selling-button {
  background-color: #14545c;
  color: white;
  border: 3px solid #0a1a1d;
  order: 2; /* Second in vertical stack, right in horizontal */
}

.buying-button {
  background-color: #2e7d32;
  color: white;
  border: 3px solid #1b5e20;
  order: 1; /* First in vertical stack, left in horizontal */
}

.dark .selling-button {
  background-color: #14545c;
  color: #ffffff;
  border: 3px solid #000;
}

.dark .buying-button {
  background-color: #2e7d32;
  color: #ffffff;
  border: 3px solid #000;
}

.dream .selling-button {
  background-color: #14545c;
  color: #ffffff;
  border: 3px solid #000;
}

.dream .buying-button {
  background-color: #2e7d32;
  color: #ffffff;
  border: 3px solid #000;
}

.selling-button:hover {
  background-color: #0e3a40;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(20, 84, 92, 0.4);
}

.buying-button:hover:not(:disabled) {
  background-color: #1b5e20;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(46, 125, 50, 0.4);
}

.buying-button:disabled {
  background-color: #9e9e9e !important;
  color: #666666 !important;
  border: 3px solid #757575 !important;
  cursor: not-allowed;
  opacity: 0.6;
}

.buying-button:disabled:hover {
  transform: none;
  box-shadow: none;
}

.account-type-button.active {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 6px 20px rgba(0, 0, 0, 0.3);
  transform: scale(1.02);
}

.account-type-button.disabled:not(.active) {
  opacity: 0.5;
  filter: grayscale(50%);
}

.customer-signup-modal-description {
  text-align: center;
  margin-bottom: 2rem;
}

.customer-signup-modal-description p {
  color: #5d4037;
  font-size: 1rem;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  line-height: 1.5;
}

.dark .customer-signup-modal-description p {
  color: #ffffff;
}

.dream .customer-signup-modal-description p {
  color: #ffffff;
}

/* Form */
.customer-signup-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Business name label - make it much bigger */
.form-group label[for="businessName"] {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
  text-align: center;
  display: block;
}

/* Reduce gap between business name and first name */
.form-group:has(label[for="businessName"]) {
  margin-bottom: 0.25rem;
}

/* Ensure all admin fields have uniform spacing */
.form-group:has(label[for="adminFirstName"]),
.form-group:has(label[for="adminLastName"]),
.form-group:has(label[for="email"]),
.form-group:has(label[for="adminPhone"]) {
  margin-bottom: 0.5rem;
}

/* Reduce gap between password fields */
.form-group:has(label[for="password"]) {
  margin-bottom: 0.25rem;
}

.form-group:has(label[for="confirmPassword"]) {
  margin-top: 0.25rem;
}

/* Form Background Panel - Everdream Theme */
.form-background-panel {
  background-color: rgba(245, 245, 220, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px, 56px 56px;
  background-position: 0 0, 0 0;
  background-blend-mode: soft-light, normal;
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 2rem;
  margin: 0 auto 1.5rem auto;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 450px;
}

.dark .form-background-panel {
  background-color: rgba(45, 45, 45, 0.95);
  border: 3px solid #000;
  background-image: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.dream .form-background-panel {
  background-color: rgba(34, 34, 34, 0.95);
  border: 3px solid #000;
  background-image: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* Form Panel - Inner panel */
.form-panel {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.dark .form-panel {
  background: rgba(60, 60, 60, 0.98);
  border: 3px solid #333;
}

.dream .form-panel {
  background: rgba(50, 50, 50, 0.98);
  border: 3px solid #333;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
}

.form-group:nth-child(1),
.form-group:nth-child(2) {
  margin-bottom: -0.5rem;
}

.form-group:nth-child(3),
.form-group:nth-child(4) {
  margin-bottom: -0.5rem;
}

/* Divider line between email and password sections */
.form-group:nth-child(2)::after {
  content: '';
  display: block;
  width: 80%;
  height: 1px;
  background-color: #8d6e63;
  margin: 1rem auto;
  opacity: 0.6;
}

.dark .form-group:nth-child(2)::after {
  background-color: #ffffff;
  opacity: 0.4;
}

.dream .form-group:nth-child(2)::after {
  background-color: #ffffff;
  opacity: 0.4;
}

.customer-signup-modal .form-group label {
  color: #5d4037;
  font-weight: 700;
  font-size: 1.2rem;
  font-family: 'The Wanters DEMO', serif;
  text-align: center !important;
  margin-bottom: 0.75rem; /* Increased spacing between label and input */
}

.customer-signup-modal.dark .form-group label {
  color: #ffffff;
}

.customer-signup-modal.dream .form-group label {
  color: #ffffff;
}

.customer-signup-modal .form-group input {
  padding: 0.75rem 1rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  transition: all 0.3s ease;
  font-family: Verdana, sans-serif !important;
  text-align: center;
  width: 80%; /* Wider than before for better mobile support */
  margin: 0 auto; /* Center the inputs */
}

.customer-signup-modal.dark .form-group input {
  background: rgba(80, 80, 80, 0.9);
  color: #ffffff;
  border-color: #000;
  font-family: Verdana, sans-serif !important;
}

.customer-signup-modal.dream .form-group input {
  background: rgba(60, 60, 60, 0.9);
  color: #ffffff;
  border-color: #000;
  font-family: Verdana, sans-serif !important;
}

.form-group input:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 3px rgba(141, 110, 99, 0.2);
}

.dark .form-group input:focus {
  border-color: #888;
  box-shadow: 0 0 0 3px rgba(136, 136, 136, 0.3);
}

.dream .form-group input:focus {
  border-color: #666;
  box-shadow: 0 0 0 3px rgba(102, 102, 102, 0.3);
}

.form-group input:disabled {
  background: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.dark .form-group input:disabled {
  background: #444;
  color: #888;
}

.dream .form-group input:disabled {
  background: #333;
  color: #777;
}

/* Password Input Container */
.password-input-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.customer-signup-modal .password-input-container {
  position: relative;
  width: 80%;
  margin: 0 auto;
}

.customer-signup-modal .password-input-container input {
  padding-right: 3rem;
  width: 100%; /* Full width of container */
  font-family: Verdana, sans-serif !important;
}

.password-toggle {
  position: absolute;
  right: 0.75rem; /* Fixed distance from right edge of container */
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #8d6e63;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  font-size: 1rem;
  transition: color 0.2s ease;
  tabindex: -1; /* Remove from tab order */
  z-index: 10;
}

.dark .password-toggle {
  color: #ffffff;
}

.dream .password-toggle {
  color: #ffffff;
}

.password-toggle:hover:not(:disabled) {
  color: #14545c;
}

.dark .password-toggle:hover:not(:disabled) {
  color: #ccc;
}

.dream .password-toggle:hover:not(:disabled) {
  color: #ccc;
}

.password-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Error Message */
.error-message {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  border: 2px solid rgba(220, 38, 38, 0.3);
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 0.9rem;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
  animation: shake 0.5s ease-in-out;
}

.dark .error-message {
  background: rgba(220, 38, 38, 0.2);
  color: #ff6b6b;
}

.dream .error-message {
  background: rgba(220, 38, 38, 0.2);
  color: #ff6b6b;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Form Actions - Always Vertical Stack */
.form-actions {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  max-width: 350px;
}

/* Pill-shaped buttons */
.customer-signup-modal .signup-btn,
.customer-signup-modal .login-link {
  border-radius: 25px !important;
  padding: 0.75rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid #8d6e63;
  transition: all 0.3s ease;
}

.customer-signup-modal .signup-btn {
  background: linear-gradient(135deg, #14545c 0%, #1a6b75 100%);
  color: #f5f5dc;
  border-color: #0a1a1d;
}

.customer-signup-modal .signup-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #1a6b75 0%, #14545c 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.customer-signup-modal .signup-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.customer-signup-modal .login-link {
  background: transparent;
  color: #5d4037;
  border-color: #8d6e63;
}

.customer-signup-modal .login-link:hover {
  background: rgba(141, 110, 99, 0.1);
}

.customer-signup-modal .primary-button, 
.customer-signup-modal .secondary-button {
  padding: 0.75rem 1.5rem;
  border-radius: 9999px !important;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
  min-width: 120px;
  flex: 0 0 auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.customer-signup-modal .primary-button {
  background-color: #4CAF50;
  color: white;
  border: 3px solid #2e7d32;
}

.customer-signup-modal.dark .primary-button {
  background-color: #4CAF50;
  color: white;
  border: 3px solid #000;
}

.customer-signup-modal.dream .primary-button {
  background-color: #4CAF50;
  color: white;
  border: 3px solid #000;
}

.customer-signup-modal .primary-button:hover:not(:disabled) {
  background-color: #45a049;
  color: white;
  border-color: #2e7d32;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

.customer-signup-modal.dark .primary-button:hover:not(:disabled) {
  background-color: #45a049;
  color: white;
  border-color: #000;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.customer-signup-modal.dream .primary-button:hover:not(:disabled) {
  background-color: #45a049;
  color: #ffffff;
  border-color: #000;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.customer-signup-modal .primary-button:disabled {
  background: #ccc;
  color: #888;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.customer-signup-modal .secondary-button {
  background-color: #f44336;
  color: #ffffff;
  border: 3px solid #d32f2f;
}

.customer-signup-modal.dark .secondary-button {
  background-color: #f44336;
  color: #ffffff;
  border: 3px solid #000;
}

.customer-signup-modal.dream .secondary-button {
  background-color: #f44336;
  color: #ffffff;
  border: 3px solid #000;
}

.customer-signup-modal .secondary-button:hover:not(:disabled) {
  background-color: #d32f2f;
  color: #ffffff;
  border-color: #d32f2f;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(244, 67, 54, 0.4);
}

.customer-signup-modal.dark .secondary-button:hover:not(:disabled) {
  background-color: #d32f2f;
  color: #ffffff;
  border-color: #000;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.customer-signup-modal.dream .secondary-button:hover:not(:disabled) {
  background-color: #d32f2f;
  color: #ffffff;
  border-color: #000;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.customer-signup-modal .secondary-button:disabled {
  background: transparent;
  color: #ccc;
  border-color: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Business Creation Progress - Water Filling Sand Effect */
.business-creation-progress {
  margin-top: 1rem;
  width: 100%;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 12px;
  background: linear-gradient(90deg, 
    #f4d03f 0%, 
    #f7dc6f 20%, 
    #f8dc75 40%, 
    #f9e79f 60%, 
    #fad7a0 80%, 
    #f8c471 100%
  );
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.5rem;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, 
    #3498db 0%, 
    #5dade2 25%, 
    #85c1e9 50%, 
    #aed6f1 75%, 
    #d6eaf8 100%
  );
  border-radius: 6px;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Water wave effect */
.progress-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%
  );
  animation: waterWave 2s ease-in-out infinite;
}

@keyframes waterWave {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

/* Sand getting wetter effect */
.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(52, 152, 219, 0.1) 20%, 
    rgba(52, 152, 219, 0.2) 40%, 
    rgba(52, 152, 219, 0.3) 60%, 
    rgba(52, 152, 219, 0.4) 80%, 
    rgba(52, 152, 219, 0.5) 100%
  );
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.progress-bar.wetting::after {
  opacity: 1;
}

.progress-status {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
  margin-top: 0.5rem;
}

/* Completion message styles */
.completion-message {
  text-align: center;
  padding: 2rem 1rem;
  animation: fadeInUp 0.5s ease-out;
}

.completion-message h3 {
  font-size: 1.5rem;
  color: #2c3e50;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.awesome-button {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  padding: 12px 32px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.awesome-button:hover {
  background: linear-gradient(135deg, #2980b9, #1f5f8b);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}

.awesome-button:active {
  transform: translateY(0);
}

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

.dark .progress-status,
.dream .progress-status {
  color: #ccc;
}

/* Restoration Panel */
.restoration-panel {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.restoration-actions {
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  width: 100%;
}

.restoration-actions .primary-button,
.restoration-actions .secondary-button {
  width: 100%;
  max-width: 300px;
}

/* Large screen optimizations */
@media (min-width: 1200px) {
  .customer-signup-modal {
    max-width: 480px;
  }
  
  .form-background-panel {
    max-width: 420px;
  }
  
  .customer-signup-modal-title-panel {
    max-width: 320px;
  }
  
  .account-type-buttons {
    max-width: 320px;
  }
  
  .form-actions {
    max-width: 320px;
  }
}

/* Tablet responsiveness */
@media (max-width: 768px) {
  .customer-signup-modal {
    width: 95%;
    margin: 1rem;
  }

  .customer-signup-modal-header {
    padding: 0.5rem;
  }

  .customer-signup-modal-content {
    padding: 1rem;
  }

  .form-background-panel {
    padding: 1.5rem;
    max-width: 100%;
  }

  .form-panel {
    padding: 1.5rem;
    gap: 0.75rem;
  }

  .account-type-buttons {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }

  .account-type-button {
    width: 70%;
    max-width: 200px;
  }

  .form-group input {
    width: 90%; /* Even wider on mobile */
  }

  .password-input-container {
    width: 90%; /* Even wider on mobile */
  }

  .password-input-container input {
    width: 100%; /* Full width of container */
  }

  .password-toggle {
    right: 0.75rem; /* Fixed distance from right edge */
  }

  .form-actions {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }

  .customer-signup-modal .primary-button, 
  .customer-signup-modal .secondary-button {
    width: 70%;
    max-width: 200px;
    min-width: 120px;
    padding: 0.65rem 1.3rem;
    font-size: 1.1rem;
  }

  .customer-signup-modal-title-panel {
    max-width: 100%;
  }
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .customer-signup-modal {
    width: 98%;
    margin: 0.5rem;
  }

  .customer-signup-modal-header {
    padding: 0.25rem;
  }

  .customer-signup-modal-content {
    padding: 0.75rem;
  }

  .form-background-panel {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .form-panel {
    padding: 1rem;
    gap: 0.5rem;
  }

  .account-type-buttons {
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    align-items: center;
  }

  .account-type-button {
    width: 80%;
    max-width: 160px;
    font-size: 1.1rem;
    padding: 0.6rem 1.2rem;
  }

  .form-group input {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
    width: 95%; /* Maximum width on small screens */
  }

  .password-input-container input {
    width: 95%; /* Maximum width on small screens */
  }

  .password-toggle {
    right: calc(2.5% + 0.75rem); /* Adjust for smallest screens */
  }

  .form-group label {
    font-size: 1.1rem;
  }

  .form-actions {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }

  .customer-signup-modal .primary-button, 
  .customer-signup-modal .secondary-button {
    padding: 0.6rem 1.2rem;
    font-size: 1.1rem;
    width: 80%;
    max-width: 160px;
    min-width: 100px;
  }

  .customer-signup-modal-title {
    font-size: 1.5rem;
  }
}

/* Loading states */
.customer-signup-modal.loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 100;
  border-radius: 15px;
}

/* Enable smooth touch scrolling */
.customer-signup-modal {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Ensure all scrollable elements have proper touch behavior */
.customer-signup-modal-content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Form Row - for side-by-side inputs */
.form-row {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.form-row .form-group {
  flex: 1;
  margin-bottom: 1rem;
}

/* Form Divider */
.form-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
  margin: 0.75rem 0;
  width: 100%;
}

.dark .form-divider,
.dream .form-divider {
  background: rgba(255, 255, 255, 0.2);
}

/* Form Section Title */
.form-section-title {
  text-align: center;
  margin: 0.5rem 0 0.25rem 0;
}

.form-section-title h3 {
  color: #5d4037;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  text-align: center;
}

.dark .form-section-title h3 {
  color: #ffffff;
}

.dream .form-section-title h3 {
  color: #ffffff;
}

/* Textarea styling */
.form-group textarea {
  padding: 0.75rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.3s ease;
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

.form-group textarea:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.dark .form-group textarea,
.dream .form-group textarea {
  background: rgba(80, 80, 80, 0.9);
  border-color: #000;
  color: #fff;
}

.dark .form-group textarea:focus,
.dream .form-group textarea:focus {
  border-color: #4CAF50;
}

/* Mobile responsiveness for form-row */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .form-row .form-group {
    margin-bottom: 0.5rem;
  }
}

/* Business description with Verdana font */
.business-description-verdana {
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
  font-size: 14px;
  line-height: 1.4;
}

/* Fade to black overlay */
.fade-to-black-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #000000, #1a1a1a);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.5s ease-out;
}

.welcome-message {
  text-align: center;
  color: white;
  max-width: 600px;
  padding: 2rem;
}

.welcome-message h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-message p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #e0e0e0;
}

.app-features {
  text-align: left;
  background: rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.app-features h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: #ffd700;
  text-align: center;
}

.app-features ul {
  list-style: none;
  padding: 0;
}

.app-features li {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: #e0e0e0;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.app-features li:last-child {
  border-bottom: none;
}

/* Top progress modal */
.top-progress-modal {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  min-width: 400px;
  border: 2px solid #4CAF50;
}

.progress-header h3 {
  margin: 0 0 0.5rem 0;
  color: #2c3e50;
  font-size: 1.3rem;
  text-align: center;
}

.progress-header p {
  margin: 0 0 1rem 0;
  color: #666;
  text-align: center;
  font-size: 0.9rem;
}

.top-progress-modal .progress-bar {
  width: 100%;
  height: 12px;
  background: linear-gradient(90deg, 
    #f4d03f 0%, 
    #f7dc6f 20%, 
    #f8dc75 40%, 
    #f9e79f 60%, 
    #fad7a0 80%, 
    #f8c471 100%
  );
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1rem;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.top-progress-modal .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, 
    #3498db 0%, 
    #5dade2 25%, 
    #85c1e9 50%, 
    #aed6f1 75%, 
    #d6eaf8 100%
  );
  border-radius: 6px;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.top-progress-modal .progress-status {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
  text-align: center;
}

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

@keyframes pulse {
  0%, 100% { 
    opacity: 1; 
  }
  50% { 
    opacity: 0.6; 
  }
}/* ===============================================================================
                            RECIPE MODAL STYLING
=============================================================================== */

.recipe-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 1rem;
}

.recipe-modal {
  background: var(--primary-bg);
  border: 3px solid var(--border-color);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  max-width: 95vw;
  max-height: 95vh;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.recipe-modal-content {
  padding: 1rem;
  max-height: 90vh;
  overflow-y: auto;
  /* Hide scrollbar but maintain scroll functionality */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hide scrollbar but maintain scroll functionality */
.recipe-modal-content::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.recipe-modal-content::-webkit-scrollbar-track {
  background: transparent;
}

.recipe-modal-content::-webkit-scrollbar-thumb {
  background: transparent;
}

.recipe-inner-panel {
  background: var(--secondary-bg);
  border: 2px solid var(--border-color);
  border-radius: 15px;
  padding: 1.5rem;
  text-align: center;
}

/* Header */
.recipe-flavour-title-panel {
  background: var(--tertiary-bg);
  padding: 1.5rem;
  margin: -1.5rem -1.5rem 1.5rem -1.5rem;
  border-radius: 15px 15px 0 0;
  border-bottom: 2px solid var(--border-color);
  text-align: center;
}

.recipe-flavour-title-panel h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

/* Product Image Section */
.recipe-image-section {
  background: var(--secondary-bg);
  padding: 1.5rem;
  border-radius: 15px;
  border: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
  text-align: center;
}

.recipe-image-section h4 {
  margin: 0 0 1rem 0;
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
}

.recipe-product-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.recipe-product-image-preview {
  width: 150px;
  height: 150px;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.recipe-product-image-preview:hover {
  border-color: var(--accent-color);
  transform: scale(1.05);
}

.recipe-product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recipe-product-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-align: center;
  padding: 1rem;
}

.recipe-image-upload-btn {
  background: var(--accent-color);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.recipe-image-upload-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
}

/* Yield Section */
.recipe-yield-section {
  background: var(--secondary-bg);
  padding: 1.5rem;
  border-radius: 15px;
  border: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
  text-align: center;
}

.recipe-yield-section h4 {
  margin: 0 0 1rem 0;
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
}

.recipe-yield-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  justify-items: center;
  text-align: center;
}

.recipe-yield-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.recipe-yield-input label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
  text-align: center;
}

.recipe-yield-input .recipe-input {
  width: 80px;
  padding: 0.5rem;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 1rem;
  text-align: center;
  transition: border-color 0.3s ease;
}

.recipe-input {
  padding: 0.75rem;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 1rem;
  transition: border-color 0.3s ease;
  text-align: center;
}

.recipe-input:focus {
  outline: none;
  border-color: var(--accent-color);
}

/* Ingredients Section */
.recipe-ingredients-section {
  background: var(--secondary-bg);
  padding: 1.5rem;
  border-radius: 15px;
  border: 1px solid var(--border-color);
  text-align: center;
}

.recipe-ingredients-title-panel {
  background: var(--tertiary-bg);
  padding: 1.5rem;
  margin: -1.5rem -1.5rem 1.5rem -1.5rem;
  border-radius: 15px 15px 0 0;
  border-bottom: 2px solid var(--border-color);
  text-align: center;
}

.recipe-ingredients-title-panel h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

.recipe-add-ingredient-container {
  text-align: center;
  margin-bottom: 1.5rem;
}

.recipe-add-ingredient-btn {
  background: #9333ea !important;
  color: white !important;
  border: none !important;
  padding: 1rem 2rem !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
  min-width: 120px !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
}

.recipe-add-ingredient-btn:hover {
  background: #a855f7 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Recipe Table - Mobile First Design */
.recipe-table-container {
  overflow-x: auto;
  margin: 0 auto;
  max-width: 100%;
}

.recipe-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem auto 0 auto;
  text-align: center;
}

.recipe-table-header {
  background: var(--tertiary-bg);
}

.recipe-table-header-cell {
  padding: 1rem 0.5rem;
  text-align: center;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-color);
  font-size: 0.9rem;
}

.recipe-table-row {
  border-bottom: 1px solid var(--border-color);
}

.recipe-table-row:hover {
  background: var(--hover-bg);
}

.recipe-table-cell {
  padding: 1rem 0.5rem;
  color: var(--text-primary);
  text-align: center;
  vertical-align: middle;
}

.ingredient-name {
  font-weight: 600;
  min-width: 120px;
  text-align: center;
}

.ingredient-amount {
  min-width: 100px;
  text-align: center;
}

.ingredient-unit {
  min-width: 60px;
  text-align: center;
}

.ingredient-cost {
  min-width: 80px;
  text-align: center;
  font-weight: 600;
  color: var(--accent-color);
}

.ingredient-total-cost {
  min-width: 100px;
  text-align: center;
  font-weight: 600;
  color: var(--success-color);
}

.ingredient-actions {
  min-width: 60px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.recipe-amount-input {
  width: 100%;
  max-width: 80px;
  padding: 0.5rem;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: border-color 0.3s ease;
  text-align: center;
  margin: 0 auto;
}

.recipe-amount-input:focus {
  outline: none;
  border-color: var(--accent-color);
}

.recipe-unit-select {
  width: 100%;
  max-width: 80px;
  padding: 0.5rem;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: border-color 0.3s ease;
  text-align: center;
  margin: 0 auto;
  cursor: pointer;
}

.recipe-unit-select:focus {
  outline: none;
  border-color: var(--accent-color);
}

.recipe-unit-select option {
  text-align: center;
}

.recipe-remove-ingredient-btn {
  background: #dc3545;
  color: white;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin: 0 auto;
}

.recipe-remove-ingredient-btn:hover {
  background: #c82333;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Total Cost Summary Section */
.recipe-total-cost-section {
  background: var(--secondary-bg);
  padding: 1.5rem;
  border-radius: 15px;
  border: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
  text-align: center;
}

.recipe-total-cost-panel {
  background: var(--tertiary-bg);
  padding: 1.5rem;
  border-radius: 10px;
  border: 2px solid var(--border-color);
  text-align: center;
}

.recipe-total-cost-panel h4 {
  margin: 0 0 1rem 0;
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
}

.recipe-total-cost-display {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.total-cost-label {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

.total-cost-amount {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--success-color);
  text-align: center;
  background: var(--accent-color);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Loading State */
.recipe-loading {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Action Buttons */
.recipe-modal-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  flex-wrap: wrap;
  text-align: center;
}

.recipe-save-btn,
.recipe-batch-btn {
  background: var(--success-color);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
  text-align: center;
}

.recipe-save-btn:hover:not(:disabled) {
  background: var(--success-hover);
  transform: translateY(-2px);
}

.recipe-save-btn:disabled {
  background: var(--disabled-color);
  cursor: not-allowed;
  transform: none;
}

.recipe-batch-btn:hover {
  background: var(--success-hover);
  transform: translateY(-2px);
}

.recipe-cancel-btn {
  background: var(--danger-color);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
  text-align: center;
}

.recipe-cancel-btn:hover {
  background: var(--danger-hover);
  transform: translateY(-2px);
}

/* Ingredient Selection Modal */
.ingredient-selection-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1100;
  padding: 1rem;
}

.ingredient-selection-modal {
  background: var(--primary-bg);
  border: 3px solid var(--border-color);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  max-width: 95vw;
  max-height: 95vh;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.ingredient-selection-modal-content {
  padding: 1.5rem;
  max-height: 90vh;
  overflow-y: auto;
}

.ingredient-selection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  text-align: center;
}

.ingredient-selection-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
}

.ingredient-selection-close-btn {
  background: var(--danger-color);
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  text-align: center;
}

.ingredient-selection-close-btn:hover {
  background: var(--danger-hover);
}

.ingredient-selection-search {
  margin-bottom: 1.5rem;
  text-align: center;
}

.ingredient-selection-search-input {
  width: 100%;
  max-width: 300px;
  padding: 1rem;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 1rem;
  font-family: 'Verdana', Geneva, Tahoma, sans-serif;
  transition: border-color 0.3s ease;
  text-align: center;
  margin: 0 auto;
}

.ingredient-selection-search-input:focus {
  outline: none;
  border-color: var(--accent-color);
}

.ingredient-selection-list {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 1.5rem;
}

.ingredient-selection-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--secondary-bg);
  text-align: center;
}

.ingredient-selection-item:hover {
  background: var(--hover-bg);
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

.ingredient-selection-item-name {
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

.ingredient-selection-item-details {
  display: flex;
  gap: 1rem;
  align-items: center;
  text-align: center;
}

.ingredient-selection-item-unit {
  background: var(--accent-color);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}

.ingredient-selection-item-cost {
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-align: center;
}

.ingredient-selection-loading,
.ingredient-selection-empty {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
  font-style: italic;
}

.ingredient-selection-footer {
  text-align: center;
}

.ingredient-selection-cancel-btn {
  background: var(--danger-color);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.ingredient-selection-cancel-btn:hover {
  background: var(--danger-hover);
  transform: translateY(-2px);
}

/* Hide unit column on mobile for better responsiveness */
.recipe-unit-column {
  display: table-cell;
}

/* ===============================================================================
                            RESPONSIVE DESIGN
=============================================================================== */

/* Mobile First - Base styles for all screen sizes */
.recipe-modal {
  padding: 0.5rem;
  width: 98%;
  max-height: 98vh;
}

.recipe-modal-content {
  padding: 0.75rem;
}

.recipe-inner-panel {
  padding: 1rem;
}

.recipe-flavour-title-panel {
  padding: 1rem;
  margin: -1rem -1rem 1rem -1rem;
}

.recipe-flavour-title-panel h3 {
  font-size: 1.6rem;
}

.recipe-ingredients-title-panel {
  padding: 1rem;
  margin: -1rem -1rem 1rem -1rem;
}

.recipe-ingredients-title-panel h4 {
  font-size: 1.4rem;
}

.recipe-table {
  font-size: 0.85rem;
}

.recipe-table-header-cell {
  padding: 0.75rem 0.25rem;
  font-size: 0.8rem;
}

.recipe-table-cell {
  padding: 0.75rem 0.25rem;
}

.ingredient-name {
  min-width: 100px;
}

.ingredient-cost {
  min-width: 70px;
}

.ingredient-amount {
  min-width: 80px;
}

.ingredient-unit {
  min-width: 50px;
}

.ingredient-total-cost {
  min-width: 80px;
}

.ingredient-actions {
  min-width: 50px;
}

.recipe-amount-input {
  max-width: 70px;
  padding: 0.4rem;
  font-size: 0.85rem;
}

.recipe-add-ingredient-btn {
  padding: 0.875rem 1.5rem !important;
  font-size: 0.9rem !important;
  min-width: 140px !important;
}

.recipe-yield-section {
  padding: 1rem;
  margin-bottom: 1rem;
}

.recipe-yield-section h4 {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

.recipe-yield-grid {
  gap: 1rem;
}

.recipe-yield-input .recipe-input {
  width: 70px;
  padding: 0.4rem;
  font-size: 0.9rem;
}

.recipe-modal-buttons {
  flex-direction: column;
  gap: 0.75rem;
}

.recipe-save-btn,
.recipe-batch-btn,
.recipe-cancel-btn {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}

.ingredient-selection-modal {
  padding: 0.75rem;
  width: 98%;
}

.ingredient-selection-item {
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.ingredient-selection-item-details {
  width: 100%;
  justify-content: center;
  gap: 0.75rem;
}

/* Small screens - 480px and larger */
@media (min-width: 480px) {
  .recipe-modal {
    padding: 0.75rem;
    width: 96%;
  }
  
  .recipe-modal-content {
    padding: 1rem;
  }
  
  .recipe-inner-panel {
    padding: 1.25rem;
  }
  
  .recipe-flavour-title-panel {
    padding: 1.25rem;
    margin: -1.25rem -1.25rem 1.25rem -1.25rem;
  }
  
  .recipe-flavour-title-panel h3 {
    font-size: 1.8rem;
  }
  
  .recipe-ingredients-title-panel {
    padding: 1.25rem;
    margin: -1.25rem -1.25rem 1.25rem -1.25rem;
  }
  
  .recipe-ingredients-title-panel h4 {
    font-size: 1.6rem;
  }
  
  .recipe-table {
    font-size: 0.9rem;
  }
  
  .recipe-table-header-cell {
    padding: 0.875rem 0.5rem;
    font-size: 0.85rem;
  }
  
  .recipe-table-cell {
    padding: 0.875rem 0.5rem;
  }
  
  .ingredient-name {
    min-width: 110px;
  }
  
  .ingredient-cost {
    min-width: 75px;
  }
  
  .ingredient-amount {
    min-width: 90px;
  }
  
  .ingredient-unit {
    min-width: 55px;
  }
  
  .ingredient-total-cost {
    min-width: 85px;
  }
  
  .ingredient-actions {
    min-width: 55px;
  }
  
  .recipe-amount-input {
    max-width: 75px;
    padding: 0.5rem;
    font-size: 0.9rem;
  }
  
  .recipe-add-ingredient-btn {
    padding: 1rem 1.75rem !important;
    font-size: 0.95rem !important;
    min-width: 150px !important;
  }
  
  .recipe-yield-section {
    padding: 1.25rem;
  }
  
  .recipe-yield-section h4 {
    font-size: 1.4rem;
  }
  
  .recipe-yield-grid {
    gap: 1.25rem;
  }
  
  .recipe-yield-input .recipe-input {
    width: 75px;
    padding: 0.5rem;
    font-size: 0.95rem;
  }
  
  .recipe-modal-buttons {
    gap: 1rem;
  }
  
  .recipe-save-btn,
  .recipe-batch-btn,
  .recipe-cancel-btn {
    max-width: 220px;
  }
}

/* Medium screens - 600px and larger */
@media (min-width: 600px) {
  .recipe-modal {
    padding: 1rem;
    width: 94%;
  }
  
  .recipe-modal-content {
    padding: 1.25rem;
  }
  
  .recipe-inner-panel {
    padding: 1.5rem;
  }
  
  .recipe-flavour-title-panel {
    padding: 1.5rem;
    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
  }
  
  .recipe-flavour-title-panel h3 {
    font-size: 2rem;
  }
  
  .recipe-ingredients-title-panel {
    padding: 1.5rem;
    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
  }
  
  .recipe-ingredients-title-panel h4 {
    font-size: 1.7rem;
  }
  
  .recipe-table {
    font-size: 0.95rem;
  }
  
  .recipe-table-header-cell {
    padding: 1rem 0.75rem;
    font-size: 0.9rem;
  }
  
  .recipe-table-cell {
    padding: 1rem 0.75rem;
  }
  
  .ingredient-name {
    min-width: 120px;
  }
  
  .ingredient-cost {
    min-width: 80px;
  }
  
  .ingredient-amount {
    min-width: 100px;
  }
  
  .ingredient-unit {
    min-width: 60px;
  }
  
  .ingredient-total-cost {
    min-width: 100px;
  }
  
  .ingredient-actions {
    min-width: 60px;
  }
  
  .recipe-amount-input {
    max-width: 80px;
    padding: 0.5rem;
    font-size: 0.95rem;
  }
  
  .recipe-add-ingredient-btn {
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
    min-width: 160px !important;
  }
  
  .recipe-yield-section {
    padding: 1.5rem;
  }
  
  .recipe-yield-section h4 {
    font-size: 1.5rem;
  }
  
  .recipe-yield-grid {
    gap: 1.5rem;
  }
  
  .recipe-yield-input .recipe-input {
    width: 80px;
    padding: 0.5rem;
    font-size: 1rem;
  }
  
  .recipe-modal-buttons {
    flex-direction: row;
    gap: 1rem;
  }
  
  .recipe-save-btn,
  .recipe-batch-btn,
  .recipe-cancel-btn {
    width: auto;
    max-width: none;
    margin: 0;
  }
  
  .ingredient-selection-item {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }
  
  .ingredient-selection-item-details {
    width: auto;
    justify-content: flex-end;
  }
}

/* Tablet styles - 768px and larger */
@media (min-width: 768px) {
  .recipe-modal {
    padding: 1.5rem;
    width: 90%;
    max-width: 800px;
  }
  
  .recipe-modal-content {
    padding: 1.5rem;
  }
  
  .recipe-inner-panel {
    padding: 2rem;
  }
  
  .recipe-flavour-title-panel {
    padding: 1.5rem;
    margin: -2rem -2rem 1.5rem -2rem;
  }
  
  .recipe-flavour-title-panel h3 {
    font-size: 2.2rem;
  }
  
  .recipe-ingredients-title-panel {
    padding: 1.5rem;
    margin: -2rem -2rem 1.5rem -2rem;
  }
  
  .recipe-ingredients-title-panel h4 {
    font-size: 1.8rem;
  }
  
  .recipe-table {
    font-size: 1rem;
  }
  
  .recipe-table-header-cell {
    padding: 1rem;
    font-size: 1rem;
  }
  
  .recipe-table-cell {
    padding: 1rem;
  }
  
  .ingredient-name {
    min-width: 150px;
  }
  
  .ingredient-cost {
    min-width: 100px;
  }
  
  .ingredient-amount {
    min-width: 120px;
  }
  
  .ingredient-unit {
    min-width: 80px;
  }
  
  .ingredient-total-cost {
    min-width: 120px;
  }
  
  .ingredient-actions {
    min-width: 80px;
  }
  
  .recipe-amount-input {
    max-width: 100px;
    padding: 0.75rem;
    font-size: 1rem;
  }
  
  .recipe-add-ingredient-btn {
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
    min-width: 180px !important;
  }
  
  .recipe-yield-section {
    padding: 1.5rem;
  }
  
  .recipe-yield-section h4 {
    font-size: 1.6rem;
  }
  
  .recipe-yield-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  
  .recipe-yield-input .recipe-input {
    width: 100px;
    padding: 0.75rem;
    font-size: 1rem;
  }
  
  .ingredient-selection-modal {
    padding: 1.5rem;
    width: 90%;
    max-width: 600px;
  }
}

/* Desktop styles - 1024px and larger */
@media (min-width: 1024px) {
  .recipe-modal {
    max-width: 900px;
  }
  
  .recipe-flavour-title-panel h3 {
    font-size: 2.4rem;
  }
  
  .recipe-ingredients-title-panel h4 {
    font-size: 2rem;
  }
  
  .recipe-table {
    font-size: 1.1rem;
  }
  
  .recipe-table-header-cell {
    padding: 1.25rem;
    font-size: 1.1rem;
  }
  
  .recipe-table-cell {
    padding: 1.25rem;
  }
  
  .ingredient-name {
    min-width: 180px;
  }
  
  .ingredient-cost {
    min-width: 120px;
  }
  
  .ingredient-amount {
    min-width: 140px;
  }
  
  .ingredient-total-cost {
    min-width: 140px;
  }
  
  .recipe-amount-input {
    max-width: 120px;
    padding: 0.875rem;
    font-size: 1.1rem;
  }
  
  .recipe-add-ingredient-btn {
    padding: 1.25rem 2.5rem !important;
    font-size: 1.1rem !important;
    min-width: 200px !important;
  }
  
  .recipe-yield-section h4 {
    font-size: 1.8rem;
  }
  
  .recipe-yield-input .recipe-input {
    width: 120px;
    padding: 0.875rem;
    font-size: 1.1rem;
  }
}

/* Large desktop styles - 1200px and larger */
@media (min-width: 1200px) {
  .recipe-modal {
    max-width: 1000px;
  }
  
  .recipe-flavour-title-panel h3 {
    font-size: 2.6rem;
  }
  
  .recipe-ingredients-title-panel h4 {
    font-size: 2.2rem;
  }
  
  .recipe-table {
    font-size: 1.2rem;
  }
  
  .recipe-table-header-cell {
    padding: 1.5rem;
    font-size: 1.2rem;
  }
  
  .recipe-table-cell {
    padding: 1.5rem;
  }
  
  .ingredient-name {
    min-width: 200px;
  }
  
  .ingredient-cost {
    min-width: 140px;
  }
  
  .ingredient-amount {
    min-width: 160px;
  }
  
  .ingredient-total-cost {
    min-width: 160px;
  }
  
  .recipe-amount-input {
    max-width: 140px;
    padding: 1rem;
    font-size: 1.2rem;
  }
  
  .recipe-add-ingredient-btn {
    padding: 1.5rem 3rem !important;
    font-size: 1.2rem !important;
    min-width: 220px !important;
  }
  
  .recipe-yield-section h4 {
    font-size: 2rem;
  }
  
  .recipe-yield-input .recipe-input {
    width: 140px;
    padding: 1rem;
    font-size: 1.2rem;
  }
} /* Costs and Profits Page - Clean Boilerplate Styling */

.costs-profits-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  background-color: #f5f5dc;
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

.costs-profits-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: -1;
}

.costs-profits-background-panel {
  background-color: rgba(245, 245, 220, 0.9);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 1400px;
  width: 95%;
  position: relative;
  z-index: 2;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.costs-profits-container {
  width: 100%;
  background-color: #f5f5dc;
  background-image: none;
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 3;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: isolate;
}

.costs-profits-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5f5dc;
  border-radius: 8px;
  z-index: -1;
}

/* Header Styles */
.costs-profits-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #3e2723;
  width: 100%;
}

.costs-profits-title {
  text-align: center;
  color: #3e2723;
  font-family: 'The Wanters DEMO', serif;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 auto;
  text-shadow: 2px 2px 4px rgba(62, 39, 35, 0.3);
  width: 100%;
}

.back-to-admin-btn,
.record-batch-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #6d4c41 100%);
  color: #ffffff;
  border: 3px solid #000000;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
}

.back-to-admin-btn:hover,
.record-batch-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, #a1887f 0%, #8d6e63 100%);
}

/* Content Area */
.costs-profits-content-area {
  width: 100%;
  margin-top: 2rem;
}

.blank-panel {
  background-color: #f5f5dc;
  background-image: none;
  border: 3px solid #5d4037;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-bottom: 2rem;
  position: relative;
  z-index: 3;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: isolate;
}

.blank-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5f5dc;
  border-radius: 12px;
  z-index: -1;
}

.panel-title {
  background: linear-gradient(135deg, #8d6e63 0%, #5d4037 100%);
  color: #ffffff;
  padding: 1rem 2rem;
  border-radius: 12px 12px 0 0;
  border-bottom: 2px solid #000000;
  margin: -2rem -2rem 2rem -2rem;
}

.panel-title h2 {
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
}

.panel-content {
  padding: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blank-content {
  text-align: center;
  padding: 2rem 0;
}

.blank-content p {
  font-size: 1.2rem;
  color: #3e2723;
  margin-bottom: 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 500;
}

.placeholder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.placeholder-item {
  background: linear-gradient(135deg, #f5f5dc 0%, #e8e0c8 100%);
  border: 2px dashed #8d6e63;
  border-radius: 8px;
  padding: 2rem 1rem;
  text-align: center;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #5d4037;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.placeholder-item::before {
  content: '📋';
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}

.placeholder-item:hover {
  background: linear-gradient(135deg, #e8e0c8 0%, #d7ccc8 100%);
  border-color: #5d4037;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.2);
}

/* Light Mode (Default) */
.costs-profits-page.light-mode {
  background-color: #f5f5dc;
}

.costs-profits-page.light-mode::before {
  background-color: rgba(245, 245, 220, 0.85);
}

.light-mode .costs-profits-background-panel {
  background-color: rgba(245, 245, 220, 0.9);
  border-color: #5d4037;
}

.light-mode .costs-profits-container {
  background-color: #f5f5dc;
  background-image: none;
  border-color: #5d4037;
}

.light-mode .costs-profits-header {
  border-bottom-color: #3e2723;
}

.light-mode .costs-profits-title {
  color: #3e2723;
  text-shadow: 2px 2px 4px rgba(62, 39, 35, 0.3);
}

.light-mode .blank-panel {
  background-color: #f5f5dc;
  background-image: none;
  border-color: #5d4037;
}

.light-mode .blank-content p {
  color: #3e2723;
}

.light-mode .placeholder-item {
  background: linear-gradient(135deg, #f5f5dc 0%, #e8e8d0 100%);
  border-color: #8d6e63;
  color: #3e2723;
}

.light-mode .placeholder-item:hover {
  background: linear-gradient(135deg, #e8e8d0 0%, #d4d4c0 100%);
  border-color: #6d4c41;
}

/* Dark Mode */
.costs-profits-page.dark-mode {
  background-color: #3e2723;
}

.dark-mode .costs-profits-background-panel {
  background-color: rgba(62, 39, 35, 0.9);
  border-color: #1a0033;
}

.dark-mode .costs-profits-container {
  background-color: rgba(42, 42, 42, 0.9);
  border-color: #1a0033;
}

.dark-mode .costs-profits-header {
  border-bottom-color: #1a0033;
}

.dark-mode .costs-profits-title {
  color: #ffffff;
}

.dark-mode .back-to-admin-btn,
.dark-mode .record-batch-btn {
  border-color: #000000;
}

.dark-mode .blank-panel {
  background-color: rgba(42, 42, 42, 0.95);
  border-color: #1a0033;
}

.dark-mode .blank-content p {
  color: #ffffff;
}

.dark-mode .placeholder-item {
  background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%);
  border-color: #666;
  color: #ffffff;
}

.dark-mode .placeholder-item:hover {
  background: linear-gradient(135deg, #5a5a5a 0%, #4a4a4a 100%);
  border-color: #888;
}

/* Dream Mode */
.costs-profits-page.dream-mode {
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 50%, #6a1b9a 100%);
}

.dream-mode .costs-profits-background-panel {
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #4a148c;
}

.dream-mode .costs-profits-container {
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #4a148c;
}

.dream-mode .costs-profits-header {
  border-bottom-color: #4a148c;
}

.dream-mode .costs-profits-title {
  color: #4a148c;
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
}

.dream-mode .back-to-admin-btn,
.dream-mode .record-batch-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .back-to-admin-btn:hover,
.dream-mode .record-batch-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .blank-panel {
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #4a148c;
}

.dream-mode .panel-title {
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 50%, #6a1b9a 100%);
  border: 3px solid #1a0033;
  border-radius: 12px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.4);
}

.dream-mode .panel-title h2 {
  color: #ffffff;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
}

.dream-mode .blank-content p {
  color: #4a148c;
}

.dream-mode .placeholder-item {
  background: linear-gradient(135deg, #f5f5dc 0%, #e8e0c8 100%);
  border: 2px dashed #4a148c;
  color: #4a148c;
}

.dream-mode .placeholder-item:hover {
  background: linear-gradient(135deg, #e8e0c8 0%, #d7ccc8 100%);
  border-color: #6a1b9a;
  box-shadow: 0 4px 12px rgba(74, 20, 140, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .costs-profits-page {
    padding: 10px;
  }
  
  .costs-profits-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .costs-profits-title {
    font-size: 2rem;
  }
  
  .placeholder-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
  }
  
  .placeholder-item {
    padding: 1.5rem 0.5rem;
    font-size: 1rem;
  }
  
  .blank-content p {
    font-size: 1rem;
  }

  /* Recipe Cards Mobile */
  .recipe-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.2rem;
    padding: 0.2rem;
  }
  
  .recipe-product-card {
    padding: 1.2rem;
  }
  
  .recipe-card-image-container {
    width: 100px;
    height: 100px;
  }
  
  .recipe-card-title {
    font-size: 1.3rem;
  }
  
  .recipe-card-details {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }
  
  .recipe-ingredient-count {
    font-size: 0.8rem;
  }
  
  .recipe-pill-btn {
    padding: 0.8rem 2.2rem;
    font-size: 1.1rem;
  }

  /* Recipe Modal Mobile */
  .recipe-ingredients-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .recipe-ingredient-card {
    padding: 0.6rem;
    gap: 0.5rem;
    max-width: 180px;
  }

  .recipe-ingredient-title {
    font-size: 1rem;
  }

  .recipe-input {
    width: 70px;
    padding: 0.4rem;
    font-size: 0.9rem;
  }

  .recipe-ingredient-remove-btn {
    width: 18px;
    height: 18px;
    font-size: 0.8rem;
    top: 0.2rem;
    right: 0.2rem;
  }
}

@media (max-width: 480px) {
  .costs-profits-container {
    padding: 1rem;
  }
  
  .panel-content {
    padding: 1rem;
  }
  
  .costs-profits-title {
    font-size: 1.5rem;
  }
  
  .placeholder-grid {
    grid-template-columns: 1fr;
  }

  /* Recipe Cards Small Mobile */
  .recipe-cards-grid {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    padding: 0.2rem;
  }
  
  .recipe-product-card {
    padding: 1rem;
  }
  
  .recipe-card-image-container {
    width: 80px;
    height: 60px;
  }
  
  .recipe-card-title {
    font-size: 1.1rem;
  }
  
  .recipe-card-details {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
  
  .recipe-ingredient-count {
    font-size: 0.7rem;
  }
  
  .recipe-pill-btn {
    padding: 0.8rem 2.2rem;
    font-size: 1.1rem;
  }

  /* Recipe Modal Small Mobile */
  .recipe-ingredients-grid {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .recipe-ingredient-card {
    padding: 0.5rem;
    gap: 0.4rem;
    max-width: 100%;
  }

  .recipe-ingredient-title {
    font-size: 0.9rem;
  }

  .recipe-input {
    width: 60px;
    padding: 0.3rem;
    font-size: 0.8rem;
  }

  .recipe-ingredient-remove-btn {
    width: 16px;
    height: 16px;
    font-size: 0.7rem;
    top: 0.1rem;
    right: 0.1rem;
  }
}

/* Recipe Product Cards */
.recipe-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
  margin-top: 0.3rem;
  padding: 0.3rem;
  justify-items: center;
}

.recipe-product-card {
  background: #f8f5f0;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 0.8rem;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.recipe-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  background: #fff8e1;
}

.recipe-card-image-container {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid #8d6e63;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.recipe-product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 9px;
}

.recipe-card-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}

.recipe-card-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: #2c1810;
  margin: 0;
  text-align: center;
  line-height: 1.3;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
}

.recipe-card-title::before {
  content: '';
  position: absolute;
  top: -0.5rem;
  left: -1rem;
  right: -1rem;
  bottom: -0.5rem;
  background: rgba(141, 110, 99, 0.1);
  border: 2px solid rgba(141, 110, 99, 0.2);
  border-radius: 8px;
  z-index: -1;
}

.recipe-card-details {
  font-family: 'The Wanters DEMO', serif;
  font-size: 0.9rem;
  color: #5d4037;
  margin: 0;
  text-align: center;
  opacity: 0.9;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  background: rgba(141, 110, 99, 0.1);
  border-radius: 8px;
  border: 2px solid rgba(141, 110, 99, 0.2);
}

.recipe-ingredient-count {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: capitalize;
}

.recipe-pill-btn {
  background: #9333ea;
  color: #ffffff;
  border: 3px solid #6b21a8;
  border-radius: 9999px; /* Match save button's pill shape */
  padding: 0.8rem 2.2rem; /* Match save button padding */
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900; /* Match save button weight */
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease; /* Match save button transition */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  margin-top: auto;
  width: 100%;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.recipe-pill-btn:hover {
  background: #a855f7;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Dark Mode Recipe Styles */
.dark-mode .recipe-product-card {
  background: #3e2723;
  border-color: #8d6e63;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.dark-mode .recipe-product-card:hover {
  background: #5d4037;
  border-color: #8d6e63;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
}

.dark-mode .recipe-card-image-container {
  border-color: #8d6e63;
  background-color: #2c1810;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.dark-mode .recipe-card-title {
  color: #fff8e1;
}

.dark-mode .recipe-card-title::before {
  background: rgba(141, 110, 99, 0.2);
  border-color: rgba(141, 110, 99, 0.3);
}

.dark-mode .recipe-card-details {
  color: #fff8e1;
  background: rgba(141, 110, 99, 0.2);
  border-color: rgba(141, 110, 99, 0.3);
}

.dark-mode .recipe-ingredient-count {
  color: #fff8e1;
}

.dark-mode .recipe-pill-btn {
  background: #9333ea;
  border-color: #000000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.dark-mode .recipe-pill-btn:hover {
  background: #a855f7;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Dream Mode Recipe Styles */
.dream-mode .recipe-product-card {
  background: linear-gradient(135deg, #f8f5f0 0%, #fff8e1 100%);
  border: 3px solid #8d6e63;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(141, 110, 99, 0.1);
}

.dream-mode .recipe-product-card:hover {
  background: linear-gradient(135deg, #fff8e1 0%, #f5f5dc 100%);
  border-color: #8d6e63;
  box-shadow: 0 6px 12px rgba(141, 110, 99, 0.3);
}

.dream-mode .recipe-card-image-container {
  border-color: #8d6e63;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.dream-mode .recipe-card-title {
  color: #3e2723;
  text-shadow: 1px 1px 2px rgba(62, 39, 35, 0.1);
}

.dream-mode .recipe-card-title::before {
  background: rgba(141, 110, 99, 0.1);
  border-color: rgba(141, 110, 99, 0.2);
}

.dream-mode .recipe-card-details {
  color: #5d4037;
  background: rgba(141, 110, 99, 0.1);
  border-color: rgba(141, 110, 99, 0.2);
}

.dream-mode .recipe-ingredient-count {
  color: #5d4037;
}

.dream-mode .recipe-pill-btn {
  background: #9333ea;
  border-color: #000000;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.dream-mode .recipe-pill-btn:hover {
  background: #a855f7;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Recipe Modal Ingredient Unit Style */
.ingredient-unit {
  margin-left: 0.5rem;
  font-size: 1.2rem;
  color: #3e2723;
  font-weight: 600;
  min-width: 30px;
  text-align: center;
}

/* Recipe Yield Section */
.recipe-yield-section {
  margin-top: 2rem;
  margin-bottom: 3rem;
  padding-top: 1.5rem;
  border-top: 2px solid #8d6e63;
}

.recipe-yield-section h4 {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #3e2723;
  margin: 0 0 1rem 0;
  text-align: center;
}

.recipe-yield-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.recipe-yield-input {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.recipe-yield-input label {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 600;
  color: #5d4037;
  margin-bottom: 0.5rem;
  text-align: center;
}

.recipe-yield-input .recipe-input {
  width: 80px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
}

.dark-mode .ingredient-unit {
  color: #ccc;
}

.dark-mode .recipe-yield-section {
  border-top-color: #555;
}

.dark-mode .recipe-yield-section h4 {
  color: #ffffff;
}

.dark-mode .recipe-yield-input label {
  color: #cccccc;
}

.dream-mode .ingredient-unit {
  color: #6a1b9a;
}

.dream-mode .recipe-yield-section {
  border-top-color: #4a148c;
}

.dream-mode .recipe-yield-section h4 {
  color: #4a148c;
  text-shadow: 0 1px 2px rgba(74, 20, 140, 0.1);
}

.dream-mode .recipe-yield-input label {
  color: #6a1b9a;
}

/* Recipe Ingredients Section */
.recipe-ingredients-section {
  background: rgba(141, 110, 99, 0.1);
  border: 2px solid rgba(141, 110, 99, 0.2);
  border-radius: 12px;
  padding: 2rem;
  margin-top: 1rem;
}

.recipe-ingredients-section h4 {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #3e2723;
  margin: 0 0 1.5rem 0;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.recipe-ingredients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
  max-width: 100%;
}

.recipe-ingredient-card {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(141, 110, 99, 0.2);
  border-radius: 12px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: all 0.3s ease;
  position: relative;
  min-width: 0;
  max-width: 200px;
  margin: 0 auto;
}

.recipe-ingredient-card:hover {
  border-color: rgba(141, 110, 99, 0.4);
  box-shadow: 0 4px 12px rgba(141, 110, 99, 0.15);
  transform: translateY(-2px);
}

.recipe-ingredient-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.recipe-ingredient-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #3e2723;
  margin: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.recipe-ingredient-input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.recipe-input {
  width: 80px;
  padding: 0.5rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  background: #ffffff;
  color: #3e2723;
  transition: all 0.3s ease;
  
  /* Remove spinner arrows */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

/* Hide WebKit spinner arrows for recipe-input */
.recipe-input::-webkit-outer-spin-button,
.recipe-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.recipe-input:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 3px rgba(141, 110, 99, 0.2);
  transform: scale(1.02);
}

.recipe-input::placeholder {
  color: #a1887f;
  opacity: 0.7;
}

/* Dark Mode Recipe Ingredients */
.dark-mode .recipe-ingredients-section {
  background: rgba(141, 110, 99, 0.2);
  border-color: rgba(141, 110, 99, 0.3);
}

.dark-mode .recipe-ingredients-section h4 {
  color: #fff8e1;
}

.dark-mode .recipe-ingredient-card {
  background: rgba(62, 39, 35, 0.9);
  border-color: rgba(141, 110, 99, 0.3);
}

.dark-mode .recipe-ingredient-card:hover {
  border-color: rgba(141, 110, 99, 0.5);
  box-shadow: 0 4px 12px rgba(141, 110, 99, 0.25);
}

.dark-mode .recipe-ingredient-title {
  color: #fff8e1;
}

.dark-mode .recipe-input {
  background: #2c1810;
  border-color: #8d6e63;
  color: #fff8e1;
}

.dark-mode .recipe-input:focus {
  border-color: #a1887f;
  box-shadow: 0 0 0 3px rgba(141, 110, 99, 0.3);
}

/* Dream Mode Recipe Ingredients */
.dream-mode .recipe-ingredients-section {
  background: rgba(141, 110, 99, 0.1);
  border-color: rgba(141, 110, 99, 0.2);
}

.dream-mode .recipe-ingredients-section h4 {
  color: #3e2723;
}

.dream-mode .recipe-ingredient-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(141, 110, 99, 0.3);
}

.dream-mode .recipe-ingredient-card:hover {
  border-color: rgba(141, 110, 99, 0.5);
  box-shadow: 0 4px 12px rgba(141, 110, 99, 0.2);
}

.dream-mode .recipe-ingredient-title {
  color: #3e2723;
}

.dream-mode .recipe-input {
  background: #ffffff;
  border-color: #8d6e63;
  color: #3e2723;
}

.dream-mode .recipe-input:focus {
  border-color: #5d4037;
  box-shadow: 0 0 0 3px rgba(141, 110, 99, 0.2);
}

/* Recipe Add Ingredient Button */
.recipe-add-ingredient-container {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(141, 110, 99, 0.2);
}

.recipe-add-ingredient-btn {
  background: #9333ea;
  color: #ffffff;
  border: 3px solid #000000;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recipe-add-ingredient-btn:hover {
  background: #a855f7;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Recipe Ingredient Search Popup */
.recipe-ingredient-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 2rem;
}

.recipe-ingredient-popup {
  background: #f8f5f0;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.recipe-ingredient-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #8d6e63;
}

.recipe-ingredient-popup-header h4 {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #3e2723;
  margin: 0;
}

.recipe-ingredient-popup-close {
  background: #dc2626;
  color: #ffffff;
  border: 2px solid #000000;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.recipe-ingredient-popup-close:hover {
  background: #ef4444;
  transform: scale(1.1);
}

.recipe-ingredient-search {
  width: 100%;
  padding: 0.8rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  background: #ffffff;
  color: #3e2723;
  margin-bottom: 1rem;
}

.recipe-ingredient-search:focus {
  outline: none;
  border-color: #5d4037;
  box-shadow: 0 0 0 3px rgba(141, 110, 99, 0.2);
}

.recipe-ingredient-results {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(141, 110, 99, 0.2);
  border-radius: 8px;
  background: #ffffff;
}

.recipe-ingredient-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(141, 110, 99, 0.1);
}

.recipe-ingredient-result:last-child {
  border-bottom: none;
}

.recipe-ingredient-result:hover {
  background: rgba(141, 110, 99, 0.1);
}

.recipe-ingredient-result.selected {
  background: rgba(147, 51, 234, 0.2);
  border-left: 3px solid #9333ea;
}

.ingredient-name {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 600;
  color: #3e2723;
}

.ingredient-unit-badge {
  background: #8d6e63;
  color: #ffffff;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.recipe-ingredient-popup-buttons {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.recipe-ingredient-confirm-btn {
  background: #16a34a;
  color: #ffffff;
  border: 2px solid #000000;
  border-radius: 8px;
  padding: 0.8rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.recipe-ingredient-confirm-btn:hover:not(:disabled) {
  background: #22c55e;
  transform: translateY(-2px);
}

.recipe-ingredient-confirm-btn:disabled {
  background: #6b7280;
  cursor: not-allowed;
  transform: none;
}

.recipe-ingredient-cancel-btn {
  background: #dc2626;
  color: #ffffff;
  border: 2px solid #000000;
  border-radius: 8px;
  padding: 0.8rem 1.5rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.recipe-ingredient-cancel-btn:hover {
  background: #ef4444;
  transform: translateY(-2px);
}

/* Dark Mode Recipe Add Ingredient */
.dark-mode .recipe-add-ingredient-btn {
  background: #9333ea;
  border-color: #000000;
}

.dark-mode .recipe-add-ingredient-btn:hover {
  background: #a855f7;
}

.dark-mode .recipe-ingredient-popup {
  background: #3e2723;
  border-color: #8d6e63;
}

.dark-mode .recipe-ingredient-popup-header h4 {
  color: #fff8e1;
}

.dark-mode .recipe-ingredient-search {
  background: #2c1810;
  border-color: #8d6e63;
  color: #fff8e1;
}

.dark-mode .recipe-ingredient-search:focus {
  border-color: #a1887f;
}

.dark-mode .recipe-ingredient-results {
  background: #2c1810;
  border-color: rgba(141, 110, 99, 0.3);
}

.dark-mode .recipe-ingredient-result {
  border-bottom-color: rgba(141, 110, 99, 0.2);
}

.dark-mode .recipe-ingredient-result:hover {
  background: rgba(141, 110, 99, 0.2);
}

.dark-mode .recipe-ingredient-result.selected {
  background: rgba(147, 51, 234, 0.3);
}

.dark-mode .ingredient-name {
  color: #fff8e1;
}

/* Dream Mode Recipe Add Ingredient */
.dream-mode .recipe-add-ingredient-btn {
  background: #9333ea;
  border-color: #000000;
}

.dream-mode .recipe-add-ingredient-btn:hover {
  background: #a855f7;
}

.dream-mode .recipe-ingredient-popup {
  background: linear-gradient(135deg, #f8f5f0 0%, #fff8e1 100%);
  border-color: #8d6e63;
}

.dream-mode .recipe-ingredient-popup-header h4 {
  color: #3e2723;
}

.dream-mode .recipe-ingredient-search {
  background: #ffffff;
  border-color: #8d6e63;
  color: #3e2723;
}

.dream-mode .recipe-ingredient-search:focus {
  border-color: #5d4037;
}

.dream-mode .recipe-ingredient-results {
  background: #ffffff;
  border-color: rgba(141, 110, 99, 0.2);
}

.dream-mode .recipe-ingredient-result {
  border-bottom-color: rgba(141, 110, 99, 0.1);
}

.dream-mode .recipe-ingredient-result:hover {
  background: rgba(141, 110, 99, 0.1);
}

.dream-mode .recipe-ingredient-result.selected {
  background: rgba(147, 51, 234, 0.2);
}

.dream-mode .ingredient-name {
  color: #3e2723;
}

/* Recipe Ingredient Remove Button */
.recipe-ingredient-remove-btn {
  background: #dc2626;
  color: #ffffff;
  border: 2px solid #000000;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  z-index: 1;
}

.recipe-ingredient-remove-btn:hover {
  background: #ef4444;
  transform: scale(1.1);
}

/* Recipe Ingredient Checkmark */
.ingredient-checkmark {
  background: #16a34a;
  color: #ffffff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  flex-shrink: 0;
}

/* Update recipe ingredient row to accommodate remove button */
.recipe-ingredient-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  border: 1px solid rgba(141, 110, 99, 0.1);
  position: relative;
}

.recipe-ingredient-input-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

/* Dark Mode Recipe Ingredient Remove Button */
.dark-mode .recipe-ingredient-remove-btn {
  background: #dc2626;
  border-color: #000000;
}

.dark-mode .recipe-ingredient-remove-btn:hover {
  background: #ef4444;
}

/* Dream Mode Recipe Ingredient Remove Button */
.dream-mode .recipe-ingredient-remove-btn {
  background: #dc2626;
  border-color: #000000;
}

.dream-mode .recipe-ingredient-remove-btn:hover {
  background: #ef4444;
}

/* Recipe Table Styles */
.recipe-table-container {
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #8b6f63;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 1rem 0;
}

.recipe-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'The Wanters DEMO', serif;
}

.recipe-table-header {
  background: linear-gradient(135deg, #8b6f63 0%, #5d4037 100%);
}

.recipe-table-header-cell {
  padding: 1rem;
  text-align: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 1.1rem;
  border-bottom: 2px solid #2c1810;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.recipe-table-row {
  border-bottom: 1px solid #e0e0e0;
  transition: all 0.2s ease;
}

.recipe-table-row:hover {
  background: rgba(245, 245, 220, 0.3);
  transform: translateX(3px);
}

.recipe-table-cell {
  padding: 1rem;
  text-align: center;
  vertical-align: middle;
  color: #2c1810;
  font-weight: 600;
  font-size: 1rem;
}

.recipe-table-cell.ingredient-name {
  font-weight: 700;
  color: #1a1a1a;
  text-align: left;
}

.recipe-table-cell.ingredient-unit {
  font-weight: 800;
  color: #5d4037;
  text-transform: capitalize;
  font-size: 0.9rem;
}

.recipe-amount-input {
  width: 100%;
  max-width: 120px;
  padding: 0.5rem;
  border: 2px solid #8b6f63;
  border-radius: 8px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  color: #2c1810;
  transition: all 0.3s ease;
  
  /* Remove spinner arrows */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

/* Hide WebKit spinner arrows */
.recipe-amount-input::-webkit-outer-spin-button,
.recipe-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.recipe-amount-input:focus {
  border-color: #5d4037;
  box-shadow: 0 0 8px rgba(93, 64, 55, 0.3);
  background: rgba(255, 255, 255, 1);
  outline: none;
}

.recipe-remove-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: white;
  border: 2px solid #b91c1c;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.recipe-remove-btn:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.recipe-empty-ingredients {
  text-align: center;
  padding: 2rem;
  color: #6b7280;
  font-size: 1.1rem;
  font-style: italic;
  background: rgba(255, 255, 255, 0.5);
  border: 2px dashed #8b6f63;
  border-radius: 10px;
  margin: 1rem 0;
}

/* Dark Mode Recipe Table */
.dark-mode .recipe-table-container {
  background: rgba(45, 32, 28, 0.9);
  border-color: #8b6f63;
}

.dark-mode .recipe-table-cell {
  color: #d7ccc8;
}

.dark-mode .recipe-table-cell.ingredient-name {
  color: #ffffff;
}

.dark-mode .recipe-amount-input {
  background: rgba(45, 32, 28, 0.9);
  border-color: #8b6f63;
  color: #d7ccc8;
}

.dark-mode .recipe-amount-input:focus {
  background: rgba(45, 32, 28, 1);
  border-color: #a78bfa;
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.3);
}

.dark-mode .recipe-empty-ingredients {
  background: rgba(45, 32, 28, 0.5);
  border-color: #8b6f63;
  color: #8b6f63;
}

/* Dream Mode Recipe Table */
.dream-mode .recipe-table-container {
  background: rgba(255, 248, 225, 0.95);
  border-color: #b8860b;
}

.dream-mode .recipe-table-header {
  background: linear-gradient(135deg, #b8860b 0%, #8b6914 100%);
}

.dream-mode .recipe-amount-input {
  background: rgba(255, 248, 225, 0.9);
  border-color: #b8860b;
  color: #5d4037;
}

.dream-mode .recipe-amount-input:focus {
  background: rgba(255, 248, 225, 1);
  border-color: #8b6914;
  box-shadow: 0 0 10px rgba(184, 134, 11, 0.4);
}

.dream-mode .recipe-empty-ingredients {
  background: rgba(255, 248, 225, 0.5);
  border-color: #b8860b;
  color: #8b6914;
}

/* Responsive Design for Recipe Table */
@media (min-width: 1200px) {
  .recipe-table-container {
    margin: 2rem 0;
  }
  
  .recipe-table-header-cell {
    padding: 1.5rem;
    font-size: 1.3rem;
  }
  
  .recipe-table-cell {
    padding: 1.5rem;
    font-size: 1.1rem;
  }
  
  .recipe-amount-input {
    max-width: 150px;
    padding: 0.7rem;
    font-size: 1.1rem;
  }
  
  .recipe-remove-btn {
    padding: 0.7rem 1.5rem;
    font-size: 1rem;
  }
}

@media (max-width: 1024px) {
  .recipe-table-header-cell {
    padding: 0.8rem;
    font-size: 1rem;
  }
  
  .recipe-table-cell {
    padding: 0.8rem;
    font-size: 0.95rem;
  }
  
  .recipe-amount-input {
    max-width: 100px;
    padding: 0.4rem;
    font-size: 0.9rem;
  }
  
  .recipe-remove-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .recipe-table-container {
    margin: 1rem 0;
    border-radius: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .recipe-table {
    min-width: 600px;
  }
  
  .recipe-table-header-cell {
    padding: 0.7rem 0.5rem;
    font-size: 0.9rem;
    white-space: nowrap;
  }
  
  .recipe-table-cell {
    padding: 0.7rem 0.5rem;
    font-size: 0.85rem;
  }
  
  .recipe-table-cell.ingredient-name {
    min-width: 120px;
    max-width: 150px;
    text-align: left;
    word-wrap: break-word;
  }
  
  .recipe-table-cell.ingredient-amount {
    min-width: 80px;
  }
  
  .recipe-table-cell.ingredient-unit {
    min-width: 50px;
  }
  
  .recipe-table-cell.ingredient-actions {
    min-width: 90px;
  }
  
  .recipe-amount-input {
    max-width: 70px;
    padding: 0.4rem 0.2rem;
    font-size: 0.85rem;
  }
  
  .recipe-remove-btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    border-radius: 15px;
  }
  
  .recipe-empty-ingredients {
    padding: 1.5rem 1rem;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .recipe-table-container {
    border-radius: 8px;
    margin: 0.5rem 0;
  }
  
  .recipe-table {
    min-width: 500px;
  }
  
  .recipe-table-header-cell {
    padding: 0.5rem 0.3rem;
    font-size: 0.8rem;
  }
  
  .recipe-table-cell {
    padding: 0.5rem 0.3rem;
    font-size: 0.8rem;
  }
  
  .recipe-table-cell.ingredient-name {
    min-width: 100px;
    max-width: 120px;
    font-size: 0.75rem;
  }
  
  .recipe-amount-input {
    max-width: 60px;
    padding: 0.3rem 0.1rem;
    font-size: 0.8rem;
  }
  
  .recipe-remove-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    border-radius: 12px;
  }
  
  .recipe-empty-ingredients {
    padding: 1rem;
    font-size: 0.9rem;
  }
}

/* Mobile-First Stacked Layout Alternative */
@media (max-width: 600px) {
  .recipe-table-mobile-stack {
    display: none;
  }
  
  /* Optional: Show stacked cards on very small screens */
  .recipe-table-container.mobile-cards {
    background: none;
    border: none;
    box-shadow: none;
  }
  
  .recipe-table-container.mobile-cards .recipe-table {
    display: none;
  }
  
  .recipe-mobile-card {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #8b6f63;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  
  .recipe-mobile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
  }
  
  .recipe-mobile-card-name {
    font-weight: 700;
    color: #1a1a1a;
    font-size: 1rem;
  }
  
  .recipe-mobile-card-unit {
    font-weight: 600;
    color: #5d4037;
    text-transform: capitalize;
    font-size: 0.8rem;
  }
  
  .recipe-mobile-card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
  
  .recipe-mobile-card-input {
    flex: 1;
    max-width: 100px;
  }
  
  .recipe-mobile-card-actions {
    flex-shrink: 0;
  }
}

/* Enhanced touch targets for mobile */
@media (max-width: 768px) {
  .recipe-amount-input {
    min-height: 44px;
    touch-action: manipulation;
  }
  
  .recipe-remove-btn {
    min-height: 44px;
    min-width: 60px;
    touch-action: manipulation;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .recipe-table-header-cell {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  }
  
  .recipe-amount-input {
    border-width: 1px;
  }
  
  .recipe-remove-btn {
    border-width: 1px;
  }
} /* Costs and Profits Page Styles - Based on InventoryPage.css Design Language */

.costs-profits-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  background-color: #f5f5dc;
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

.costs-profits-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.costs-profits-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.costs-profits-background-panel {
  background-color: rgba(245, 245, 220, 0.9);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 1400px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.costs-profits-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.costs-profits-title-panel {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  background-color: #14545c;
  width: 100%;
  max-width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.costs-profits-title {
  color: #ffffff;
  font-family: 'The Wanters DEMO', serif;
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  text-shadow: -2px -2px 0 #0a1a1d, 2px -2px 0 #0a1a1d, -2px 2px 0 #0a1a1d, 2px 2px 0 #0a1a1d;
}

.costs-profits-navigation {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.back-to-admin-btn {
  background: #dc2626;
  color: white;
  border: 2px solid #b91c1c;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
  font-family: 'The Wanters DEMO', serif;
}

.back-to-admin-btn:hover {
  background: #b91c1c;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(220, 38, 38, 0.4);
}

/* New Recipe Button */
.new-recipe-btn {
  background: #8b5cf6;
  color: white;
  border: 2px solid #7c3aed;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(139, 92, 246, 0.3);
  font-family: 'The Wanters DEMO', serif;
}

.new-recipe-btn:hover {
  background: #7c3aed;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(139, 92, 246, 0.4);
}

.costs-profits-content {
  width: 100%;
  max-width: 1200px;
}

.costs-profits-theme-switch-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0 1rem 0;
  z-index: 10;
  position: relative;
  width: 100%;
  padding: 1rem;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
}

.costs-profits-theme-switch-container .theme-switch {
  transform: scale(0.8);
  margin: 0;
}

/* Dark Mode Styles */
.dark-mode.costs-profits-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
  background-image: 
    url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 84 48'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23412f2a' fill-opacity='0.25'%3E%3Cpath d='M42 48c23.196 0 42-10.745 42-24S65.196 0 42 0 0 10.745 0 24s18.804 24 42 24zm0-5c19.33 0 35-8.954 35-19s-15.67-19-35-19S7 13.954 7 24s15.67 19 35 19z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 120px 120px;
  background-position: center, center;
  position: relative;
}

.dark-mode.costs-profits-page::before {
  background-color: rgba(62, 39, 35, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode.costs-profits-page::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .costs-profits-background-panel {
  background-color: rgba(26, 26, 26, 0.9);
  border: 3px solid #000000;
}

.dark-mode .costs-profits-container {
  background-color: rgba(62, 39, 35, 0.9);
  color: #fff8e1;
  border: 3px solid #000000;
}

.dark-mode .costs-profits-title-panel {
  background-color: #14545c;
  border: 3px solid #0a1a1d;
}

.dark-mode .costs-profits-title {
  color: #8d6e63;
}

.dark-mode .back-to-admin-btn {
  background: #14545c;
  color: #fff8e1;
  border: 2px solid #0a1a1d;
  box-shadow: 0 4px 8px rgba(20, 84, 92, 0.3);
}

.dark-mode .back-to-admin-btn:hover {
  background: #0a1a1d;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(20, 84, 92, 0.4);
}

.dark-mode .new-recipe-btn {
  background: #8b5cf6;
  color: #fff8e1;
  border: 2px solid #7c3aed;
  box-shadow: 0 4px 8px rgba(139, 92, 246, 0.3);
}

.dark-mode .new-recipe-btn:hover {
  background: #7c3aed;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(139, 92, 246, 0.4);
}

.dark-mode .costs-profits-theme-switch-container {
  border-top: 2px solid rgba(255, 255, 255, 0.2);
}

/* Dream Mode Styles */
.dream-mode.costs-profits-page {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.dream-mode.costs-profits-page::before {
  background: linear-gradient(135deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.3'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  box-shadow: 
    inset 0 0 50px rgba(26, 13, 35, 0.5),
    0 0 100px rgba(124, 58, 237, 0.2);
}

.dream-mode.costs-profits-page::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.2' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
}

.dream-mode .costs-profits-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  border-radius: 20px;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2),
    0 0 50px rgba(124, 58, 237, 0.1);
}

.dream-mode .costs-profits-container {
  background-color: rgba(255, 255, 255, 0.95);
  color: #333333;
  border: 3px solid #000000;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.dream-mode .costs-profits-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  border-radius: 15px;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .costs-profits-title {
  color: #ffffff !important;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
  animation: none !important;
}

.dream-mode .back-to-admin-btn {
  background: #dc2626 !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
}

.dream-mode .back-to-admin-btn:hover {
  background: #b91c1c !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
}

.dream-mode .new-recipe-btn {
  background: #8b5cf6 !important;
  border: 3px solid #000000 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 8px rgba(139, 92, 246, 0.3);
}

.dream-mode .new-recipe-btn:hover {
  background: #7c3aed !important;
  border: 3px solid #000000 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 12px rgba(139, 92, 246, 0.4);
}

.dream-mode .costs-profits-theme-switch-container {
  border-top: 2px solid rgba(255, 255, 255, 0.3);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .costs-profits-background-panel {
    max-width: 95%;
    padding: 1rem;
  }
}

@media (max-width: 768px) {
  .costs-profits-background-panel {
    width: 98%;
    padding: 1rem;
  }

  .costs-profits-container {
    padding: 1rem;
  }

  .costs-profits-title-panel {
    padding: 0.8rem;
  }

  .costs-profits-title {
    font-size: 2rem;
  }

  .back-to-admin-btn {
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
  }

  .new-recipe-btn {
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .costs-profits-page {
    padding: 10px;
  }

  .costs-profits-background-panel {
    width: 100%;
    padding: 0.8rem;
  }

  .costs-profits-container {
    padding: 0.8rem;
  }

  .costs-profits-title {
    font-size: 1.8rem;
  }
} /* Base styles for Promo Codes Page */
.promo-codes-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: 'The Wanters DEMO', serif;
  padding: 20px;
  box-sizing: border-box;

  /* Light mode background */
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 177, 153, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.2) 0%, transparent 50%);
  background-color: #f5f5dc;
}

.promo-codes-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 8px solid #5d4037;
  border-radius: 20px;
  padding: 1.5rem;
  max-width: 1400px;
  width: 95%;
  max-height: 90vh;
  position: relative;
  z-index: 1;
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(93, 64, 55, 0.2),
    0 0 20px rgba(93, 64, 55, 0.1);
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.promo-codes-background-panel::-webkit-scrollbar {
  display: none;
}

.promo-codes-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Title Panel */
.promo-codes-title-panel {
  background: linear-gradient(135deg, #14545c 0%, #2c5f68 100%);
  border: 4px solid #0d4147;
  border-radius: 20px;
  padding: 1.5rem 3rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  text-align: center;
  width: 100%;
  max-width: 800px;
}

.promo-codes-title {
  color: #ffffff;
  font-size: 3rem;
  font-weight: 900;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
}

/* Navigation */
.promo-codes-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 1rem;
}

.promo-codes-back-nav-button {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: #ffffff;
  border: 3px solid #b91c1c;
  border-radius: 30px;
  padding: 1rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.promo-codes-back-nav-button:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(220, 38, 38, 0.4);
}

/* Content */
.promo-codes-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

/* Update Message */
.promo-codes-update-message {
  background: #e8f5e8;
  color: #2e7d32;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #4caf50;
  text-align: center;
  font-weight: 600;
  margin-bottom: 1rem;
  width: 100%;
  max-width: 600px;
}

/* Loading */
.promo-codes-loading {
  background: #f5f5f5;
  color: #5d4037;
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Sections */
.promo-codes-section {
  width: 100%;
  max-width: 1200px;
  margin: 2rem 0;
  background: #f7ede2;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.promo-codes-section-title-panel {
  background: linear-gradient(135deg, #14545c 0%, #2c5f68 100%);
  border: 3px solid #0d4147;
  border-radius: 15px;
  padding: 1rem 2rem;
  margin-bottom: 2rem;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.promo-codes-section-title {
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  letter-spacing: 1px;
}

/* Create Controls */
.promo-codes-create-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.promo-codes-create-code-btn {
  background-color: #7c3aed;
  color: #fff;
  border: 3px solid #4b2997;
  font-weight: 700;
  font-size: 1.3rem;
  font-family: 'The Wanters DEMO', serif;
  padding: 1rem 2.2rem;
  border-radius: 32px;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
  transition: all 0.3s ease;
  cursor: pointer;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.promo-codes-create-code-btn:hover:not(:disabled) {
  background-color: #a78bfa;
  color: #2d0066;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.25);
  border-color: #4b2997;
  transform: translateY(-2px);
}

.promo-codes-refresh-btn {
  background-color: #ea580c;
  color: #fff;
  border: 3px solid #c2410c;
  font-weight: 700;
  font-size: 1.3rem;
  font-family: 'The Wanters DEMO', serif;
  padding: 1rem 2.2rem;
  border-radius: 32px;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.15);
  transition: all 0.3s ease;
  cursor: pointer;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.promo-codes-refresh-btn:hover:not(:disabled) {
  background-color: #f97316;
  color: #fff;
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.25);
  border-color: #c2410c;
  transform: translateY(-2px);
}

/* Bulk Delete Button */
.promo-codes-bulk-delete-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: #ffffff;
  border: 3px solid #b91c1c;
  border-radius: 32px;
  padding: 1rem 2.2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.promo-codes-bulk-delete-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.25);
}

.promo-codes-bulk-delete-btn:disabled {
  background: #d7ccc8;
  color: #8d6e63;
  border-color: #8d6e63;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Promo Codes List */
.promo-codes-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.promo-codes-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #d7ccc8;
  border-radius: 12px;
  color: #5d4037;
}

.promo-codes-empty p {
  font-size: 1.2rem;
  margin: 0.5rem 0;
  font-weight: 600;
}

/* Promo Code Items */
.promo-codes-item {
  background: #f5f5dc;
  border: 2px solid #d7ccc8;
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.promo-codes-item:hover {
  border-color: #8d6e63;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.promo-codes-item-title-panel {
  background: linear-gradient(135deg, #14545c 0%, #2c5f68 100%);
  border: 3px solid #0d4147;
  border-radius: 12px;
  padding: 1rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.promo-codes-item-title {
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.promo-codes-item-title:hover {
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

.promo-codes-title-edit {
  background: #ffffff;
  color: #2c5f68;
  border: 2px solid #14545c;
  border-radius: 6px;
  padding: 0.5rem;
  font-size: 1.8rem;
  font-weight: 700;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
  width: 100%;
}

/* Item Details */
.promo-codes-item-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.promo-codes-field {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.promo-codes-field-label {
  font-weight: 700;
  color: #3e2723;
  min-width: 70px;
  font-size: 1.1rem;
}

.promo-codes-text-box {
  flex: 1;
  padding: 0.7rem 1rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'The Wanters DEMO', serif;
  background: #ffffff;
  color: #3e2723;
  font-weight: 600;
  transition: all 0.3s ease;
}

.promo-codes-text-box:focus {
  border-color: #5d4037;
  box-shadow: 0 0 8px rgba(93, 64, 55, 0.3);
  outline: none;
}

.promo-codes-text-box:disabled {
  background: #f5f5f5;
  color: #666;
  cursor: not-allowed;
}

/* Progress Sections */
.promo-codes-progress-section {
  margin: 0.5rem 0;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #d7ccc8;
  border-radius: 8px;
}

.promo-codes-progress-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.promo-codes-progress-label {
  font-weight: 700;
  color: #3e2723;
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Daydreamers Loading Bar Styles for Promo Codes */
.daydreamers-loading-bar {
  border-radius: 12px;
  height: 28px;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
}

.daydreamers-loading-bar.light {
  background: #f5f5dc;
  border: 3px solid #3e2723;
}

.daydreamers-loading-bar.dark {
  background: #3e2723;
  border: 3px solid #000;
}

.daydreamers-loading-bar.dream {
  background: linear-gradient(90deg, rgba(26, 13, 35, 0.9), rgba(45, 20, 60, 0.9));
  border: 3px solid #000;
  box-shadow: 0 0 8px rgba(45, 20, 60, 0.4);
}

.daydreamers-loading-bar-fill {
  height: 100%;
  border-radius: 12px;
  transition: width 0.5s ease;
}

.daydreamers-loading-bar-fill.light {
  background: #8d6e63;
}

.daydreamers-loading-bar-fill.dark {
  background: #fff8e1;
}

.daydreamers-loading-bar-fill.dream {
  background: linear-gradient(90deg, rgba(139, 110, 99, 0.9), rgba(93, 64, 55, 0.9));
}

/* Expired progress bar styling */
.daydreamers-loading-bar-fill.expired {
  background: #dc2626 !important;
}

/* No expiry progress bar styling - show as full green */
.daydreamers-loading-bar-fill.no-expiry.light {
  background: #16a34a !important;
}

.daydreamers-loading-bar-fill.no-expiry.dark {
  background: #22c55e !important;
}

.daydreamers-loading-bar-fill.no-expiry.dream {
  background: linear-gradient(90deg, rgba(22, 163, 74, 0.9), rgba(34, 197, 94, 0.9)) !important;
}

/* Action Buttons */
.promo-codes-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.promo-codes-save-btn,
.promo-codes-active-btn,
.promo-codes-delete-btn {
  padding: 0.8rem 1.5rem;
  border-radius: 20px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 3px solid #000000;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  min-width: 80px;
}

.promo-codes-save-btn {
  background: linear-gradient(135deg, #9333ea 0%, #a855f7 100%);
  color: #ffffff;
  border-color: #7c3aed;
}

.promo-codes-save-btn:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(147, 51, 234, 0.3);
}

.promo-codes-active-btn {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  color: #ffffff;
  border-color: #15803d;
}

.promo-codes-active-btn:hover {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(22, 163, 74, 0.3);
}

.promo-codes-delete-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: #ffffff;
  border-color: #b91c1c;
}

.promo-codes-delete-btn:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(220, 38, 38, 0.3);
}

/* Auth Message */
.promo-codes-auth-message {
  text-align: center;
  padding: 3rem;
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #8d6e63;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.promo-codes-auth-message h2 {
  color: #3e2723;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.promo-codes-auth-message p {
  color: #5d4037;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.promo-codes-back-btn {
  background: linear-gradient(135deg, #5d4037 0%, #8d6e63 100%);
  color: #ffffff;
  border: 3px solid #3e2723;
  border-radius: 30px;
  padding: 1rem 2rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.promo-codes-back-btn:hover {
  background: linear-gradient(135deg, #3e2723 0%, #5d4037 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Dark Mode Styles */
.dark-mode.promo-codes-page {
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(44, 82, 130, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(81, 45, 168, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(44, 82, 130, 0.2) 0%, transparent 50%);
  background-color: #1a1a1a;
}

.dark-mode .promo-codes-background-panel {
  background-color: rgba(30, 30, 30, 0.9);
  border-color: #3e2723;
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(62, 39, 35, 0.3),
    0 0 20px rgba(62, 39, 35, 0.2);
}

.dark-mode .promo-codes-section {
  background: #2c1810;
  border-color: #3e2723;
}

.dark-mode .promo-codes-item {
  background: #1e1e1e;
  border-color: #3e2723;
}

.dark-mode .promo-codes-text-box {
  background: #2c1810;
  color: #ffffff;
  border-color: #3e2723;
}

.dark-mode .promo-codes-text-box:focus {
  border-color: #5d4037;
  box-shadow: 0 0 8px rgba(93, 64, 55, 0.5);
}

.dark-mode .promo-codes-field-label {
  color: #d7ccc8;
}

.dark-mode .promo-codes-progress-section {
  background: rgba(44, 24, 16, 0.8);
  border-color: #3e2723;
}

.dark-mode .promo-codes-progress-label {
  color: #d7ccc8;
}

.dark-mode .promo-codes-empty {
  background: rgba(44, 24, 16, 0.8);
  border-color: #3e2723;
  color: #d7ccc8;
}

.dark-mode .promo-codes-update-message {
  background: #1b2f1b;
  color: #4caf50;
  border-color: #2e7d32;
}

.dark-mode .promo-codes-loading {
  background: #2c1810;
  color: #d7ccc8;
}

.dark-mode .promo-codes-back-nav-button {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  border-color: #991b1b;
  box-shadow: 0 4px 8px rgba(185, 28, 28, 0.4);
}

.dark-mode .promo-codes-back-nav-button:hover {
  background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%);
  box-shadow: 0 6px 12px rgba(185, 28, 28, 0.5);
}

.dark-mode .promo-codes-save-btn {
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
  border-color: #6d28d9;
  box-shadow: 0 4px 8px rgba(124, 58, 237, 0.3);
}

.dark-mode .promo-codes-save-btn:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
  box-shadow: 0 6px 12px rgba(124, 58, 237, 0.4);
}

.dark-mode .promo-codes-refresh-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  border-color: #b91c1c;
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.dark-mode .promo-codes-refresh-btn:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  box-shadow: 0 6px 12px rgba(220, 38, 38, 0.4);
}

.dark-mode .promo-codes-bulk-delete-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: #ffffff;
  border: 3px solid #b91c1c;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
}

.dark-mode .promo-codes-bulk-delete-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.25);
}

.dark-mode .promo-codes-bulk-delete-btn:disabled {
  background: #424242;
  color: #757575;
  border-color: #757575;
}

.dark-mode .promo-codes-checkbox {
  accent-color: #4fc3f7;
}

.dark-mode .promo-codes-select-all {
  color: #e0e0e0;
}

/* Dream Mode Styles */
.dream-mode.promo-codes-page {
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.5) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 177, 153, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, rgba(93, 64, 55, 0.1) 0%, rgba(141, 110, 99, 0.1) 100%);
  background-color: #f0e6d6;
}

.dream-mode .promo-codes-background-panel {
  background: linear-gradient(135deg, rgba(139, 110, 99, 0.4) 0%, rgba(181, 154, 142, 0.4) 100%);
  border-color: #8d6e63;
  box-shadow:
    0 8px 25px rgba(93, 64, 55, 0.4),
    0 0 0 2px rgba(141, 110, 99, 0.3),
    0 0 20px rgba(141, 110, 99, 0.2);
}

.dream-mode .promo-codes-title-panel {
  background: linear-gradient(135deg, #5d4037 0%, #8d6e63 100%);
  border-color: #3e2723;
  box-shadow: 0 8px 25px rgba(93, 64, 55, 0.4);
}

.dream-mode .promo-codes-section-title-panel {
  background: linear-gradient(135deg, #5d4037 0%, #8d6e63 100%);
  border-color: #3e2723;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .promo-codes-item-title-panel {
  background: linear-gradient(135deg, #5d4037 0%, #8d6e63 100%);
  border-color: #3e2723;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .promo-codes-section {
  background: linear-gradient(135deg, #f7ede2 0%, #faf5f0 100%);
  border-color: #8d6e63;
  box-shadow: 0 4px 12px rgba(141, 110, 99, 0.2);
}

.dream-mode .promo-codes-item {
  background: linear-gradient(135deg, #f5f5dc 0%, #faf8f3 100%);
  border-color: #8d6e63;
  box-shadow: 0 4px 8px rgba(141, 110, 99, 0.2);
}

.dream-mode .promo-codes-item:hover {
  border-color: #5d4037;
  box-shadow: 0 6px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .promo-codes-create-code-btn {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.dream-mode .promo-codes-create-code-btn:hover {
  background: linear-gradient(135deg, #a855f7 0%, #c084fc 100%);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.4);
}

.dream-mode .promo-codes-refresh-btn {
  background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
}

.dream-mode .promo-codes-refresh-btn:hover {
  background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.4);
}

.dream-mode .promo-codes-bulk-delete-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: #ffffff;
  border: 3px solid #b91c1c;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
}

.dream-mode .promo-codes-bulk-delete-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.25);
}

.dream-mode .promo-codes-bulk-delete-btn:disabled {
  background: #d7ccc8;
  color: #8d6e63;
  border-color: #8d6e63;
}

.dream-mode .promo-codes-checkbox {
  accent-color: #8b5cf6;
}

.dream-mode .promo-codes-select-all {
  color: #5d4037;
}

.dream-mode .promo-codes-save-btn {
  background: linear-gradient(135deg, #9333ea 0%, #a855f7 100%);
  border-color: #7c3aed;
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
}

.dream-mode .promo-codes-save-btn:hover {
  background: linear-gradient(135deg, #a855f7 0%, #c084fc 100%);
  box-shadow: 0 6px 18px rgba(147, 51, 234, 0.4);
}

.dream-mode .promo-codes-progress-section {
  background: linear-gradient(135deg, rgba(247, 237, 226, 0.9) 0%, rgba(250, 245, 240, 0.9) 100%);
  border-color: #8d6e63;
  box-shadow: 0 2px 8px rgba(141, 110, 99, 0.3);
}

.dream-mode .promo-codes-progress-label {
  color: #3e2723;
}

.dream-mode .promo-codes-back-nav-button {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  border-color: #b91c1c;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.dream-mode .promo-codes-back-nav-button:hover {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.4);
}

/* Responsive Design */
@media (max-width: 768px) {
  .promo-codes-title {
    font-size: 2.2rem;
  }

  .promo-codes-section-title {
    font-size: 1.8rem;
  }

  .promo-codes-list {
    grid-template-columns: 1fr;
  }

  .promo-codes-actions {
    flex-direction: column;
    gap: 0.5rem;
  }

  .promo-codes-field {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .promo-codes-field-label {
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .promo-codes-page {
    padding: 10px;
  }

  .promo-codes-background-panel {
    padding: 1rem;
  }

  .promo-codes-title {
    font-size: 1.8rem;
  }

  .promo-codes-title-panel {
    padding: 1rem 1.5rem;
  }

  .promo-codes-section {
    padding: 1rem;
  }

  .promo-codes-item {
    padding: 1rem;
  }
}

/* Table Layout Styles */
.promo-codes-table-container {
  width: 100%;
  overflow-x: auto;
  margin-top: 1rem;
  border-radius: 8px;
  border: 2px solid #5d4037;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.promo-codes-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Verdana', sans-serif;
  font-size: 0.9rem;
}

.promo-codes-table-header {
  background: #5d4037;
  color: white;
}

.promo-codes-table-header-cell {
  padding: 12px 8px;
  text-align: center;
  font-weight: bold;
  font-size: 0.85rem;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.promo-codes-table-header-cell:last-child {
  border-right: none;
}

.promo-codes-table-row {
  transition: background-color 0.2s ease;
}

.promo-codes-table-row:nth-child(even) {
  background: rgba(93, 64, 55, 0.05);
}

.promo-codes-table-row:hover {
  background: rgba(93, 64, 55, 0.1);
}

.promo-codes-table-cell {
  padding: 10px 8px;
  text-align: center;
  border-right: 1px solid rgba(93, 64, 55, 0.1);
  border-bottom: 1px solid rgba(93, 64, 55, 0.1);
  vertical-align: middle;
}

.promo-codes-table-cell:last-child {
  border-right: none;
}

.promo-codes-table-cell.category {
  font-weight: 600;
  font-size: 0.8rem;
  color: #5d4037;
}

.promo-codes-table-cell.name {
  text-align: left;
  font-weight: 500;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promo-codes-table-cell.type {
  font-weight: 500;
  color: #7c3aed;
}

.promo-codes-table-cell.value {
  font-weight: 600;
  color: #059669;
}

.promo-codes-table-cell.uses {
  font-family: monospace;
  font-weight: 500;
}

/* Toggle Switch Styles */
.promo-codes-toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.promo-codes-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.promo-codes-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 24px;
}

.promo-codes-toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.promo-codes-toggle-switch input:checked + .promo-codes-toggle-slider {
  background-color: #22c55e;
}

.promo-codes-toggle-switch input:checked + .promo-codes-toggle-slider:before {
  transform: translateX(26px);
}

/* Action Buttons */
.promo-codes-table-cell.actions {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Checkbox styles */
.promo-codes-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #14545c;
}

.promo-codes-table-cell.checkbox {
  width: 50px;
  text-align: center;
  padding: 0.5rem;
}

.promo-codes-table-header-cell.checkbox {
  width: 50px;
  text-align: center;
  padding: 0.5rem;
}

/* Select All functionality */
.promo-codes-section-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1rem;
}

.promo-codes-select-all {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #5d4037;
  font-weight: 600;
}

.promo-codes-select-all span {
  user-select: none;
}

.promo-codes-edit-btn,
.promo-codes-delete-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-width: 60px;
}

.promo-codes-edit-btn {
  background: #3b82f6;
  color: white;
}

.promo-codes-edit-btn:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

.promo-codes-delete-btn {
  background: #ef4444;
  color: white;
}

.promo-codes-delete-btn:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

/* Edit Modal Styles */
.promo-codes-edit-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.promo-codes-edit-modal {
  background: rgba(139, 110, 99, 0.95);
  border: 4px solid #5d4037;
  border-radius: 15px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.promo-codes-edit-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #5d4037;
}

.promo-codes-edit-modal-header h3 {
  color: #f5f5dc;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.5rem;
  margin: 0;
}

.promo-codes-edit-modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: #f5f5dc;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.promo-codes-edit-modal-close:hover {
  background: rgba(93, 64, 55, 0.3);
}

.promo-codes-edit-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.promo-codes-edit-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.promo-codes-edit-field label {
  color: #f5f5dc;
  font-weight: 600;
  font-size: 0.9rem;
}

.promo-codes-edit-input,
.promo-codes-edit-select {
  padding: 10px;
  border: 2px solid #5d4037;
  border-radius: 6px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.9);
  color: #4b2e19;
  font-weight: 500;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.promo-codes-edit-input:focus,
.promo-codes-edit-select:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

.promo-codes-edit-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  justify-content: center;
}

.promo-codes-edit-save-btn,
.promo-codes-edit-cancel-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}

.promo-codes-edit-save-btn {
  background: #22c55e;
  color: white;
}

.promo-codes-edit-save-btn:hover {
  background: #16a34a;
  transform: translateY(-2px);
}

.promo-codes-edit-cancel-btn {
  background: #6b7280;
  color: white;
}

.promo-codes-edit-cancel-btn:hover {
  background: #4b5563;
  transform: translateY(-2px);
}

/* Mobile Responsive Table */
@media (max-width: 768px) {
  .promo-codes-table-container {
    font-size: 0.8rem;
  }
  
  .promo-codes-table-header-cell,
  .promo-codes-table-cell {
    padding: 8px 4px;
    font-size: 0.75rem;
  }
  
  .promo-codes-table-cell.name {
    max-width: 120px;
  }
  
  .promo-codes-toggle-switch {
    width: 40px;
    height: 20px;
  }
  
  .promo-codes-toggle-slider:before {
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
  }
  
  .promo-codes-toggle-switch input:checked + .promo-codes-toggle-slider:before {
    transform: translateX(20px);
  }
  
  .promo-codes-edit-btn,
  .promo-codes-delete-btn {
    padding: 4px 8px;
    font-size: 0.7rem;
    min-width: 50px;
  }
  
  .promo-codes-table-cell.actions {
    flex-direction: column;
    gap: 3px;
  }
  
  .promo-codes-edit-modal {
    padding: 1rem;
    width: 95%;
  }
  
  .promo-codes-edit-actions {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Dark mode styles for table */
.dark-mode .promo-codes-table-container {
  background: rgba(45, 32, 28, 0.9);
  border-color: #8b6f63;
}

.dark-mode .promo-codes-table-header {
  background: #2d201c;
  color: #f5f5dc;
}

.dark-mode .promo-codes-table-row:nth-child(even) {
  background: rgba(139, 111, 99, 0.1);
}

.dark-mode .promo-codes-table-row:hover {
  background: rgba(139, 111, 99, 0.2);
}

.dark-mode .promo-codes-table-cell {
  border-color: rgba(139, 111, 99, 0.2);
  color: #f5f5dc;
}

.dark-mode .promo-codes-edit-modal {
  background: rgba(45, 32, 28, 0.95);
  border-color: #8b6f63;
}

/* Dream mode styles for table */
.dream-mode .promo-codes-table-container {
  background: rgba(139, 110, 99, 0.8);
  border-color: #b8860b;
  box-shadow: 0 0 20px rgba(184, 134, 11, 0.3);
}

.dream-mode .promo-codes-table-header {
  background: linear-gradient(135deg, #b8860b, #8b6914);
  color: #f5f5dc;
}

.dream-mode .promo-codes-table-row:hover {
  background: rgba(184, 134, 11, 0.2);
}

.dream-mode .promo-codes-edit-modal {
  background: rgba(139, 110, 99, 0.9);
  border-color: #b8860b;
  box-shadow: 0 0 30px rgba(184, 134, 11, 0.5);
} /* Enhanced Mobile Scrolling for Promo Codes Table */
@media (max-width: 768px) {
  .promo-codes-table-container {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    position: relative;
    
    /* Scroll indicators with gradient shadows */
    background: 
      /* Left shadow gradient */
      linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 30px),
      /* Right shadow gradient */  
      linear-gradient(270deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 30px),
      /* Main background */
      rgba(255, 255, 255, 0.95);
    background-position: left, right, center;
    background-size: 30px 100%, 30px 100%, 100% 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll;
  }
  
  .promo-codes-table {
    min-width: 800px; /* Prevents crushing - ensures readable columns */
  }
  
  /* Sticky first two columns for context */
  .promo-codes-table-header-cell:nth-child(1),
  .promo-codes-table-header-cell:nth-child(2),
  .promo-codes-table-cell:nth-child(1),
  .promo-codes-table-cell:nth-child(2) {
    position: sticky;
    z-index: 10;
    background: inherit;
    border-right: 2px solid rgba(139, 111, 99, 0.3);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  }
  
  /* Position sticky columns with proper widths */
  .promo-codes-table-header-cell:nth-child(1),
  .promo-codes-table-cell:nth-child(1) {
    left: 0;
    min-width: 140px; /* Code column */
    max-width: 140px;
    font-weight: 700; /* Emphasize code for context */
  }
  
  .promo-codes-table-header-cell:nth-child(2),
  .promo-codes-table-cell:nth-child(2) {
    left: 140px;
    min-width: 100px; /* Type column */
    max-width: 100px;
  }
  
  /* Enhanced touch targets for mobile */
  .promo-codes-table-cell button {
    min-height: 44px;
    min-width: 60px;
    padding: 0.6rem 0.8rem;
    margin: 0.2rem;
    touch-action: manipulation;
    font-size: 0.85rem;
  }
  
  /* Better column spacing and readability on mobile */
  .promo-codes-table-header-cell,
  .promo-codes-table-cell {
    padding: 0.8rem 0.5rem;
    white-space: nowrap;
    font-size: 0.85rem;
  }
  
  /* Scroll hint visual effects */
  .promo-codes-table-container::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(270deg, rgba(139, 111, 99, 0.15) 0%, transparent 100%);
    pointer-events: none;
    z-index: 5;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  
  .promo-codes-table-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 240px; /* After sticky columns */
    bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, rgba(139, 111, 99, 0.15) 0%, transparent 100%);
    pointer-events: none;
    z-index: 5;
  }
}/* Custom Font */
@font-face {
  font-family: 'The Wanters DEMO';
  src: url('/fonts/The%20Wanters%20DEMO.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* CSS Reset and viewport fixes */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Global scrollbar hiding for all scrollable elements */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
}

/* Ensure HTML and body take full viewport */
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  box-sizing: border-box;
  /* Ensure full viewport coverage */
  position: relative;
}

html * {
  box-sizing: border-box;
}

/* Additional viewport fixes */
html, body {
  /* Prevent any default browser margins/padding */
  margin: 0 !important;
  padding: 0 !important;
  /* Ensure full coverage without capping document scroll height */
  width: 100% !important;
  min-height: 100% !important;
  height: auto !important;
  /* Prevent horizontal scrolling */
  overflow-x: hidden !important;
  /* Ensure proper positioning */
  position: relative !important;
}

/* Mobile: allow vertical finger scroll everywhere - document is the scroll root */
@media (max-width: 1024px) {
  html {
    touch-action: pan-y;
  }
  body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
}

/* Shared class for any scroll root (pages + modals) - use on the one element that should scroll */
.mobile-scroll-container {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
@media (max-width: 1024px) {
  .mobile-scroll-container {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
}

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --text-muted: #666666;
  --button-bg: #e0e0e0;
  --card-bg: #ffffff;
  --image-placeholder-bg: #f5f5f5;
  --placeholder-stripe1: #f0f0f0;
  --placeholder-stripe2: #e6e6e6;
  --tag-bg: #f0f0f0;
  --nav-bg: #f5f5f5;
  --border-color: #e0e0e0;
  --font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --landing-button-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #000000;
  --text-muted: #000000;
  --button-bg: #333333;
  --card-bg: #2d2d2d;
  --image-placeholder-bg: #333333;
  --placeholder-stripe1: #2d2d2d;
  --placeholder-stripe2: #383838;
  --tag-bg: #404040;
  --nav-bg: #2a2a2a;
  --border-color: #444444;
}

/* Dream Mode - Dark Grey Theme with Subtle Patterns */
.dream-mode {
  --bg-color: #111111;
  --text-color: #00ffbb;
  --text-muted: #b347ea;
  --button-bg: #8d6e63;
  --card-bg: rgba(20, 20, 20, 0.9);
  --image-placeholder-bg: #1a1a1a;
  --placeholder-stripe1: #1a1a1a;
  --placeholder-stripe2: #2a2a2a;
  --tag-bg: #2a2a2a;
  --nav-bg: #111111;
  --border-color: #333333;
  
  /* Apply complex dark pattern background */
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(75,0,130,0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(0,0,128,0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 25%, rgba(46,139,87,0.08) 0%, transparent 40%),
    radial-gradient(circle at 25% 75%, rgba(138,43,226,0.08) 0%, transparent 40%),
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(75,0,130,0.05) 0deg 30deg,
      transparent 30deg 60deg,
      rgba(0,0,128,0.05) 60deg 90deg,
      transparent 90deg 120deg
    ),
    linear-gradient(30deg, rgba(30,30,30,0.8) 12%, transparent 12.5%, transparent 87%, rgba(30,30,30,0.8) 87.5%, rgba(30,30,30,0.8)),
    linear-gradient(150deg, rgba(25,25,25,0.7) 12%, transparent 12.5%, transparent 87%, rgba(25,25,25,0.7) 87.5%, rgba(25,25,25,0.7)),
    linear-gradient(90deg, rgba(20,20,20,0.6) 12%, transparent 12.5%, transparent 87%, rgba(20,20,20,0.6) 87.5%, rgba(20,20,20,0.6)),
    linear-gradient(60deg, rgba(35,35,35,0.4) 25%, transparent 25.5%, transparent 75%, rgba(35,35,35,0.4) 75%, rgba(35,35,35,0.4)),
    linear-gradient(120deg, rgba(28,28,28,0.5) 25%, transparent 25.5%, transparent 75%, rgba(28,28,28,0.5) 75%, rgba(28,28,28,0.5));
  background-size: 120px 120px, 100px 100px, 80px 80px, 90px 90px, 200px 200px, 40px 70px, 35px 60px, 50px 85px, 30px 50px, 45px 75px;
  background-position: 0 0, 60px 60px, 40px 40px, 45px 45px, 0 0, 0 0, 17px 30px, 25px 42px, 0 0, 22px 37px;
}

/* Dream Mode Text Animation - Modified Colors */
.dream-mode h1, 
.dream-mode h2, 
.dream-mode h3, 
.dream-mode p:not(.app-subtitle), 
.dream-mode span, 
.dream-mode a {
  animation: dreamText 30s infinite linear;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
}

@keyframes dreamText {
  0% {
    color: #0066cc; /* Bright Blue - clear starting point */
  }
  12% {
    color: #1e3a8a; /* Deep Blue */
  }
  24% {
    color: #0ea5e9; /* Sky Blue */
  }
  36% {
    color: #06b6d4; /* Cyan */
  }
  48% {
    color: #059669; /* Emerald Green */
  }
  60% {
    color: #16a34a; /* Green */
  }
  72% {
    color: #065f46; /* Dark Green */
  }
  84% {
    color: #7c3aed; /* Purple */
  }
  92% {
    color: #8b5cf6; /* Violet */
  }
  100% {
    color: #0066cc; /* Back to Bright Blue for smooth loop */
  }
}

/* Dream Mode Button Animation */
.dream-mode button,
.dream-mode .button,
.dream-mode .nav-button,
.dream-mode .home-button,
.dream-mode .privacy-button,
.dream-mode .switch,
.dream-mode .quantity-button:not(.quantity-minus):not(.quantity-plus),
.dream-mode .remove-item-button,
.dream-mode .checkout-button,
.dream-mode .back-to-cart-button,
.dream-mode .submit-button,
.dream-mode .add-to-cart-button,
.dream-mode .view-cart-button,
.dream-mode .continue-shopping-button,
.dream-mode .back-to-products,
.dream-mode a[class*="button"] {
  animation: none !important;
  border: 3px solid #000000 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}

/* Special handling for landing buttons to maintain their specific font size */
.dream-mode .landing-button {
  animation: none !important;
  border: 3px solid #000000 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  /* Font size will be handled by LandingScreen.css specific rules */
}

.dream-mode .home-button:hover,
.dream-mode .privacy-button:hover,
.dream-mode .nav-button:hover,
.dream-mode .back-button:hover,
.dream-mode button:hover:not(.close-btn):not(.daydreamers-logout-button):not(.achievements-btn),
.dream-mode .button:hover:not(.close-btn):not(.daydreamers-logout-button):not(.achievements-btn),
.dream-mode .switch:hover,
.dream-mode .quantity-button:hover:not(.quantity-minus:hover):not(.quantity-plus:hover),
.dream-mode .remove-item-button:hover,
.dream-mode .checkout-button:hover,
.dream-mode .back-to-cart-button:hover,
.dream-mode .submit-button:hover,
.dream-mode .add-to-cart-button:hover,
.dream-mode .view-cart-button:hover,
.dream-mode .continue-shopping-button:hover,
.dream-mode .back-to-products:hover,
.dream-mode a[class*="button"]:hover:not(.close-btn):not(.daydreamers-logout-button):not(.achievements-btn) {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleGlobal 1.5s ease-in-out infinite alternate !important;
}

/* Landing button hover effects are handled specifically in LandingScreen.css */

/* Dream Mode Toggle Switch */
.dream-mode .slider {
  background: linear-gradient(45deg, #000080, #008080, #00ffff, #008000, #006400, #800080);
  background-size: 400% 400%;
  animation: dreamGradient 30s infinite alternate;
}

.dream-mode .slider:before {
  background: #000;
  box-shadow: 0 0 10px #fff, 0 0 20px #fff;
}

@keyframes dreamGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes dreamSparkleGlobal {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
  
  /* Ensure full viewport coverage */
  width: 100%;
  height: auto;
  min-width: 100%;
  min-height: 100vh;
  max-width: 100%;
  max-height: none;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

/* box-sizing already set in * reset; touch scrolling only on designated scroll roots */

/* Root element should take full viewport */
#root {
  width: 100%;
  height: auto;
  min-width: 100%;
  min-height: 100vh;
  max-width: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: visible;
  position: relative;
}

/* Mobile-first responsive design improvements */
@media (max-width: 768px) {
  html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
  }
  
  body {
    font-size: 16px; /* Prevent iOS zoom on input focus */
    width: 100%;
    height: auto;
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  
  #root {
    width: 100%;
    height: auto;
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: visible;
  }
  
  /* Ensure all main containers use full width on mobile */
  .main-menu,
  .landing-screen,
  .cart-page,
  .contact-page,
  .options-page,
  .summary-page,
  .cook-page,
  .product-detail {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Ensure background panels use full available width */
  .main-content-panel,
  .cart-background-panel,
  .contact-background-panel,
  .options-background-panel,
  .landing-background-panel {
    width: 99% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Reduce borders and padding dramatically on mobile */
  .title-panel,
  .product-card-background,
  .cart-item,
  .contact-details,
  .options-background-panel,
  .landing-background-panel {
    border-width: 1px !important;
    padding: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* Make product cards much more compact */
  .product-card-container {
    margin-bottom: 0.5rem !important;
  }
  
  .product-image-card {
    padding: 0.25rem !important;
    border-width: 1px !important;
  }
  
  .product-image-card img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: 1 / 1 !important;
  }
  
  .product-name-panel {
    padding: 0.4rem !important;
    border-width: 1px !important;
  }
  
  /* Reduce box shadows on mobile for cleaner look */
  .title-panel,
  .product-card-background,
  .main-content-panel {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  }
}

/* Extra mobile optimizations for very small screens */
@media (max-width: 480px) {
  html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
  }
  
  body {
    width: 100%;
    height: auto;
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  
  #root {
    width: 100%;
    height: auto;
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: visible;
  }
  
  /* Even more aggressive space saving */
  .main-menu,
  .landing-screen,
  .cart-page,
  .contact-page,
  .options-page {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Minimal borders and padding */
  .title-panel {
    border-width: 1px !important;
    padding: 0.4rem 0.6rem !important;
    margin-bottom: 0.4rem !important;
  }
  
  .main-content-panel {
    padding: 0.25rem !important;
    border-width: 1px !important;
  }
  
  .product-card-background {
    padding: 0.3rem !important;
    border-width: 1px !important;
    margin-bottom: 0.4rem !important;
  }
  
  .product-image-card {
    padding: 0.15rem !important;
    border-width: 1px !important;
  }
  
  .product-image-card img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: 1 / 1 !important;
  }
  
  .product-name-panel {
    padding: 0.25rem !important;
    border-width: 1px !important;
  }
  
  /* Minimal shadows for clean mobile appearance */
  .title-panel,
  .product-card-background,
  .main-content-panel {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  }
}

/* Touch scrolling only on designated scroll roots (avoids multiple scroll containers) */
.mobile-scroll-container,
.admin-panel-page {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Modals: allow touch scroll only on the modal content wrapper when it uses .mobile-scroll-container */
.modal-overlay .mobile-scroll-container {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* Global button font styling - applies to all buttons and button-like elements */
button, 
input[type="button"], 
input[type="submit"], 
input[type="reset"],
.button,
.btn,
.nav-button,
.home-button,
.landing-button,
.back-button,
.view-cart-button,
.continue-shopping-button,
.back-to-products,
.add-to-cart-button,
.quantity-button,
.remove-item-button,
.checkout-button,
.submit-button,
.retry-button,
.theme-toggle,
.back-to-cart-button,
a[class*="button"],
*[class*="button"] {
  font-family: var(--font-family) !important;
}

button, input, textarea, select {
  font-family: var(--font-family);
}

a {
  color: #8d6e63;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Remove underlines from buttons and navigation links on hover */
button:hover,
.nav-button:hover,
.home-button:hover,
.landing-button:hover,
.back-button:hover,
.view-cart-button:hover,
.continue-shopping-button:hover,
.back-to-products:hover {
  text-decoration: none !important;
}

/* Cart empty state - greyed out */
.view-cart-button.cart-empty,
.back-to-cart-button.cart-empty {
  opacity: 0.4;
  color: #999999 !important;
  background-color: #cccccc !important;
  cursor: default;
  pointer-events: none;
}

.view-cart-button.cart-empty:hover,
.back-to-cart-button.cart-empty:hover {
  opacity: 0.4;
  color: #999999 !important;
  background-color: #cccccc !important;
  transform: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  font-weight: normal;
}

/* Dark mode overrides to ensure black text */
.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3, 
.dark-mode h4, 
.dark-mode h5, 
.dark-mode h6,
.dark-mode p,
.dark-mode span,
.dark-mode div,
.dark-mode a,
.dark-mode button,
.dark-mode input,
.dark-mode textarea,
.dark-mode select,
.dark-mode label {
  color: #000000 !important;
}

/* Override any text-shadow in dark mode */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  text-shadow: none !important;
}

/* Apply dream mode styling to all menu pages */
.dream-mode.landing-screen,
.dream-mode.options-page,
.dream-mode.contact-page,
.dream-mode.privacy-policy-page,
.dream-mode.cart-page,
.dream-mode.order-submission,
.dream-mode.main-menu,
.dream-mode.product-detail {
  background-color: #222;
  background-image: url('https://images.unsplash.com/photo-1511357840105-cfa292e6bc9d?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: color-burn;
  color: var(--text-color);
  position: relative;
}

/* Dream mode container borders */
.dream-mode .options-container,
.dream-mode .contact-container,
.dream-mode .privacy-policy-container,
.dream-mode .theme-switch-container .switch-track {
  border: 3px solid #000000;
}

.dream-mode .theme-switch-container .switch-button {
  border: 2px solid #000000;
}

.dream-mode.landing-screen::before,
.dream-mode.options-page::before,
.dream-mode.contact-page::before,
.dream-mode.privacy-policy-page::before,
.dream-mode.cart-page::before,
.dream-mode.order-submission::before,
.dream-mode.main-menu::before,
.dream-mode.product-detail::before {
  background-color: rgba(34, 34, 34, 0.85);
}

/* Dream mode cart empty state */
.dream-mode .view-cart-button.cart-empty,
.dream-mode .back-to-cart-button.cart-empty {
  opacity: 0.4;
  color: #666666 !important;
  background-color: #444444 !important;
  border: 2px solid #666666 !important;
}

/* Error Boundary Styles */
.error-boundary {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--bg-color);
  padding: 2rem;
}

.error-container {
  background-color: var(--card-bg);
  border: 3px solid #f44336;
  border-radius: 16px;
  padding: 3rem 2rem;
  max-width: 550px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 24px rgba(244, 67, 54, 0.3);
}

.error-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.error-title {
  color: #f44336;
  font-size: 2.2rem;
  font-weight: 900;
  margin-bottom: 1.5rem;
  font-family: 'The Wanters DEMO, serif';
  letter-spacing: 0.05em;
}

.error-message {
  color: var(--text-color);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  font-family: 'Tahoma, sans-serif';
}

.error-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.error-actions .retry-button,
.error-actions .home-button {
  padding: 0.8rem 1.5rem;
  border: 2px solid #000000;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 700;
  font-family: 'The Wanters DEMO, serif';
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  min-width: 120px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.error-actions .retry-button {
  background-color: #f44336;
  color: white;
}

.error-actions .retry-button:hover {
  background-color: #d32f2f;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(244, 67, 54, 0.4);
}

.error-actions .home-button {
  background-color: #2196f3;
  color: white;
}

.error-actions .home-button:hover {
  background-color: #1976d2;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(33, 150, 243, 0.4);
}

/* Ensure both buttons have identical sizing and shape */
.error-actions .retry-button,
.error-actions .home-button {
  width: 130px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dark mode error home button glow */
.dark-mode .error-actions .home-button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.error-details {
  margin-top: 2rem;
  text-align: left;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1rem;
  background-color: #f9f9f9;
}

.error-details summary {
  cursor: pointer;
  font-weight: 600;
  color: #666;
  margin-bottom: 0.5rem;
}

.error-stack {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
  color: #333;
  background-color: #fff;
  padding: 0.5rem;
  border-radius: 4px;
  overflow-x: auto;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Dark mode error styles */
.dark-mode .error-container {
  background-color: #2a2a2a;
  border-color: #f44336;
}

.dark-mode .error-message {
  color: #ffffff;
}

.dark-mode .error-details {
  background-color: #333;
  border-color: #555;
}

.dark-mode .error-details summary {
  color: #ccc;
}

.dark-mode .error-stack {
  background-color: #444;
  color: #fff;
}

/* Dream mode error styles */
.dream-mode .error-container {
  background-color: rgba(34, 34, 34, 0.9);
  border: 2px solid #000000;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(128, 0, 128, 0.4),
    0 0 30px rgba(75, 0, 130, 0.3);
}

.dream-mode .error-title {
  color: #ff6b6b;
  text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}

.dream-mode .error-message {
  color: #ffffff;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.dream-mode .error-actions .retry-button,
.dream-mode .error-actions .home-button {
  border: 2px solid #000000;
  box-shadow: 0 0 10px rgba(128, 0, 128, 0.5);
}

.dream-mode .error-actions .retry-button:hover,
.dream-mode .error-actions .home-button:hover {
  box-shadow: 
    0 0 15px rgba(128, 0, 128, 0.7),
    0 0 25px rgba(75, 0, 130, 0.5);
}

@media (max-width: 768px) {
  .error-container {
    padding: 1.5rem;
  }
  
  .error-title {
    font-size: 1.5rem;
  }
  
  .error-message {
    font-size: 1rem;
  }
  
  .error-actions {
    flex-direction: column;
  }
  
  .error-actions .retry-button,
  .error-actions .home-button {
    width: 100%;
  }
}

.dream-mode .landing-button,
.dream-mode .home-button,
.dream-mode .nav-button,
.dream-mode .contact-button,
.dream-mode .privacy-button,
.dream-mode .view-cart-button,
.dream-mode .add-to-cart-button,
.dream-mode .quantity-button,
.dream-mode .back-button,
.dream-mode .submit-button,
.dream-mode .retry-button,
.dream-mode .options-button,
.dream-mode .cart-button,
.dream-mode .size-option,
.dream-mode .theme-toggle,
.dream-mode .continue-shopping-button,
.dream-mode .back-to-products,
.dream-mode .back-to-cart-button,
.dream-mode a[class*="button"] {
  border: 2px solid #000 !important;
}

/* Button borders for all themes */
.light-mode .submit-button,
.light-mode .remove-item-button,
.light-mode .add-to-cart-button,
.light-mode .quantity-button,
.light-mode .back-button,
.light-mode .continue-shopping-button,
.light-mode .back-to-products,
.light-mode .view-cart-button,
.light-mode .back-to-cart-button,
.light-mode .cart-button,
.light-mode .options-button,
.light-mode .size-option,
.light-mode .theme-toggle,
.light-mode .home-button,
.light-mode .landing-button,
.light-mode .nav-button,
.light-mode .checkout-button,
.light-mode a[class*="button"] {
  border: 3px solid #3e2723 !important;
}
.dark-mode .submit-button,
.dark-mode .remove-item-button,
.dark-mode .add-to-cart-button,
.dark-mode .quantity-button,
.dark-mode .back-button,
.dark-mode .continue-shopping-button,
.dark-mode .back-to-products,
.dark-mode .view-cart-button,
.dark-mode .back-to-cart-button,
.dark-mode .cart-button,
.dark-mode .options-button,
.dark-mode .size-option,
.dark-mode .theme-toggle,
.dark-mode a[class*="button"] {
  border: 2px solid #000 !important;
}
.dream-mode .submit-button,
.dream-mode .remove-item-button,
.dream-mode .add-to-cart-button,
.dream-mode .quantity-button,
.dream-mode .back-button,
.dream-mode .continue-shopping-button,
.dream-mode .back-to-products,
.dream-mode .view-cart-button,
.dream-mode .back-to-cart-button,
.dream-mode .cart-button,
.dream-mode .options-button,
.dream-mode .size-option,
.dream-mode .theme-toggle,
.dream-mode a[class*="button"] {
  border: 2px solid #000 !important;
}

.light-mode .quantity-button:not(.quantity-minus):not(.quantity-plus),
.light-mode .remove-item-button,
.light-mode .add-to-cart-button,
.light-mode .submit-button,
.light-mode .continue-shopping-button,
.light-mode .back-to-products,
.light-mode .view-cart-button,
.light-mode .back-to-cart-button,
.light-mode .cart-button,
.light-mode .options-button,
.light-mode .size-option,
.light-mode .theme-toggle,
.light-mode .home-button,
.light-mode .landing-button,
.light-mode .nav-button,
.light-mode .checkout-button,
.light-mode a[class*="button"] {
  border: 3px solid #3e2723 !important;
}
.dark-mode .quantity-button:not(.quantity-minus):not(.quantity-plus),
.dark-mode .remove-item-button,
.dark-mode .add-to-cart-button,
.dark-mode .submit-button,
.dark-mode .continue-shopping-button,
.dark-mode .back-to-products,
.dark-mode .view-cart-button,
.dark-mode .back-to-cart-button,
.dark-mode .cart-button,
.dark-mode .options-button,
.dark-mode .size-option,
.dark-mode .theme-toggle,
.dark-mode a[class*="button"] {
  border: 2px solid #000 !important;
}
.dream-mode .quantity-button:not(.quantity-minus):not(.quantity-plus),
.dream-mode .remove-item-button,
.dream-mode .add-to-cart-button,
.dream-mode .submit-button,
.dream-mode .continue-shopping-button,
.dream-mode .back-to-products,
.dream-mode .view-cart-button,
.dream-mode .back-to-cart-button,
.dream-mode .cart-button,
.dream-mode .options-button,
.dream-mode .size-option,
.dream-mode .theme-toggle,
.dream-mode a[class*="button"] {
  border: 2px solid #000 !important;
}

.dream-mode::before,
.dream-mode::after,
.dream-mode .main-menu::before,
.dream-mode .main-menu::after,
.dream-mode .landing-screen::before,
.dream-mode .landing-screen::after,
.dream-mode .product-detail::before,
.dream-mode .product-detail::after,
.dream-mode .cart-page::before,
.dream-mode .cart-page::after,
.dream-mode .order-submission::before,
.dream-mode .order-submission::after,
.dream-mode .options-page::before,
.dream-mode .options-page::after,
.dream-mode .privacy-policy-page::before,
.dream-mode .privacy-policy-page::after,
.dream-mode .contact-page::before,
.dream-mode .contact-page::after {
  animation: dreamRainbowHue 40s linear infinite;
  animation-delay: 0s;
  opacity: 0.55;
}

@keyframes dreamRainbowHue {
  0%   { filter: hue-rotate(240deg) saturate(1.2) brightness(1); }
  12.5% { filter: hue-rotate(270deg) saturate(1.2) brightness(1.05); }
  25%  { filter: hue-rotate(300deg) saturate(1.2) brightness(1.1); }
  37.5% { filter: hue-rotate(330deg) saturate(1.2) brightness(1.05); }
  50%  { filter: hue-rotate(0deg)   saturate(1.2) brightness(1); }
  62.5% { filter: hue-rotate(30deg)  saturate(1.2) brightness(1.05); }
  75%  { filter: hue-rotate(60deg)  saturate(1.2) brightness(1.1); }
  87.5% { filter: hue-rotate(90deg)  saturate(1.2) brightness(1.05); }
  100% { filter: hue-rotate(240deg) saturate(1.2) brightness(1); }
}

/* Dream Mode Home Button - match main menu style */
.dream-mode .home-button {
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.5px !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  text-shadow: none !important;
  animation: none !important;
  font-family: var(--font-family);
  transition: all 0.3s ease;
}

.dream-mode .home-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleMainMenu 1.5s ease-in-out infinite alternate !important;
} 

/* Achievements button universal style */
.achievements-btn {
  background: #228B22 !important; /* Forest green */
  color: #fff;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  border: 3px solid #3e2723;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  letter-spacing: 0.02em;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  outline: none;
  display: inline-block;
}

/* Black border in dark mode */
.dark-mode .achievements-btn {
  border: 3px solid #000 !important;
}

/* Forest green in dream mode with high specificity */
.dream-mode .achievements-btn,
body.dream-mode .achievements-btn {
  background: #228B22 !important;
  border: 3px solid #3e2723;
}

.achievements-btn:hover {
  background: #2eaf2e !important;
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.achievements-btn:active, .achievements-btn:focus {
  background: #228B22 !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transform: translateY(0);
} 

.dream-mode .achievements-btn:hover,
body.dream-mode .achievements-btn:hover {
  background: #17641a !important;
  color: #fff !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 0 18px 4px #228B22, 0 4px 16px rgba(0,0,0,0.22) !important;
  animation: none !important;
} 

/* Enhanced Screen Rotation Support for Mobile and Tablet Devices */
@media (max-width: 1024px) {
  /* Enable rotation for tablets and mobile devices */
  html {
    /* Allow orientation changes */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    /* Ensure proper viewport handling */
    width: 100%;
    height: 100%;
    overflow-x: hidden;
  }
  
  body {
    /* Ensure body adapts to rotation */
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: -moz-available;
    min-height: stretch;
    /* Prevent horizontal scrolling during rotation */
    overflow-x: hidden;
    /* Ensure proper sizing */
    width: 100%;
    height: auto;
  }
  
  #root {
    /* Root container adapts to rotation */
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: -moz-available;
    min-height: stretch;
    /* Ensure proper sizing */
    width: 100%;
    height: auto;
    overflow-x: hidden;
  }
  
  /* Main containers adapt to rotation - do NOT trap scroll (no overflow-y: hidden) */
  .main-menu,
  .main-content-panel,
  .title-panel,
  .product-card-container,
  .customer-stats-container,
  .inventory-container,
  .cart-container,
  .admin-container {
    /* Ensure containers adapt to rotated viewport */
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: -moz-available;
    min-height: stretch;
    /* Maintain aspect ratios during rotation */
    aspect-ratio: auto;
    /* Prevent horizontal overflow only - allow vertical scroll to pass to body */
    overflow-x: hidden;
    overflow-y: visible;
    width: 100%;
    /* Let finger scroll work on any tap target */
    touch-action: pan-y;
  }
  
  /* Product images maintain aspect ratio during rotation */
  .product-image-card img,
  .product-image {
    object-fit: contain;
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
    /* Ensure images don't break layout during rotation */
    transition: all 0.3s ease;
  }
  
  /* Form elements adapt to rotation */
  input, textarea, select, button {
    /* Ensure touch targets remain accessible in both orientations */
    min-height: 44px;
    min-width: 44px;
    /* Prevent zoom on iOS during rotation */
    font-size: 16px;
  }
  
  /* Navigation elements adapt to rotation */
  .nav-container,
  .menu-container {
    /* Maintain navigation usability in both orientations */
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Ensure proper sizing */
    width: 100%;
  }
  
  /* Background panels adapt to rotation */
  .landing-background-panel,
  .cart-background-panel,
  .contact-background-panel,
  .options-background-panel,
  .admin-background-panel {
    /* Ensure background panels work in both orientations */
    width: 100%;
    max-width: none;
    /* Prevent overflow */
    overflow-x: hidden;
  }

  /* Admin: single scroll container so tap-and-drag works anywhere on mobile */
  .admin-panel-page {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  .admin-background-panel {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: unset;
  }

  /* Mobile: prevent inner containers from trapping scroll – one scroll root per screen */
  .admin-container,
  .customer-stats-container,
  .stats-main-container,
  .inventory-list-container {
    overflow-y: visible !important;
    max-height: none !important;
    -webkit-overflow-scrolling: unset;
  }
  /* Exception: inside modals, allow modal content to scroll */
  .modal-overlay .customer-stats-container,
  .modal-overlay .stats-main-container {
    overflow-y: auto !important;
    max-height: 80vh;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* Accordion headers: allow vertical scroll when user drags on header (tap still toggles) */
  .accordion-touch-header,
  .responsive-accordion-header,
  .product-accordion-header,
  .pack-accordion-header,
  .item-accordion-header,
  .inventory-panel-main.responsive-accordion-header {
    touch-action: pan-y;
  }
}

/* Specific rotation handling for mobile devices */
@media (max-width: 768px) {
  /* Enhanced rotation support for mobile */
  html {
    /* Prevent zoom on orientation change */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
  }
  
  /* Ensure all interactive elements remain accessible */
  button, input, select, textarea, a {
    /* Maintain touch target size in both orientations */
    min-height: 48px;
    min-width: 48px;
    /* Prevent text scaling */
    font-size: 16px !important;
  }
  
  /* Modal and overlay elements adapt to rotation */
  .modal-overlay,
  .modal-content,
  .overlay {
    /* Ensure modals work in both orientations */
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: -moz-available;
    min-height: stretch;
  }
}

/* Enhanced Landscape Orientation Support */
@media (max-width: 1024px) and (orientation: landscape) {
  /* Optimize layout for landscape mode on mobile/tablet */
  .main-menu,
  .main-content-panel {
    /* Adjust spacing for landscape */
    padding: 10px;
    /* Ensure proper height in landscape */
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
  
  .title-panel {
    /* Compact title panel for landscape */
    padding: 15px 20px;
    margin-bottom: 15px;
  }
  
  .product-card-container {
    /* Optimize product grid for landscape */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
  }
  
  /* Ensure forms work well in landscape */
  .form-container,
  .input-group {
    margin-bottom: 15px;
  }
  
  /* Optimize navigation for landscape */
  .nav-container {
    padding: 8px 15px;
  }
  
  /* Optimize buttons for landscape */
  button {
    padding: 8px 16px;
    font-size: 14px;
  }
  
  /* Ensure proper spacing in landscape */
  .landing-buttons,
  .menu-buttons {
    gap: 15px;
  }
}

/* Enhanced Portrait Orientation Support */
@media (max-width: 1024px) and (orientation: portrait) {
  /* Optimize layout for portrait mode on mobile/tablet */
  .main-menu,
  .main-content-panel {
    /* Standard spacing for portrait */
    padding: 20px;
    /* Ensure proper height in portrait */
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
  
  .title-panel {
    /* Standard title panel for portrait */
    padding: 20px 25px;
    margin-bottom: 20px;
  }
  
  .product-card-container {
    /* Optimize product grid for portrait */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }
  
  /* Ensure forms work well in portrait */
  .form-container,
  .input-group {
    margin-bottom: 20px;
  }
  
  /* Standard navigation for portrait */
  .nav-container {
    padding: 15px 20px;
  }
  
  /* Standard buttons for portrait */
  button {
    padding: 12px 24px;
    font-size: 16px;
  }
  
  /* Standard spacing in portrait */
  .landing-buttons,
  .menu-buttons {
    gap: 20px;
  }
}

/* Mobile-specific rotation optimizations */
@media (max-width: 768px) {
  /* Ensure all elements work properly during rotation */
  * {
    /* Prevent layout breaking during rotation */
    box-sizing: border-box;
  }
  
  /* Optimize for mobile rotation */
  .main-content-panel,
  .landing-background-panel,
  .cart-background-panel,
  .contact-background-panel,
  .options-background-panel,
  .admin-background-panel {
    /* Ensure proper sizing during rotation */
    width: 100% !important;
    max-width: none !important;
    /* Prevent overflow */
    overflow-x: hidden !important;
    /* Smooth transitions */
    transition: all 0.3s ease;
  }
  
  /* Ensure images scale properly during rotation */
  img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
  
  /* Ensure text remains readable during rotation */
  h1, h2, h3, h4, h5, h6, p, span, div {
    /* Prevent text from becoming too small */
    min-font-size: 14px;
    /* Ensure proper line height */
    line-height: 1.4;
  }
}

/* Force Verdana font on all search inputs and inputs */
.search-input,
input.search-input,
input[class*="search"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input {
  font-family: 'Verdana', Geneva, Tahoma, sans-serif !important;
}

/* Tutorial "Okay" / "I Understand" button – hover and tap effects */
.tutorial-okay-btn {
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
}
.tutorial-okay-btn:hover:not(:disabled) {
  transform: scale(1.03);
  box-shadow: 0 4px 14px rgba(16, 142, 188, 0.45);
}
.tutorial-okay-btn:active:not(:disabled) {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(16, 142, 188, 0.3);
}

/* ---------------------------------------------------------------------------
   SCROLL RELIABILITY OVERRIDES
   Ensure wheel/touch drag scroll works from any pointer/touch target.
--------------------------------------------------------------------------- */
html,
body,
#root,
.app,
main {
  overflow-x: hidden !important;
}

body,
#root,
.app,
main {
  min-height: 100vh !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto !important;
}

/* Business/Admin page wrappers must not create nested scroll traps. */
.main-menu,
.admin-panel-page,
.main-content-border-panel,
.main-content-panel,
.business-widget-content,
.business-widget-section,
.admin-background-panel,
.admin-container {
  touch-action: pan-y !important;
  overscroll-behavior-y: auto !important;
}

/* Keep page-level scroll root on admin/business pages. */
.admin-background-panel,
.admin-container {
  overflow-y: visible !important;
  max-height: none !important;
}.add-to-home-screen {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: 90%;
  width: 400px;
}

/* Dream mode - simple approach to block patterns behind popup */
.add-to-home-screen.dream-mode {
  z-index: 9999 !important;
  isolation: isolate !important;
}

.pwa-prompt {
  background-color: #f5f5dc;
  border: 3px solid #3e2723;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease-out;
  position: relative;
  z-index: 1;
}

.pwa-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pwa-icon {
  flex-shrink: 0;
}

.pwa-icon img {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  border: 4px solid #3e2723;
  object-fit: contain;
  background-color: white;
  padding: 6px;
}

.pwa-text h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #3e2723;
  font-family: var(--font-family);
}

.pwa-text p {
  margin: 0;
  font-size: 0.9rem;
  color: #5d4037;
  line-height: 1.4;
}

.pwa-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.pwa-install-button {
  background-color: #8d6e63;
  color: white;
  border: 2px solid #0a1a1d;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.pwa-install-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.pwa-dismiss-button {
  background-color: transparent;
  color: #5d4037;
  border: 2px solid #5d4037;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.3s ease;
}

.pwa-dismiss-button:hover {
  background-color: #14545c;
  color: white;
  transform: translateY(-2px);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Dark mode styles */
.add-to-home-screen.dark-mode .pwa-prompt {
  background-color: #3e2723;
  border-color: #000000;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.add-to-home-screen.dark-mode .pwa-icon img {
  border-color: #000000;
  background-color: #2a2a2a;
}

.add-to-home-screen.dark-mode .pwa-text h3 {
  color: #8d6e63;
}

.add-to-home-screen.dark-mode .pwa-text p {
  color: #a1887f;
}

.add-to-home-screen.dark-mode .pwa-install-button {
  background-color: #14545c;
  border-color: #000000;
}

.add-to-home-screen.dark-mode .pwa-install-button:hover {
  background-color: #795548;
}

.add-to-home-screen.dark-mode .pwa-dismiss-button {
  color: #a1887f;
  border-color: #a1887f;
}

.add-to-home-screen.dark-mode .pwa-dismiss-button:hover {
  background-color: #a1887f;
  color: #3e2723;
}

/* Dream mode styles - add a solid background around the popup */
.add-to-home-screen.dream-mode .pwa-prompt {
  background: #2d1a3c !important;
  background-image: none !important;
  background-color: #2d1a3c !important;
  border-color: #000000 !important;
  box-shadow: 0 0 0 50px #0d0d0d, 0 8px 25px rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative !important;
  z-index: 10000 !important;
  isolation: isolate !important;
  opacity: 1 !important;
}

/* Ensure no dream mode effects bleed through */
.add-to-home-screen.dream-mode .pwa-prompt::before,
.add-to-home-screen.dream-mode .pwa-prompt::after {
  display: none !important;
}

.add-to-home-screen.dream-mode .pwa-icon img {
  border-color: #000000;
  background-color: #111111;
}

.add-to-home-screen.dream-mode .pwa-text h3 {
  color: #3e2723;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.add-to-home-screen.dream-mode .pwa-text p {
  color: #cccccc;
}

.add-to-home-screen.dream-mode .pwa-install-button {
  background-color: #8d6e63;
  color: #000000;
  border-color: #000000;
  font-weight: 900;
  text-shadow: none;
  animation: none;
}

.add-to-home-screen.dream-mode .pwa-install-button:hover {
  background-color: #a1887f;
  color: #3e2723;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4);
  animation: dreamSparkleMainMenu 1.5s ease-in-out infinite alternate;
}

.add-to-home-screen.dream-mode .pwa-dismiss-button {
  color: #cccccc;
  border-color: #cccccc;
  font-weight: 900;
}

.add-to-home-screen.dream-mode .pwa-dismiss-button:hover {
  background-color: #cccccc;
  color: #000000;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .add-to-home-screen {
    bottom: 10px;
    max-width: 95%;
  }
  
  .pwa-prompt {
    padding: 1rem;
  }
  
  .pwa-content {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  
  .pwa-actions {
    flex-direction: column;
  }
  
  .pwa-install-button,
  .pwa-dismiss-button {
    width: 100%;
  }
} 

.add-to-home-screen .pwa-prompt.center-align {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 340px;
  width: 90%;
  margin: 0 auto;
}

.pwa-title {
  font-size: 3.7rem;
  font-weight: 900;
  margin-bottom: 1rem;
  font-family: var(--font-family, 'The Wanters DEMO', sans-serif);
  letter-spacing: 0.5px;
}

.add-to-home-screen.dark-mode .pwa-title,
.add-to-home-screen.dream-mode .pwa-title {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.pwa-icon {
  margin-bottom: 1.5rem;
}

.pwa-actions.vertical {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  align-items: center;
  margin-top: 0.5rem;
}

.pwa-install-button,
.pwa-dismiss-button {
  width: 65%;
  max-width: 200px;
  margin: 0 auto;
}

 
/* ===============================================================================
                                ADMIN PANEL STYLING
=============================================================================== */

/* Main admin panel overlay */
.admin-panel-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  overflow-y: auto;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Removed background pseudo-elements since we're now using a modal overlay */

/* Background panel similar to cart page */
.admin-background-panel {
  background-color: #f5f5dc; /* Light beige background */
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23000000' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 112px 112px, 56px 56px;
  background-position: center, 0 0, 0 0;
  background-blend-mode: soft-light, normal, normal;
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 1200px;
  width: 95%;
  max-height: 90vh;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.admin-background-panel::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

/* Main container inside background panel */
.admin-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Admin title panel */
.admin-title-panel {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #3e2723;
  text-align: center;
  padding: 1rem;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  background-color: #14545c;
  width: 100%;
  max-width: 400px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.admin-title {
  font-size: 3rem;
  font-weight: 900;
  margin: 0;
  color: #f5f5dc !important;
  text-align: center;
}

.admin-close-btn {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.admin-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.admin-close-btn-topright {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  z-index: 10;
}

.admin-close-btn-topright.admin-close-btn-inpanel {
  top: 2.5rem;
  right: 2.5rem;
  /* Slightly down and left, but still top right */
}

/* Authentication Section */
.admin-auth-section {
  text-align: center;
  width: 100%;
  max-width: 500px;
  padding: 2rem;
}

.admin-auth-section h2 {
  color: #3e2723;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  font-weight: 700;
}

.admin-auth-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.admin-input-group {
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.admin-input-group label {
  display: block;
  color: #3e2723;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.admin-input-group input {
  width: 100%;
  padding: 0.8rem;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  font-size: 1.1rem;
  text-align: center;
  transition: border-color 0.3s ease;
}

.admin-input-group input:focus {
  outline: none;
  border-color: #8d6e63;
}

.admin-login-btn {
  padding: 1rem 2rem;
  background-color: #14545c;
  color: white;
  border: 3px solid #0a1a1d;
  border-radius: 9999px;
  font-size: 1.6rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-login-btn:hover:not(:disabled) {
  background-color: #0d353a;
  color: #fff;
  border: 3px solid #06292b;
}

.admin-login-btn:disabled {
  background-color: #d7ccc8;
  cursor: not-allowed;
  transform: none;
  border: 3px solid #0a1a1d;
}

/* Error and Warning Messages */
.admin-error-message {
  background: #ffebee;
  color: #c62828;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #ef9a9a;
  text-align: center;
  font-weight: 600;
}

.admin-warning {
  background: #fff3e0;
  color: #f57c00;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #ffcc02;
  text-align: center;
  font-weight: 600;
}

.admin-lockout-message {
  background: #ffebee;
  color: #c62828;
  padding: 1.5rem;
  border-radius: 6px;
  border: 1px solid #ef9a9a;
  text-align: center;
}

.admin-lockout-message p {
  margin: 0.5rem 0;
  font-weight: 600;
}

/* Admin Content */
.admin-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.admin-action-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #d7ccc8;
  width: 100%;
  max-width: 600px;
}

/* Make Save button green by default */
.admin-save-btn {
  background-color: #27ae60;
  color: #fff;
  border: 3px solid #1e8449;
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.admin-save-btn:hover:not(:disabled) {
  background-color: #2ecc71;
  color: #fff;
  border-color: #1e8449;
}

.admin-save-btn.has-changes {
  background-color: #27ae60;
  border-color: #1e8449;
  animation: pulse 2s infinite;
}

.admin-save-btn.has-changes:hover {
  background-color: #2ecc71;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 1; }
}

.admin-save-btn:disabled {
  background-color: #bdc3c7;
  border-color: #95a5a6;
  cursor: not-allowed;
  opacity: 0.7;
}

.admin-revert-btn {
  background-color: #14545c;
  color: white;
  border: none;
  border: 3px solid #0a1a1d;
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-revert-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #0d353a;
}

.admin-revert-btn:disabled {
  background-color: #bdc3c7;
  border-color: #95a5a6;
  cursor: not-allowed;
  opacity: 0.7;
}

.admin-logout-btn {
  background-color: #e74c3c;
  color: white;
  border: none;
  border: 3px solid #c0392b;
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-logout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #c0392b;
}

.admin-update-message {
  background: #e8f5e8;
  color: #2e7d32;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #4caf50;
  text-align: center;
  font-weight: 600;
  margin-bottom: 1rem;
  width: 100%;
  max-width: 600px;
}

.admin-loading {
  background: #f5f5f5;
  color: #5d4037;
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
}

/* Admin Sections */
.admin-section {
  width: 100%;
  max-width: 1000px;
  margin: 2rem 0;
  background: #f7ede2;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.admin-section h3 {
  color: #3e2723;
  margin: 0 0 1.5rem 0;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

/* Inventory Management Styles */
.admin-inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.admin-inventory-item {
  background: #f5f5dc; /* Match main background cream */
  border: 2px solid #d7ccc8;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-inventory-header h4 {
  color: #3e2723;
  margin: 0 0 1rem 0;
  font-size: 1.4rem;
  font-weight: 700;
}

.admin-inventory-controls {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 1;
}

.admin-size-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.admin-inventory-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.admin-inventory-body {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 1rem;
}

.admin-product-image {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
  border: 3px solid #8d6e63;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.admin-size-control-with-image {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-size-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.admin-size-info label {
  font-weight: 600;
  color: #3e2723;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
  margin-bottom: 0.5rem;
}

.admin-size-control label {
  font-weight: 600;
  color: #3e2723;
  font-size: 2rem;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
}

.admin-size-control-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.admin-size-label {
  font-weight: 600;
  color: #3e2723;
  font-size: 2rem;
  font-family: 'The Wanters DEMO', serif;
  min-width: 50px;
  text-align: left;
}

.admin-quantity-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-plus-btn {
  background: #27ae60;
  color: white;
  border: 2px solid #1e8449;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.admin-minus-btn {
  background: #e74c3c;
  color: white;
  border: 2px solid #c0392b;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.admin-plus-btn:hover {
  background: #2ecc71;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.admin-minus-btn:hover {
  background: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.admin-quantity-display {
  background: white;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #3e2723;
  min-width: 3rem;
  text-align: center;
}

/* Promo Code Styles */
.admin-promo-controls {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

/* Make Create Code button mystic purple */
.admin-create-code-btn {
  background-color: #7c3aed; /* Mystic purple */
  color: #fff;
  border: 3px solid #4b2997;
  font-weight: 700;
  font-size: 1.3rem;
  padding: 1rem 2.2rem;
  border-radius: 32px;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
  transition: background 0.2s, box-shadow 0.2s;
}
.admin-create-code-btn:hover:not(:disabled) {
  background-color: #a78bfa; /* Lighter mystic purple on hover */
  color: #2d0066;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.25);
  border-color: #4b2997;
}

/* Promo code list - make responsive instead of fixed 3-column */
.admin-promo-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.admin-promo-item {
  background: #f5f5dc; /* Match main background cream */
  border: 2px solid #d7ccc8;
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-promo-title-panel {
  width: 100%;
  background: #f5f5dc;
  border: 2px solid #5d4037;
  border-radius: 8px;
  margin-bottom: 1rem;
  padding: 0.7rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.admin-promo-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #3e2723; /* Ensure white text in light mode */
  margin: 0;
  letter-spacing: 0.5px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  font-family: 'The Wanters DEMO', serif;
}

.admin-promo-title-edit {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  font-weight: 800;
  color: #3e2723; /* Ensure white text in light mode */
  margin: 0;
  letter-spacing: 0.5px;
  text-align: center;
  width: 100%;
  outline: none;
  font-family: 'The Wanters DEMO', serif; /* Ensure font inheritance */
}

.admin-promo-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
  padding: 0 1rem;
}

.admin-promo-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.admin-promo-field-label {
  font-weight: 600;
  color: #3e2723;
  font-size: 1.4rem;
  font-family: 'The Wanters DEMO', serif;
  text-align: left;
  min-width: 70px;
  flex-shrink: 0;
}

.admin-promo-text-box {
  background: #f5f5f5;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  font-family: 'Verdana', sans-serif;
  font-weight: bold;
  color: #3e2723;
  width: 180px;
  height: 2.5rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-align: center;
}

.admin-promo-text-box:focus {
  outline: none;
  border-color: #5d4037;
  background: white;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(93, 64, 55, 0.1);
}

.admin-promo-text-box[readonly] {
  background: #e8e8e8;
  cursor: not-allowed;
  color: #666;
}
.admin-promo-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.admin-promo-code {
  font-weight: 700;
  color: #3e2723;
  font-size: 1.1rem;
}

.admin-promo-detail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.admin-promo-detail-label {
  font-weight: 700;
  color: #5d4037;
  min-width: 60px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
}

.admin-promo-detail-value {
  font-weight: 500;
  color: #3e2723;
}

.admin-promo-inline-edit {
  background: white;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-size: 0.95rem;
  color: #3e2723;
  min-width: 80px;
  text-align: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.admin-promo-inline-edit:focus {
  outline: none;
  border-color: #5d4037;
  background: #fff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(93, 64, 55, 0.1);
}

.admin-promo-effect {
  color: #5d4037;
  font-size: 0.9rem;
}

.admin-promo-value {
  font-weight: 600;
  color: #8d6e63;
}

.admin-promo-status {
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

.admin-promo-status.active {
  background: #e8f5e8;
  color: #2e7d32;
}

.admin-promo-status.inactive {
  background: #ffebee;
  color: #c62828;
}

.admin-promo-usage {
  color: #666;
  font-size: 0.9rem;
}

/* Promo code actions */
.admin-promo-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}

.admin-promo-toggle {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-promo-toggle.active {
  background-color: #27ae60;
  color: white;
}

.admin-promo-toggle.active:hover {
  background-color: #2ecc71;
}

.admin-promo-toggle.inactive {
  background-color: #e74c3c;
  color: white;
}

.admin-promo-toggle.inactive:hover {
  background-color: #c0392b;
}

.admin-promo-edit {
  padding: 0.5rem 1rem;
  background-color: #14545c;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-promo-edit:hover {
  background-color: #0d353a;
}

.admin-promo-delete {
  padding: 0.5rem 1rem;
  background-color: #c0392b;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.admin-promo-delete:hover {
  background-color: #e74c3c;
}

/* Popup overlay */
.admin-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.admin-popup {
  background-color: white;
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.admin-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #d7ccc8;
}

.admin-popup-header h3 {
  color: #3e2723;
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
}

.admin-popup-close {
  background: none;
  border: none;
  color: #3e2723;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.admin-popup-close:hover {
  background: rgba(62, 39, 35, 0.1);
}

.admin-popup-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-form-group label {
  color: #3e2723;
  font-weight: 600;
  font-size: 1.1rem;
}

.admin-form-group input,
.admin-form-group select {
  padding: 0.8rem;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.admin-form-group input:focus,
.admin-form-group select:focus {
  outline: none;
  border-color: #8d6e63;
}

.admin-popup-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 2px solid #d7ccc8;
}

.admin-popup-btn {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 9999px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-popup-save {
  background-color: #27ae60;
  color: white;
  border: 3px solid #1e8449;
}

.admin-popup-save:hover {
  background-color: #2ecc71;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.admin-popup-cancel {
  background-color: #e74c3c;
  color: white;
  border: 3px solid #c0392b;
}

.admin-popup-cancel:hover {
  background-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Dark Mode Styles */
.dark-mode .admin-background-panel {
  background-color: #222;
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.3'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23000000' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 112px 112px, 56px 56px;
  background-position: center, 0 0, 0 0;
  background-blend-mode: color-burn, normal, normal;
  border: 3px solid #000000;
}

.dark-mode .admin-container {
  background-color: rgba(62, 39, 35, 0.9);
  color: #fff8e1;
}

.dark-mode .admin-title-panel {
  background-color: #14545c;
  border: 3px solid #0a1a1d;
}

.dark-mode .admin-title {
  color: #f5f5dc !important;
}

.dark-mode .admin-close-btn {
  color: #8d6e63;
}

.dark-mode .admin-close-btn:hover {
  background: rgba(141, 110, 99, 0.2);
}

.dark-mode .admin-auth-section h2,
.dark-mode .admin-welcome h2 {
  color: #8d6e63;
}

.dark-mode .admin-input-group label {
  color: #8d6e63;
}

.dark-mode .admin-input-group input {
  background: #2a2a2a;
  border-color: #5d4037;
  color: #8d6e63;
}

.dark-mode .admin-input-group input:focus {
  border-color: #8d6e63;
}

.dark-mode .admin-login-btn {
  background-color: #14545c;
  border-color: #0a1a1d;
  color: #fff;
}

.dark-mode .admin-login-btn:hover:not(:disabled) {
  background-color: #0d353a;
  color: #fff;
  border: 3px solid #0a1a1d;
}

.dark-mode .admin-login-btn:disabled {
  border: 3px solid #0a1a1d;
}

.dark-mode .admin-logout-btn {
  border-color: #000000;
}

.dark-mode .admin-section {
  background: rgba(42, 42, 42, 0.9);
  border-color: #5d4037;
}

.dark-mode .admin-section h3 {
  color: #8d6e63;
}

.dark-mode .admin-inventory-item {
  background: #3e2723;
  border-color: #5d4037;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .admin-inventory-header h4 {
  color: #8d6e63;
}

.dark-mode .admin-size-control label {
  color: #8d6e63;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
}

.dark-mode .admin-size-info label {
  color: #8d6e63;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
}

.dark-mode .admin-product-image {
  border-color: #8d6e63;
}

.dark-mode .admin-size-label {
  color: #d7ccc8;
}

.dark-mode .admin-plus-btn {
  background: #27ae60;
  color: white;
  border: 2px solid #1e8449;
}

.dark-mode .admin-plus-btn:hover {
  background: #2ecc71;
}

.dark-mode .admin-minus-btn {
  background: #e74c3c;
  color: white;
  border: 2px solid #c0392b;
}

.dark-mode .admin-minus-btn:hover {
  background: #c0392b;
}

.dark-mode .admin-quantity-display {
  background: #f7ede2;
  border-color: #5d4037;
  color: #3e2723;
}

.dark-mode .admin-promo-item {
  background: #3e2723;
  border-color: #5d4037;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .admin-promo-code {
  color: #8d6e63;
}

.dark-mode .admin-promo-effect {
  color: #a1887f;
}

.dark-mode .admin-promo-detail-label {
  color: #a1887f;
}

.dark-mode .admin-promo-detail-value {
  color: #8d6e63;
}

.dark-mode .admin-promo-inline-edit {
  background: #2a2a2a;
  border: 2px solid #8d6e63;
  color: #d7ccc8;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .admin-promo-inline-edit:focus {
  border-color: #a1887f;
  background: #3e2723;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(161, 136, 127, 0.2);
}

.dark-mode .admin-promo-field-label {
  color: #d7ccc8;
}

.dark-mode .admin-promo-text-box {
  background: #f5e5c0; /* Cream brown */
  border: 2px solid #8d6e63; /* Brown border */
  color: #14545c; /* Teal color matching selling button */
}
.dark-mode .admin-promo-text-box:focus {
  background: #fff8e1;
  border-color: #5d4037;
  color: #3e2723;
}
.dark-mode .admin-promo-text-box[readonly] {
  background: #e8e0c8;
  color: #666;
}

.dark-mode .admin-promo-title-edit {
  color: #3e2723;
}

.dark-mode .admin-action-buttons {
  background: rgba(42, 42, 42, 0.1);
  border-color: #5d4037;
}

.dark-mode .admin-save-btn {
  border-color: #000000;
}

.dark-mode .admin-save-btn.has-changes {
  background-color: #27ae60;
  border-color: #1e8449;
}

.dark-mode .admin-revert-btn {
  border-color: #000000;
}

.dark-mode .admin-logout-btn {
  border-color: #000000;
}

.dark-mode .admin-promo-actions {
  background: none;
}

/* Dark mode promo toggle buttons - add black borders */
.dark-mode .admin-promo-toggle.active {
  background-color: #27ae60;
  color: white;
  border: 2px solid #000000; /* Black border for active button */
}

.dark-mode .admin-promo-toggle.active:hover {
  background-color: #2ecc71;
  border: 2px solid #000000; /* Maintain black border on hover */
}

.dark-mode .admin-promo-toggle.inactive {
  background-color: #e74c3c;
  color: white;
  border: 2px solid #000000; /* Black border for inactive button */
}

.dark-mode .admin-promo-toggle.inactive:hover {
  background-color: #c0392b;
  border: 2px solid #000000; /* Maintain black border on hover */
}

.dark-mode .admin-promo-delete {
  background-color: #c0392b;
  color: white;
  border: 2px solid #000000; /* Black border for delete button */
}

.dark-mode .admin-promo-delete:hover {
  background-color: #e74c3c;
  border: 2px solid #000000; /* Maintain black border on hover */
}

.dark-mode .admin-popup {
  background-color: #2a2a2a;
  border-color: #5d4037;
}

.dark-mode .admin-popup-header {
  border-color: #5d4037;
}

.dark-mode .admin-popup-header h3 {
  color: #8d6e63;
}

.dark-mode .admin-popup-close {
  color: #8d6e63;
}

.dark-mode .admin-popup-close:hover {
  background: rgba(141, 110, 99, 0.2);
}

.dark-mode .admin-form-group label {
  color: #8d6e63;
}

.dark-mode .admin-form-group input,
.dark-mode .admin-form-group select {
  background: #1a1a1a;
  border-color: #5d4037;
  color: #8d6e63;
}

.dark-mode .admin-form-group input:focus,
.dark-mode .admin-form-group select:focus {
  border-color: #8d6e63;
}

.dark-mode .admin-popup-actions {
  border-color: #5d4037;
}

.dark-mode .admin-popup-save {
  border-color: #1e8449;
}

.dark-mode .admin-popup-cancel {
  border-color: #c0392b;
}

/* Dream Mode Styles */
.dream-mode .admin-background-panel {
  background: linear-gradient(135deg, #4a148c 0%, #6a1b9a 25%, #8e24aa 50%, #9c27b0 75%, #ab47bc 100%);
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.3) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%234a148c' stroke-width='1.5' stroke-opacity='0.4'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23000000' fill-opacity='0.2' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 300px 300px, 300px 300px, 112px 112px, 56px 56px;
  background-position: center, 0 0, 150px 150px, 0 0, 0 0;
  background-blend-mode: soft-light, normal, normal, normal, normal;
  border: 3px solid #4a148c;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-container {
  background-color: rgba(255, 255, 255, 0.95);
  color: #333333;
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-title-panel {
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 50%, #6a1b9a 100%);
  border: 3px solid #1a0033;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-title {
  color: #3e2723;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
}

.dream-mode .admin-close-btn {
  color: #3e2723;
}

.dream-mode .admin-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.dream-mode .admin-auth-section h2,
.dream-mode .admin-welcome h2 {
  color: #333333;
  text-shadow: none;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
}

.dream-mode .admin-input-group label {
  color: #333333;
  text-shadow: none;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
}

.dream-mode .admin-input-group input {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-input-group input:focus {
  border-color: #6a1b9a;
  box-shadow: 0 0 15px rgba(106, 27, 154, 0.4);
  background: #fff;
}

.dream-mode .admin-login-btn {
  background-color: #14545c;
  border-color: #0a1a1d;
  color: #fff;
}

.dream-mode .admin-login-btn:hover:not(:disabled) {
  background-color: #0d353a;
  color: #fff;
  border: 3px solid #0a1a1d;
}

.dream-mode .admin-login-btn:disabled {
  border: 3px solid #0a1a1d;
}

.dream-mode .admin-logout-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-logout-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-section {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-section h3 {
  color: #3e2723;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 50%, #6a1b9a 100%);
  border: 3px solid #1a0033;
  border-radius: 15px;
  padding: 1rem 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-inventory-item {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-inventory-header h4 {
  color: #3e2723;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 50%, #6a1b9a 100%);
  border: 2px solid #1a0033;
  border-radius: 12px;
  padding: 0.8rem 1.5rem;
  text-align: center;
  box-shadow: 0 3px 10px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-size-control label {
  color: #333333;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-size-info label {
  color: #333333;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-product-image {
  border: 3px solid #4a148c;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-size-label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-plus-btn {
  background: #27ae60;
  color: white;
  border: 2px solid #1e8449;
}

.dream-mode .admin-plus-btn:hover {
  background: #2ecc71;
}

.dream-mode .admin-minus-btn {
  background: #e74c3c;
  color: white;
  border: 2px solid #c0392b;
}

.dream-mode .admin-minus-btn:hover {
  background: #c0392b;
}

.dream-mode .admin-quantity-display {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
}

.dream-mode .admin-promo-item {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-promo-code {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-promo-effect {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-value {
  color: #00bcd4;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-promo-detail-label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-detail-value {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-inline-edit {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-promo-inline-edit:focus {
  border-color: #6a1b9a;
  background: #fff;
  box-shadow: 0 0 15px rgba(106, 27, 154, 0.4);
}

.dream-mode .admin-promo-field-label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-text-box {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  font-weight: bold;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-promo-text-box:focus {
  border-color: #6a1b9a;
  background: #fff;
  box-shadow: 0 0 15px rgba(106, 27, 154, 0.4);
}

.dream-mode .admin-promo-text-box[readonly] {
  background: #1a1a1a;
  color: #999;
}

.dream-mode .admin-promo-title-edit {
  color: #3e2723;
}

.dream-mode .admin-action-buttons {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-save-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-save-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-save-btn.has-changes {
  background-color: #27ae60;
  border-color: #1e8449;
  color: white;
}

.dream-mode .admin-save-btn.has-changes:hover {
  background-color: #2ecc71;
}

.dream-mode .admin-revert-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-revert-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-logout-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-logout-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-popup {
  background-color: rgba(255, 255, 255, 0.95);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-popup-header {
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 50%, #6a1b9a 100%);
  border: 3px solid #1a0033;
  border-radius: 12px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-popup-header h3 {
  color: #3e2723;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
}

.dream-mode .admin-popup-close {
  color: #3e2723;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.dream-mode .admin-popup-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.dream-mode .admin-form-group label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-form-group input,
.dream-mode .admin-form-group select {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-form-group input:focus,
.dream-mode .admin-form-group select:focus {
  border-color: #6a1b9a;
  box-shadow: 0 0 15px rgba(106, 27, 154, 0.4);
  background: #fff;
}

.dream-mode .admin-popup-actions {
  border-top: 2px solid #4a148c;
  margin-top: 1rem;
  padding-top: 1rem;
}

.dream-mode .admin-popup-save {
  border-color: #1e8449;
}

.dream-mode .admin-popup-cancel {
  border-color: #c0392b;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .admin-promo-list {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .admin-background-panel {
    width: 98%;
    padding: 1rem;
  }
  
  .admin-container {
    padding: 1.5rem;
  }
  
  .admin-title-panel {
    max-width: 100%;
  }
  
  .admin-title {
    font-size: 2rem;
  }
  
  .admin-inventory-grid {
    grid-template-columns: 1fr;
  }
  
  .admin-promo-list {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.5rem;
  }
  
  .admin-action-buttons {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
  
  /* Button widths are controlled in src/styles/AdminPanel.css to keep all admin buttons identical across breakpoints */
}

@media (max-width: 480px) {
  .admin-panel-page {
    padding: 0.5rem;
  }
  
  .admin-background-panel {
    padding: 0.5rem;
  }
  
  .admin-container {
    padding: 1rem;
  }
  
  .admin-title {
    font-size: 1.8rem;
  }
  
  .admin-close-btn {
    font-size: 1.5rem;
  }
} 

.admin-theme-toggle-bar {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
} 

.admin-section-title-panel {
  width: 100%;
  background: #f5f5dc;
  border: 2px solid #5d4037;
  border-radius: 10px;
  margin-bottom: 2rem;
  padding: 1.2rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.admin-section-title {
  font-size: 2.6rem;
  font-weight: 900;
  color: #3e2723;
  margin: 0;
  letter-spacing: 1px;
  text-align: center;
}

.admin-flavour-title-panel {
  flex: 1;
  background: #f5f5dc;
  border: 2px solid #5d4037;
  border-radius: 8px;
  padding: 0.7rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.admin-inventory-item h3 {
  font-size: 1.7rem;
  font-weight: 800;
  color: #3e2723;
  margin: 0;
  letter-spacing: 0.5px;
  text-align: center;
}

.dark-mode .admin-section-title-panel,
.dream-mode .admin-section-title-panel,
.dark-mode .admin-promo-title-panel,
.dream-mode .admin-promo-title-panel {
  background: #14545c;
  border: 2px solid #0a1a1d;
  color: #ffffff;
}
.dark-mode .admin-flavour-title-panel,
.dream-mode .admin-flavour-title-panel {
  background: #f5f5dc;
  border: 2px solid #5d4037;
  color: #3e2723;
} 

@media (max-width: 600px) {
  .admin-promo-list {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .admin-promo-item {
    padding: 1rem;
    gap: 0.2rem;
  }
  .admin-promo-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
  }
  .admin-promo-actions {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.3rem;
  }
} 

/* Make Active and Delete buttons larger in promo actions */
.admin-promo-toggle,
.admin-promo-delete {
  padding: 0.8rem 2rem;
  font-size: 1.2rem;
  border-radius: 28px;
}

/* Ensure dark mode variants inherit the larger size */
.dark-mode .admin-promo-toggle,
.dark-mode .admin-promo-delete {
  padding: 0.8rem 2rem;
  font-size: 1.2rem;
  border-radius: 28px;
} 

/* Dark mode: Create Code button gets a black border */
.dark-mode .admin-create-code-btn {
  border: 3px solid #000;
  background-color: #7c3aed;
  color: #fff;
}
.dark-mode .admin-create-code-btn:hover:not(:disabled) {
  border: 3px solid #000;
  background-color: #a78bfa;
  color: #2d0066;
} 

/* Promo panel titles: white in light/dream, black in dark mode */
.admin-promo-title {
  color: #fff !important;
}
.dream-mode .admin-promo-title {
  color: #fff !important;
}
.dark-mode .admin-promo-title {
  color: #000 !important;
}

.admin-promo-title-edit {
  color: #fff !important;
}
.dream-mode .admin-promo-title-edit {
  color: #fff !important;
}
.dark-mode .admin-promo-title-edit {
  color: #000 !important;
} 

/* Make Revert button mystic purple like Create Code */
.admin-revert-btn {
  background-color: #7c3aed;
  color: #fff;
  border: 3px solid #4b2997;
  font-weight: 700;
  transition: background 0.2s, box-shadow 0.2s;
}
.admin-revert-btn:hover:not(:disabled) {
  background-color: #a78bfa;
  color: #2d0066;
  border-color: #4b2997;
}
.dark-mode .admin-revert-btn {
  background-color: #7c3aed;
  color: #fff;
  border: 3px solid #000;
}
.dark-mode .admin-revert-btn:hover:not(:disabled) {
  background-color: #a78bfa;
  color: #2d0066;
  border: 3px solid #000;
} 

/* Promo Code Creation Modal Styles */
.admin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-modal {
  background: #fff;
  border: 3px solid #5d4037;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  padding: 2.2rem 2rem 1.5rem 2rem;
  min-width: 320px;
  max-width: 95vw;
  width: 400px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.admin-modal-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 2.1rem;
  color: #3e2723;
  margin-bottom: 1.2rem;
  text-align: center;
  font-weight: 800;
}
.admin-modal-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}
.admin-modal-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: #3e2723;
  margin-bottom: 0.3rem;
  font-family: 'The Wanters DEMO', serif;
}
.admin-modal-input {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 2px solid #d7ccc8;
  border-radius: 7px;
  font-size: 1.1rem;
  color: #3e2723;
  background: #f5f5dc;
  font-family: 'Verdana', sans-serif;
  font-weight: 600;
  margin-bottom: 0.2rem;
  transition: border-color 0.2s;
}
.admin-modal-input:focus {
  outline: none;
  border-color: #8d6e63;
  background: #fff;
}
.admin-modal-actions {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  width: 100%;
}
.admin-modal-save-btn {
  background: #27ae60;
  color: #fff;
  border: 3px solid #1e8449;
  border-radius: 9999px;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.admin-modal-save-btn:hover {
  background: #2ecc71;
}
.admin-modal-cancel-btn {
  background: #e74c3c;
  color: #fff;
  border: 3px solid #c0392b;
  border-radius: 9999px;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.admin-modal-cancel-btn:hover {
  background: #c0392b;
}

/* Dark Mode Modal Styles */
.dark-mode .admin-modal {
  background: #2a2a2a;
  border-color: #5d4037;
}
.dark-mode .admin-modal-title {
  color: #8d6e63;
}
.dark-mode .admin-modal-label {
  color: #8d6e63;
}
.dark-mode .admin-modal-input {
  background: #f5e5c0;
  border-color: #8d6e63;
  color: #3e2723;
}
.dark-mode .admin-modal-input:focus {
  background: #fff8e1;
  border-color: #5d4037;
}
.dark-mode .admin-modal-save-btn {
  border-color: #000;
}
.dark-mode .admin-modal-cancel-btn {
  border-color: #000;
}

/* Dream Mode Modal Styles */
.dream-mode .admin-modal {
  background: #2a2a2a;
  border-color: #8a2be2;
  box-shadow: 0 10px 30px rgba(138, 43, 226, 0.3);
}
.dream-mode .admin-modal-title {
  color: #3e2723;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.dream-mode .admin-modal-label {
  color: #3e2723;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.dream-mode .admin-modal-input {
  background: #2a2a2a;
  border-color: #8a2be2;
  color: #3e2723;
}
.dream-mode .admin-modal-input:focus {
  background: #1a1a1a;
  border-color: #a855f7;
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.3);
}
.dream-mode .admin-modal-save-btn {
  border-color: #8a2be2;
  background: #8a2be2;
  color: #3e2723;
}
.dream-mode .admin-modal-save-btn:hover {
  background: #a855f7;
}
.dream-mode .admin-modal-cancel-btn {
  border-color: #8a2be2;
} 

/* Promo code usage progress bar */
.admin-promo-usage-bar-container {
  width: 90%;
  margin: 0.7rem auto 0.2rem auto;
  background: #2a2a2a;
  border-radius: 12px;
  height: 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
}
.admin-promo-usage-bar {
  height: 100%;
  border-radius: 12px 0 0 12px;
  transition: width 0.4s cubic-bezier(.4,2,.6,1);
}
.admin-promo-usage-bar.green { background: #27ae60; }
.admin-promo-usage-bar.yellow { background: #f1c40f; }
.admin-promo-usage-bar.red { background: #e74c3c; }
.admin-promo-usage-bar-label {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: 1px;
  font-family: 'The Wanters DEMO', serif;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
} 

.admin-promo-list.single-promo {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  grid-template-columns: none !important;
}
.admin-promo-list.single-promo .admin-promo-item {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}

.admin-promo-usage-bar.unlimited {
  background: #e0e0e0;
  height: 16px;
  border-radius: 8px;
  margin-bottom: 0.3rem;
  width: 100%;
  box-shadow: none;
  position: relative;
  border: none;
}
.dark-mode .admin-promo-usage-bar.unlimited {
  border: 2px solid #000;
  background: #bdbdbd;
}
.admin-promo-usage-bar-label {
  display: block;
  text-align: center;
  font-weight: 700;
  color: #3e2723;
  font-size: 1.1rem;
  margin-top: 0.2rem;
}

/* Stats Section Styles */
.admin-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

.admin-stats-panel {
  background: #f5f5f5;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-stats-panel-title {
  background: #167c7c;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  text-align: center;
  border: 1px solid #000;
}

.admin-stats-panel-title h3 {
  color: #fff;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.7rem;
  letter-spacing: 1px;
}

.admin-stats-panel-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Time Selector Buttons */
.admin-stats-time-selector {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.admin-stats-time-btn {
  background: #e0e0e0;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.admin-stats-time-btn:hover {
  background: #d0d0d0;
}

.admin-stats-time-btn.active {
  background: #2E7D5A;
  color: white;
}

/* Metrics Display */
.admin-stats-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-stats-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.admin-stats-metric-label {
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-metric-value {
  font-weight: bold;
  color: #2E7D5A;
  font-size: 1.1rem;
}

/* Table Styles */
.admin-stats-table {
  background: white;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.admin-stats-table-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  background: #2E7D5A;
  color: white;
  padding: 0.75rem;
  font-weight: bold;
  text-align: center;
}

.admin-stats-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  padding: 0.75rem;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.admin-stats-table-row:last-child {
  border-bottom: none;
}

.admin-stats-table-row:nth-child(even) {
  background: #f9f9f9;
}

/* Bar Chart Styles */
.admin-stats-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.admin-stats-bar-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.admin-stats-bar-label {
  min-width: 100px;
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-bar-container {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0.5rem;
}

.admin-stats-bar {
  height: 20px;
  border-radius: 10px;
  min-width: 20px;
  transition: width 0.3s ease;
}

.admin-stats-bar-value {
  font-weight: bold;
  color: #4B2E19;
  min-width: 30px;
}

/* Day Chart Styles */
.admin-stats-day-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-stats-day-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.admin-stats-day-item span:first-child {
  min-width: 80px;
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-day-bar {
  height: 15px;
  background: #2E7D5A;
  border-radius: 7px;
  flex: 1;
  max-width: 200px;
  transition: width 0.3s ease;
}

.admin-stats-day-item span:last-child {
  font-weight: bold;
  color: #2E7D5A;
  min-width: 30px;
}

/* Time Chart Styles */
.admin-stats-time-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-stats-time-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.admin-stats-time-item span:first-child {
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-time-item span:last-child {
  font-weight: bold;
  color: #2E7D5A;
}

/* Subsection Styles */
.admin-stats-subsection {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-stats-subsection h4 {
  margin: 0;
  color: #4B2E19;
  font-size: 1.35rem;
  font-weight: bold;
  border-bottom: 2px solid #2E7D5A;
  padding-bottom: 0.25rem;
  text-align: center;
  letter-spacing: 0.5px;
}

/* Dark Mode Styles */
.dark-mode .admin-stats-panel {
  background: #222;
  border: 3px solid #5d4037;
}

.dark-mode .admin-stats-metric {
  background: #3a3a3a;
  border-color: #555;
}

.dark-mode .admin-stats-metric-label {
  color: #e0e0e0;
}

.dark-mode .admin-stats-table {
  background: #3a3a3a;
  border-color: #555;
}

.dark-mode .admin-stats-table-row {
  border-color: #555;
  color: #e0e0e0;
}

.dark-mode .admin-stats-table-row:nth-child(even) {
  background: #333;
}

.dark-mode .admin-stats-day-item,
.dark-mode .admin-stats-time-item {
  background: #3a3a3a;
  border-color: #555;
  color: #e0e0e0;
}

.dark-mode .admin-stats-day-item span:first-child,
.dark-mode .admin-stats-time-item span:first-child {
  color: #e0e0e0;
}

.dark-mode .admin-stats-subsection h4 {
  color: #e0e0e0;
}

/* Dream Mode Styles */
.dream-mode .admin-stats-panel {
  background: #2a2a2a;
  border: 2px solid #8a2be2;
}

.dream-mode .admin-stats-panel-title {
  background: #8a2be2;
  border: 2px solid #8a2be2;
}

.dream-mode .admin-stats-metric {
  background: rgba(42, 42, 42, 0.9);
  border-color: #8a2be2;
  color: white;
}

.dream-mode .admin-stats-metric-label {
  color: #3e2723;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dream-mode .admin-stats-metric-value {
  color: #3e2723;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dream-mode .admin-stats-time-btn {
  background: rgba(42, 42, 42, 0.9);
  color: white;
  border: 1px solid #8a2be2;
}

.dream-mode .admin-stats-time-btn:hover {
  background: rgba(138, 43, 226, 0.3);
}

.dream-mode .admin-stats-time-btn.active {
  background: #8a2be2;
  border-color: #8a2be2;
}

/* Responsive Design */
@media (max-width: 768px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .admin-stats-time-selector {
    flex-direction: column;
    align-items: stretch;
  }
  
  .admin-stats-table-header,
  .admin-stats-table-row {
    grid-template-columns: 1fr 80px 80px 80px;
    font-size: 0.9rem;
  }
  
  .admin-stats-bar-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  
  .admin-stats-bar-label {
    min-width: auto;
  }
}

.admin-stats-leaderboard {
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
  margin-bottom: 1rem;
  overflow: hidden;
}
.admin-stats-leaderboard-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  background: #167c7c;
  color: white;
  font-weight: bold;
  padding: 0.75rem;
  text-align: center;
}
.admin-stats-leaderboard-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 0.75rem;
  border-bottom: 1px solid #eee;
  text-align: center;
  font-weight: 500;
  color: #4B2E19;
  background: #f9f9f9;
}
.admin-stats-leaderboard-row:nth-child(even) {
  background: #f5f5f5;
}
.admin-stats-leaderboard-row:last-child {
  border-bottom: none;
}

.dark-mode .admin-stats-leaderboard {
  background: #2a2a2a;
  border-color: #555;
}
.dark-mode .admin-stats-leaderboard-header {
  background: #167c7c;
  color: #fff;
}
.dark-mode .admin-stats-leaderboard-row {
  color: #e0e0e0;
  background: #333;
  border-color: #555;
}
.dream-mode .admin-stats-leaderboard-header {
  background: #167c7c;
  color: #fff;
}
.dream-mode .admin-stats-leaderboard {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
}
.dream-mode .admin-stats-leaderboard-row {
  color: #fff;
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}

:root {
  --cream-brown-bg: #f8f3e6;
  --cream-brown-text: #4B2E19;
  --admin-panel-bg-dark: #3a2320;
}

.dark-mode input,
.dark-mode .admin-promo-text-box,
.dark-mode .admin-modal-input,
.dark-mode .admin-stats-table,
.dark-mode .admin-stats-table-row,
.dark-mode .admin-stats-leaderboard,
.dark-mode .admin-stats-leaderboard-row {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
  border-color: #555;
}

.dark-mode .admin-stats-table-header,
.dark-mode .admin-stats-leaderboard-header {
  background: #167c7c;
  color: #fff;
}

.dark-mode .admin-stats-metric,
.dark-mode .admin-stats-panel-content input,
.dark-mode .admin-stats-panel-content .admin-promo-text-box {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
}

.dark-mode .privacy-policy-panel,
.dark-mode .privacy-policy-content,
.dark-mode .privacy-policy-box {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
}

.dark-mode .admin-stats-day-bar {
  background: #167c7c;
}

.dark-mode .admin-stats-day-item,
.dark-mode .admin-stats-time-item {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
  border: 2px solid #3a2a1a !important;
}

.dark-mode .admin-stats-panel {
  background: var(--admin-panel-bg-dark);
  border: 2.5px solid #000;
}

.dark-mode .admin-stats-subsection h4 {
  color: #f8f3e6 !important;
  text-shadow: 0 0 1px #000, 0 1px 1px #000, 1px 0 1px #000, -1px 0 1px #000;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  min-height: 100vh;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--text-color);
}

.app-header {
  background-color: #4CAF50;
  color: white;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.app-header h1 {
  margin: 0.5rem 0;
  font-size: 2.2rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.app-header nav {
  display: flex;
  gap: 2rem;
  margin-top: 0.5rem;
  width: 100%;
  justify-content: center;
}

.nav-link {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

main {
  flex: 1;
  background-color: var(--bg-color);
}

.back-button {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.back-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.dark-mode .back-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  .app-header {
    padding: 1rem;
  }
  
  .app-header h1 {
    font-size: 1.8rem;
  }
  
  main {
    padding: 1rem;
  }
}

@media (min-width: 768px) {
  .app-header h1 {
    font-size: 2.5rem;
  }

  .app-header h2 {
    font-size: 1.8rem;
  }

  .back-button {
    font-size: 1.1rem;
  }
} 
/* ===============================================================================
                                CART PAGE STYLING
=============================================================================== */

/* Main cart page container */
.cart-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 1rem;
  position: relative;
}

.cart-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.cart-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Background panel similar to contacts page */
.cart-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Main container inside background panel */
.cart-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Orders title panel */
.orders-title-panel {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #3e2723;
  text-align: center;
  padding: 1rem;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  background-color: #14545c;
  width: 100%;
  max-width: 400px;
}

.orders-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #3e2723;
  text-align: center;
}

/* Navigation button */
.add-to-home-screen {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: 90%;
  width: 400px;
}

/* Dream mode - simple approach to block patterns behind popup */
.add-to-home-screen.dream-mode {
  z-index: 9999 !important;
  isolation: isolate !important;
}

.pwa-prompt {
  background-color: #f5f5dc;
  border: 3px solid #3e2723;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease-out;
  position: relative;
  z-index: 1;
}

.pwa-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pwa-icon {
  flex-shrink: 0;
}

.pwa-icon img {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  border: 4px solid #3e2723;
  object-fit: contain;
  background-color: white;
  padding: 6px;
}

.pwa-text h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #3e2723;
  font-family: var(--font-family);
}

.pwa-text p {
  margin: 0;
  font-size: 0.9rem;
  color: #5d4037;
  line-height: 1.4;
}

.pwa-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.pwa-install-button {
  background-color: #8d6e63;
  color: white;
  border: 2px solid #0a1a1d;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.pwa-install-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.pwa-dismiss-button {
  background-color: transparent;
  color: #5d4037;
  border: 2px solid #5d4037;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.3s ease;
}

.pwa-dismiss-button:hover {
  background-color: #14545c;
  color: white;
  transform: translateY(-2px);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Dark mode styles */
.add-to-home-screen.dark-mode .pwa-prompt {
  background-color: #3e2723;
  border-color: #000000;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.add-to-home-screen.dark-mode .pwa-icon img {
  border-color: #000000;
  background-color: #2a2a2a;
}

.add-to-home-screen.dark-mode .pwa-text h3 {
  color: #8d6e63;
}

.add-to-home-screen.dark-mode .pwa-text p {
  color: #a1887f;
}

.add-to-home-screen.dark-mode .pwa-install-button {
  background-color: #14545c;
  border-color: #000000;
}

.add-to-home-screen.dark-mode .pwa-install-button:hover {
  background-color: #795548;
}

.add-to-home-screen.dark-mode .pwa-dismiss-button {
  color: #a1887f;
  border-color: #a1887f;
}

.add-to-home-screen.dark-mode .pwa-dismiss-button:hover {
  background-color: #a1887f;
  color: #3e2723;
}

/* Dream mode styles - add a solid background around the popup */
.add-to-home-screen.dream-mode .pwa-prompt {
  background: #2d1a3c !important;
  background-image: none !important;
  background-color: #2d1a3c !important;
  border-color: #000000 !important;
  box-shadow: 0 0 0 50px #0d0d0d, 0 8px 25px rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative !important;
  z-index: 10000 !important;
  isolation: isolate !important;
  opacity: 1 !important;
}

/* Ensure no dream mode effects bleed through */
.add-to-home-screen.dream-mode .pwa-prompt::before,
.add-to-home-screen.dream-mode .pwa-prompt::after {
  display: none !important;
}

.add-to-home-screen.dream-mode .pwa-icon img {
  border-color: #000000;
  background-color: #111111;
}

.add-to-home-screen.dream-mode .pwa-text h3 {
  color: #3e2723;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.add-to-home-screen.dream-mode .pwa-text p {
  color: #cccccc;
}

.add-to-home-screen.dream-mode .pwa-install-button {
  background-color: #8d6e63;
  color: #000000;
  border-color: #000000;
  font-weight: 900;
  text-shadow: none;
  animation: none;
}

.add-to-home-screen.dream-mode .pwa-install-button:hover {
  background-color: #a1887f;
  color: #3e2723;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4);
  animation: dreamSparkleMainMenu 1.5s ease-in-out infinite alternate;
}

.add-to-home-screen.dream-mode .pwa-dismiss-button {
  color: #cccccc;
  border-color: #cccccc;
  font-weight: 900;
}

.add-to-home-screen.dream-mode .pwa-dismiss-button:hover {
  background-color: #cccccc;
  color: #000000;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .add-to-home-screen {
    bottom: 10px;
    max-width: 95%;
  }
  
  .pwa-prompt {
    padding: 1rem;
  }
  
  .pwa-content {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  
  .pwa-actions {
    flex-direction: column;
  }
  
  .pwa-install-button,
  .pwa-dismiss-button {
    width: 100%;
  }
} 

.add-to-home-screen .pwa-prompt.center-align {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 340px;
  width: 90%;
  margin: 0 auto;
}

.pwa-title {
  font-size: 3.7rem;
  font-weight: 900;
  margin-bottom: 1rem;
  font-family: var(--font-family, 'The Wanters DEMO', sans-serif);
  letter-spacing: 0.5px;
}

.add-to-home-screen.dark-mode .pwa-title,
.add-to-home-screen.dream-mode .pwa-title {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.pwa-icon {
  margin-bottom: 1.5rem;
}

.pwa-actions.vertical {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  align-items: center;
  margin-top: 0.5rem;
}

.pwa-install-button,
.pwa-dismiss-button {
  width: 65%;
  max-width: 200px;
  margin: 0 auto;
}

 
/* ===============================================================================
                                ADMIN PANEL STYLING
=============================================================================== */

/* Main admin panel overlay */
.admin-panel-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  overflow-y: auto;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Removed background pseudo-elements since we're now using a modal overlay */

/* Background panel similar to cart page */
.admin-background-panel {
  background-color: #f5f5dc; /* Light beige background */
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23000000' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 112px 112px, 56px 56px;
  background-position: center, 0 0, 0 0;
  background-blend-mode: soft-light, normal, normal;
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 1200px;
  width: 95%;
  max-height: 90vh;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.admin-background-panel::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

/* Main container inside background panel */
.admin-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Admin title panel */
.admin-title-panel {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #3e2723;
  text-align: center;
  padding: 1rem;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  background-color: #14545c;
  width: 100%;
  max-width: 400px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.admin-title {
  font-size: 3rem;
  font-weight: 900;
  margin: 0;
  color: #f5f5dc !important;
  text-align: center;
}

.admin-close-btn {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.admin-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.admin-close-btn-topright {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  z-index: 10;
}

.admin-close-btn-topright.admin-close-btn-inpanel {
  top: 2.5rem;
  right: 2.5rem;
  /* Slightly down and left, but still top right */
}

/* Authentication Section */
.admin-auth-section {
  text-align: center;
  width: 100%;
  max-width: 500px;
  padding: 2rem;
}

.admin-auth-section h2 {
  color: #3e2723;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  font-weight: 700;
}

.admin-auth-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.admin-input-group {
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.admin-input-group label {
  display: block;
  color: #3e2723;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.admin-input-group input {
  width: 100%;
  padding: 0.8rem;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  font-size: 1.1rem;
  text-align: center;
  transition: border-color 0.3s ease;
}

.admin-input-group input:focus {
  outline: none;
  border-color: #8d6e63;
}

.admin-login-btn {
  padding: 1rem 2rem;
  background-color: #14545c;
  color: white;
  border: 3px solid #0a1a1d;
  border-radius: 9999px;
  font-size: 1.6rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-login-btn:hover:not(:disabled) {
  background-color: #0d353a;
  color: #fff;
  border: 3px solid #06292b;
}

.admin-login-btn:disabled {
  background-color: #d7ccc8;
  cursor: not-allowed;
  transform: none;
  border: 3px solid #0a1a1d;
}

/* Error and Warning Messages */
.admin-error-message {
  background: #ffebee;
  color: #c62828;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #ef9a9a;
  text-align: center;
  font-weight: 600;
}

.admin-warning {
  background: #fff3e0;
  color: #f57c00;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #ffcc02;
  text-align: center;
  font-weight: 600;
}

.admin-lockout-message {
  background: #ffebee;
  color: #c62828;
  padding: 1.5rem;
  border-radius: 6px;
  border: 1px solid #ef9a9a;
  text-align: center;
}

.admin-lockout-message p {
  margin: 0.5rem 0;
  font-weight: 600;
}

/* Admin Content */
.admin-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.admin-action-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #d7ccc8;
  width: 100%;
  max-width: 600px;
}

/* Make Save button green by default */
.admin-save-btn {
  background-color: #27ae60;
  color: #fff;
  border: 3px solid #1e8449;
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.admin-save-btn:hover:not(:disabled) {
  background-color: #2ecc71;
  color: #fff;
  border-color: #1e8449;
}

.admin-save-btn.has-changes {
  background-color: #27ae60;
  border-color: #1e8449;
  animation: pulse 2s infinite;
}

.admin-save-btn.has-changes:hover {
  background-color: #2ecc71;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 1; }
}

.admin-save-btn:disabled {
  background-color: #bdc3c7;
  border-color: #95a5a6;
  cursor: not-allowed;
  opacity: 0.7;
}

.admin-revert-btn {
  background-color: #14545c;
  color: white;
  border: none;
  border: 3px solid #0a1a1d;
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-revert-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #0d353a;
}

.admin-revert-btn:disabled {
  background-color: #bdc3c7;
  border-color: #95a5a6;
  cursor: not-allowed;
  opacity: 0.7;
}

.admin-logout-btn {
  background-color: #e74c3c;
  color: white;
  border: none;
  border: 3px solid #c0392b;
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-logout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #c0392b;
}

.admin-update-message {
  background: #e8f5e8;
  color: #2e7d32;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #4caf50;
  text-align: center;
  font-weight: 600;
  margin-bottom: 1rem;
  width: 100%;
  max-width: 600px;
}

.admin-loading {
  background: #f5f5f5;
  color: #5d4037;
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
}

/* Admin Sections */
.admin-section {
  width: 100%;
  max-width: 1000px;
  margin: 2rem 0;
  background: #f7ede2;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.admin-section h3 {
  color: #3e2723;
  margin: 0 0 1.5rem 0;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

/* Inventory Management Styles */
.admin-inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.admin-inventory-item {
  background: #f5f5dc; /* Match main background cream */
  border: 2px solid #d7ccc8;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-inventory-header h4 {
  color: #3e2723;
  margin: 0 0 1rem 0;
  font-size: 1.4rem;
  font-weight: 700;
}

.admin-inventory-controls {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 1;
}

.admin-size-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.admin-inventory-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.admin-inventory-body {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 1rem;
}

.admin-product-image {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
  border: 3px solid #8d6e63;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.admin-size-control-with-image {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-size-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.admin-size-info label {
  font-weight: 600;
  color: #3e2723;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
  margin-bottom: 0.5rem;
}

.admin-size-control label {
  font-weight: 600;
  color: #3e2723;
  font-size: 2rem;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
}

.admin-size-control-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.admin-size-label {
  font-weight: 600;
  color: #3e2723;
  font-size: 2rem;
  font-family: 'The Wanters DEMO', serif;
  min-width: 50px;
  text-align: left;
}

.admin-quantity-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-plus-btn {
  background: #27ae60;
  color: white;
  border: 2px solid #1e8449;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.admin-minus-btn {
  background: #e74c3c;
  color: white;
  border: 2px solid #c0392b;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.admin-plus-btn:hover {
  background: #2ecc71;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.admin-minus-btn:hover {
  background: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.admin-quantity-display {
  background: white;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #3e2723;
  min-width: 3rem;
  text-align: center;
}

/* Promo Code Styles */
.admin-promo-controls {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

/* Make Create Code button mystic purple */
.admin-create-code-btn {
  background-color: #7c3aed; /* Mystic purple */
  color: #fff;
  border: 3px solid #4b2997;
  font-weight: 700;
  font-size: 1.3rem;
  padding: 1rem 2.2rem;
  border-radius: 32px;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
  transition: background 0.2s, box-shadow 0.2s;
}
.admin-create-code-btn:hover:not(:disabled) {
  background-color: #a78bfa; /* Lighter mystic purple on hover */
  color: #2d0066;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.25);
  border-color: #4b2997;
}

/* Promo code list - make responsive instead of fixed 3-column */
.admin-promo-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.admin-promo-item {
  background: #f5f5dc; /* Match main background cream */
  border: 2px solid #d7ccc8;
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-promo-title-panel {
  width: 100%;
  background: #f5f5dc;
  border: 2px solid #5d4037;
  border-radius: 8px;
  margin-bottom: 1rem;
  padding: 0.7rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.admin-promo-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #3e2723; /* Ensure white text in light mode */
  margin: 0;
  letter-spacing: 0.5px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  font-family: 'The Wanters DEMO', serif;
}

.admin-promo-title-edit {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  font-weight: 800;
  color: #3e2723; /* Ensure white text in light mode */
  margin: 0;
  letter-spacing: 0.5px;
  text-align: center;
  width: 100%;
  outline: none;
  font-family: 'The Wanters DEMO', serif; /* Ensure font inheritance */
}

.admin-promo-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
  padding: 0 1rem;
}

.admin-promo-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.admin-promo-field-label {
  font-weight: 600;
  color: #3e2723;
  font-size: 1.4rem;
  font-family: 'The Wanters DEMO', serif;
  text-align: left;
  min-width: 70px;
  flex-shrink: 0;
}

.admin-promo-text-box {
  background: #f5f5f5;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  font-family: 'Verdana', sans-serif;
  font-weight: bold;
  color: #3e2723;
  width: 180px;
  height: 2.5rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-align: center;
}

.admin-promo-text-box:focus {
  outline: none;
  border-color: #5d4037;
  background: white;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(93, 64, 55, 0.1);
}

.admin-promo-text-box[readonly] {
  background: #e8e8e8;
  cursor: not-allowed;
  color: #666;
}
.admin-promo-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.admin-promo-code {
  font-weight: 700;
  color: #3e2723;
  font-size: 1.1rem;
}

.admin-promo-detail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.admin-promo-detail-label {
  font-weight: 700;
  color: #5d4037;
  min-width: 60px;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.1rem;
}

.admin-promo-detail-value {
  font-weight: 500;
  color: #3e2723;
}

.admin-promo-inline-edit {
  background: white;
  border: 2px solid #8d6e63;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-size: 0.95rem;
  color: #3e2723;
  min-width: 80px;
  text-align: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.admin-promo-inline-edit:focus {
  outline: none;
  border-color: #5d4037;
  background: #fff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(93, 64, 55, 0.1);
}

.admin-promo-effect {
  color: #5d4037;
  font-size: 0.9rem;
}

.admin-promo-value {
  font-weight: 600;
  color: #8d6e63;
}

.admin-promo-status {
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

.admin-promo-status.active {
  background: #e8f5e8;
  color: #2e7d32;
}

.admin-promo-status.inactive {
  background: #ffebee;
  color: #c62828;
}

.admin-promo-usage {
  color: #666;
  font-size: 0.9rem;
}

/* Promo code actions */
.admin-promo-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}

.admin-promo-toggle {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-promo-toggle.active {
  background-color: #27ae60;
  color: white;
}

.admin-promo-toggle.active:hover {
  background-color: #2ecc71;
}

.admin-promo-toggle.inactive {
  background-color: #e74c3c;
  color: white;
}

.admin-promo-toggle.inactive:hover {
  background-color: #c0392b;
}

.admin-promo-edit {
  padding: 0.5rem 1rem;
  background-color: #14545c;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-promo-edit:hover {
  background-color: #0d353a;
}

.admin-promo-delete {
  padding: 0.5rem 1rem;
  background-color: #c0392b;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.admin-promo-delete:hover {
  background-color: #e74c3c;
}

/* Popup overlay */
.admin-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.admin-popup {
  background-color: white;
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.admin-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #d7ccc8;
}

.admin-popup-header h3 {
  color: #3e2723;
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
}

.admin-popup-close {
  background: none;
  border: none;
  color: #3e2723;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.admin-popup-close:hover {
  background: rgba(62, 39, 35, 0.1);
}

.admin-popup-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-form-group label {
  color: #3e2723;
  font-weight: 600;
  font-size: 1.1rem;
}

.admin-form-group input,
.admin-form-group select {
  padding: 0.8rem;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.admin-form-group input:focus,
.admin-form-group select:focus {
  outline: none;
  border-color: #8d6e63;
}

.admin-popup-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 2px solid #d7ccc8;
}

.admin-popup-btn {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 9999px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-popup-save {
  background-color: #27ae60;
  color: white;
  border: 3px solid #1e8449;
}

.admin-popup-save:hover {
  background-color: #2ecc71;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.admin-popup-cancel {
  background-color: #e74c3c;
  color: white;
  border: 3px solid #c0392b;
}

.admin-popup-cancel:hover {
  background-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Dark Mode Styles */
.dark-mode .admin-background-panel {
  background-color: #222;
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.3'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23000000' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 112px 112px, 56px 56px;
  background-position: center, 0 0, 0 0;
  background-blend-mode: color-burn, normal, normal;
  border: 3px solid #000000;
}

.dark-mode .admin-container {
  background-color: rgba(62, 39, 35, 0.9);
  color: #fff8e1;
}

.dark-mode .admin-title-panel {
  background-color: #14545c;
  border: 3px solid #0a1a1d;
}

.dark-mode .admin-title {
  color: #f5f5dc !important;
}

.dark-mode .admin-close-btn {
  color: #8d6e63;
}

.dark-mode .admin-close-btn:hover {
  background: rgba(141, 110, 99, 0.2);
}

.dark-mode .admin-auth-section h2,
.dark-mode .admin-welcome h2 {
  color: #8d6e63;
}

.dark-mode .admin-input-group label {
  color: #8d6e63;
}

.dark-mode .admin-input-group input {
  background: #2a2a2a;
  border-color: #5d4037;
  color: #8d6e63;
}

.dark-mode .admin-input-group input:focus {
  border-color: #8d6e63;
}

.dark-mode .admin-login-btn {
  background-color: #14545c;
  border-color: #0a1a1d;
  color: #fff;
}

.dark-mode .admin-login-btn:hover:not(:disabled) {
  background-color: #0d353a;
  color: #fff;
  border: 3px solid #0a1a1d;
}

.dark-mode .admin-login-btn:disabled {
  border: 3px solid #0a1a1d;
}

.dark-mode .admin-logout-btn {
  border-color: #000000;
}

.dark-mode .admin-section {
  background: rgba(42, 42, 42, 0.9);
  border-color: #5d4037;
}

.dark-mode .admin-section h3 {
  color: #8d6e63;
}

.dark-mode .admin-inventory-item {
  background: #3e2723;
  border-color: #5d4037;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .admin-inventory-header h4 {
  color: #8d6e63;
}

.dark-mode .admin-size-control label {
  color: #8d6e63;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
}

.dark-mode .admin-size-info label {
  color: #8d6e63;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
}

.dark-mode .admin-product-image {
  border-color: #8d6e63;
}

.dark-mode .admin-size-label {
  color: #d7ccc8;
}

.dark-mode .admin-plus-btn {
  background: #27ae60;
  color: white;
  border: 2px solid #1e8449;
}

.dark-mode .admin-plus-btn:hover {
  background: #2ecc71;
}

.dark-mode .admin-minus-btn {
  background: #e74c3c;
  color: white;
  border: 2px solid #c0392b;
}

.dark-mode .admin-minus-btn:hover {
  background: #c0392b;
}

.dark-mode .admin-quantity-display {
  background: #f7ede2;
  border-color: #5d4037;
  color: #3e2723;
}

.dark-mode .admin-promo-item {
  background: #3e2723;
  border-color: #5d4037;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .admin-promo-code {
  color: #8d6e63;
}

.dark-mode .admin-promo-effect {
  color: #a1887f;
}

.dark-mode .admin-promo-detail-label {
  color: #a1887f;
}

.dark-mode .admin-promo-detail-value {
  color: #8d6e63;
}

.dark-mode .admin-promo-inline-edit {
  background: #2a2a2a;
  border: 2px solid #8d6e63;
  color: #d7ccc8;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .admin-promo-inline-edit:focus {
  border-color: #a1887f;
  background: #3e2723;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(161, 136, 127, 0.2);
}

.dark-mode .admin-promo-field-label {
  color: #d7ccc8;
}

.dark-mode .admin-promo-text-box {
  background: #f5e5c0; /* Cream brown */
  border: 2px solid #8d6e63; /* Brown border */
  color: #14545c; /* Teal color matching selling button */
}
.dark-mode .admin-promo-text-box:focus {
  background: #fff8e1;
  border-color: #5d4037;
  color: #3e2723;
}
.dark-mode .admin-promo-text-box[readonly] {
  background: #e8e0c8;
  color: #666;
}

.dark-mode .admin-promo-title-edit {
  color: #3e2723;
}

.dark-mode .admin-action-buttons {
  background: rgba(42, 42, 42, 0.1);
  border-color: #5d4037;
}

.dark-mode .admin-save-btn {
  border-color: #000000;
}

.dark-mode .admin-save-btn.has-changes {
  background-color: #27ae60;
  border-color: #1e8449;
}

.dark-mode .admin-revert-btn {
  border-color: #000000;
}

.dark-mode .admin-logout-btn {
  border-color: #000000;
}

.dark-mode .admin-promo-actions {
  background: none;
}

/* Dark mode promo toggle buttons - add black borders */
.dark-mode .admin-promo-toggle.active {
  background-color: #27ae60;
  color: white;
  border: 2px solid #000000; /* Black border for active button */
}

.dark-mode .admin-promo-toggle.active:hover {
  background-color: #2ecc71;
  border: 2px solid #000000; /* Maintain black border on hover */
}

.dark-mode .admin-promo-toggle.inactive {
  background-color: #e74c3c;
  color: white;
  border: 2px solid #000000; /* Black border for inactive button */
}

.dark-mode .admin-promo-toggle.inactive:hover {
  background-color: #c0392b;
  border: 2px solid #000000; /* Maintain black border on hover */
}

.dark-mode .admin-promo-delete {
  background-color: #c0392b;
  color: white;
  border: 2px solid #000000; /* Black border for delete button */
}

.dark-mode .admin-promo-delete:hover {
  background-color: #e74c3c;
  border: 2px solid #000000; /* Maintain black border on hover */
}

.dark-mode .admin-popup {
  background-color: #2a2a2a;
  border-color: #5d4037;
}

.dark-mode .admin-popup-header {
  border-color: #5d4037;
}

.dark-mode .admin-popup-header h3 {
  color: #8d6e63;
}

.dark-mode .admin-popup-close {
  color: #8d6e63;
}

.dark-mode .admin-popup-close:hover {
  background: rgba(141, 110, 99, 0.2);
}

.dark-mode .admin-form-group label {
  color: #8d6e63;
}

.dark-mode .admin-form-group input,
.dark-mode .admin-form-group select {
  background: #1a1a1a;
  border-color: #5d4037;
  color: #8d6e63;
}

.dark-mode .admin-form-group input:focus,
.dark-mode .admin-form-group select:focus {
  border-color: #8d6e63;
}

.dark-mode .admin-popup-actions {
  border-color: #5d4037;
}

.dark-mode .admin-popup-save {
  border-color: #1e8449;
}

.dark-mode .admin-popup-cancel {
  border-color: #c0392b;
}

/* Dream Mode Styles */
.dream-mode .admin-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  border-radius: 20px;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream-mode .admin-container {
  background-color: rgba(255, 255, 255, 0.95);
  color: #333333;
  border: 3px solid #000000;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.dream-mode .admin-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  border-radius: 15px;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .admin-title {
  color: #ffffff !important;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
  animation: none !important;
}

.dream-mode .admin-close-btn {
  color: #3e2723;
}

.dream-mode .admin-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.dream-mode .admin-auth-section h2,
.dream-mode .admin-welcome h2 {
  color: #333333;
  text-shadow: none;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
}

.dream-mode .admin-input-group label {
  color: #333333;
  text-shadow: none;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
}

.dream-mode .admin-input-group input {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-input-group input:focus {
  border-color: #6a1b9a;
  box-shadow: 0 0 15px rgba(106, 27, 154, 0.4);
  background: #fff;
}

.dream-mode .admin-login-btn {
  background-color: #14545c;
  border-color: #0a1a1d;
  color: #fff;
}

.dream-mode .admin-login-btn:hover:not(:disabled) {
  background-color: #0d353a;
  color: #fff;
  border: 3px solid #0a1a1d;
}

.dream-mode .admin-login-btn:disabled {
  border: 3px solid #0a1a1d;
}

.dream-mode .admin-logout-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-logout-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-section {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-section h3 {
  color: #3e2723;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 50%, #6a1b9a 100%);
  border: 3px solid #1a0033;
  border-radius: 15px;
  padding: 1rem 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-inventory-item {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-inventory-header h4 {
  color: #3e2723;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 50%, #6a1b9a 100%);
  border: 2px solid #1a0033;
  border-radius: 12px;
  padding: 0.8rem 1.5rem;
  text-align: center;
  box-shadow: 0 3px 10px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-size-control label {
  color: #333333;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-size-info label {
  color: #333333;
  font-size: 1.8rem;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-product-image {
  border: 3px solid #4a148c;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-size-label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-plus-btn {
  background: #27ae60;
  color: white;
  border: 2px solid #1e8449;
}

.dream-mode .admin-plus-btn:hover {
  background: #2ecc71;
}

.dream-mode .admin-minus-btn {
  background: #e74c3c;
  color: white;
  border: 2px solid #c0392b;
}

.dream-mode .admin-minus-btn:hover {
  background: #c0392b;
}

.dream-mode .admin-quantity-display {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
}

.dream-mode .admin-promo-item {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(74, 20, 140, 0.3);
}

.dream-mode .admin-promo-code {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-promo-effect {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-value {
  color: #00bcd4;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  text-shadow: none;
}

.dream-mode .admin-promo-detail-label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-detail-value {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-inline-edit {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-promo-inline-edit:focus {
  border-color: #6a1b9a;
  background: #fff;
  box-shadow: 0 0 15px rgba(106, 27, 154, 0.4);
}

.dream-mode .admin-promo-field-label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-promo-text-box {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  font-weight: bold;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-promo-text-box:focus {
  border-color: #6a1b9a;
  background: #fff;
  box-shadow: 0 0 15px rgba(106, 27, 154, 0.4);
}

.dream-mode .admin-promo-text-box[readonly] {
  background: #1a1a1a;
  color: #999;
}

.dream-mode .admin-promo-title-edit {
  color: #3e2723;
}

.dream-mode .admin-action-buttons {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-save-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-save-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-save-btn.has-changes {
  background-color: #27ae60;
  border-color: #1e8449;
  color: white;
}

.dream-mode .admin-save-btn.has-changes:hover {
  background-color: #2ecc71;
}

.dream-mode .admin-revert-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-revert-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-logout-btn {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
  color: #333333;
  border: 3px solid #5d4037;
  border-radius: 25px;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

.dream-mode .admin-logout-btn:hover {
  background: linear-gradient(135deg, #a1887f 0%, #bcaaa4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
}

.dream-mode .admin-popup {
  background-color: rgba(255, 255, 255, 0.95);
  border: 3px solid #4a148c;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-popup-header {
  background: linear-gradient(135deg, #2e1065 0%, #4a148c 50%, #6a1b9a 100%);
  border: 3px solid #1a0033;
  border-radius: 12px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px rgba(74, 20, 140, 0.4);
}

.dream-mode .admin-popup-header h3 {
  color: #3e2723;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  font-family: 'The Wanters DEMO', serif;
  font-weight: 900;
}

.dream-mode .admin-popup-close {
  color: #3e2723;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.dream-mode .admin-popup-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.dream-mode .admin-form-group label {
  color: #333333;
  font-family: 'The Wanters DEMO', serif;
  font-weight: 600;
  text-shadow: none;
}

.dream-mode .admin-form-group input,
.dream-mode .admin-form-group select {
  background: #ffffff;
  border: 2px solid #4a148c;
  color: #333333;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(74, 20, 140, 0.2);
}

.dream-mode .admin-form-group input:focus,
.dream-mode .admin-form-group select:focus {
  border-color: #6a1b9a;
  box-shadow: 0 0 15px rgba(106, 27, 154, 0.4);
  background: #fff;
}

.dream-mode .admin-popup-actions {
  border-top: 2px solid #4a148c;
  margin-top: 1rem;
  padding-top: 1rem;
}

.dream-mode .admin-popup-save {
  border-color: #1e8449;
}

.dream-mode .admin-popup-cancel {
  border-color: #c0392b;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .admin-promo-list {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .admin-background-panel {
    width: 98%;
    padding: 1rem;
  }
  
  .admin-container {
    padding: 1.5rem;
  }
  
  .admin-title-panel {
    max-width: 100%;
  }
  
  .admin-title {
    font-size: 2rem;
  }
  
  .admin-inventory-grid {
    grid-template-columns: 1fr;
  }
  
  .admin-promo-list {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.5rem;
  }
  
  .admin-action-buttons {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
  
  .admin-save-btn,
  .admin-revert-btn,
  .admin-logout-btn {
    width: 200px;
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .admin-panel-page {
    padding: 0.5rem;
  }
  
  .admin-background-panel {
    padding: 0.5rem;
  }
  
  .admin-container {
    padding: 1rem;
  }
  
  .admin-title {
    font-size: 1.8rem;
  }
  
  .admin-close-btn {
    font-size: 1.5rem;
  }
} 

.admin-theme-toggle-bar {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
} 

.admin-section-title-panel {
  width: 100%;
  background: #f5f5dc;
  border: 2px solid #5d4037;
  border-radius: 10px;
  margin-bottom: 2rem;
  padding: 1.2rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.admin-section-title {
  font-size: 2.6rem;
  font-weight: 900;
  color: #3e2723;
  margin: 0;
  letter-spacing: 1px;
  text-align: center;
}

.admin-flavour-title-panel {
  flex: 1;
  background: #f5f5dc;
  border: 2px solid #5d4037;
  border-radius: 8px;
  padding: 0.7rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.admin-inventory-item h3 {
  font-size: 1.7rem;
  font-weight: 800;
  color: #3e2723;
  margin: 0;
  letter-spacing: 0.5px;
  text-align: center;
}

.dark-mode .admin-section-title-panel,
.dream-mode .admin-section-title-panel,
.dark-mode .admin-promo-title-panel,
.dream-mode .admin-promo-title-panel {
  background: #14545c;
  border: 2px solid #0a1a1d;
  color: #ffffff;
}
.dark-mode .admin-flavour-title-panel,
.dream-mode .admin-flavour-title-panel {
  background: #f5f5dc;
  border: 2px solid #5d4037;
  color: #3e2723;
} 

@media (max-width: 600px) {
  .admin-promo-list {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .admin-promo-item {
    padding: 1rem;
    gap: 0.2rem;
  }
  .admin-promo-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
  }
  .admin-promo-actions {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.3rem;
  }
} 

/* Make Active and Delete buttons larger in promo actions */
.admin-promo-toggle,
.admin-promo-delete {
  padding: 0.8rem 2rem;
  font-size: 1.2rem;
  border-radius: 28px;
}

/* Ensure dark mode variants inherit the larger size */
.dark-mode .admin-promo-toggle,
.dark-mode .admin-promo-delete {
  padding: 0.8rem 2rem;
  font-size: 1.2rem;
  border-radius: 28px;
} 

/* Dark mode: Create Code button gets a black border */
.dark-mode .admin-create-code-btn {
  border: 3px solid #000;
  background-color: #7c3aed;
  color: #fff;
}
.dark-mode .admin-create-code-btn:hover:not(:disabled) {
  border: 3px solid #000;
  background-color: #a78bfa;
  color: #2d0066;
} 

/* Promo panel titles: white in light/dream, black in dark mode */
.admin-promo-title {
  color: #fff !important;
}
.dream-mode .admin-promo-title {
  color: #fff !important;
}
.dark-mode .admin-promo-title {
  color: #000 !important;
}

.admin-promo-title-edit {
  color: #fff !important;
}
.dream-mode .admin-promo-title-edit {
  color: #fff !important;
}
.dark-mode .admin-promo-title-edit {
  color: #000 !important;
} 

/* Make Revert button mystic purple like Create Code */
.admin-revert-btn {
  background-color: #7c3aed;
  color: #fff;
  border: 3px solid #4b2997;
  font-weight: 700;
  transition: background 0.2s, box-shadow 0.2s;
}
.admin-revert-btn:hover:not(:disabled) {
  background-color: #a78bfa;
  color: #2d0066;
  border-color: #4b2997;
}
.dark-mode .admin-revert-btn {
  background-color: #7c3aed;
  color: #fff;
  border: 3px solid #000;
}
.dark-mode .admin-revert-btn:hover:not(:disabled) {
  background-color: #a78bfa;
  color: #2d0066;
  border: 3px solid #000;
} 

/* Promo Code Creation Modal Styles */
.admin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-modal {
  background: #fff;
  border: 3px solid #5d4037;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  padding: 2.2rem 2rem 1.5rem 2rem;
  min-width: 320px;
  max-width: 95vw;
  width: 400px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.admin-modal-title {
  font-family: 'The Wanters DEMO', serif;
  font-size: 2.1rem;
  color: #3e2723;
  margin-bottom: 1.2rem;
  text-align: center;
  font-weight: 800;
}
.admin-modal-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}
.admin-modal-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: #3e2723;
  margin-bottom: 0.3rem;
  font-family: 'The Wanters DEMO', serif;
}
.admin-modal-input {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 2px solid #d7ccc8;
  border-radius: 7px;
  font-size: 1.1rem;
  color: #3e2723;
  background: #f5f5dc;
  font-family: 'Verdana', sans-serif;
  font-weight: 600;
  margin-bottom: 0.2rem;
  transition: border-color 0.2s;
}
.admin-modal-input:focus {
  outline: none;
  border-color: #8d6e63;
  background: #fff;
}
.admin-modal-actions {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  width: 100%;
}
.admin-modal-save-btn {
  background: #27ae60;
  color: #fff;
  border: 3px solid #1e8449;
  border-radius: 9999px;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.admin-modal-save-btn:hover {
  background: #2ecc71;
}
.admin-modal-cancel-btn {
  background: #e74c3c;
  color: #fff;
  border: 3px solid #c0392b;
  border-radius: 9999px;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.admin-modal-cancel-btn:hover {
  background: #c0392b;
}

/* Dark Mode Modal Styles */
.dark-mode .admin-modal {
  background: #2a2a2a;
  border-color: #5d4037;
}
.dark-mode .admin-modal-title {
  color: #8d6e63;
}
.dark-mode .admin-modal-label {
  color: #8d6e63;
}
.dark-mode .admin-modal-input {
  background: #f5e5c0;
  border-color: #8d6e63;
  color: #3e2723;
}
.dark-mode .admin-modal-input:focus {
  background: #fff8e1;
  border-color: #5d4037;
}
.dark-mode .admin-modal-save-btn {
  border-color: #000;
}
.dark-mode .admin-modal-cancel-btn {
  border-color: #000;
}

/* Dream Mode Modal Styles */
.dream-mode .admin-modal {
  background: #2a2a2a;
  border-color: #8a2be2;
  box-shadow: 0 10px 30px rgba(138, 43, 226, 0.3);
}
.dream-mode .admin-modal-title {
  color: #3e2723;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.dream-mode .admin-modal-label {
  color: #3e2723;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.dream-mode .admin-modal-input {
  background: #2a2a2a;
  border-color: #8a2be2;
  color: #3e2723;
}
.dream-mode .admin-modal-input:focus {
  background: #1a1a1a;
  border-color: #a855f7;
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.3);
}
.dream-mode .admin-modal-save-btn {
  border-color: #8a2be2;
  background: #8a2be2;
  color: #3e2723;
}
.dream-mode .admin-modal-save-btn:hover {
  background: #a855f7;
}
.dream-mode .admin-modal-cancel-btn {
  border-color: #8a2be2;
} 

/* Promo code usage progress bar */
.admin-promo-usage-bar-container {
  width: 90%;
  margin: 0.7rem auto 0.2rem auto;
  background: #2a2a2a;
  border-radius: 12px;
  height: 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
}
.admin-promo-usage-bar {
  height: 100%;
  border-radius: 12px 0 0 12px;
  transition: width 0.4s cubic-bezier(.4,2,.6,1);
}
.admin-promo-usage-bar.green { background: #27ae60; }
.admin-promo-usage-bar.yellow { background: #f1c40f; }
.admin-promo-usage-bar.red { background: #e74c3c; }
.admin-promo-usage-bar-label {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: 1px;
  font-family: 'The Wanters DEMO', serif;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
} 

.admin-promo-list.single-promo {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  grid-template-columns: none !important;
}
.admin-promo-list.single-promo .admin-promo-item {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}

.admin-promo-usage-bar.unlimited {
  background: #e0e0e0;
  height: 16px;
  border-radius: 8px;
  margin-bottom: 0.3rem;
  width: 100%;
  box-shadow: none;
  position: relative;
  border: none;
}
.dark-mode .admin-promo-usage-bar.unlimited {
  border: 2px solid #000;
  background: #bdbdbd;
}
.admin-promo-usage-bar-label {
  display: block;
  text-align: center;
  font-weight: 700;
  color: #3e2723;
  font-size: 1.1rem;
  margin-top: 0.2rem;
}

/* Stats Section Styles */
.admin-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

.admin-stats-panel {
  background: #f5f5f5;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-stats-panel-title {
  background: #167c7c;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  text-align: center;
  border: 1px solid #000;
}

.admin-stats-panel-title h3 {
  color: #fff;
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: 1.7rem;
  letter-spacing: 1px;
}

.admin-stats-panel-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Time Selector Buttons */
.admin-stats-time-selector {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.admin-stats-time-btn {
  background: #e0e0e0;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.admin-stats-time-btn:hover {
  background: #d0d0d0;
}

.admin-stats-time-btn.active {
  background: #2E7D5A;
  color: white;
}

/* Metrics Display */
.admin-stats-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-stats-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.admin-stats-metric-label {
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-metric-value {
  font-weight: bold;
  color: #2E7D5A;
  font-size: 1.1rem;
}

/* Table Styles */
.admin-stats-table {
  background: white;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.admin-stats-table-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  background: #2E7D5A;
  color: white;
  padding: 0.75rem;
  font-weight: bold;
  text-align: center;
}

.admin-stats-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  padding: 0.75rem;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.admin-stats-table-row:last-child {
  border-bottom: none;
}

.admin-stats-table-row:nth-child(even) {
  background: #f9f9f9;
}

/* Bar Chart Styles */
.admin-stats-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.admin-stats-bar-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.admin-stats-bar-label {
  min-width: 100px;
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-bar-container {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0.5rem;
}

.admin-stats-bar {
  height: 20px;
  border-radius: 10px;
  min-width: 20px;
  transition: width 0.3s ease;
}

.admin-stats-bar-value {
  font-weight: bold;
  color: #4B2E19;
  min-width: 30px;
}

/* Day Chart Styles */
.admin-stats-day-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-stats-day-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.admin-stats-day-item span:first-child {
  min-width: 80px;
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-day-bar {
  height: 15px;
  background: #2E7D5A;
  border-radius: 7px;
  flex: 1;
  max-width: 200px;
  transition: width 0.3s ease;
}

.admin-stats-day-item span:last-child {
  font-weight: bold;
  color: #2E7D5A;
  min-width: 30px;
}

/* Time Chart Styles */
.admin-stats-time-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-stats-time-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.admin-stats-time-item span:first-child {
  font-weight: bold;
  color: #4B2E19;
}

.admin-stats-time-item span:last-child {
  font-weight: bold;
  color: #2E7D5A;
}

/* Subsection Styles */
.admin-stats-subsection {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-stats-subsection h4 {
  margin: 0;
  color: #4B2E19;
  font-size: 1.35rem;
  font-weight: bold;
  border-bottom: 2px solid #2E7D5A;
  padding-bottom: 0.25rem;
  text-align: center;
  letter-spacing: 0.5px;
}

/* Dark Mode Styles */
.dark-mode .admin-stats-panel {
  background: #222;
  border: 3px solid #5d4037;
}

.dark-mode .admin-stats-metric {
  background: #3a3a3a;
  border-color: #555;
}

.dark-mode .admin-stats-metric-label {
  color: #e0e0e0;
}

.dark-mode .admin-stats-table {
  background: #3a3a3a;
  border-color: #555;
}

.dark-mode .admin-stats-table-row {
  border-color: #555;
  color: #e0e0e0;
}

.dark-mode .admin-stats-table-row:nth-child(even) {
  background: #333;
}

.dark-mode .admin-stats-day-item,
.dark-mode .admin-stats-time-item {
  background: #3a3a3a;
  border-color: #555;
  color: #e0e0e0;
}

.dark-mode .admin-stats-day-item span:first-child,
.dark-mode .admin-stats-time-item span:first-child {
  color: #e0e0e0;
}

.dark-mode .admin-stats-subsection h4 {
  color: #e0e0e0;
}

/* Dream Mode Styles */
.dream-mode .admin-stats-panel {
  background: #2a2a2a;
  border: 2px solid #8a2be2;
}

.dream-mode .admin-stats-panel-title {
  background: #8a2be2;
  border: 2px solid #8a2be2;
}

.dream-mode .admin-stats-metric {
  background: rgba(42, 42, 42, 0.9);
  border-color: #8a2be2;
  color: white;
}

.dream-mode .admin-stats-metric-label {
  color: #3e2723;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dream-mode .admin-stats-metric-value {
  color: #3e2723;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dream-mode .admin-stats-time-btn {
  background: rgba(42, 42, 42, 0.9);
  color: white;
  border: 1px solid #8a2be2;
}

.dream-mode .admin-stats-time-btn:hover {
  background: rgba(138, 43, 226, 0.3);
}

.dream-mode .admin-stats-time-btn.active {
  background: #8a2be2;
  border-color: #8a2be2;
}

/* Responsive Design */
@media (max-width: 768px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .admin-stats-time-selector {
    flex-direction: column;
    align-items: stretch;
  }
  
  .admin-stats-table-header,
  .admin-stats-table-row {
    grid-template-columns: 1fr 80px 80px 80px;
    font-size: 0.9rem;
  }
  
  .admin-stats-bar-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  
  .admin-stats-bar-label {
    min-width: auto;
  }
}

.admin-stats-leaderboard {
  background: white;
  border-radius: 5px;
  border: 1px solid #ddd;
  margin-bottom: 1rem;
  overflow: hidden;
}
.admin-stats-leaderboard-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  background: #167c7c;
  color: white;
  font-weight: bold;
  padding: 0.75rem;
  text-align: center;
}
.admin-stats-leaderboard-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 0.75rem;
  border-bottom: 1px solid #eee;
  text-align: center;
  font-weight: 500;
  color: #4B2E19;
  background: #f9f9f9;
}
.admin-stats-leaderboard-row:nth-child(even) {
  background: #f5f5f5;
}
.admin-stats-leaderboard-row:last-child {
  border-bottom: none;
}

.dark-mode .admin-stats-leaderboard {
  background: #2a2a2a;
  border-color: #555;
}
.dark-mode .admin-stats-leaderboard-header {
  background: #167c7c;
  color: #fff;
}
.dark-mode .admin-stats-leaderboard-row {
  color: #e0e0e0;
  background: #333;
  border-color: #555;
}
.dream-mode .admin-stats-leaderboard-header {
  background: #167c7c;
  color: #fff;
}
.dream-mode .admin-stats-leaderboard {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
}
.dream-mode .admin-stats-leaderboard-row {
  color: #fff;
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}

:root {
  --cream-brown-bg: #f8f3e6;
  --cream-brown-text: #4B2E19;
  --admin-panel-bg-dark: #3a2320;
}

.dark-mode input,
.dark-mode .admin-promo-text-box,
.dark-mode .admin-modal-input,
.dark-mode .admin-stats-table,
.dark-mode .admin-stats-table-row,
.dark-mode .admin-stats-leaderboard,
.dark-mode .admin-stats-leaderboard-row {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
  border-color: #555;
}

.dark-mode .admin-stats-table-header,
.dark-mode .admin-stats-leaderboard-header {
  background: #167c7c;
  color: #fff;
}

.dark-mode .admin-stats-metric,
.dark-mode .admin-stats-panel-content input,
.dark-mode .admin-stats-panel-content .admin-promo-text-box {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
}

.dark-mode .privacy-policy-panel,
.dark-mode .privacy-policy-content,
.dark-mode .privacy-policy-box {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
}

.dark-mode .admin-stats-day-bar {
  background: #167c7c;
}

.dark-mode .admin-stats-day-item,
.dark-mode .admin-stats-time-item {
  background: var(--cream-brown-bg) !important;
  color: var(--cream-brown-text) !important;
  border: 2px solid #3a2a1a !important;
}

.dark-mode .admin-stats-panel {
  background: var(--admin-panel-bg-dark);
  border: 2.5px solid #000;
}

.dark-mode .admin-stats-subsection h4 {
  color: #f8f3e6 !important;
  text-shadow: 0 0 1px #000, 0 1px 1px #000, 1px 0 1px #000, -1px 0 1px #000;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  min-height: 100vh;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--text-color);
}

.app-header {
  background-color: #4CAF50;
  color: white;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.app-header h1 {
  margin: 0.5rem 0;
  font-size: 2.2rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.app-header nav {
  display: flex;
  gap: 2rem;
  margin-top: 0.5rem;
  width: 100%;
  justify-content: center;
}

.nav-link {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

main {
  flex: 1;
  background-color: var(--bg-color);
}

.back-button {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.back-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.dark-mode .back-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  .app-header {
    padding: 1rem;
  }
  
  .app-header h1 {
    font-size: 1.8rem;
  }
  
  main {
    padding: 1rem;
  }
}

@media (min-width: 768px) {
  .app-header h1 {
    font-size: 2.5rem;
  }

  .app-header h2 {
    font-size: 1.8rem;
  }

  .back-button {
    font-size: 1.1rem;
  }
} 
/* ===============================================================================
                                CART PAGE STYLING
=============================================================================== */

/* Main cart page container */
.cart-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 1rem;
  position: relative;
}

.cart-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.cart-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Background panel similar to contacts page */
.cart-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Main container inside background panel */
.cart-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Orders title panel */
.orders-title-panel {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #3e2723;
  text-align: center;
  padding: 1rem;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  background-color: #14545c;
  width: 100%;
  max-width: 400px;
}

.orders-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #3e2723;
  text-align: center;
}

/* Navigation button */
.cart-navigation {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  width: 100%;
}

.nav-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723;
}

.nav-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
  text-decoration: none;
}

/* Cart content area */
.cart-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Empty cart state */
.empty-cart {
  text-align: center;
  padding: 3rem 2rem;
}

.empty-cart p {
  font-size: 1.5rem;
  color: #5d4037;
  margin: 0;
  font-weight: 600;
}

/* Cart loading state */
.cart-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.cart-loading p {
  font-size: 1.5rem;
  color: #5d4037;
  margin: 1rem 0 0 0;
  font-weight: 600;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e0e0e0;
  border-top: 4px solid #8d6e63;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

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

/* Cart items container */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 2rem;
}

/* Individual cart item */
.cart-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.cart-item-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
  width: 100%;
}

.cart-item-name {
  font-size: 2.5rem;
  font-weight: 900;
  color: #3e2723;
  margin-bottom: 1rem;
  text-align: center;
}

.cart-item-size-price {
  font-size: 1.7rem;
  font-weight: 900;
  color: #3e2723;
  margin-bottom: 1rem;
  text-align: center;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.size-unit {
  font-size: 0.7em; /* 30% smaller - 70% of parent font size */
  font-weight: 900;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.cart-item-size {
  font-size: 1.1rem;
  color: #5d4037;
  margin-bottom: 0.25rem;
}

.cart-item-price {
  font-size: 1.2rem;
  color: #5d4037;
  font-weight: 600;
}

/* Quantity controls */
.cart-item-quantity {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.quantity-button {
  width: 45px;
  height: 45px;
  border: 3px solid #3e2723;
  background-color: #8d6e63;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.quantity-button:hover {
  background-color: #a1887f;
  transform: scale(1.05);
}

.quantity-value {
  font-size: 1.4rem;
  font-weight: bold;
  color: #3e2723;
  min-width: 40px;
  text-align: center;
  background-color: rgba(141, 110, 99, 0.1);
  padding: 0.5rem;
  border-radius: 8px;
}

/* Subtotal and remove button */
.cart-item-subtotal {
  font-size: 1.5rem;
  font-weight: 900;
  color: #d32f2f;
  margin-bottom: 1rem;
  text-align: center;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.remove-item-button {
  padding: 0.8rem 1.5rem;
  background-color: #d32f2f;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.remove-item-button:hover {
  background-color: #f44336;
  transform: translateY(-2px);
}

/* Cart summary */
.cart-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2rem;
  border-top: 3px solid #d7ccc8;
  width: 100%;
  max-width: 400px;
}

.cart-totals {
  margin-bottom: 1.5rem;
  text-align: center;
}

.cart-total-items, 
.cart-total-price {
  font-size: 1.4rem;
  margin: 0.5rem 0;
  color: #3e2723;
  font-weight: 900;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.cart-total-price {
  font-size: 2.2rem;
  font-weight: 900;
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.checkout-button {
  padding: 1.2rem 2.5rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.checkout-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* ===============================================================================
                                DARK MODE STYLES
=============================================================================== */

.dark-mode.cart-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
}

.dark-mode.cart-page::before {
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
}

.dark-mode.cart-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .cart-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .cart-container {
  background-color: rgba(62, 39, 35, 0.9);
  border: 3px solid #000000;
}

.dark-mode .orders-title-panel {
  background-color: #8d6e63;
  border: 2px solid #000000;
}

.dark-mode .orders-title {
  color: #8d6e63;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.dark-mode .nav-button {
  background-color: #8d6e63;
  border: 3px solid #000000;
  color: #fff8e1;
}

.dark-mode .nav-button:hover {
  background-color: #a1887f;
  color: #fff8e1;
}

.dark-mode .empty-cart p {
  color: #fff8e1;
}

.dark-mode .cart-loading p {
  color: #fff8e1;
}

.dark-mode .loading-spinner {
  border: 4px solid #424242;
  border-top: 4px solid #a1887f;
}

.dark-mode .cart-item {
  background-color: #8d6e63;
  border: 3px solid #000000;
}

.dark-mode .cart-item-name {
  color: #fff8e1;
}

.dark-mode .cart-item-size-price {
  color: #000000;
  text-shadow: none;
}

.dark-mode .size-unit {
  color: #000000;
  text-shadow: none;
}

.dark-mode .cart-item-size,
.dark-mode .cart-item-price {
  color: #d7ccc8;
}

.dark-mode .quantity-button {
  background-color: #8d6e63 !important;
  border: 3px solid #000000;
}

.dark-mode .quantity-button:hover {
  background-color: #a1887f;
}

.dark-mode .quantity-value {
  color: #fff !important;
  background-color: transparent;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .cart-item-subtotal {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .remove-item-button {
  border: 3px solid #000000;
}

.dark-mode .cart-totals {
  border-top: 3px solid #666666;
}

.dark-mode .cart-total-items {
  color: #c4a690 !important;
}

.dark-mode .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .checkout-button {
  background-color: #8d6e63;
  border: 3px solid #000000;
  color: #fff8e1;
}

.dark-mode .checkout-button:hover {
  background-color: #a1887f;
}

/* ===============================================================================
                                DREAM MODE STYLES
=============================================================================== */

.dream-mode.cart-page {
  background-color: #222;
}

.dream-mode.cart-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.cart-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .cart-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .cart-container {
  background-color: rgba(26, 26, 26, 0.9);
  border: 3px solid #000000;
}

.dream-mode .orders-title-panel {
  background-color: rgba(45, 20, 60, 0.95);
  border: 2px solid #000000;
}

.dream-mode .orders-title {
  color: #3e2723;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  animation: dreamText 20s infinite linear;
}

/* dreamText animation now defined in global.css */

.dream-mode .nav-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .nav-button:hover {
  background-color: #a1887f;
  color: #3e2723;
  transform: translateY(-4px);
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4);
  animation: dreamSparkle 1.5s ease-in-out infinite alternate;
}

.dream-mode .empty-cart p {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .cart-loading p {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .loading-spinner {
  border: 4px solid #333333;
  border-top: 4px solid #ff00cc;
  box-shadow: 0 0 10px rgba(255, 0, 204, 0.5);
}

.dream-mode .cart-item {
  background-color: rgba(120, 120, 120, 0.6);
  border: 3px solid #000000;
}

.dream-mode .cart-item-name {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .cart-item-size-price {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .size-unit {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .cart-item-size,
.dream-mode .cart-item-price {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .quantity-button {
  background-color: #8d6e63;
  border: 3px solid #000000;
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream-mode .quantity-button:hover {
  background-color: #a1887f;
  color: #3e2723;
  box-shadow: 
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6);
  animation: dreamSparkle 1.5s ease-in-out infinite alternate;
}

.dream-mode .quantity-value {
  color: #3e2723;
  background-color: rgba(45, 20, 60, 0.3);
  text-shadow: none;
  animation: none;
}

.dream-mode .cart-item-subtotal {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .remove-item-button {
  background-color: #d32f2f !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .remove-item-button:hover {
  background-color: #f44336 !important;
  color: #000000 !important;
  transform: translateY(-2px);
  box-shadow: 
    0 0 15px rgba(220, 20, 60, 0.8),
    0 0 25px rgba(255, 69, 0, 0.6);
}

.dream-mode .cart-totals {
  border-top: 3px solid #555555;
}

.dream-mode .cart-total-items {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .checkout-button {
  background-color: #8d6e63;
  border: 3px solid #000000 !important;
  color: #000000;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .checkout-button:hover {
  background-color: #a1887f;
  color: #3e2723;
  border: 3px solid #000000 !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 128, 0, 0.8),
    0 0 25px rgba(34, 139, 34, 0.6),
    0 0 35px rgba(46, 139, 87, 0.4);
  animation: dreamSparkle 1.5s ease-in-out infinite alternate;
}

/* Additional overrides for any remaining glow effects */
.dream-mode .cart-page .cart-item-size,
.dream-mode .cart-page .cart-item-price {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
}

.dream-mode .cart-page .cart-item-size-price,
.dream-mode .cart-page .cart-total-items {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
}

.dream-mode .cart-page .size-unit {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
}

.dream-mode .cart-page .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
}

.dark-mode .cart-page .cart-total-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Dream mode remove button override - ensure red background with black text */
.dream-mode .cart-page .remove-item-button {
  background-color: #d32f2f !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
}

.dream-mode .cart-page .remove-item-button:hover {
  background-color: #f44336 !important;
  color: #000000 !important;
}

@keyframes dreamSparkle {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-2px) rotate(0deg) scale(1);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-2px) rotate(1deg) scale(1.02);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-2px) rotate(0deg) scale(1.04);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-2px) rotate(-1deg) scale(1.02);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-2px) rotate(0.5deg) scale(1.01);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-2px) rotate(0deg) scale(1);
  }
}

/* ===============================================================================
                            RESPONSIVE DESIGN
=============================================================================== */

/* Mobile First - these styles apply to screens 480px and larger */
@media (min-width: 480px) {
  .cart-item {
    max-width: 600px;
  }
  
  .orders-title {
    font-size: 2.8rem;
  }
}

/* Tablet styles - 768px and larger */
@media (min-width: 768px) {
  .cart-page {
    padding: 2rem;
  }
  
  .cart-background-panel {
    padding: 2rem;
  }
  
  .cart-container {
    padding: 3rem;
  }
  
     .cart-item {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     max-width: 900px;
     padding: 2.5rem;
   }
   
   .cart-item-details {
     flex: 1;
     align-items: flex-start;
     text-align: left;
     margin-bottom: 0;
     margin-right: 2rem;
   }
   
   .cart-item-name {
     font-size: 3rem;
   }
   
       .cart-item-size-price {
      font-size: 2.2rem;
    }
  
  .cart-item-quantity {
    margin-bottom: 0;
    margin-right: 2rem;
  }
  
  .cart-item-subtotal {
    margin-bottom: 0;
    margin-right: 1rem;
    font-size: 1.6rem;
  }
  
  .orders-title {
    font-size: 4rem;
  }
}

 /* Desktop styles - 1024px and larger */
 @media (min-width: 1024px) {
   .cart-background-panel {
     max-width: 1000px;
   }
   
   .cart-item {
     max-width: 1000px;
   }
   
   .cart-item-name {
     font-size: 3.2rem;
   }
   
       .cart-item-size-price {
      font-size: 2.4rem;
    }
   
   .orders-title {
     font-size: 3.2rem;
   }
 }

 /* Large desktop styles - 1200px and larger */
 @media (min-width: 1200px) {
   .cart-background-panel {
     max-width: 1200px;
   }
   
   .cart-item {
     max-width: 1100px;
   }
   
   .cart-item-name {
     font-size: 3.5rem;
   }
   
       .cart-item-size-price {
      font-size: 2.7rem;
    }
   
   .orders-title {
     font-size: 3.5rem;
   }
 } 
.contact-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.contact-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.contact-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.contact-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 850px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.contact-container {
  width: 100%;
  max-width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.contact-title-panel {
  font-weight: bold;
  margin-bottom: 2rem;
  color: #3e2723;
  text-align: center;
  padding: 1rem;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  background-color: #14545c;
  width: 100%;
  max-width: 400px;
}

.contact-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #3e2723;
  text-align: center;
}

.home-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
  margin-bottom: 2rem;
}

.home-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
}

.contact-details {
  width: 100%;
  text-align: center;
  padding: 2rem;
  margin-bottom: 2rem;
  background-color: rgba(141, 110, 99, 0.1);
  border-radius: 8px;
  border: 2px solid #d7ccc8;
}

.contact-details p {
  margin: 0.5rem 0;
  font-size: 1.2rem;
  color: #3e2723;
  line-height: 1.6;
}

.contact-details-placeholder {
  width: 100%;
  text-align: center;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 2px dashed #d7ccc8;
  border-radius: 8px;
}

.contact-details-placeholder p {
  margin: 0.5rem 0;
  font-size: 1.2rem;
  color: #5d4037;
}

.contact-actions {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
}

.privacy-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
}

.privacy-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
  text-decoration: none;
}

/* Dark mode styles */
.dark-mode.contact-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode.contact-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode.contact-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .contact-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .contact-container {
  background-color: rgba(62, 39, 35, 0.9);
  color: #fff8e1;
}

.dark-mode .contact-title {
  text-shadow: none;
}

.dark-mode .contact-title-panel {
  background-color: #3e2723;
  border: 3px solid #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark-mode .contact-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dark-mode .contact-details {
  border-color: #5d4037;
  background-color: #8d6e63;
}

.dark-mode .contact-details p {
  color: #fff8e1;
}

.dark-mode .contact-details-placeholder {
  border-color: #5d4037;
}

.dark-mode .contact-details-placeholder p {
  color: #d7ccc8;
}

/* Light mode button base styling */
.contact-page:not(.dark-mode):not(.dream-mode) .home-button,
.contact-page:not(.dark-mode):not(.dream-mode) .privacy-button {
  border: 3px solid #3e2723 !important;
  border-radius: 9999px !important; /* Ensure pill shape in light mode */
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  background-color: #8d6e63 !important;
  color: white !important;
  display: inline-block !important;
  text-decoration: none !important;
}

/* Dark mode button base styling with ultra-high specificity */
body.dark-mode .contact-page .home-button,
body.dark-mode .contact-page .privacy-button,
.dark-mode.contact-page .home-button,
.dark-mode.contact-page .privacy-button,
.dark-mode .contact-page .home-button,
.dark-mode .contact-page .privacy-button,
.dark-mode .home-button,
.dark-mode .privacy-button {
  border: 3px solid #000000 !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  text-decoration: none !important;
  font-family: 'The Wanters DEMO', serif !important;
}

/* Dark mode home button glow with ultra-high specificity */
body.dark-mode .contact-page .home-button:hover,
.dark-mode.contact-page .home-button:hover,
.dark-mode .contact-page .home-button:hover,
.dark-mode .home-button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  background-color: #a1887f !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  text-decoration: none !important;
}

/* Dark mode privacy policy button glow with ultra-high specificity */
body.dark-mode .contact-page .privacy-button:hover,
.dark-mode.contact-page .privacy-button:hover,
.dark-mode .contact-page .privacy-button:hover,
.dark-mode .privacy-button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  background-color: #a1887f !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  text-decoration: none !important;
}

@media (max-width: 768px) {
  .contact-title {
    font-size: 2.5rem;
  }
  
  .contact-background-panel {
    width: 98%;
    max-width: 600px;
  }
  
  .contact-container {
    padding: 1.5rem;
  }
  
  .contact-details {
    padding: 1.5rem;
    margin: 0 0 2rem 0;
  }
  
  .contact-details p {
    font-size: 1.1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none;
    line-height: 1.7;
  }
}

@media (max-width: 480px) {
  .contact-background-panel {
    width: 98%;
    max-width: 450px;
    padding: 1rem;
  }
  
  .contact-container {
    padding: 1.25rem;
  }
  
  .contact-details {
    padding: 1.25rem;
    margin: 0 0 2rem 0;
  }
  
  .contact-details p {
    font-size: 1rem;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none;
  }
}

@media (max-width: 360px) {
  .contact-background-panel {
    width: 99%;
    max-width: 360px;
    padding: 0.25rem;
  }
  
  .contact-container {
    padding: 0.5rem;
  }
  
  .contact-details {
    padding: 0.75rem 1rem;
    margin: 0 0 2rem 0;
    width: 100%;
    box-sizing: border-box;
  }
  
  .contact-details p {
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    hyphens: none;
    word-break: break-word;
    text-align: center;
    margin: 0.3rem 0;
  }
  
  .contact-details .email-address {
    font-size: 0.8rem;
    font-weight: 600;
    word-break: break-all;
    overflow-wrap: anywhere;
    letter-spacing: -0.8px;
    transform: scaleX(0.95);
    transform-origin: center;
  }
}

@media (max-width: 340px) {
  .contact-background-panel {
    width: 99%;
    max-width: 340px;
    padding: 0.15rem;
  }
  
  .contact-container {
    padding: 0.35rem;
  }
  
  .contact-details {
    padding: 0.5rem 0.75rem;
    margin: 0 0 2rem 0;
    width: 100%;
    box-sizing: border-box;
  }
  
  .contact-details p {
    font-size: 0.85rem;
    line-height: 1.3;
    margin: 0.25rem 0;
  }
  
  .contact-details .email-address {
    font-size: 0.75rem;
    font-weight: 600;
    word-break: break-all;
    overflow-wrap: anywhere;
    letter-spacing: -1px;
    transform: scaleX(0.9);
    transform-origin: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Dream mode styles */
.dream-mode.contact-page {
  background-color: #222;
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
    linear-gradient(45deg, transparent 24%, rgba(75, 0, 130, 0.05) 25%, rgba(75, 0, 130, 0.05) 26%, transparent 27%, transparent 74%, rgba(138, 43, 226, 0.05) 75%, rgba(138, 43, 226, 0.05) 76%, transparent 77%),
    linear-gradient(-45deg, transparent 24%, rgba(102, 51, 153, 0.05) 25%, rgba(102, 51, 153, 0.05) 26%, transparent 27%, transparent 74%, rgba(60, 30, 80, 0.05) 75%, rgba(60, 30, 80, 0.05) 76%, transparent 77%);
  background-size: cover, 300px 300px, 300px 300px, 60px 60px, 60px 60px;
  background-position: center, 0 0, 150px 150px, 0 0, 30px 30px;
  background-blend-mode: color-burn;
}

.dream-mode.contact-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.contact-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .contact-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream-mode .contact-container {
  border: 3px solid #000000;
}

.dream-mode .contact-title {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  animation: none !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dream-mode .contact-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .contact-details p {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: none;
}

/* Ensure dream mode contact details have clean black text */
.dream-mode .contact-details p,
.dream-mode .contact-details span,
.dream-mode .contact-details a {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
}

/* Dream mode responsive text fixes */
@media (max-width: 768px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
}

@media (max-width: 480px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
}

@media (max-width: 360px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
  
  .dream-mode .contact-details .email-address {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
}

@media (max-width: 340px) {
  .dream-mode .contact-details p {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
  
  .dream-mode .contact-details .email-address {
    color: #000000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
}

/* Dream mode button base styling - black text when idle */
.dream-mode .home-button:not(:hover),
.dream-mode .privacy-button:not(:hover) {
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}

/* Dream mode psychedelic button hover effects - white text on hover */
.dream-mode .home-button:hover,
.dream-mode .privacy-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  animation: dreamSparkleContactLanding 1.5s ease-in-out infinite alternate !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
}

@keyframes dreamSparkleContactLanding {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
} 
/* ===============================================================================
                              CUSTOMER STATS PAGE STYLING
=============================================================================== */

/* Main stats page container - matching app's dual geometry pattern */
.customer-stats-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  background-attachment: fixed;
  padding: 1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  overflow-y: auto;
  font-family: 'The Wanters DEMO', sans-serif;
  pointer-events: auto;
  
  /* Hide scrollbar while maintaining scroll functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
.customer-stats-container::-webkit-scrollbar {
  display: none;
}

/* Dual geometry background patterns - exactly like other pages */
.customer-stats-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.customer-stats-container::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Background panel matching app structure */
.stats-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  max-height: calc(100vh - 2rem);
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  margin: 1rem auto;
  overflow: hidden;
}

/* Main container inside background panel */
.stats-main-container {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 5rem);
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  overflow-y: auto;
  
  /* Hide scrollbar while maintaining scroll functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
.stats-main-container::-webkit-scrollbar {
  display: none;
}

/* Header with title and close button */
.customer-stats-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  width: 100%;
  position: relative;
}

/* Title panel matching app style */
.stats-title-panel {
  font-size: 2rem;
  font-weight: bold;
  color: #3e2723;
  text-align: center;
  padding: 1rem 2rem;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  background-color: #14545c;
  width: 100%;
  max-width: 400px;
}

.stats-title-panel h2 {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #3e2723;
  text-align: center;
}

/* Close button */
.close-btn {
  background: #8d6e63;
  border: 3px solid #3e2723;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.close-btn:hover {
  background: #a1887f;
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Content area */
.customer-stats-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Individual stat sections */
.stats-section {
  width: 100%;
  max-width: 800px;
  background-color: rgba(255, 255, 255, 0.95);
  border: 3px solid #8d6e63;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.stats-section h3 {
  font-size: 2rem;
  font-weight: 900;
  color: #3e2723;
  margin: 0 0 1.5rem 0;
  text-align: center;
}

/* User info and purchase stats */
.user-info, .purchase-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  background-color: rgba(245, 245, 220, 0.9);
}

.stat-label {
  font-size: 1rem;
  color: #5d4037;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 900;
  color: #3e2723;
}

/* Progress bars */
.progress-info {
  text-align: center;
}

.progress-info p {
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
  color: #3e2723;
  font-weight: 600;
}

.progress-bar {
  width: 100%;
  height: 20px;
  border: 2px solid #8d6e63;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background-color: rgba(245, 245, 220, 0.9);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #8d6e63, #5d4037);
  border-radius: 8px;
  transition: width 0.3s ease;
}

/* Tier 3 achievement progress bar - cream colored but empty when completed */
.achievement-card.unlocked[data-tier="3"] .progress-fill {
  background: #f5f5dc !important; /* Cream color like in the image */
  width: 0% !important; /* Empty progress bar when completed */
}

/* Secret achievement progress bar - cream colored but empty when completed */
.hidden-achievement.completed .progress-fill {
  background: #f5f5dc !important; /* Cream color like in the image */
  width: 0% !important; /* Empty progress bar when completed */
}

/* Light mode only: Tier 3 achievement progress bar using daydreamers-loading-bar - cream colored but empty when completed */
.achievement-card.unlocked[data-tier="3"] .daydreamers-loading-bar-fill.light {
  background: #f5f5dc !important; /* Cream color like in the image */
  width: 0% !important; /* Empty progress bar when completed */
}

/* Light mode only: Secret achievement progress bar using daydreamers-loading-bar - cream colored but empty when completed */
.hidden-achievement.completed .daydreamers-loading-bar-fill.light {
  background: #f5f5dc !important; /* Cream color like in the image */
  width: 0% !important; /* Empty progress bar when completed */
}

/* Flavor breakdown */
.flavor-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.flavor-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  background-color: rgba(245, 245, 220, 0.9);
}

.flavor-name {
  font-weight: 900;
  font-size: 1.1rem;
  color: #3e2723;
}

.flavor-counts {
  font-size: 1rem;
  color: #5d4037;
  font-weight: 600;
}

/* Achievements grid */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.achievement-card {
  padding: 1.5rem;
  border: 3px solid #8d6e63;
  border-radius: 12px;
  background-color: rgba(245, 245, 220, 0.9);
  transition: all 0.3s ease;
  position: relative;
  text-align: center;
}

.achievement-card.unlocked {
  /* Keep the same background color as locked achievements */
  background-color: rgba(245, 245, 220, 0.9);
  border-color: #8d6e63;
}

/* Tier-specific background colors for unlocked achievements - Light Mode */
.achievement-card.unlocked[data-tier="1"] {
  background-color: #F5F5DC; /* Very light cream - Tier 1 */
  border-color: #a1887f; /* Lighter border */
}

.achievement-card.unlocked[data-tier="2"] {
  background-color: #d4c4a8; /* Light brown like tier 3 panel - Tier 2 */
  border-color: #5d4037; /* Dark brown border like tier 3 */
}

.achievement-card.unlocked[data-tier="3"] {
  background-color: #8d6e63; /* Medium brown like the panel in the image - Tier 3 */
  border-color: #3e2723; /* Darker brown border */
}

.achievement-card.locked {
  /* Removed greyed out styling - achievements should be visible */
}

.achievement-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  text-align: center;
}

.achievement-name {
  font-weight: 900;
  font-size: 1.7rem;
  color: #5d4037;
  text-align: center;
  text-shadow: none; /* No outline in light mode */
  letter-spacing: 0.01em;
  margin: 0 auto 0.2em auto;
  display: block;
  /* Light mode panel */
  background: rgba(245, 245, 220, 0.8);
  border: 2px solid #8d6e63;
  border-radius: 12px;
  padding: 0.8rem 1.2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.achievement-card.unlocked .achievement-name {
  color: #3e2723;
}

/* Tier 2 achievement name styling for light mode */
.achievement-card.unlocked[data-tier="2"] .achievement-name {
  color: #1b0f0a; /* Dark brown like tier 3 achievements */
}

/* Tier 2 achievement description and progress text styling for light mode */
.achievement-card.unlocked[data-tier="2"] .achievement-description {
  color: #5d4037; /* Brown color for description like tier 3 */
}

.achievement-card.unlocked[data-tier="2"] .progress-text {
  color: #5d4037; /* Brown color for progress text like tier 3 */
}

/* Tier 3 achievement name styling for light mode */
.achievement-card.unlocked[data-tier="3"] .achievement-name {
  color: #1b0f0a; /* Dark brown text */
  background-color: #f5f5dc !important; /* Light cream background like title bar */
  border: 2px solid #3e2723 !important; /* Dark brown border */
}

.achievement-card.locked .achievement-name {
  /* Use default achievement name color - no greying out */
}

.dark .achievement-name {
  color: #8d6e63 !important;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000 !important;
  /* Dark mode panel */
  background: rgba(62, 39, 35, 0.9);
  border: 2px solid #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dream .achievement-name {
  color: #00ffff; /* Cyan text for dream mode */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* 1px black outline around text */
  animation: none; /* Override color cycling animation */

/* Override for locked secret achievements - more specific than general rule */
.dream .hidden-achievement:not(.completed) .achievement-name,
body.dream .hidden-achievement:not(.completed) .achievement-name,
.dream-mode .hidden-achievement:not(.completed) .achievement-name {
  color: #4a7c7c !important; /* Darker inactive teal for locked secret achievements */
  text-shadow: none !important;
}
  /* Dream mode panel - match the achievements title banner */
  background: rgba(45, 20, 60, 0.95); /* Match the achievements title panel color */
  border: 2px solid #000000; /* Black border instead of purple */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Dream mode overrides for all achievement tiers to ensure cyan color */
.dream .achievement-card.unlocked[data-tier="1"] .achievement-name {
  color: #00ffff !important; /* Cyan text for dream mode - Tier 1 */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream .achievement-card.unlocked[data-tier="2"] .achievement-name {
  color: #00ffff !important; /* Cyan text for dream mode - Tier 2 */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream .achievement-card.unlocked[data-tier="3"] .achievement-name {
  color: #00ffff !important; /* Cyan text for dream mode - Tier 3 */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  background-color: #1a1a1a !important; /* Dark grey background for dream mode tier 3 */
  border: 2px solid #000000 !important; /* Black border */
}

.achievement-tier {
  font-size: 1.5rem;
}

.achievement-description {
  margin: 0.5rem 0 1rem 0;
  font-size: 1.12rem;
  color: #5d4037;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
}

.dark .achievement-description {
  color: #fff8e1;
}

/* Dark mode Tier 3 special text colors */
.dark .achievement-card.unlocked[data-tier="3"] .achievement-description {
  color: #fff8e1; /* Light cream brown color for description */
}

.dark .achievement-card.unlocked[data-tier="3"] .progress-text {
  color: #fff8e1; /* Light cream brown color for progress text */
}

.dream .achievement-description {
  color: #fff !important;
  text-shadow: none !important;
}

.achievement-progress {
  margin-top: 1rem;
}

.progress-text {
  font-size: 1rem;
  font-weight: 600;
  color: #3e2723;
  display: block;
  margin-bottom: 0.5rem;
  text-align: center;
}

.achievement-tiers-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 0.5em;
}

.achievement-tier-icon {
  font-size: 1.2em;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.achievement-tier-icon.active {
  opacity: 1;
  color: #ffd700;
  text-shadow: 0 0 4px #000;
}

/* Dark mode override for tier 3 achievement medals - use dark brown instead of gold */
.dark .achievement-tier-icon.active {
  color: #5d4037;
  text-shadow: 0 0 4px #000;
}

/* ===============================================================================
                                DARK MODE STYLES
=============================================================================== */

.customer-stats-container.dark {
  background-color: #3e2723;
  background-blend-mode: multiply;
}

.customer-stats-container.dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.customer-stats-container.dark::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark .stats-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border-color: #000000;
}

.dark .stats-main-container {
  background-color: rgba(62, 39, 35, 0.9);
  border-color: #000000;
}

.dark .stats-title-panel {
  background-color: #3e2723;
  border-color: #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark .stats-title-panel h2 {
  color: #8d6e63 !important;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000 !important;
  animation: none;
}

.dark .close-btn {
  background: #8d6e63;
  border-color: #000000;
  color: #000000;
}

.dark .close-btn:hover {
  background: #a1887f;
  color: #000000;
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.dark .stats-section {
  background-color: #1a1a1a;
  border-color: #000000;
}

.dark .stats-section h3 {
  color: #8d6e63;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
}

.dark .stat-item {
  background-color: #8d6e63;
  border-color: #5d4037;
}

.dark .stat-label {
  color: #fff8e1;
}

.dark .stat-value {
  color: #fff8e1;
}

.dark .progress-info p {
  color: #fff8e1;
}

.dark .progress-bar {
  background-color: #8d6e63;
  border-color: #5d4037;
}

.dark .progress-fill {
  background: linear-gradient(135deg, #8d6e63, #5d4037);
}

.dark .flavor-item {
  background-color: #8d6e63;
  border-color: #5d4037;
}

.dark .flavor-name {
  color: #fff8e1;
}

.dark .flavor-counts {
  color: #fff8e1;
}

.dark .achievement-card {
  background-color: #8d6e63;
  border-color: #000000;
}

/* Override for secret achievements to ensure dark brown color */
.dark .achievement-card.hidden-achievement.unlocked.completed {
  background-color: #3e2723 !important; /* Dark brown matching tier 3 achievements */
  border-color: #000000 !important;
}

/* Nuclear option - force dark brown color for secret achievements with maximum specificity */
body.dark .achievement-card.hidden-achievement.unlocked.completed,
.dark-mode .achievement-card.hidden-achievement.unlocked.completed,
html.dark .achievement-card.hidden-achievement.unlocked.completed,
html body.dark .achievement-card.hidden-achievement.unlocked.completed {
  background-color: #3e2723 !important; /* FORCE dark brown matching tier 3 achievements */
  background: #3e2723 !important; /* Override any background shorthand */
  border-color: #000000 !important;
}

.dark .achievement-card.unlocked {
  /* Keep the same background color as locked achievements in dark mode */
  background-color: #8d6e63;
  border-color: #000000;
}

.dark .achievement-description {
  color: #fff8e1;
}

.dark .progress-text {
  color: #fff8e1;
}

/* ===============================================================================
                                DREAM MODE STYLES
=============================================================================== */

.customer-stats-container.dream {
  background-color: #222;
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%);
  background-size: cover, 300px 300px, 300px 300px;
  background-position: center, 0 0, 150px 150px;
  background-blend-mode: color-burn;
}

.customer-stats-container.dream::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.customer-stats-container.dream::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream .stats-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream .stats-main-container {
  border: 3px solid #000000;
}

.dream .stats-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream .stats-title-panel h2 {
  color: #3e2723;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
  animation: none;
}

.dream .close-btn {
  background: #8d6e63;
  border: 3px solid #000000;
  color: #000000;
}

.dream .close-btn:hover {
  background: #a1887f;
  color: #000000;
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.dream .stats-section {
  background: #ffffff;
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream .stats-section h3 {
  color: #3e2723;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
  animation: none;
}

.dream .stat-item {
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid #000000;
}

.dream .stat-label {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .stat-value {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .progress-info p {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .progress-bar {
  background: rgba(45, 20, 60, 0.95); /* Match the achievements title panel color */
  border: 3px solid #000000;
}

.dream .progress-fill {
  background: linear-gradient(135deg, #8d6e63, #5d4037);
}

.dream .flavor-item {
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid #000000;
}

.dream .flavor-name {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .flavor-counts {
  color: #000000;
  text-shadow: none;
  animation: none;
}

.dream .achievement-card {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
}

.dream .achievement-card.unlocked {
  /* Base unlocked achievement styling for dream mode */
  border: 3px solid #4a148c;
}

/* Dream mode tier-specific background colors for unlocked achievements */
.dream .achievement-card.unlocked[data-tier="1"] {
  background: #8A6FB3 !important; /* Lighter purple - Tier 1 */
  border-color: #6a1b9a !important; /* Lighter purple border */
}

.dream .achievement-card.unlocked[data-tier="2"] {
  background: #5A3D7A !important; /* Medium purple - Tier 2 */
  border-color: #000000 !important; /* Black border */
}

.dream .achievement-card.unlocked[data-tier="3"] {
  background: #2d1b3d !important; /* Dark purple matching secret achievements */
  border: 3px solid #000000 !important; /* Black border */
}

/* Dream mode hidden/secret achievements */
.dream .hidden-achievement {
  background: #1a1a1a !important; /* Grey background for dream mode locked */
  border: 3px solid #000000 !important; /* Black border */
}

.dream .hidden-achievement.completed {
  background: #2d1b3d !important; /* Dark purple matching secret achievements */
  border: 3px solid #311b92 !important; /* Darker purple border */
}

.dream .achievement-description {
  color: #fff;
  text-shadow: none;
}

.dream .progress-text {
  color: #ff0000; /* Red text for dream mode */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* 1px black outline around text */
  animation: none;
}

/* Dream mode overrides for tier-specific achievement progress text */
.dream .achievement-card.unlocked[data-tier="2"] .progress-text {
  color: #ff0000 !important; /* Red text for dream mode tier 2 achievements */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream .achievement-card.unlocked[data-tier="3"] .progress-text {
  color: #ff0000 !important; /* Red text for dream mode tier 3 achievements */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

/* dreamText animation defined in global.css */

/* ===============================================================================
                                RESPONSIVE DESIGN
=============================================================================== */

@media (max-width: 768px) {
  .stats-background-panel {
    padding: 1rem;
    margin: 0.5rem;
    width: calc(100% - 1rem);
    border-width: 1px;
  }
  
  .stats-main-container {
    padding: 1rem;
    border-width: 1px;
  }
  
  .stats-title-panel {
    padding: 0.75rem 1rem;
  }
  
  .stats-title-panel h2 {
    font-size: 2rem;
  }
  
  .achievements-grid {
    grid-template-columns: 1fr;
  }
  
  .user-info, .purchase-stats {
    grid-template-columns: 1fr;
  }
  
  .stat-item {
    padding: 1rem;
  }
  
  .close-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .stats-background-panel {
    padding: 0.75rem;
    border-width: 1px;
  }
  
  .stats-main-container {
    padding: 0.75rem;
    border-width: 1px;
  }
  
  .stats-section {
    padding: 1rem;
  }
  
  .stats-title-panel h2 {
    font-size: 1.8rem;
  }
  
  .achievement-card {
    padding: 1rem;
    border-width: 1px;
  }
} 

/* Level Up Popup Styles */
.level-up-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease-in-out;
}

/* Theme-appropriate background panel */
.level-up-background-panel {
  padding: 2rem;
  border-radius: 20px;
  max-width: 500px;
  width: 90%;
  position: relative;
}

/* Light mode background panel */
.level-up-background-panel.light-mode {
  background: linear-gradient(135deg, #f5f5dc, #e8e8dc);
  border: 3px solid #8d6e63;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Dark mode background panel */
.level-up-background-panel.dark-mode {
  background: #1a1a1a;
  border: 3px solid #000000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Dream mode background panel */
.level-up-background-panel.dream-mode {
  background: linear-gradient(135deg, 
    rgba(26, 13, 35, 0.85) 0%, 
    rgba(45, 20, 60, 0.8) 25%, 
    rgba(60, 30, 80, 0.75) 50%, 
    rgba(45, 20, 60, 0.8) 75%, 
    rgba(26, 13, 35, 0.85) 100%
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.4),
    0 0 25px rgba(26, 13, 35, 0.4),
    0 0 35px rgba(45, 20, 60, 0.2);
}

/* Main container */
.level-up-main-container {
  width: 100%;
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
}

/* Light mode main container */
.level-up-main-container.light-mode {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #8d6e63;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dark mode main container */
.level-up-main-container.dark-mode {
  background: rgba(62, 39, 35, 0.9);
  border: 2px solid #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Dream mode main container */
.level-up-main-container.dream-mode {
  background: #1a1a1a;
  border: 2px solid #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.level-up-popup {
  border-radius: 12px;
  text-align: center;
  position: relative;
}

/* Remove old background styles since we now have the panel structure */
.level-up-popup.light-mode,
.level-up-popup.dark-mode,
.level-up-popup.dream-mode {
  background: transparent;
  border: none;
  box-shadow: none;
}

.level-up-content h2 {
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 15px;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}

.level-up-content p {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 20px;
  text-shadow: 1px 1px 0 #000;
}

/* Dark mode specific styles for level-up popup */
.level-up-title.dark-mode {
  color: #4CAF50 !important;
  font-size: 2.6rem;
  margin-bottom: 15px;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
}

.level-number-cyan {
  color: #00ffff !important;
  text-shadow: none !important;
}

.level-up-message.dark-mode {
  color: #000 !important;
  font-size: 1.2rem;
  margin-bottom: 5px;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

.level-up-level.dark-mode {
  color: #4CAF50 !important;
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
  font-family: 'The Wanters DEMO', serif;
}

.reward-section {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  padding: 20px;
  margin: 20px 0;
}

/* Dark mode reward section */
.level-up-main-container.dark-mode .reward-section {
  background: #8d6e63;
  border: 2px solid #000;
}

/* Dream mode reward section - Nuclear override to remove all patterns */
.level-up-main-container.dream-mode .reward-section {
  background: #ffffff !important;
  background-image: none !important;
  background-attachment: initial !important;
  background-blend-mode: initial !important;
  background-clip: initial !important;
  background-origin: initial !important;
  background-position: initial !important;
  background-repeat: initial !important;
  background-size: initial !important;
  border: 2px solid #000 !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 1000 !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

/* Ensure no pseudo-elements interfere with dream mode reward section */
.level-up-main-container.dream-mode .reward-section::before,
.level-up-main-container.dream-mode .reward-section::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/* Additional nuclear override for any child elements */
.level-up-main-container.dream-mode .reward-section * {
  background-image: none !important;
}

/* Override any potential parent background bleeding through */
.level-up-main-container.dream-mode .reward-section {
  contain: layout style paint !important;
}

.reward-section h3 {
  color: #FFD700;
  font-size: 1.4rem;
  margin-bottom: 10px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* Light mode reward section h3 - black with no outline */
.level-up-main-container.light-mode .reward-section h3 {
  color: #000000 !important;
  text-shadow: none !important;
}

.reward-text {
  color: #FFD700 !important;
  font-size: 1.3rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.reward-text.dark-mode {
  color: #4CAF50 !important;
  font-size: 1.1rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

.reward-text.dark-mode.free-bag-reward {
  color: #00ffff !important;
  font-size: 1.4rem !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

/* Higher specificity override for free bag rewards in dark mode */
.level-up-overlay .level-up-background-panel .level-up-main-container .reward-section .reward-text.dark-mode.free-bag-reward,
.level-up-overlay .level-up-background-panel .level-up-main-container.dark-mode .reward-section .reward-text.free-bag-reward {
  color: #00ffff !important;
  font-size: 1.4rem !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

/* Maximum specificity override for ALL free bag rewards - nuclear option */
.level-up-overlay .level-up-background-panel .level-up-main-container .reward-section .reward-text.free-bag-reward,
.level-up-overlay .level-up-background-panel .level-up-main-container.dark-mode .reward-section .reward-text.free-bag-reward,
.level-up-overlay .level-up-background-panel .level-up-main-container.light-mode .reward-section .reward-text.free-bag-reward,
.level-up-overlay .level-up-background-panel .level-up-main-container.dream-mode .reward-section .reward-text.free-bag-reward,
.reward-text.free-bag-reward,
.reward-text.dark-mode.free-bag-reward,
.reward-text.light-mode.free-bag-reward,
.reward-text.dream-mode.free-bag-reward {
  color: #00ffff !important;
  font-size: 1.4rem !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

/* Nuclear option - target ANY reward text that might be free bag related */
.reward-text.free-bag-reward,
.reward-text.dark-mode.free-bag-reward,
.reward-text.light-mode.free-bag-reward,
.reward-text.dream-mode.free-bag-reward {
  color: #00ffff !important;
  font-size: 1.4rem !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

/* Ultimate override for free bag rewards - ensure cyan color in ALL cases */
.reward-text[class*="free-bag-reward"],
.reward-text:contains("Free"),
.reward-text:contains("bag") {
  color: #00ffff !important;
  font-size: 1.4rem !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

.message-text {
  color: #fff !important;
  font-size: 1rem !important;
  margin-bottom: 0 !important;
}

.message-text.dark-mode {
  color: #000 !important;
  font-size: 1.1rem !important;
  margin-bottom: 0 !important;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

/* Light mode specific styles for level-up popup */
.level-up-title.light-mode {
  color: #4CAF50 !important;
  font-size: 2.6rem;
  margin-bottom: 15px;
  text-shadow: none !important;
}

.level-up-message.light-mode {
  color: #000 !important;
  font-size: 1.2rem;
  margin-bottom: 5px;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

.level-up-level.light-mode {
  color: #4CAF50 !important;
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-shadow: none !important;
  font-family: 'The Wanters DEMO', serif;
}

.reward-text.light-mode {
  color: #4CAF50 !important;
  font-size: 1.1rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: none !important;
}

.reward-text.light-mode.free-bag-reward {
  color: #00ffff !important;
  font-size: 1.4rem !important;
  text-shadow: none !important;
}

.message-text.light-mode {
  color: #000 !important;
  font-family: Verdana, sans-serif !important;
  font-size: 1.1rem !important;
  margin-bottom: 0 !important;
  text-shadow: none !important;
}

/* Dream mode specific styles for level-up popup */
.level-up-title.dream-mode {
  color: #4CAF50 !important;
  font-size: 2.6rem;
  margin-bottom: 15px;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
}

.level-up-message.dream-mode {
  color: #000 !important;
  font-size: 1.2rem;
  margin-bottom: 5px;
  text-shadow: none !important;
  font-family: Verdana, sans-serif !important;
}

.level-up-level.dream-mode {
  color: #4CAF50 !important;
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
  font-family: 'The Wanters DEMO', serif;
}

.reward-text.dream-mode {
  color: #4CAF50 !important;
  font-size: 1.1rem !important;
  font-weight: bold;
  margin-bottom: 10px !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

.reward-text.dream-mode.free-bag-reward {
  color: #00ffff !important;
  font-size: 1.4rem !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
}

.message-text.dream-mode {
  color: #000 !important;
  font-family: Verdana, sans-serif !important;
  font-size: 1.1rem !important;
  margin-bottom: 0 !important;
  text-shadow: none !important;
}

.close-popup-btn {
  background: linear-gradient(135deg, #FFD700, #FFA000);
  color: #000;
  border: 2px solid #000;
  border-radius: 25px;
  padding: 12px 30px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: none;
  margin-top: 15px;
}

.close-popup-btn:hover {
  background: linear-gradient(135deg, #FFA000, #FF8F00);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Hidden Achievement Styles */
.hidden-achievement {
  background: linear-gradient(135deg, #4a4a4a, #2e2e2e) !important;
  border: 2px solid #666 !important;
}

/* Light mode completed secret achievements - match tier 3 styling */
.hidden-achievement.completed {
  background-color: #8d6e63 !important; /* Medium brown like tier 3 panel */
  border: 3px solid #3e2723 !important; /* Darker brown border like tier 3 */
}

.hidden-achievement .achievement-name {
  color: #8d6e63; /* Light brown for better visibility in light mode */
}

.hidden-achievement.completed .achievement-name {
  color: #1b0f0a !important; /* Dark brown text */
  background-color: #f5f5dc !important; /* Light cream background like title bar */
  border: 2px solid #3e2723 !important; /* Dark brown border */
  text-shadow: none !important;
}

.hidden-achievement .achievement-description {
  color: #999;
}

.hidden-achievement.completed .achievement-description {
  color: #ffffff !important; /* White like tier 3 achievements */
}

.hidden-achievement.completed .progress-text {
  color: #ffffff !important; /* White like tier 3 achievements */
}

/* Dark mode overrides for hidden achievements */
.dark .hidden-achievement:not(.completed) {
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a) !important;
  border: 2px solid #444 !important;
}

.dark .hidden-achievement.completed,
.dark .achievement-card.hidden-achievement.completed {
  background-color: #3e2723 !important; /* Dark brown matching tier 3 achievements */
  border: 2px solid #000000 !important;
}

.dark .hidden-achievement .achievement-name {
  color: #8d6e63 !important;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000 !important;
}

.dark .hidden-achievement.completed .achievement-name {
  color: #00ffff !important; /* Cyan color like locked achievements */
  background-color: #3e2723 !important; /* Dark brown background matching tier 3 achievements */
  border: 2px solid #000000 !important; /* Black border */
}

/* Ultra-high specificity override for secret achievements in dark mode */
body.dark .achievement-card.hidden-achievement.unlocked.completed .achievement-name,
.dark-mode .achievement-card.hidden-achievement.unlocked.completed .achievement-name,
.dark .achievement-card.hidden-achievement.unlocked.completed .achievement-name {
  color: #00ffff !important; /* Cyan color like locked achievements */
  background-color: #3e2723 !important; /* Dark brown background matching tier 3 achievements */
  border: 2px solid #000000 !important; /* Black border */
}

/* Dream mode styling for secret achievements */
.dream .hidden-achievement.completed .achievement-name {
  color: #00ffff !important; /* Cyan text matching tier 3 achievements */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  background-color: #1a1a1a !important; /* Dark grey background for dream mode secret achievements */
  border: 2px solid #000000 !important; /* Black border */
}

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

@keyframes popupSlideIn {
  from {
    transform: translateY(-50px) scale(0.8);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
} 
/* Custom Font */
@font-face {
  font-family: 'The Wanters DEMO';
  src: url('/fonts/The%20Wanters%20DEMO.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --text-muted: #666666;
  --button-bg: #e0e0e0;
  --card-bg: #ffffff;
  --image-placeholder-bg: #f5f5f5;
  --placeholder-stripe1: #f0f0f0;
  --placeholder-stripe2: #e6e6e6;
  --tag-bg: #f0f0f0;
  --nav-bg: #f5f5f5;
  --border-color: #e0e0e0;
  --font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --landing-button-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #000000;
  --text-muted: #000000;
  --button-bg: #333333;
  --card-bg: #2d2d2d;
  --image-placeholder-bg: #333333;
  --placeholder-stripe1: #2d2d2d;
  --placeholder-stripe2: #383838;
  --tag-bg: #404040;
  --nav-bg: #2a2a2a;
  --border-color: #444444;
}

/* Dream Mode - Dark Grey Theme with Subtle Patterns */
.dream-mode {
  --bg-color: #111111;
  --text-color: #00ffbb;
  --text-muted: #b347ea;
  --button-bg: #8d6e63;
  --card-bg: rgba(20, 20, 20, 0.9);
  --image-placeholder-bg: #1a1a1a;
  --placeholder-stripe1: #1a1a1a;
  --placeholder-stripe2: #2a2a2a;
  --tag-bg: #2a2a2a;
  --nav-bg: #111111;
  --border-color: #333333;
  
  /* Apply complex dark pattern background */
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(75,0,130,0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(0,0,128,0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 25%, rgba(46,139,87,0.08) 0%, transparent 40%),
    radial-gradient(circle at 25% 75%, rgba(138,43,226,0.08) 0%, transparent 40%),
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(75,0,130,0.05) 0deg 30deg,
      transparent 30deg 60deg,
      rgba(0,0,128,0.05) 60deg 90deg,
      transparent 90deg 120deg
    ),
    linear-gradient(30deg, rgba(30,30,30,0.8) 12%, transparent 12.5%, transparent 87%, rgba(30,30,30,0.8) 87.5%, rgba(30,30,30,0.8)),
    linear-gradient(150deg, rgba(25,25,25,0.7) 12%, transparent 12.5%, transparent 87%, rgba(25,25,25,0.7) 87.5%, rgba(25,25,25,0.7)),
    linear-gradient(90deg, rgba(20,20,20,0.6) 12%, transparent 12.5%, transparent 87%, rgba(20,20,20,0.6) 87.5%, rgba(20,20,20,0.6)),
    linear-gradient(60deg, rgba(35,35,35,0.4) 25%, transparent 25.5%, transparent 75%, rgba(35,35,35,0.4) 75%, rgba(35,35,35,0.4)),
    linear-gradient(120deg, rgba(28,28,28,0.5) 25%, transparent 25.5%, transparent 75%, rgba(28,28,28,0.5) 75%, rgba(28,28,28,0.5));
  background-size: 120px 120px, 100px 100px, 80px 80px, 90px 90px, 200px 200px, 40px 70px, 35px 60px, 50px 85px, 30px 50px, 45px 75px;
  background-position: 0 0, 60px 60px, 40px 40px, 45px 45px, 0 0, 0 0, 17px 30px, 25px 42px, 0 0, 22px 37px;
}

/* Dream Mode Text Animation - Modified Colors */
.dream-mode h1, 
.dream-mode h2, 
.dream-mode h3, 
.dream-mode p:not(.app-subtitle), 
.dream-mode span, 
.dream-mode a {
  animation: dreamText 20s infinite linear;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
}

/* dreamText animation defined in global.css */

/* Dream Mode Button Animation */
.dream-mode button,
.dream-mode .button,
.dream-mode .nav-button,
.dream-mode .home-button,
.dream-mode .privacy-button,
.dream-mode .switch,
.dream-mode .quantity-button,
.dream-mode .remove-item-button,
.dream-mode .checkout-button,
.dream-mode .back-to-cart-button,
.dream-mode .submit-button,
.dream-mode .add-to-cart-button,
.dream-mode .view-cart-button,
.dream-mode .continue-shopping-button,
.dream-mode .back-to-products,
.dream-mode a[class*="button"] {
  animation: none !important;
  border: 3px solid #000000 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}

/* Special handling for landing buttons to maintain their specific font size */
.dream-mode .landing-button {
  animation: none !important;
  border: 3px solid #000000 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  /* Font size will be handled by LandingScreen.css specific rules */
}

.dream-mode .home-button:hover,
.dream-mode .privacy-button:hover,
.dream-mode .nav-button:hover,
.dream-mode .back-button:hover,
.dream-mode button:hover:not(.close-btn):not(.daydreamers-logout-button):not(.achievements-btn):not(.business-type-filter-button),
.dream-mode .button:hover:not(.close-btn):not(.daydreamers-logout-button):not(.achievements-btn),
.dream-mode .switch:hover,
.dream-mode .quantity-button:hover,
.dream-mode .remove-item-button:hover,
.dream-mode .checkout-button:hover,
.dream-mode .back-to-cart-button:hover,
.dream-mode .submit-button:hover,
.dream-mode .add-to-cart-button:hover,
.dream-mode .view-cart-button:hover,
.dream-mode .continue-shopping-button:hover,
.dream-mode .back-to-products:hover,
.dream-mode a[class*="button"]:hover:not(.close-btn):not(.daydreamers-logout-button):not(.achievements-btn) {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleGlobal 1.5s ease-in-out infinite alternate !important;
}

/* Landing button hover effects are handled specifically in LandingScreen.css */

/* Dream Mode Toggle Switch */
.dream-mode .slider {
  background: linear-gradient(45deg, #4b0082, #000080, #0072b1, #2e8b57, #006400);
  background-size: 400% 400%;
  animation: dreamGradient 15s infinite alternate;
}

.dream-mode .slider:before {
  background: #000;
  box-shadow: 0 0 10px #fff, 0 0 20px #fff;
}

@keyframes dreamGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes dreamSparkleGlobal {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Global touch scrolling optimization for all scrollable containers */
* {
  -webkit-overflow-scrolling: touch;
}

/* Ensure all scrollable elements have proper touch behavior */
[class*="container"],
[class*="panel"],
[class*="modal"],
[class*="overlay"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* High specificity touch scrolling for all scrollable elements - cannot be overridden */
*[style*="overflow"] {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* Specific touch scrolling for common scrollable classes */
.customer-stats-container,
.stats-main-container,
.user-menu-modal,
.free-bag-codes-panel,
.privacy-details,
.admin-background-panel,
.admin-container,
.admin-popup,
.admin-modal,
.error-stack {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* Global button font styling - applies to all buttons and button-like elements */
button, 
input[type="button"], 
input[type="submit"], 
input[type="reset"],
.button,
.btn,
.nav-button,
.home-button,
.landing-button,
.back-button,
.view-cart-button,
.continue-shopping-button,
.back-to-products,
.add-to-cart-button,
.quantity-button,
.remove-item-button,
.checkout-button,
.submit-button,
.retry-button,
.theme-toggle,
.back-to-cart-button,
a[class*="button"],
*[class*="button"] {
  font-family: var(--font-family) !important;
}

button, input, textarea, select {
  font-family: var(--font-family);
}

a {
  color: #8d6e63;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Remove underlines from buttons and navigation links on hover */
button:hover,
.nav-button:hover,
.home-button:hover,
.landing-button:hover,
.back-button:hover,
.view-cart-button:hover,
.continue-shopping-button:hover,
.back-to-products:hover {
  text-decoration: none !important;
}

/* Cart empty state - greyed out */
.view-cart-button.cart-empty,
.back-to-cart-button.cart-empty {
  opacity: 0.4;
  color: #999999 !important;
  background-color: #cccccc !important;
  cursor: default;
  pointer-events: none;
}

.view-cart-button.cart-empty:hover,
.back-to-cart-button.cart-empty:hover {
  opacity: 0.4;
  color: #999999 !important;
  background-color: #cccccc !important;
  transform: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  font-weight: normal;
}

/* Dark mode overrides to ensure black text */
.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3, 
.dark-mode h4, 
.dark-mode h5, 
.dark-mode h6,
.dark-mode p,
.dark-mode span,
.dark-mode div,
.dark-mode a,
.dark-mode button,
.dark-mode input,
.dark-mode textarea,
.dark-mode select,
.dark-mode label {
  color: #000000 !important;
}

/* Override any text-shadow in dark mode */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  text-shadow: none !important;
}

/* Apply dream mode styling to all menu pages */
.dream-mode.landing-screen,
.dream-mode.options-page,
.dream-mode.contact-page,
.dream-mode.privacy-policy-page,
.dream-mode.cart-page,
.dream-mode.order-submission,
.dream-mode.main-menu,
.dream-mode.product-detail {
  background-color: #222;

  background-size: cover;
  background-position: center;
  background-blend-mode: color-burn;
  color: var(--text-color);
  position: relative;
}

/* Dream mode container borders */
.dream-mode .options-container,
.dream-mode .contact-container,
.dream-mode .privacy-policy-container,
.dream-mode .theme-switch-container .switch-track {
  border: 3px solid #000000;
}

.dream-mode .theme-switch-container .switch-button {
  border: 2px solid #000000;
}

.dream-mode.landing-screen::before,
.dream-mode.options-page::before,
.dream-mode.contact-page::before,
.dream-mode.privacy-policy-page::before,
.dream-mode.cart-page::before,
.dream-mode.order-submission::before,
.dream-mode.main-menu::before,
.dream-mode.product-detail::before {
  background-color: rgba(34, 34, 34, 0.85);
}

/* Dream mode cart empty state */
.dream-mode .view-cart-button.cart-empty,
.dream-mode .back-to-cart-button.cart-empty {
  opacity: 0.4;
  color: #666666 !important;
  background-color: #444444 !important;
  border: 2px solid #666666 !important;
}

/* Error Boundary Styles */
.error-boundary {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--bg-color);
  padding: 2rem;
}

.error-container {
  background-color: var(--card-bg);
  border: 3px solid #f44336;
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  text-align: center;
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.2);
}

.error-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.error-title {
  color: #f44336;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1rem;
  font-family: var(--font-family);
}

.error-message {
  color: var(--text-color);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.error-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.error-actions .retry-button,
.error-actions .home-button {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.error-actions .retry-button {
  background-color: #f44336;
  color: white;
}

.error-actions .retry-button:hover {
  background-color: #d32f2f;
  transform: translateY(-2px);
}

.error-actions .home-button {
  background-color: #8d6e63;
  color: white;
}

.error-actions .home-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
}

/* Dark mode error home button glow */
.dark-mode .error-actions .home-button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.error-details {
  margin-top: 2rem;
  text-align: left;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1rem;
  background-color: #f9f9f9;
}

.error-details summary {
  cursor: pointer;
  font-weight: 600;
  color: #666;
  margin-bottom: 0.5rem;
}

.error-stack {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
  color: #333;
  background-color: #fff;
  padding: 0.5rem;
  border-radius: 4px;
  overflow-x: auto;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Dark mode error styles */
.dark-mode .error-container {
  background-color: #2a2a2a;
  border-color: #f44336;
}

.dark-mode .error-message {
  color: #3e2723;
}

.dark-mode .error-details {
  background-color: #333;
  border-color: #555;
}

.dark-mode .error-details summary {
  color: #ccc;
}

.dark-mode .error-stack {
  background-color: #444;
  color: #fff;
}

/* Dream mode error styles */
.dream-mode .error-container {
  background-color: rgba(34, 34, 34, 0.9);
  border: 2px solid #000000;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(128, 0, 128, 0.4),
    0 0 30px rgba(75, 0, 130, 0.3);
}

.dream-mode .error-title {
  color: #ff6b6b;
  text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}

.dream-mode .error-message {
  color: #3e2723;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.dream-mode .error-actions .retry-button,
.dream-mode .error-actions .home-button {
  border: 2px solid #000000;
  box-shadow: 0 0 10px rgba(128, 0, 128, 0.5);
}

.dream-mode .error-actions .retry-button:hover,
.dream-mode .error-actions .home-button:hover {
  box-shadow: 
    0 0 15px rgba(128, 0, 128, 0.7),
    0 0 25px rgba(75, 0, 130, 0.5);
}

@media (max-width: 768px) {
  .error-container {
    padding: 1.5rem;
  }
  
  .error-title {
    font-size: 1.5rem;
  }
  
  .error-message {
    font-size: 1rem;
  }
  
  .error-actions {
    flex-direction: column;
  }
  
  .error-actions .retry-button,
  .error-actions .home-button {
    width: 100%;
  }
}

.dream-mode .landing-button,
.dream-mode .home-button,
.dream-mode .nav-button,
.dream-mode .contact-button,
.dream-mode .privacy-button,
.dream-mode .view-cart-button,
.dream-mode .add-to-cart-button,
.dream-mode .quantity-button,
.dream-mode .back-button,
.dream-mode .submit-button,
.dream-mode .retry-button,
.dream-mode .options-button,
.dream-mode .cart-button,
.dream-mode .size-option,
.dream-mode .theme-toggle,
.dream-mode .continue-shopping-button,
.dream-mode .back-to-products,
.dream-mode .back-to-cart-button,
.dream-mode a[class*="button"] {
  border: 2px solid #000 !important;
}

/* Button borders for all themes */
.light-mode .submit-button,
.light-mode .remove-item-button,
.light-mode .add-to-cart-button,
.light-mode .quantity-button,
.light-mode .back-button,
.light-mode .continue-shopping-button,
.light-mode .back-to-products,
.light-mode .view-cart-button,
.light-mode .back-to-cart-button,
.light-mode .cart-button,
.light-mode .options-button,
.light-mode .size-option,
.light-mode .theme-toggle,
.light-mode .home-button,
.light-mode .landing-button,
.light-mode .nav-button,
.light-mode .checkout-button,
.light-mode a[class*="button"] {
  border: 3px solid #3e2723 !important;
}
.dark-mode .submit-button,
.dark-mode .remove-item-button,
.dark-mode .add-to-cart-button,
.dark-mode .quantity-button,
.dark-mode .back-button,
.dark-mode .continue-shopping-button,
.dark-mode .back-to-products,
.dark-mode .view-cart-button,
.dark-mode .back-to-cart-button,
.dark-mode .cart-button,
.dark-mode .options-button,
.dark-mode .size-option,
.dark-mode .theme-toggle,
.dark-mode a[class*="button"] {
  border: 2px solid #000 !important;
}
.dream-mode .submit-button,
.dream-mode .remove-item-button,
.dream-mode .add-to-cart-button,
.dream-mode .quantity-button,
.dream-mode .back-button,
.dream-mode .continue-shopping-button,
.dream-mode .back-to-products,
.dream-mode .view-cart-button,
.dream-mode .back-to-cart-button,
.dream-mode .cart-button,
.dream-mode .options-button,
.dream-mode .size-option,
.dream-mode .theme-toggle,
.dream-mode a[class*="button"] {
  border: 2px solid #000 !important;
}

.light-mode .quantity-button,
.light-mode .remove-item-button,
.light-mode .add-to-cart-button,
.light-mode .submit-button,
.light-mode .continue-shopping-button,
.light-mode .back-to-products,
.light-mode .view-cart-button,
.light-mode .back-to-cart-button,
.light-mode .cart-button,
.light-mode .options-button,
.light-mode .size-option,
.light-mode .theme-toggle,
.light-mode .home-button,
.light-mode .landing-button,
.light-mode .nav-button,
.light-mode .checkout-button,
.light-mode a[class*="button"] {
  border: 3px solid #3e2723 !important;
}
.dark-mode .quantity-button,
.dark-mode .remove-item-button,
.dark-mode .add-to-cart-button,
.dark-mode .submit-button,
.dark-mode .continue-shopping-button,
.dark-mode .back-to-products,
.dark-mode .view-cart-button,
.dark-mode .back-to-cart-button,
.dark-mode .cart-button,
.dark-mode .options-button,
.dark-mode .size-option,
.dark-mode .theme-toggle,
.dark-mode a[class*="button"] {
  border: 2px solid #000 !important;
}
.dream-mode .quantity-button,
.dream-mode .remove-item-button,
.dream-mode .add-to-cart-button,
.dream-mode .submit-button,
.dream-mode .continue-shopping-button,
.dream-mode .back-to-products,
.dream-mode .view-cart-button,
.dream-mode .back-to-cart-button,
.dream-mode .cart-button,
.dream-mode .options-button,
.dream-mode .size-option,
.dream-mode .theme-toggle,
.dream-mode a[class*="button"] {
  border: 2px solid #000 !important;
}

.dream-mode::before,
.dream-mode::after,
.dream-mode .main-menu::before,
.dream-mode .main-menu::after,
.dream-mode .landing-screen::before,
.dream-mode .landing-screen::after,
.dream-mode .product-detail::before,
.dream-mode .product-detail::after,
.dream-mode .cart-page::before,
.dream-mode .cart-page::after,
.dream-mode .order-submission::before,
.dream-mode .order-submission::after,
.dream-mode .options-page::before,
.dream-mode .options-page::after,
.dream-mode .privacy-policy-page::before,
.dream-mode .privacy-policy-page::after,
.dream-mode .contact-page::before,
.dream-mode .contact-page::after {
  animation: dreamRainbowHue 40s linear infinite;
  animation-delay: 0s;
  opacity: 0.55;
}

@keyframes dreamRainbowHue {
  0%   { filter: hue-rotate(240deg) saturate(1.2) brightness(1); }
  12.5% { filter: hue-rotate(270deg) saturate(1.2) brightness(1.05); }
  25%  { filter: hue-rotate(300deg) saturate(1.2) brightness(1.1); }
  37.5% { filter: hue-rotate(330deg) saturate(1.2) brightness(1.05); }
  50%  { filter: hue-rotate(0deg)   saturate(1.2) brightness(1); }
  62.5% { filter: hue-rotate(30deg)  saturate(1.2) brightness(1.05); }
  75%  { filter: hue-rotate(60deg)  saturate(1.2) brightness(1.1); }
  87.5% { filter: hue-rotate(90deg)  saturate(1.2) brightness(1.05); }
  100% { filter: hue-rotate(240deg) saturate(1.2) brightness(1); }
}

/* Dream Mode Home Button - match main menu style */
.dream-mode .home-button {
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.5px !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  text-shadow: none !important;
  animation: none !important;
  font-family: var(--font-family);
  transition: all 0.3s ease;
}

.dream-mode .home-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleMainMenu 1.5s ease-in-out infinite alternate !important;
} 

/* Achievements button universal style */
.achievements-btn {
  background: #228B22 !important; /* Forest green */
  color: #fff;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  border: 3px solid #3e2723;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  letter-spacing: 0.02em;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  outline: none;
  display: inline-block;
}

/* Black border in dark mode */
.dark-mode .achievements-btn {
  border: 3px solid #000 !important;
}

/* Forest green in dream mode with high specificity */
.dream-mode .achievements-btn,
body.dream-mode .achievements-btn {
  background: #228B22 !important;
  border: 3px solid #3e2723;
}

.achievements-btn:hover {
  background: #2eaf2e !important;
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.achievements-btn:active, .achievements-btn:focus {
  background: #228B22 !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transform: translateY(0);
} 

.dream-mode .achievements-btn:hover,
body.dream-mode .achievements-btn:hover {
  background: #17641a !important;
  color: #fff !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 0 18px 4px #228B22, 0 4px 16px rgba(0,0,0,0.22) !important;
  animation: none !important;
} 
.landing-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.landing-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.landing-screen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.landing-background-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #8d6e63;
  border-radius: 25px;
  padding: 3rem 2rem 2rem 2rem;
  margin: 2rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(5px);
  max-width: 600px;
  width: 90%;
}

.landing-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
  max-width: 100%;
  width: 100%;
  padding: 0;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.landing-screen .title-panel {
  background-color: rgba(245, 245, 220, 0.9);
  border: 1.5px solid #3e2723;
  border-radius: 20px;
  padding: clamp(1rem, 4vw, 2rem) clamp(1.5rem, 6vw, 3rem); /* Responsive padding */
  margin-bottom: 2rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  position: relative;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  min-width: 0; /* Allow shrinking */
}

.app-title {
  font-size: clamp(3rem, 8vw, 7rem); /* Responsive font size */
  font-weight: 1000; /* Extra bold */
  margin: 0;
  color: #14545c; /* Teal color matching selling button */
  animation: fadeIn 1s ease-in-out;
  line-height: 1.1;
  letter-spacing: clamp(1px, 0.5vw, 2px); /* Responsive letter spacing */
  text-align: center;
  word-break: break-word; /* Allow breaking if needed */
  max-width: 100%;
  cursor: pointer;
  transition: color 0.3s ease;
}

.app-subtitle {
  font-size: 1.5rem;
  margin-bottom: 3rem;
  color: #5d4037; /* Medium brown text */
  font-style: italic;
  animation: fadeIn 1s ease-in-out 0.3s forwards;
  opacity: 0;
}

.landing-buttons {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
  animation: fadeIn 1s ease-in-out 0.6s forwards;
  opacity: 0;
  width: 100%;
  max-width: 300px;
}

.landing-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63; /* Medium brown */
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  font-family: var(--landing-button-font);
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
}

.landing-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f; /* Lighter brown on hover */
}

/* Enhanced hover effects for all modes */
.light-mode .landing-button:hover {
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(141, 110, 99, 0.4),
    0 0 25px rgba(93, 64, 55, 0.3);
}

.dark-mode .landing-button:hover {
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(161, 136, 127, 0.5),
    0 0 25px rgba(93, 64, 55, 0.4);
}

.theme-toggle {
  position: fixed;
  bottom: 2rem;
  padding: 0.75rem 1.5rem;
  background-color: #6d4c41; /* Darker brown */
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 1rem;
  font-family: var(--font-family);
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  animation: fadeIn 1s ease-in-out 0.9s forwards;
  opacity: 0;
  z-index: 1;
}

.theme-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  background-color: #795548;
}

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

/* Dark mode specific styles */
.dark-mode .landing-screen {
  background-color: #3e2723; /* Dark brown background */
  background-blend-mode: multiply;
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 84 48'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23412f2a' fill-opacity='0.25'%3E%3Cpath d='M42 48c23.196 0 42-10.745 42-24S65.196 0 42 0 0 10.745 0 24s18.804 24 42 24zm0-5c19.33 0 35-8.954 35-19s-15.67-19-35-19S7 13.954 7 24s15.67 19 35 19z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 120px 120px;
  background-position: center, center;
  position: relative;
}

.dark-mode .landing-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode .landing-screen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Light mode title with no outline for clean look */
.landing-screen:not(.dark-mode):not(.dream-mode) .app-title {
  text-shadow: none !important; /* No outline in light mode */
}

/* More specific light mode rule to ensure text-shadow is removed */
.light-mode .landing-screen .app-title {
  text-shadow: none !important; /* Force remove text-shadow in light mode */
}

.dark-mode.landing-screen .app-title {
  color: #14545c !important; /* Teal color matching selling button */
  text-shadow: 
    -1.5px -1.5px 0 #000,
    1.5px -1.5px 0 #000,
    -1.5px 1.5px 0 #000,
    1.5px 1.5px 0 #000 !important; /* 1.5px black outline */
  cursor: pointer;
  transition: color 0.3s ease;
}

/* Dark mode title panel */
.dark-mode.landing-screen .title-panel {
  background-color: rgba(62, 39, 35, 0.9);
  border: 3px solid #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark-mode .app-subtitle {
  color: #8d6e63 !important; /* Same cream brown as the title */
}

.dark-mode .theme-toggle {
  background-color: #4e342e;
  border: 3px solid #000000;
}

.dark-mode .landing-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .landing-button {
  border: 3px solid #000000;
}

/* Dream mode styles */
.dream-mode.landing-screen {
  background-color: #222;
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
    linear-gradient(45deg, transparent 24%, rgba(75, 0, 130, 0.05) 25%, rgba(75, 0, 130, 0.05) 26%, transparent 27%, transparent 74%, rgba(138, 43, 226, 0.05) 75%, rgba(138, 43, 226, 0.05) 76%, transparent 77%),
    linear-gradient(-45deg, transparent 24%, rgba(102, 51, 153, 0.05) 25%, rgba(102, 51, 153, 0.05) 26%, transparent 27%, transparent 74%, rgba(60, 30, 80, 0.05) 75%, rgba(60, 30, 80, 0.05) 76%, transparent 77%);
  background-size: cover, 300px 300px, 300px 300px, 60px 60px, 60px 60px;
  background-position: center, 0 0, 150px 150px, 0 0, 30px 30px;
  background-blend-mode: color-burn;
}

.dream-mode.landing-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.landing-screen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

/* Dream mode abstract symmetrical title panel - specific to landing screen */
.dream-mode.landing-screen .title-panel {
  background: #111111 !important;
  background-color: #111111 !important;
  background-image: none !important;
  border: 3px solid #000000;
  border-radius: 20px;
  position: relative;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(26, 26, 26, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .landing-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

/* Dream mode title with black border */
.dream-mode .app-title {
  text-shadow: 
    -1.3px -1.3px 0 #000,
    1.3px -1.3px 0 #000,
    -1.3px 1.3px 0 #000,
    1.3px 1.3px 0 #000 !important;
}

/* Dream mode subtitle with white teal color - FORCE override global dream mode text animation */
.landing-screen.dream-mode .landing-background-panel .landing-content p.app-subtitle,
.dream-mode.landing-screen .landing-background-panel .landing-content .app-subtitle,
.dream-mode .landing-screen .landing-content .app-subtitle,
.dream-mode.landing-screen .landing-content .app-subtitle,
.dream-mode .landing-background-panel .app-subtitle,
.dream-mode p.app-subtitle {
  color: #b0f0f0 !important; /* White teal color */
  animation: none !important;
  text-shadow: none !important;
  background: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Dream mode button text styling - clean bold black text */
.dream-mode .landing-button {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 900 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.5px !important;
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
}

/* Override any global dream mode text effects for landing buttons */
.dream-mode .landing-button:not(:hover) {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-size: 1.6rem !important;
}

/* Ultra-high specificity to ensure dream mode landing buttons match light/dark mode font size */
body.dream-mode .landing-screen .landing-button,
.dream-mode.landing-screen .landing-button,
.dream-mode .landing-screen .landing-button {
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}

/* Dream mode psychedelic smoke button effects */
.dream-mode .landing-button:hover,
.dream-mode .theme-toggle:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleLanding 1.5s ease-in-out infinite alternate !important;
}

.dream-mode .landing-button {
  border: 3px solid #000000;
}

.dream-mode .theme-toggle {
  border: 3px solid #000000;
}

@keyframes dreamSparkleLanding {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

/* Desktop/Large screen styles */
@media (min-width: 1024px) {
  .landing-screen {
    padding: 3rem;
  }
  
  .landing-background-panel {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    padding: 4rem 3rem 3rem 3rem;
  }
  
  .app-subtitle {
    font-size: 1.8rem;
    margin-bottom: 4rem;
  }
  
  .landing-buttons {
    max-width: 350px;
    gap: 2rem;
  }
  
  .landing-button {
    font-size: 1.8rem;
    padding: 1.2rem 2.5rem;
  }
  
  /* Ensure dream mode landing buttons match font size in desktop */
  .dream-mode .landing-button {
    font-size: 1.8rem !important;
  }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1023px) {
  .landing-background-panel {
    max-width: 650px;
    width: 85%;
    margin: 0 auto;
    padding: 3.5rem 2.5rem 2.5rem 2.5rem;
  }
  
  .app-subtitle {
    font-size: 1.6rem;
    margin-bottom: 3.5rem;
  }
  
  .landing-buttons {
    max-width: 320px;
    gap: 1.8rem;
  }
  
  .landing-button {
    font-size: 1.7rem;
    padding: 1.1rem 2.2rem;
  }
  
  /* Ensure dream mode landing buttons match font size in tablet */
  .dream-mode .landing-button {
    font-size: 1.7rem !important;
  }
}

@media (max-width: 768px) {
  .landing-background-panel {
    margin: 1rem;
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    width: 95%;
  }
  
  .app-subtitle {
    font-size: 1.2rem;
  }
  
  .landing-buttons {
    flex-direction: column;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .landing-background-panel {
    margin: 0.5rem;
    padding: 1.5rem 1rem 1rem 1rem;
    width: 98%;
  }
  
  .app-title {
    font-size: 2.8rem;
  }
  
  .title-panel {
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
  }
}

/* Landscape orientation styles - more specific selectors */
@media screen and (orientation: landscape) and (max-height: 768px) {
  .landing-screen .landing-background-panel {
    max-width: 850px !important;
    width: 90% !important;
    margin: 0.5rem auto !important;
    padding: 1.5rem 2.5rem 1rem 2.5rem !important;
  }
  
  .landing-screen .landing-content {
    margin-bottom: 1rem;
  }
  
  .landing-screen .app-title {
    font-size: 3.5rem !important;
    letter-spacing: 1px;
  }
  
  .landing-screen .title-panel {
    padding: 1rem 2rem !important;
    margin-bottom: 0.8rem !important;
  }
  
  .landing-screen .app-subtitle {
    font-size: 1.2rem !important;
    margin-bottom: 1rem !important;
  }
  
  .landing-screen .landing-buttons {
    flex-direction: row !important;
    gap: 2rem !important;
    margin-top: 0.8rem !important;
    justify-content: center;
    max-width: 500px;
  }
  
  .landing-screen .landing-button {
    font-size: 1.3rem !important;
    padding: 0.7rem 1.5rem !important;
    flex: 1;
    max-width: 180px;
  }
  
  /* Ensure dream mode landing buttons match font size in landscape */
  .dream-mode .landing-screen .landing-button {
    font-size: 1.3rem !important;
  }
}

/* Very small landscape screens (phones in landscape) */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .landing-screen .landing-background-panel {
    max-width: 750px !important;
    width: 95% !important;
    margin: 0.3rem auto !important;
    padding: 1rem 2rem 0.8rem 2rem !important;
  }
  
  .landing-screen .app-title {
    font-size: 2.8rem !important;
  }
  
  .landing-screen .title-panel {
    padding: 0.8rem 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .landing-screen .app-subtitle {
    font-size: 1rem !important;
    margin-bottom: 0.8rem !important;
  }
  
  .landing-screen .landing-buttons {
    gap: 1.5rem !important;
    margin-top: 0.5rem !important;
  }
  
  .landing-screen .landing-button {
    font-size: 1.1rem !important;
    padding: 0.6rem 1.2rem !important;
  }
  
  /* Ensure dream mode landing buttons match font size in small landscape */
  .dream-mode .landing-screen .landing-button {
    font-size: 1.1rem !important;
  }
}

/* Utility for Wanters DEMO font with 1px black outline */
.wantersdemo-outline {
  font-family: 'The Wanters DEMO', serif;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* Themed loading bar base styles */
.daydreamers-loading-bar {
  border-radius: 12px;
  height: 28px;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
}

.daydreamers-loading-bar.light {
  background: #f5f5dc;
  border: 3px solid #3e2723;
}
.daydreamers-loading-bar.dark {
  background: #3e2723;
  border: 3px solid #000;
}
.daydreamers-loading-bar.dream {
  background: linear-gradient(90deg, rgba(26, 13, 35, 0.9), rgba(45, 20, 60, 0.9));
  border: 3px solid #000;
  box-shadow: 0 0 8px rgba(45, 20, 60, 0.4);
}

.daydreamers-loading-bar-fill {
  height: 100%;
  border-radius: 12px;
  transition: width 0.5s;
}
.daydreamers-loading-bar-fill.light {
  background: #8d6e63;
}
.daydreamers-loading-bar-fill.dark {
  background: #fff8e1;
}
.daydreamers-loading-bar-fill.dream {
  background: linear-gradient(90deg, rgba(139, 110, 99, 0.9), rgba(93, 64, 55, 0.9));
} 
.main-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0;
  background-color: #f5f5dc; /* Light beige background for light mode */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  min-height: 100vh;
  position: relative;
}

.main-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.main-menu::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.products-title {
  font-size: 6rem;
  font-weight: 700;
  margin: 0;
  color: #3e2723;
  position: relative;
  z-index: 1;
  text-align: center;
  text-shadow: none; /* No outline in light mode */
  cursor: pointer;
  transition: color 0.3s ease;
}

/* NUCLEAR override: absolutely no hover/focus/active effect for products-title in any mode */
.products-title:hover,
.products-title:focus,
.products-title:active,
.light-mode .products-title:hover,
.light-mode .products-title:focus,
.light-mode .products-title:active,
.dark-mode .products-title:hover,
.dark-mode .products-title:focus,
.dark-mode .products-title:active {
  color: inherit !important;
  cursor: default !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  text-shadow: none !important;
  background: none !important;
  background-color: transparent !important;
  opacity: 1 !important;
  pointer-events: none !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Dream mode specific hover overrides - keep the animation */
.dream-mode .products-title:hover,
.dream-mode .products-title:focus,
.dream-mode .products-title:active,
.dream-mode .title-panel .products-title:hover,
.dream-mode .title-panel .products-title:focus,
.dream-mode .title-panel .products-title:active,
.dream-mode .main-menu .products-title:hover,
.dream-mode .main-menu .products-title:focus,
.dream-mode .main-menu .products-title:active {
  color: inherit !important;
  cursor: default !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  animation: dreamText 20s infinite linear !important;
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important;
  background: none !important;
  background-color: transparent !important;
  opacity: 1 !important;
  pointer-events: none !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Force solid background for title panel - MAIN MENU PAGE ONLY */
body .main-menu .title-panel,
.main-menu .title-panel,
.main-menu.light-mode .title-panel,
div.title-panel {
  background-color: #f5f5dc !important;
  background-image: none !important;
  background: #f5f5dc !important;
  border: 3px solid #3e2723 !important;
  border-radius: 20px;
  padding: 2rem 3rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 100 !important;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
}

.home-button-container {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.home-button {
  display: inline-block;
  background-color: #8d6e63;
  color: white;
  font-weight: 600;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 9999px;
  transition: all 0.3s ease;
  font-size: 1.6rem;
  font-family: var(--font-family);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
}

.home-button:hover {
  background-color: #a1887f;
  transform: translateY(-4px);
  color: white;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Light mode home button - ensure pill shape */
.main-menu:not(.dark-mode):not(.dream-mode) .home-button {
  border-radius: 9999px !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  display: inline-block !important;
  text-decoration: none !important;
  border: 3px solid #3e2723 !important;
  background-color: #8d6e63 !important;
  color: white !important;
}

.main-menu:not(.dark-mode):not(.dream-mode) .home-button:hover {
  background-color: #a1887f !important;
  color: white !important;
  text-decoration: none !important;
}

.main-content-panel {
  background-color: #ffffff;
  border: 3px solid #3e2723;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 1200px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 2rem;
}

.product-card-container {
  cursor: pointer;
  transition: all 0.3s ease;
}

.product-card-container:hover {
  transform: translateY(-8px);
}

.product-card-background {
  background-color: #8d6e63;
  border: 3px solid #3e2723;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.product-card-container:hover .product-card-background {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  border-color: #3e2723;
  background-color: #8d6e63;
}

.product-name-panel {
  text-align: center;
  padding: 0.75rem;
  background-color: rgba(245, 245, 220, 0.9);
  border: 3px solid #3e2723;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-card-container:hover .product-name-panel {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-color: #3e2723;
  background-color: #fafaf0;
}

.product-name {
  font-size: 1.8rem;
  font-weight: 900;
  color: #3e2723;
  font-family: var(--font-family);
  display: block;
  line-height: 1.2;
}

.product-image-card {
  background-color: #f5f5dc;
  border: 3px solid #000000;
  border-radius: 8px;
  padding: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-card-container:hover .product-image-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-color: #000000;
  background-color: #fafaf0;
}

.product-image-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  transition: transform 0.3s ease;
}

.product-card-container:hover .product-image-card img {
  transform: scale(1.05);
}

.view-cart-container {
  display: flex;
  justify-content: center;
  margin: 0;
}

.view-cart-button {
  display: inline-block;
  background-color: #14545c;
  color: white;
  font-weight: 600;
  text-decoration: none;
  padding: 0.8rem 2rem;
  border-radius: 30px;
  transition: all 0.2s ease;
  font-size: 1.2rem;
  font-family: var(--font-family);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723;
}

.view-cart-button:hover {
  background-color: #795548;
  transform: translateY(-2px);
  color: white;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Dark mode specific styles */
.main-menu.dark-mode {
  background-color: #3e2723; /* Dark brown background */
  /* Provide a valid first background image layer instead of an empty comma */
  background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 84 48'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23412f2a' fill-opacity='0.25'%3E%3Cpath d='M42 48c23.196 0 42-10.745 42-24S65.196 0 42 0 0 10.745 0 24s18.804 24 42 24zm0-5c19.33 0 35-8.954 35-19s-15.67-19-35-19S7 13.954 7 24s15.67 19 35 19z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 120px 120px;
  background-position: center, center;
  background-blend-mode: multiply;
  position: relative;
  min-height: 100vh;
}

.main-menu.dark-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.main-menu.dark-mode::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .products-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dark-mode .products-title:hover {
  color: #a1887f !important;
}

body .main-menu.dark-mode .title-panel,
.main-menu.dark-mode .title-panel,
.dark-mode .main-menu .title-panel,
.dark-mode div.title-panel {
  background-color: #3e2723 !important;
  background-image: none !important;
  background: #3e2723 !important;
  border: 3px solid #000000 !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  z-index: 100 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
}

.dark-mode .main-content-panel {
  background-color: #3e2723;
  border: 3px solid #000000;
}

.dark-mode .product-card-background {
  background-color: #1a1a1a;
  border: 3px solid #000000;
}

.dark-mode .product-card-container:hover .product-card-background {
  background-color: #1a1a1a;
  border-color: #000000;
}

.dark-mode .product-image-card {
  background-color: #8d6e63;
  border: 3px solid #000000;
}

.dark-mode .product-name-panel {
  background-color: #8d6e63;
  border: 3px solid #000000;
}

.dark-mode .product-card-container:hover .product-image-card {
  background-color: #a1887f;
  border-color: #000000;
}

.dark-mode .product-card-container:hover .product-name-panel {
  border-color: #000000;
}

.dark-mode .product-name {
  color: #fff8e1;
}

/* Dark mode home button with ultra-high specificity - matching dream mode shape */
body.dark-mode .main-menu .home-button,
.dark-mode.main-menu .home-button,
.dark-mode .main-menu .home-button,
.dark-mode .home-button {
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  border-radius: 9999px !important;
  background-color: #8d6e63 !important;
  font-weight: 900 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.5px !important;
  padding: 1rem 2rem !important;
  max-width: none !important;
  min-width: 0 !important;
  width: auto !important;
  display: inline-block !important;
  text-align: center !important;
  text-decoration: none !important;
}

/* Dark mode home button hover with ultra-high specificity */
body.dark-mode .main-menu .home-button:hover,
.dark-mode.main-menu .home-button:hover,
.dark-mode .main-menu .home-button:hover,
.dark-mode .home-button:hover {
  color: #000000 !important;
  background-color: #a1887f !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-4px) !important;
  text-decoration: none !important;
}

.dark-mode .view-cart-button {
  border: 3px solid #000000;
}

/* Dream mode specific styles */
.main-menu.dream-mode {
  background-color: #0d0d0d;
  background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  position: relative;
  min-height: 100vh;
}

.main-menu.dream-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(13, 13, 13, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.main-menu.dream-mode::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .product-card-background {
  background-color: rgba(190, 190, 190, 1);
  border: 3px solid #000000;
}

.dream-mode .product-card-container:hover .product-card-background {
  background-color: rgba(210, 210, 210, 1);
  border-color: #000000;
}

.dream-mode .product-image-card,
.dream-mode .product-name-panel {
  border: 3px solid #000000;
}

/* Dream mode product image card styling */
.dream-mode .product-image-card {
  background-color: #8d6e63 !important; /* Brown background */
}

/* Dream mode product name panel styling */
.dream-mode .product-name-panel {
  background-color: #ffffff !important; /* White background */
}

/* Dream mode product name text styling - with color-changing animation */
.dream-mode .product-name {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Dream mode panel styling */
.dream-mode .main-content-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.95), 
    rgba(45, 20, 60, 0.9), 
    rgba(60, 30, 80, 0.85),
    rgba(45, 20, 60, 0.9),
    rgba(26, 13, 35, 0.95)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

body .main-menu.dream-mode .title-panel,
.main-menu.dream-mode .title-panel,
.dream-mode .main-menu .title-panel,
.dream-mode div.title-panel {
  background-color: #1a0d23 !important;
  background-image: none !important;
  background: #1a0d23 !important;
  border: 3px solid #000000 !important;
  border-radius: 20px;
  position: relative;
  z-index: 100 !important;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
}

/* Dream mode title with color-changing animation and black border */
.dream-mode .products-title {
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important; /* Only black border, no glow */
  cursor: default !important; /* Remove pointer cursor */
  transition: none !important; /* Remove all transitions */
}

/* Override global dream mode text glow for products title specifically */
.dream-mode .main-menu .products-title,
.dream-mode .title-panel .products-title,
.main-menu.dream-mode .products-title {
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important; /* Override global glow with only black border */
  animation: dreamText 20s infinite linear !important; /* Keep the color animation */
  cursor: default !important; /* Remove pointer cursor */
  transition: none !important; /* Remove all transitions */
}

/* Completely disable ALL hover effects for dream mode main menu title */
.dream-mode .products-title:hover,
.dream-mode .title-panel .products-title:hover,
.dream-mode .main-menu .products-title:hover {
  color: inherit !important; /* Keep the animated color exactly the same */
  cursor: default !important; /* No pointer cursor */
  transition: none !important; /* No transitions */
  transform: none !important; /* No transforms */
  filter: none !important; /* No filters */
  animation: dreamText 20s infinite linear !important; /* Keep the same animation */
  text-shadow: -1.3px -1.3px 0 #000, 1.3px -1.3px 0 #000, -1.3px 1.3px 0 #000, 1.3px 1.3px 0 #000 !important; /* Keep the same text-shadow */
  background: none !important; /* No background changes */
  background-color: transparent !important; /* No background color */
  opacity: 1 !important; /* No opacity changes */
}

/* Dream mode button text styling - clean bold black text */
.dream-mode .home-button,
.dream-mode .view-cart-button {
  border: 3px solid #000000;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Override any global dream mode text effects for main menu buttons */
.dream-mode .home-button:not(:hover),
.dream-mode .view-cart-button:not(:hover) {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Dream mode button hover effects with white text and glow animation */
.dream-mode .home-button:hover,
.dream-mode .view-cart-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleMainMenu 1.5s ease-in-out infinite alternate !important;
}

@keyframes dreamSparkleMainMenu {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

@media (max-width: 992px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .products-title {
    font-size: 4.5rem;
  }
  
  .title-panel {
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    max-width: 90%;
  }
  
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-name {
    font-size: 1.6rem;
  }

  .product-card-background {
    padding: 1rem;
  }

  .main-content-panel {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .products-title {
    font-size: 3.5rem;
  }
  
  .title-panel {
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    max-width: 95%;
  }
  
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-name {
    font-size: 1.4rem;
  }

  .product-card-background {
    padding: 0.8rem;
  }

  .main-content-panel {
    padding: 1rem;
  }
}

/* Light mode hover/active for product name panel */
.product-card-container:hover .product-name-panel,
.product-card-container:active .product-name-panel {
  background-color: #c4a690;
  border-color: #3e2723;
}
.product-card-container:hover .product-name,
.product-card-container:active .product-name {
  color: #3e2723;
}

/* Dark mode hover/active for product name panel */
.dark-mode .product-card-container:hover .product-name-panel,
.dark-mode .product-card-container:active .product-name-panel {
  background-color: #a1887f;
  border-color: #000;
}
.dark-mode .product-card-container:hover .product-name,
.dark-mode .product-card-container:active .product-name {
  color: #8d6e63;
}

/* Dream mode hover/active for product name panel */
.dream-mode .product-card-container:hover .product-name-panel,
.dream-mode .product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #1565c0 0%, #002171 100%); /* blue to much darker blue, top to bottom */
}
.dream-mode .product-card-container:hover .product-name,
.dream-mode .product-card-container:active .product-name {
  /* No color override - keep the animation running */
}

/* Dream mode: unique highlight for each flavour (more distinct colors, black text) */
.dream-mode .flavour-barbecue.product-card-container:hover .product-name-panel,
.dream-mode .flavour-barbecue.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #1565c0 0%, #002171 100%); /* blue to much darker blue, top to bottom */
}
.dream-mode .flavour-smokey-barbecue.product-card-container:hover .product-name-panel,
.dream-mode .flavour-smokey-barbecue.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #00e676 0%, #512da8 100%); /* bright green to indigo, top to bottom */
}
.dream-mode .flavour-teriyaki.product-card-container:hover .product-name-panel,
.dream-mode .flavour-teriyaki.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #ff69b4 0%, #1a1a1a 100%); /* pink to dark grey, top to bottom */
}
.dream-mode .flavour-korean-bbq.product-card-container:hover .product-name-panel,
.dream-mode .flavour-korean-bbq.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #7c4dff 0%, #8e24aa 100%); /* purple, top to bottom */
}
.dream-mode .flavour-sweet-chilli.product-card-container:hover .product-name-panel,
.dream-mode .flavour-sweet-chilli.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #ff9800 0%, #2e7d32 100%); /* orange to dark green, top to bottom */
}
.dream-mode .flavour-exotic-spice.product-card-container:hover .product-name-panel,
.dream-mode .flavour-exotic-spice.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #00bfae 0%, #ff3d00 100%); /* teal to orange-red, top to bottom */
}
.dream-mode .flavour-hot-chilli.product-card-container:hover .product-name-panel,
.dream-mode .flavour-hot-chilli.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #d32f2f 0%, #1a1a1a 100%); /* red to dark grey, top to bottom */
}
.dream-mode .flavour-roast-lamb.product-card-container:hover .product-name-panel,
.dream-mode .flavour-roast-lamb.product-card-container:active .product-name-panel {
  background: linear-gradient(180deg, #cddc39 0%, #388e3c 100%); /* lime to green, top to bottom */
}
/* Animation is already applied to .dream-mode .product-name - no override needed on hover */

/* ===============================================================================
                      DREAM MODE: DISABLE PRODUCT HOVER EFFECTS
=============================================================================== */

/* Disable card transform on hover in dream mode */
.dream-mode .product-card-container:hover {
  transform: none !important;
}

/* Disable background changes on hover in dream mode */
.dream-mode .product-card-container:hover .product-card-background {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border-color: #000000 !important;
  background-color: rgba(190, 190, 190, 1) !important;
}

/* Disable image card changes on hover in dream mode */
.dream-mode .product-card-container:hover .product-image-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  border-color: #000000 !important;
}

/* Disable image scaling on hover in dream mode */
.dream-mode .product-card-container:hover .product-image-card img {
  transform: none !important;
}

/* dreamText animation defined in global.css */

/* Sold Out Product Styles */
.product-card-container.sold-out {
  position: relative;
}

.product-image-card {
  position: relative;
  overflow: hidden;
}

.sold-out-image {
  filter: brightness(0.4) saturate(0.6);
  transition: filter 0.3s ease;
}

.sold-out-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.sold-out-text {
  color: #ff0000;
  font-family: 'The Wanters DEMO', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  line-height: 1.4;
  padding: 10px;
}

/* Sold Out overlay main and subtext styling */
.sold-out-main {
  display: block;
  font-size: 2.1rem;
  font-weight: 900;
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', sans-serif !important;
  text-align: center;
  line-height: 1.1;
  margin-bottom: 0.2em;
}

.dark-mode .sold-out-main {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-family: 'The Wanters DEMO', sans-serif !important;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.light-mode .sold-out-main {
  text-shadow: none !important;
}

.sold-out-sub {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: #d32f2f;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  opacity: 0.95;
}

.dark-mode .sold-out-sub {
  color: #d32f2f !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.light-mode .sold-out-sub {
  color: #d32f2f !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.product-card-container.sold-out .product-name-panel {
  background-color: #4a3a2a !important; /* dark brown for dimming */
  opacity: 0.7;
  transition: background 0.3s, background-color 0.3s, opacity 0.3s;
}

.dark-mode .product-card-container.sold-out .product-name-panel {
  background-color: #18100a !important;
  opacity: 0.7;
}

.dream-mode .product-card-container.sold-out .product-name-panel {
  background-color: #222 !important;
  opacity: 0.7;
}

.dream-mode .sold-out-main, .dream-mode .sold-out-sub {
  color: #d32f2f !important;
  font-family: 'The Wanters DEMO', Tahoma, sans-serif !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-weight: 900;
  letter-spacing: 0.5px;
}

/* Remove all product card hover effects in dream mode */
.dream-mode .product-card-container:hover,
.dream-mode .product-card-container:focus,
.dream-mode .product-card-container:active,
.dream-mode .product-card-background:hover,
.dream-mode .product-card-background:focus,
.dream-mode .product-card-background:active {
  background: none !important;
  background-color: inherit !important;
  color: inherit !important;
  box-shadow: none !important;
  border-color: inherit !important;
  filter: none !important;
  outline: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
} 
.network-status {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: 400px;
  width: 90%;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  animation: slideDown 0.3s ease-out;
}

.network-status.online {
  background-color: rgba(76, 175, 80, 0.95);
  border: 2px solid #4CAF50;
  color: white;
}

.network-status.offline {
  background-color: rgba(244, 67, 54, 0.95);
  border: 2px solid #f44336;
  color: white;
}

.network-indicator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.status-icon {
  font-size: 1.5rem;
  min-width: 2rem;
  text-align: center;
}

.status-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.status-text {
  font-weight: 600;
  font-size: 1rem;
}

.online-text {
  color: #3e2723;
}

.offline-text {
  color: #3e2723;
}

.status-details {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.8rem;
  opacity: 0.9;
}

.last-online,
.connection-type {
  color: rgba(255, 255, 255, 0.9);
}

.retry-button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  color: white;
  transition: all 0.2s ease;
}

.retry-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.retry-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.retry-button.retrying {
  animation: spin 1s linear infinite;
}

.offline-message {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.85rem;
  line-height: 1.4;
}

.offline-message p {
  margin: 0.25rem 0;
  color: rgba(255, 255, 255, 0.9);
}

/* Dark mode adjustments */
.dark-mode.network-status.online {
  background-color: rgba(56, 142, 60, 0.95);
  border-color: #388E3C;
}

.dark-mode.network-status.offline {
  background-color: rgba(198, 40, 40, 0.95);
  border-color: #C62828;
}

/* Dream mode adjustments */
.dream-mode.network-status {
  border: 2px solid #000000;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(128, 0, 128, 0.4),
    0 0 30px rgba(75, 0, 130, 0.3);
}

.dream-mode.network-status.online {
  background: linear-gradient(135deg, 
    rgba(46, 139, 87, 0.95) 0%, 
    rgba(0, 100, 0, 0.95) 100%);
}

.dream-mode.network-status.offline {
  background: linear-gradient(135deg, 
    rgba(139, 69, 19, 0.95) 0%, 
    rgba(160, 82, 45, 0.95) 100%);
}

.dream-mode .retry-button {
  border: 1px solid #000000;
  box-shadow: 0 0 10px rgba(128, 0, 128, 0.5);
}

.dream-mode .retry-button:hover {
  box-shadow: 
    0 0 15px rgba(128, 0, 128, 0.7),
    0 0 25px rgba(75, 0, 130, 0.5);
}

/* Animations */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .network-status {
    top: 10px;
    padding: 0.75rem;
    font-size: 0.9rem;
  }
  
  .status-icon {
    font-size: 1.25rem;
    min-width: 1.5rem;
  }
  
  .retry-button {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }
  
  .status-details {
    font-size: 0.75rem;
  }
  
  .offline-message {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .network-status {
    width: 95%;
    padding: 0.5rem;
  }
  
  .network-indicator {
    gap: 0.5rem;
  }
} 
.options-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.options-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.options-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.options-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 650px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.options-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 10px;
  padding: 2rem;
  margin: 0;
  max-width: 100%;
  width: 100%;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.options-title-panel {
  font-weight: bold;
  margin-bottom: 2rem;
  color: #3e2723;
  text-align: center;
  padding: 1rem;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  background-color: #14545c;
  width: 100%;
  max-width: 400px;
}

.options-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #3e2723;
  text-align: center;
}

/* STANDARDIZED BUTTON STYLING - All Options buttons look identical */
.options-page .home-button,
.options-page .contact-button,
.options-page .theme-button,
.options-page .back-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  color: white !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #3e2723 !important;
  text-align: center !important;
  cursor: pointer !important;
  font-family: 'The Wanters DEMO', serif !important;
  min-width: 120px !important;
  width: auto !important;
  height: auto !important;
}

/* Home button specific spacing - consistent across all themes */
.options-page .home-button {
  margin-bottom: 2rem !important;
}

/* Ensure consistent spacing in all themes - using light mode as reference */
.options-page .options-list {
  width: 100% !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

/* Dark mode spacing override with ultra-high specificity */
body.dark-mode .options-page .options-list,
.dark-mode.options-page .options-list,
.dark-mode .options-page .options-list {
  width: 100% !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

/* Dark mode home button spacing override */
body.dark-mode .options-page .home-button,
.dark-mode.options-page .home-button,
.dark-mode .options-page .home-button {
  margin-bottom: 2rem !important;
  margin-top: 0 !important;
}

/* Dream mode spacing override with ultra-high specificity */
body.dream-mode .options-page .options-list,
.dream-mode.options-page .options-list,
.dream-mode .options-page .options-list {
  width: 100% !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

/* Dream mode home button spacing override */
body.dream-mode .options-page .home-button,
.dream-mode.options-page .home-button,
.dream-mode .options-page .home-button {
  margin-bottom: 2rem !important;
  margin-top: 0 !important;
}

/* CRITICAL FIX: Remove all individual button margins and rely only on flex gap */
/* Reset any conflicting margins on all buttons in all themes */
.options-page .home-button,
.options-page .contact-button,
.options-page .theme-button,
.options-page .back-button {
  margin: 0 !important;
}

/* Only home button gets bottom margin for spacing from title */
.options-page .home-button {
  margin-bottom: 2rem !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure Contact and Theme buttons have NO margins - rely on flex gap only */
.options-page .contact-button,
.options-page .theme-button {
  margin: 0 !important;
}

/* Ultra-high specificity for dark mode to override any global styles */
body.dark-mode .options-page .contact-button,
body.dark-mode .options-page .theme-button,
.dark-mode.options-page .contact-button,
.dark-mode.options-page .theme-button,
.dark-mode .options-page .contact-button,
.dark-mode .options-page .theme-button {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ultra-high specificity for dream mode */
body.dream-mode .options-page .contact-button,
body.dream-mode .options-page .theme-button,
.dream-mode.options-page .contact-button,
.dream-mode.options-page .theme-button,
.dream-mode .options-page .contact-button,
.dream-mode .options-page .theme-button {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Hover effects - consistent across all buttons */
.options-page .home-button:hover,
.options-page .contact-button:hover,
.options-page .theme-button:hover,
.options-page .back-button:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  background-color: #a1887f !important;
  text-decoration: none !important;
  color: white !important;
}

/* Dark mode - consistent black borders and styling with ultra-high specificity */
body.dark-mode .options-page .home-button,
body.dark-mode .options-page .contact-button,
body.dark-mode .options-page .theme-button,
body.dark-mode .options-page .back-button,
.dark-mode.options-page .home-button,
.dark-mode.options-page .contact-button,
.dark-mode.options-page .theme-button,
.dark-mode.options-page .back-button,
.dark-mode .options-page .home-button,
.dark-mode .options-page .contact-button,
.dark-mode .options-page .theme-button,
.dark-mode .options-page .back-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #000000 !important;
  text-align: center !important;
  cursor: pointer !important;
  font-family: 'The Wanters DEMO', serif !important;
  min-width: 120px !important;
  width: auto !important;
  height: auto !important;
}

body.dark-mode .options-page .home-button:hover,
body.dark-mode .options-page .contact-button:hover,
body.dark-mode .options-page .theme-button:hover,
body.dark-mode .options-page .back-button:hover,
.dark-mode.options-page .home-button:hover,
.dark-mode.options-page .contact-button:hover,
.dark-mode.options-page .theme-button:hover,
.dark-mode.options-page .back-button:hover,
.dark-mode .options-page .home-button:hover,
.dark-mode .options-page .contact-button:hover,
.dark-mode .options-page .theme-button:hover,
.dark-mode .options-page .back-button:hover {
  transform: translateY(-4px) !important;
  background-color: #a1887f !important;
  color: #000000 !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  text-decoration: none !important;
}

/* Dream mode - consistent black borders and styling with ultra-high specificity */
body.dream-mode .options-page .home-button,
body.dream-mode .options-page .contact-button,
body.dream-mode .options-page .theme-button,
body.dream-mode .options-page .back-button,
.dream-mode.options-page .home-button,
.dream-mode.options-page .contact-button,
.dream-mode.options-page .theme-button,
.dream-mode.options-page .back-button,
.dream-mode .options-page .home-button,
.dream-mode .options-page .contact-button,
.dream-mode .options-page .theme-button,
.dream-mode .options-page .back-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #000000 !important;
  text-align: center !important;
  cursor: pointer !important;
  font-family: 'The Wanters DEMO', serif !important;
  min-width: 120px !important;
  width: auto !important;
  height: auto !important;
  text-shadow: none !important;
  animation: none !important;
  letter-spacing: 0.5px !important;
}

body.dream-mode .options-page .home-button:hover,
body.dream-mode .options-page .contact-button:hover,
body.dream-mode .options-page .theme-button:hover,
body.dream-mode .options-page .back-button:hover,
.dream-mode.options-page .home-button:hover,
.dream-mode.options-page .contact-button:hover,
.dream-mode.options-page .theme-button:hover,
.dream-mode.options-page .back-button:hover,
.dream-mode .options-page .home-button:hover,
.dream-mode .options-page .contact-button:hover,
.dream-mode .options-page .theme-button:hover,
.dream-mode .options-page .back-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleOptions 1.5s ease-in-out infinite alternate !important;
  text-decoration: none !important;
}

/* Legacy theme container styles - DISABLED to prevent spacing conflicts */
.theme-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.theme-toggle-container {
  margin-top: 0 !important; /* CHANGED: was -0.5rem, now 0 to prevent spacing issues */
}

.theme-toggle-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 !important; /* ADDED: ensure no margins */
}

/* Override theme container styles in Options page specifically */
.options-page .theme-section,
.options-page .theme-toggle-container {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Ensure no theme containers affect button spacing in any theme */
.options-page .theme-section .theme-button,
.options-page .theme-toggle-container .theme-button {
  margin: 0 !important;
}

.options-list {
  width: 100% !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

.option-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #d7ccc8;
}

.option-label {
  font-size: 1.2rem;
  font-weight: 600;
  color: #5d4037;
}

/* Back button now inherits from standardized button styling above */

/* Dark mode styles */
.dark-mode .options-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode .options-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode .options-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .options-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .options-container {
  background-color: rgba(62, 39, 35, 0.9);
}

.dark-mode .options-title {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
}

.dark-mode .option-item {
  border-bottom: 1px solid #6d4c41;
}

.dark-mode .option-label {
  color: #d7ccc8;
}

/* Dark mode button borders now handled by standardized styling above */

/* Dream mode styles */
.dream-mode.options-page {
  background-color: #222;
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
    linear-gradient(45deg, transparent 24%, rgba(75, 0, 130, 0.05) 25%, rgba(75, 0, 130, 0.05) 26%, transparent 27%, transparent 74%, rgba(138, 43, 226, 0.05) 75%, rgba(138, 43, 226, 0.05) 76%, transparent 77%),
    linear-gradient(-45deg, transparent 24%, rgba(102, 51, 153, 0.05) 25%, rgba(102, 51, 153, 0.05) 26%, transparent 27%, transparent 74%, rgba(60, 30, 80, 0.05) 75%, rgba(60, 30, 80, 0.05) 76%, transparent 77%);
  background-size: cover, 300px 300px, 300px 300px, 60px 60px, 60px 60px;
  background-position: center, 0 0, 150px 150px, 0 0, 30px 30px;
  background-blend-mode: color-burn;
}

.dream-mode.options-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.options-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .options-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream-mode .options-container {
  border: 3px solid #000000;
}

.dream-mode .options-title {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  animation: none !important;
}

/* Dream mode button borders now handled by standardized styling above */

/* Old button styling removed - now handled by standardized styling above */

@keyframes dreamSparkleOptions {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

/* Dream mode button text styling now handled by standardized styling above */

/* Dark mode button glow effects now handled by standardized styling above */

/* Dark mode styles */
.dark-mode .options-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode .options-title-panel {
  background-color: #3e2723;
  border: 3px solid #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark-mode .options-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dream-mode .options-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .options-title {
  /* Let the global dreamText animation handle the color changes */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* Daydreamers menu button: fixed size and shape for all themes */
.daydreamers-menu-button {
  width: 220px;
  height: 56px;
  padding: 0;
  font-size: 1.35rem;
  font-family: 'The Wanters DEMO', serif;
  border-radius: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.02em;
  margin-bottom: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  border-width: 3px;
  border-style: solid;
}

/* Daydreamers Enter Email button: slightly smaller, consistent across all themes */
.daydreamers-email-button {
  width: 160px;
  height: 44px;
  padding: 0 10px;
  font-size: 1.02rem;
  font-family: 'The Wanters DEMO', serif;
  border-radius: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.02em;
  margin-bottom: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  border-width: 3px;
  border-style: solid;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
}

/* Email button specific styles only - home buttons now handled by standardized styling above */
.daydreamers-email-button {
  font-size: 1.02rem;
}

.dark-mode .daydreamers-email-button {
  width: 170px !important;
  height: 48px !important;
}

/* Welcome panel styles - appears behind welcome section when logged in */
.welcome-panel {
  background-color: #f5f5dc; /* Light mode: solid cream color to match background */
  border: 3px solid #8d6e63;
  border-radius: 15px;
  padding: 2rem;
  margin: 1rem 0;
  width: 100%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
}

.dark-mode .welcome-panel {
  background-color: rgba(26, 26, 26, 0.9);
  border: 3px solid #444;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.dream-mode .welcome-panel {
  background: linear-gradient(135deg, 
    rgba(26, 13, 35, 0.85) 0%,
    rgba(45, 20, 60, 0.8) 50%,
    rgba(26, 13, 35, 0.85) 100%);
  border: 3px solid #000;
  box-shadow: 0 6px 20px rgba(255, 0, 204, 0.3);
  animation: dreamSparkleWelcome 3s ease-in-out infinite;
}

@keyframes dreamSparkleWelcome {
  0%, 100% { box-shadow: 0 6px 20px rgba(255, 0, 204, 0.3); }
  50% { box-shadow: 0 6px 30px rgba(255, 0, 204, 0.5), 0 0 40px rgba(255, 0, 204, 0.2); }
}

/* Dark mode welcome panel text overrides */
.dark-mode .welcome-panel .welcome-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .welcome-panel .customer-name {
  color: red !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .welcome-panel .level-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .welcome-panel .level-number {
  color: cyan !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .welcome-panel .progress-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Dream Mode - Welcome panel text overrides */
.dream-mode .welcome-panel .welcome-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream-mode .welcome-panel .customer-name {
  /* Keep the color changing animation but add black outline */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream-mode .welcome-panel .level-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream-mode .welcome-panel .level-number {
  color: #00ffff !important;
  animation: none !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream-mode .welcome-panel .progress-text {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Light mode welcome panel text - remove outlines from name and progress text */
.welcome-panel .customer-name {
  text-shadow: none !important;
}

.welcome-panel .progress-text {
  text-shadow: -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000 !important;
}

/* Logout button styles */
.daydreamers-logout-button {
  width: auto;
  min-width: 180px;
  min-height: 54px;
  padding: 1.1rem 2.5rem;
  font-size: 1.25rem;
  font-family: 'The Wanters DEMO', serif;
  border-radius: 18px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  border-width: 4px;
  border-style: solid;
  background: #d32f2f !important;
  color: #fff !important;
  border-color: #000 !important;
  transition: all 0.2s;
}

.daydreamers-logout-button:hover {
  background: #b71c1c !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  transform: translateY(-2px) scale(1.03);
}

/* Dream mode logout button - ensure it stays red */
.dream-mode .daydreamers-logout-button {
  background: #d32f2f !important;
  color: #fff !important;
  border-color: #000 !important;
}

.dream-mode .daydreamers-logout-button:hover {
  background: #b71c1c !important;
  color: #fff !important;
  border-color: #000 !important;
  animation: none !important;
  box-shadow: 0 0 18px 4px #d32f2f, 0 4px 16px rgba(0,0,0,0.22) !important;
}

/* Simple Loading Spinner */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid transparent;
  border-top: 4px solid #8d6e63;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

/* Theme-specific colors for spinner */
.dark-mode .loading-spinner {
  border-top-color: #f5f5dc;
}

.dream-mode .loading-spinner {
  border-top-color: #ff00cc;
}

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

/* Loading container */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 1rem 0;
  gap: 0.5rem;
}

.loading-text {
  font-family: 'The Wanters DEMO', serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.achievements-button,
.dark-mode .achievements-button,
.dream-mode .achievements-button,
.light-mode .achievements-button {
  background: #228B22 !important;
  color: #fff !important;
  border: 3px solid #000 !important;
}

.achievements-button:hover {
  background: #17641a !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  transform: translateY(-2px) scale(1.03);
}

/* Dream mode achievements button - ensure it stays green */
.dream-mode .achievements-button:hover {
  background: #17641a !important;
  color: #fff !important;
  border: 3px solid #000 !important;
  animation: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22) !important;
}

/* Businesses button universal style */
.businesses-btn {
  background: #14545c !important; /* Teal color matching Smooth Sales */
  color: #fff;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-size: 1.1rem;
  font-family: 'The Wanters DEMO', serif;
  border: 3px solid #3e2723;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  letter-spacing: 0.02em;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  outline: none;
  display: inline-block;
}

/* Black border in dark mode */
.dark-mode .businesses-btn {
  border: 3px solid #000 !important;
}

/* Teal in dream mode with high specificity */
.dream-mode .businesses-btn,
body.dream-mode .businesses-btn {
  background: #14545c !important;
  border: 3px solid #3e2723;
}

.businesses-btn:hover {
  background: #0f3d42 !important;
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.businesses-btn:active, .businesses-btn:focus {
  background: #14545c !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transform: translateY(0);
} 

.dream-mode .businesses-btn:hover,
body.dream-mode .businesses-btn:hover {
  background: #0f3d42 !important;
  color: #fff !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 0 18px 4px #14545c, 0 4px 16px rgba(0,0,0,0.22) !important;
  animation: none !important;
}

.light-mode .achievements-button {
  border: none !important;
}

/* Ensure red glow on hover in DREAM MODE ONLY */
.dream-mode .daydreamers-logout-button:hover {
  box-shadow: 0 0 18px 4px #d32f2f, 0 4px 16px rgba(0,0,0,0.22) !important;
} 
/* ===============================================================================
                              ORDER SUBMISSION STYLING
=============================================================================== */

/* Main order submission page container */
.order-submission {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 1rem;
  position: relative;
}

.order-submission::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.order-submission::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Background panel similar to cart page */
.order-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Main container inside background panel */
.order-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Order title panel */
.order-title-panel {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #3e2723;
  text-align: center;
  padding: 1rem;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  background-color: #14545c;
  width: 100%;
  max-width: 500px;
}

.order-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #3e2723;
  text-align: center;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-decoration: none !important;
}

/* Back to cart button */
.back-to-cart-button,
.light-mode .back-to-cart-button {
  display: inline-block;
  padding: 1rem 2rem !important;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem !important;
  text-decoration: none;
  font-weight: 600 !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723;
  margin-bottom: 2rem;
}

.back-to-cart-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
  text-decoration: none;
}

/* Section styling */
.order-process-info,
.order-summary {
  width: 100%;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background-color: rgba(141, 110, 99, 0.1);
  border-radius: 8px;
  border: 2px solid #d7ccc8;
}

.section-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #3e2723;
  text-align: center;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.order-process-info p {
  font-size: clamp(0.8rem, 2.2vw, 1rem);
  line-height: 1.6;
  color: #5d4037;
  text-align: center;
}

/* Order items styling */
.order-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.summary-item {
  display: grid;
  grid-template-columns: 1fr 0.8fr 0.5fr;
  padding: 0.5rem;
  border-bottom: 1px dashed #d7ccc8;
  align-items: center;
}

.item-name {
  font-weight: 600;
  color: #3e2723;
  text-align: left;
  font-size: clamp(0.8rem, 2.2vw, 1rem);
}

.item-details {
  color: #5d4037;
  text-align: center;
  font-size: clamp(0.8rem, 2.2vw, 1rem);
}

.item-price {
  font-weight: 600;
  color: #3e2723;
  text-align: right;
  font-size: clamp(0.8rem, 2.2vw, 1rem);
}

.order-total {
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 2px solid #d7ccc8;
  font-weight: 700;
  font-size: clamp(0.9rem, 2.8vw, 1.1rem);
  color: #3e2723;
}

.total-price-value {
  color: #d32f2f; /* Red color for total price */
  font-weight: 900;
  font-size: 1.8rem !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Form styling */
.submission-form {
  width: 100%;
  margin-bottom: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #3e2723;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.form-input {
  width: 100%;
  max-width: 400px;
  padding: 0.8rem;
  border: 2px solid #d7ccc8;
  border-radius: 4px;
  font-size: 1rem;
  background-color: rgba(255, 255, 255, 0.9);
  transition: border-color 0.3s ease;
  color: #3e2723;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  text-align: center !important;
  margin: 0 auto;
}

/* Postal address field - double height for multi-line input */
.form-input[type="text"]#postalAddress,
.form-input.postal-address-input {
  min-height: 80px;
  resize: vertical;
  text-align: center !important;
  padding: 1rem;
  line-height: 1.4;
}

.form-input:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.3);
}

/* Submission actions */
.submission-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.submit-button {
  padding: 1rem 2rem !important;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 8px;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.submit-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.submit-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.submission-note {
  text-align: center;
  font-size: 0.9rem;
  color: #5d4037;
  max-width: 400px;
  margin: 1rem auto 0 auto;
  width: 100%;
}

/* Success state */
.submission-success {
  text-align: center;
  padding: 2rem;
  margin-bottom: 2rem;
}

.submission-success p {
  font-size: 1.1rem;
  color: #3e2723;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.home-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 9999px;
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.home-button:hover {
  background-color: #a1887f;
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* ===============================================================================
                                DARK MODE STYLING
=============================================================================== */

.dark-mode.order-submission {
  background-color: #3e2723;
}

.dark-mode.order-submission::before {
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
}

.dark-mode.order-submission::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .order-background-panel {
  background-color: rgba(26, 26, 26, 0.9);
  border-color: #000000;
}

.dark-mode .order-container {
  background-color: rgba(62, 39, 35, 0.9);
  border-color: #000000;
}

.dark-mode .order-title-panel {
  background-color: #8d6e63;
  border-color: #000000;
}

.dark-mode .order-title {
  color: #8d6e63;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}

.dark-mode .back-to-cart-button {
  background-color: #8d6e63;
  color: white;
  border-color: #000000;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
}

.dark-mode .back-to-cart-button:hover {
  background-color: #a1887f;
}

.dark-mode .order-process-info,
.dark-mode .order-summary {
  background-color: #8d6e63;
  color: #3e2723;
  border-color: #000000;
}

.dark-mode .order-process-info p,
.dark-mode .order-summary p,
.dark-mode .order-summary li {
  color: #c4a690;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: clamp(0.8rem, 2.2vw, 1rem) !important;
  line-height: 1.6 !important;
}

.dark-mode .order-container input,
.dark-mode .order-container textarea {
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  border-radius: 8px;
  font-size: 1.1rem;
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
  transition: background 0.2s, color 0.2s;
  display: block;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

.dark-mode .order-container input:disabled,
.dark-mode .order-container textarea:disabled,
.dark-mode .order-container .postal-address-disabled {
  background-color: #424242 !important;
  color: #bdbdbd !important;
  border: 2px solid #000000 !important;
  opacity: 0.7;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center !important;
}

.dark-mode .order-container label {
  color: #8d6e63 !important;
  font-weight: 900;
  font-size: 1.4rem;
  text-align: center;
  display: block;
  margin-bottom: 0.4rem;
  margin-top: 1.2rem;
}

/* Old dark mode checkbox styles removed */

.dark-mode .input:focus,
.dark-mode .textarea:focus {
  outline: 2px solid #3e2723;
  background-color: #a1887f;
}

.dark-mode .section-title {
  color: #8d6e63;
}

.dark-mode .item-details {
  color: #8d6e63;
}

.dark-mode .item-name,
.dark-mode .item-price,
.dark-mode .item-details,
.dark-mode .order-total {
  color: #8d6e63;
  font-size: clamp(0.8rem, 2.2vw, 1rem) !important;
}

.dark-mode .total-price-value {
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.8rem !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .form-group label {
  color: #8d6e63;
}

.dark-mode .form-input {
  background-color: rgba(26, 26, 26, 0.9);
  border-color: #000000;
  color: #8d6e63;
  text-align: center !important;
  max-width: 400px;
  margin: 0 auto;
}

.dark-mode .form-input:focus {
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.3);
}

.dark-mode .submit-button {
  background-color: #8d6e63;
  border-color: #000000;
  padding: 1rem 2rem !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
}

.dark-mode .submit-button:hover {
  background-color: #a1887f;
}

.dark-mode .order-submission .submission-note,
.dark-mode .submission-note,
.dark-mode .submission-note p {
  color: #c4a690 !important;
}

.dark-mode .submission-success p {
  color: #c4a690 !important;
}

.dark-mode .home-button {
  display: inline-block !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 1rem 2rem !important;
  border-radius: 9999px !important;
  transition: all 0.3s ease !important;
  font-size: 1.4rem !important;
  font-family: var(--font-family) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #000000 !important;
}

.dark-mode .home-button:hover {
  background-color: #a1887f !important;
  transform: translateY(-2px) !important;
  color: #000000 !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
}

.dark-mode .order-container label {
  color: #8d6e63 !important;
  font-weight: 700;
  font-size: 1.1rem;
}

.dark-mode .order-container .postal-address-disabled {
  background-color: #424242 !important;
  color: #bdbdbd !important;
  border: 2px solid #757575 !important;
  opacity: 0.7;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center !important;
}

/* Additional old dark mode checkbox styles removed */

/* ===============================================================================
                                DREAM MODE STYLING
=============================================================================== */

.dream-mode.order-submission {
  background-color: #222;
}

.dream-mode.order-submission::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(45, 20, 60, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.order-submission::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .order-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: 18px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  position: relative;
  z-index: 1;
}

.dream-mode .order-container {
  background: #18151c;
  border-radius: 14px;
  border: 3px solid #000;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.25);
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dream-mode .order-process-info,
.dream-mode .order-summary {
  background: #fff !important;
  color: #000 !important;
  border-radius: 12px;
  border: 2px solid #8a2be2;
  box-shadow: 0 2px 12px 0 rgba(138,43,226,0.08);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.dream-mode .order-process-info .section-title,
.dream-mode .order-summary .section-title {
  color: #000 !important;
  text-shadow: none !important;
}

.dream-mode .order-process-info p,
.dream-mode .order-summary p,
.dream-mode .order-summary li,
.dream-mode .order-summary .item-name,
.dream-mode .order-summary .item-details,
.dream-mode .order-summary .item-price {
  color: #000 !important;
  text-shadow: none !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
  font-size: clamp(0.8rem, 2.2vw, 1rem) !important;
  line-height: 1.6 !important;
}

.dream-mode .order-title-panel {
  background-color: rgba(45, 20, 60, 0.95);
  border-color: #000000;
}

.dream-mode .order-title {
  animation: dreamText 20s linear infinite;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}

/* dreamText animation defined in global.css - removed pink starting color */

.dream-mode .back-to-cart-button {
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 600 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0px !important;
  padding: 1rem 2rem !important;
}

.dream-mode .submit-button {
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 900 !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.5px !important;
  padding: 1rem 2rem !important;
  filter: none !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  background-image: none !important;
  backdrop-filter: none !important;
}

.dream-mode .back-to-cart-button:hover,
.dream-mode .submit-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  filter: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  animation: none !important;
}

.dream-mode .section-title {
  color: white;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}

.dream-mode .submission-note {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.dream-mode .submission-success p {
  color: white !important;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}

.dream-mode .home-button {
  background-color: #8d6e63 !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 600 !important;
  font-size: 1.4rem !important;
  padding: 1rem 2rem !important;
  letter-spacing: 0px !important;
}

.dream-mode .home-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparkleOrderSubmission 1.5s ease-in-out infinite alternate !important;
}

@keyframes dreamSparkleOrderSubmission {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

/* ===============================================================================
                                RESPONSIVE DESIGN
=============================================================================== */

@media (max-width: 768px) {
  .order-title {
    font-size: 2rem;
  }
  
  .order-container {
    padding: 1.5rem;
  }
  
  .back-to-cart-button,
  .submit-button,
  .home-button {
    font-size: 1.2rem;
    padding: 0.8rem 1.5rem;
  }
}

/* Submit effect animations */
.submit-effect-active {
  animation: submitPulse 0.6s ease-in-out;
}

.light-mode .submit-effect-active {
  animation: lightSubmitEffect 0.8s ease-in-out;
}

.dark-mode .submit-effect-active {
  animation: darkSubmitEffect 0.8s ease-in-out;
}

.dream-mode .submit-effect-active {
  animation: dreamSubmitEffect 1s ease-in-out;
}

@keyframes lightSubmitEffect {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  25% { 
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(141, 110, 99, 0.4);
  }
  50% { 
    transform: scale(1.1);
    box-shadow: 0 8px 16px rgba(93, 64, 55, 0.5);
  }
  75% { 
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(141, 110, 99, 0.4);
  }
}

@keyframes darkSubmitEffect {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  25% { 
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(141, 110, 99, 0.6);
  }
  50% { 
    transform: scale(1.1);
    box-shadow: 0 8px 16px rgba(141, 110, 99, 0.8);
  }
  75% { 
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(141, 110, 99, 0.6);
  }
}

@keyframes dreamSubmitEffect {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  20% { 
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 107, 157, 0.6);
  }
  40% { 
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.7);
  }
  60% { 
    transform: scale(1.08);
    box-shadow: 0 0 30px rgba(75, 0, 130, 0.8);
  }
  80% { 
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 107, 157, 0.6);
  }
}

.order-divider {
  width: 90%;
  margin: 1.2rem auto 1.2rem auto;
  border: none;
  border-top: 2px solid #bdbdbd;
  opacity: 0.7;
}

.form-label-large {
  font-size: 1.9rem;
  font-weight: 900;
  text-align: center;
  display: block;
  margin-bottom: 0.4rem;
  margin-top: 1.2rem;
  color: #8d6e63;
  letter-spacing: 0.01em;
}

/* Loyalty congratulations text styling */
.loyalty-congratulations.light-mode {
  text-shadow: none;
}

.loyalty-congratulations.dark-mode {
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}

.loyalty-congratulations.dream-mode {
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}

/* Removed old checkbox base styles */

/* Removed light mode checkbox styles */

/* Removed dark/dream mode checkbox styles */

/* All old checkbox styles removed */

.dream-mode .order-container input:not(:disabled),
.dream-mode .order-container textarea:not(:disabled) {
  background-color: #fff !important;
  color: #000 !important;
  border: 2.5px solid #000 !important;
  text-align: center !important;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.dream-mode .order-container input:disabled,
.dream-mode .order-container .postal-address-disabled {
  background-color: #bdbdbd !important;
  color: #757575 !important;
  border: 2.5px solid #000 !important;
  opacity: 0.7;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center !important;
}

.light-mode .order-container .postal-address-disabled {
  background-color: #f5e3c3 !important;
  color: #3e2723 !important;
  border: 2.5px solid #8d6e63 !important;
  opacity: 1;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center !important;
}

.light-mode .order-container input:not(:disabled) {
  background-color: #fff !important;
  color: #000 !important;
  border: 2.5px solid #8d6e63 !important;
  text-align: center !important;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.dream-mode .order-container label,
.dream-mode .order-container .postal-address-disabled {
  color: #fff !important;
}

/* Dream mode: Make total items black, total price red, no glow */
.dream-mode .order-summary .order-total,
.dream-mode .order-total {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Dream mode: Specifically target total items text */
.dream-mode .total-items-text {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.dream-mode .order-summary .total-price-value {
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.8rem !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Dream mode: Make submission note white, no glow */
.dream-mode .submission-note,
.dream-mode .order-submission .submission-note,
.dream-mode .submission-note p {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Dream mode: Center align text input fields */
.dream-mode .form-input {
  text-align: center !important;
}

/* Dream mode: Remove ALL glow effects from order submission text */
.dream-mode .order-submission * {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Override global dream mode rule for Enter Code button specifically */
.dream-mode .order-submission .enter-code-button,
.dream-mode.order-submission .enter-code-button {
  background-color: #8d6e63 !important;
  color: #000 !important;
  border: 2px solid #000 !important;
  min-width: 110px !important;
  padding: 0.5em 1.2em !important;
  font-size: 1rem !important;
  font-family: 'The Wanters DEMO', serif !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .order-submission .order-total,
.dream-mode .order-submission .submission-note,
.dream-mode .order-submission .submission-note p {
  text-shadow: none !important;
  filter: none !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Dream mode: Apply black outline to total price value (more specific rule) */
.dream-mode .order-submission .total-price-value {
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.8rem !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Styles for free bag code selection */
.free-bag-group, .promo-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 1.5rem;
}

.free-bag-select {
  width: 100%;
  max-width: 400px;
  padding: 0.8rem;
  border: 2px solid #d7ccc8;
  border-radius: 4px;
  font-size: 1rem;
  background-color: rgba(255, 255, 255, 0.9);
  transition: border-color 0.3s ease;
  color: #3e2723;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  text-align: center !important;
  cursor: pointer;
  margin: 0 auto;
}

.free-bag-select:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.3);
}

/* Light mode specific */
.light-mode .free-bag-group {
  color: #3e2723;
}

.light-mode .free-bag-select {
  background-color: rgba(255, 255, 255, 0.9);
  color: #3e2723;
  border: 2px solid #d7ccc8;
}

.light-mode .free-bag-select:focus {
  outline: none;
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.3);
}

/* Dark mode specific */
.dark-mode .free-bag-group {
  color: #3e2723;
}

.dark-mode .free-bag-select {
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  max-width: 400px;
  margin: 0 auto;
}

.dark-mode .free-bag-select:focus {
  outline: none;
  border-color: #a1887f !important;
  box-shadow: 0 0 0 2px rgba(161, 136, 127, 0.3);
}

/* Dream mode specific */
.dream-mode .free-bag-group {
  color: #3e2723;
}

.dream-mode .free-bag-select {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(5px);
  max-width: 400px;
  margin: 0 auto;
}

.dream-mode .free-bag-select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

/* ===============================================================================
                          SUPER AGGRESSIVE CHECKBOX STYLING
=============================================================================== */

/* Base checkbox - completely override everything */
input[type='checkbox'].order-checkbox {
  position: relative !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  border: 2px solid #8d6e63 !important;
  margin: 0 !important;
  margin-right: 0.8rem !important;
  padding: 0 !important;
  vertical-align: middle !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  outline: none !important;
  cursor: pointer !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.1s ease !important;
}

/* Checkbox checked state */
input[type='checkbox'].order-checkbox:checked::after {
  content: '✓' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 12px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  color: #8d6e63 !important;
  font-family: Arial, sans-serif !important;
}

/* Checkbox row */
.checkbox-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1.5rem !important;
  gap: 0.3rem !important;
}

/* Label styling */
.checkbox-label {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  user-select: none !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Light mode overrides */
.light-mode input[type='checkbox'].order-checkbox {
  border-color: #8d6e63 !important;
  background: #ffffff !important;
}

.light-mode input[type='checkbox'].order-checkbox:checked::after {
  color: #8d6e63 !important;
}

.light-mode .checkbox-label {
  color: #5d4037 !important;
}

/* Dark mode overrides */
.dark-mode input[type='checkbox'].order-checkbox {
  border-color: #8d6e63 !important;
  background: #ffffff !important;
}

.dark-mode input[type='checkbox'].order-checkbox:checked::after {
  color: #8d6e63 !important;
}

.dark-mode .checkbox-label {
  color: #8d6e63 !important;
}

/* Dream mode overrides */
.dream-mode input[type='checkbox'].order-checkbox {
  border-color: #000000 !important;
  background: #ffffff !important;
}

.dream-mode input[type='checkbox'].order-checkbox:checked::after {
  color: #000000 !important;
}

.dream-mode .checkbox-label {
  color: #ffffff !important;
}

.enter-code-button {
  background-color: #4CAF50 !important;
  color: #000000 !important;
}

.enter-code-button.light-mode {
  background-color: #4CAF50 !important;
  color: #000000 !important;
  border: 2px solid #0a1a1d;
}
.enter-code-button.light-mode:hover {
  background-color: #45a049 !important;
}
.dark-mode .enter-code-button {
  background-color: #4CAF50 !important;
  color: #000000 !important;
  border: 2px solid #000 !important;
  min-width: 110px !important;
  padding: 0.5em 1.2em !important;
  font-size: 1rem !important;
  font-family: 'The Wanters DEMO', serif !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}
.dark-mode .enter-code-button:hover {
  background-color: #45a049 !important;
}
.dream-mode .order-submission .enter-code-button,
.dream-mode.order-submission .enter-code-button,
.dream-mode .enter-code-button {
  background-color: #4CAF50 !important;
  color: #000000 !important;
  border: 2px solid #000 !important;
  min-width: 110px !important;
  padding: 0.5em 1.2em !important;
  font-size: 1rem !important;
  font-family: 'The Wanters DEMO', serif !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
  filter: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
  animation: none !important;
}
.dream-mode .order-submission .enter-code-button:hover,
.dream-mode.order-submission .enter-code-button:hover,
.dream-mode .enter-code-button:hover {
  background-color: #45a049 !important;
  filter: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  animation: none !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
} 
.privacy-policy-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.privacy-policy-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.privacy-policy-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.privacy-background-panel {
  background-color: rgba(139, 110, 99, 0.3);
  border: 3px solid #5d4037;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 850px;
  width: 95%;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.privacy-container {
  width: 100%;
  max-width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.privacy-title-panel {
  font-weight: bold;
  margin-bottom: 2rem;
  color: #3e2723;
  text-align: center;
  padding: 1rem;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  background-color: #14545c;
  width: 100%;
  max-width: 400px;
  cursor: pointer;
}

.privacy-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  color: #3e2723;
  text-align: center;
}

.home-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
  margin-bottom: 2rem;
}

.home-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
}

.privacy-details {
  width: 100%;
  text-align: center;
  padding: 2rem;
  margin-bottom: 2rem;
  background-color: rgba(141, 110, 99, 0.1);
  border-radius: 8px;
  border: 2px solid #d7ccc8;
  max-height: 60vh;
  overflow-y: auto;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.privacy-details h2 {
  font-size: 1.8rem;
  color: #3e2723;
  margin-bottom: 1rem;
  text-align: center;
}

.privacy-details h3 {
  font-size: 1.4rem;
  color: #5d4037;
  margin: 1.5rem 0 0.8rem 0;
}

.privacy-details p {
  margin: 0.8rem 0;
  font-size: 1rem;
  color: #3e2723;
  line-height: 1.6;
}

.privacy-details ul {
  margin: 0.8rem 0;
  padding-left: 1.5rem;
}

.privacy-details li {
  margin: 0.5rem 0;
  font-size: 1rem;
  color: #3e2723;
  line-height: 1.6;
}

.privacy-details a {
  color: #8d6e63;
  text-decoration: underline;
}

.privacy-details a:hover {
  color: #5d4037;
}

.app-info {
  background-color: rgba(141, 110, 99, 0.15);
  padding: 1rem;
  border-radius: 6px;
  margin: 1rem 0;
}

.app-details {
  font-size: 1rem;
  margin: 0;
}

.effective-date {
  font-style: italic;
  font-weight: 600;
  color: #5d4037;
  text-align: center;
  margin: 1rem 0 2rem 0;
}

.agreement {
  background-color: rgba(141, 110, 99, 0.2);
  padding: 1.5rem;
  border-radius: 8px;
  border: 2px solid #8d6e63;
  margin-top: 2rem;
  text-align: center;
}

.privacy-actions {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
}

.contact-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border-radius: 9999px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #3e2723 !important;
}

.contact-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  color: white;
  text-decoration: none;
}

/* Dark mode styles */
.dark-mode.privacy-policy-page {
  background-color: #3e2723;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode.privacy-policy-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode.privacy-policy-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .privacy-background-panel {
  background-color: rgba(26, 26, 26, 0.8);
  border: 3px solid #000000;
}

.dark-mode .privacy-container {
  background-color: rgba(62, 39, 35, 0.9);
  color: #fff8e1;
  padding: 2rem 2rem 0.5rem 2rem !important; /* Further reduced bottom padding to exactly match light mode */
}

.dark-mode .privacy-title {
  color: #000000 !important;
  text-shadow: none;
}

.dark-mode .privacy-title-panel {
  background-color: #3e2723;
  border: 3px solid #000000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.dark-mode .privacy-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dark-mode .privacy-details {
  border-color: #5d4037;
  background-color: #8d6e63;
}

.dark-mode .privacy-details h2,
.dark-mode .privacy-details h3,
.dark-mode .privacy-details p,
.dark-mode .privacy-details li {
  color: #000000 !important;
}

.dark-mode .privacy-details a {
  color: #3e2723;
}

.dark-mode .privacy-details a:hover {
  color: #000000;
}

.dark-mode .app-info {
  background-color: rgba(93, 64, 55, 0.3);
}

.dark-mode .agreement {
  background-color: rgba(93, 64, 55, 0.4);
  border-color: #5d4037;
}

.privacy-policy-page:not(.dark-mode):not(.dream-mode) .home-button,
.privacy-policy-page:not(.dark-mode):not(.dream-mode) .contact-button {
  border: 3px solid #3e2723 !important;
  border-radius: 9999px !important; /* Ensure pill shape in light mode */
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
}

/* Extra specificity for light mode home button pill shape */
.privacy-policy-page:not(.dark-mode):not(.dream-mode) .home-button {
  border-radius: 9999px !important; /* Force pill shape specifically for home button in light mode */
  display: inline-block !important;
  text-decoration: none !important;
}

/* Dark mode button styling with ultra-high specificity */
body.dark-mode .privacy-policy-page .home-button,
body.dark-mode .privacy-policy-page .contact-button,
.dark-mode.privacy-policy-page .home-button,
.dark-mode.privacy-policy-page .contact-button,
.dark-mode .privacy-policy-page .home-button,
.dark-mode .privacy-policy-page .contact-button,
.dark-mode .home-button,
.dark-mode .contact-button {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  background-color: #8d6e63 !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #000000 !important;
  margin-bottom: 2rem !important;
  font-family: 'The Wanters DEMO', serif !important;
}

/* Dark mode button hover styling with ultra-high specificity */
body.dark-mode .privacy-policy-page .home-button:hover,
body.dark-mode .privacy-policy-page .contact-button:hover,
.dark-mode.privacy-policy-page .home-button:hover,
.dark-mode.privacy-policy-page .contact-button:hover,
.dark-mode .privacy-policy-page .home-button:hover,
.dark-mode .privacy-policy-page .contact-button:hover,
.dark-mode .home-button:hover,
.dark-mode .contact-button:hover {
  background-color: #a1887f !important;
  color: #000000 !important;
  text-decoration: none !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Dream mode styles */
.dream-mode.privacy-policy-page {
  background-color: #222;
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%);
  background-size: cover, 300px 300px, 300px 300px;
  background-position: center, 0 0, 150px 150px;
  background-blend-mode: color-burn;
}

.dream-mode.privacy-policy-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, 0.85);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode.privacy-policy-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dream-mode .privacy-background-panel {
  background: linear-gradient(90deg, 
    rgba(26, 13, 35, 0.85), 
    rgba(45, 20, 60, 0.8), 
    rgba(60, 30, 80, 0.75),
    rgba(45, 20, 60, 0.8),
    rgba(26, 13, 35, 0.85)
  );
  border: 3px solid #000000;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(26, 13, 35, 0.3),
    0 0 35px rgba(45, 20, 60, 0.2);
}

.dream-mode .privacy-container {
  background-color: rgba(26, 26, 26, 0.9);
  border: 3px solid #000000;
}

.dream-mode .privacy-title {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  animation: none !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dream-mode .privacy-title-panel {
  background: rgba(45, 20, 60, 0.95);
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.dream-mode .privacy-details {
  background-color: rgba(26, 26, 26, 0.8);
  border: 2px solid #000000;
}

.dream-mode .privacy-details h2,
.dream-mode .privacy-details h3,
.dream-mode .privacy-details p,
.dream-mode .privacy-details li {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .privacy-details a {
  color: #8d6e63;
}

.dream-mode .app-info {
  background-color: rgba(26, 26, 26, 0.6);
  border: 1px solid #444;
}

.dream-mode .agreement {
  background-color: rgba(26, 26, 26, 0.7);
  border-color: #444;
}

.dream-mode .home-button:not(:hover),
.dream-mode .contact-button:not(:hover) {
  background-color: #8d6e63 !important;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 900 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.5px !important;
  border: 3px solid #000000 !important;
}

.dream-mode .home-button:hover {
  background-color: #a1887f !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(0, 0, 139, 0.8),
    0 0 25px rgba(25, 25, 112, 0.6),
    0 0 35px rgba(72, 61, 139, 0.4) !important;
  animation: dreamSparklePrivacy 1.5s ease-in-out infinite alternate !important;
  text-decoration: none !important;
}

.dream-mode .contact-button:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  animation: none !important;
  text-decoration: none !important;
}

@keyframes dreamSparklePrivacy {
  0% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
  20% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(128, 0, 128, 0.8),
      0 0 28px rgba(138, 43, 226, 0.6),
      0 0 38px rgba(147, 112, 219, 0.4);
  }
  40% {
    filter: brightness(1.3) saturate(1.7);
    transform: translateY(-4px) rotate(0deg) scale(1.04);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(0, 128, 0, 0.8),
      0 0 30px rgba(34, 139, 34, 0.6),
      0 0 40px rgba(46, 139, 87, 0.4);
  }
  60% {
    filter: brightness(1.2) saturate(1.5);
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(144, 238, 144, 0.8),
      0 0 28px rgba(152, 251, 152, 0.6),
      0 0 38px rgba(173, 255, 47, 0.4);
  }
  80% {
    filter: brightness(1.15) saturate(1.4);
    transform: translateY(-4px) rotate(0.5deg) scale(1.01);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 16px rgba(0, 128, 128, 0.8),
      0 0 26px rgba(32, 178, 170, 0.6),
      0 0 36px rgba(72, 209, 204, 0.4);
  }
  100% {
    filter: brightness(1.1) saturate(1.3);
    transform: translateY(-4px) rotate(0deg) scale(1);
    box-shadow: 
      0 6px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(0, 0, 139, 0.8),
      0 0 25px rgba(25, 25, 112, 0.6),
      0 0 35px rgba(72, 61, 139, 0.4);
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .privacy-title {
    font-size: 2.5rem;
  }
  
  .privacy-background-panel {
    width: 98%;
    padding: 1rem;
  }
  
  .privacy-container {
    padding: 1.5rem;
  }
  
  .privacy-details {
    padding: 1.5rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .privacy-background-panel {
    width: 99%;
    padding: 0.75rem;
  }
  
  .privacy-container {
    padding: 1.25rem;
  }
  
  .privacy-details {
    padding: 1.25rem;
    max-height: 50vh;
  }
  
  .privacy-details h2 {
    font-size: 1.5rem;
  }
  
  .privacy-details h3 {
    font-size: 1.2rem;
  }
  
  .privacy-details p,
  .privacy-details li {
    font-size: 0.9rem;
  }
} 
.product-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5dc; /* Light beige background for light mode */

  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 2rem;
  position: relative;
}

.product-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 245, 220, 0.85); /* Light beige overlay for light mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%238d6e63' stroke-width='1.5' stroke-opacity='0.2'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.product-detail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%233e2723' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.product-detail-title-panel {
  background: radial-gradient(circle at 50% 50%, rgba(245, 245, 220, 1) 70%, rgba(245, 245, 220, 0.92) 90%, rgba(245, 245, 220, 0.7) 100%) !important;
  border: 3px solid #3e2723;
  border-radius: 20px;
  padding: 1.5rem 3rem;
  margin-bottom: 1rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.dark-mode .product-detail-title-panel {
  background-color: #3e2723 !important;
  background-image: none !important;
}

.dream-mode .product-detail-title-panel {
  background: unset;
}

.product-detail-title {
  font-size: 3rem;
  font-weight: 900; /* Extra bold */
  margin: 0;
  color: #14545c; /* Teal color matching selling button */
  position: relative;
  z-index: 1;
}

.top-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 800px;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.back-to-products {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 30px;
  font-size: 1rem;
  text-decoration: none;
  font-weight: 600;
  font-family: 'Arial Black', Arial, sans-serif;
  font-stretch: condensed;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.back-to-products:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  background-color: #a1887f;
  text-decoration: none;
}

.nav-button {
  padding: 0.8rem 1.5rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 30px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  font-family: var(--font-family);
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.product-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 800px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
}

.flavor-panel {
  background-color: #f5f5dc;
  border: 3px solid #3e2723;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
}

.product-detail-name {
  font-size: 5.5rem;
  font-weight: 900;
  margin-bottom: 1.5rem;
  color: #3e2723;
  text-align: center;
  letter-spacing: 1px;
  white-space: nowrap;
  transition: color 0.3s ease;
  text-shadow: none;
}

.product-detail-name:hover {
  color: #5d4037;
}

.product-detail-image-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
  height: 300px; /* Fixed height for consistency */
  overflow: hidden;
  position: relative;
}

.product-detail-image {
  width: 300px; /* Fixed width */
  height: 300px; /* Fixed height */
  object-fit: cover; /* Maintain aspect ratio and cover the container */
  border-radius: 8px;
  border: 3px solid #8d6e63;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.product-detail-description {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: #5d4037;
  text-align: center;
  max-width: 600px;
}

.product-size-options {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  width: 100%;
}

.size-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  border: 3px solid #3e2723;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 150px;
  background-color: rgba(255, 255, 255, 0.7);
}

/* Light mode unselected bag - cream color */
.light-mode .size-option:not(.selected) {
  background-color: #f5f5dc;
}

.size-option:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.size-option.selected {
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.size-name {
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.size-price {
  font-size: 1.8rem;
  font-weight: 900;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #ff0000;
}

.product-quantity {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}

.product-quantity label {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #3e2723;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 900;
}

.max-quantity-info {
  font-size: 1.1rem;
  color: #3e2723;
  margin: 0.5rem 0 0 0;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 900;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.quantity-button {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #8d6e63 !important;
  color: white !important;
  border: 3px solid #3e2723 !important;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: bold;
  font-family: var(--font-family);
  transition: all 0.2s ease;
  outline: none;
}

.quantity-button:hover {
  background-color: #a1887f;
}

.quantity-value {
  font-size: 2.2rem;
  font-weight: 900;
  color: #3e2723;
  min-width: 50px;
  text-align: center;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.product-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.add-to-cart-button {
  padding: 1rem 2rem;
  background-color: #8d6e63;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  font-family: var(--font-family);
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 200px;
}

.add-to-cart-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.view-cart-button {
  padding: 1rem 2rem;
  background-color: #14545c;
  color: white;
  border: 3px solid #3e2723;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  font-family: var(--font-family);
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 200px;
  text-align: center;
  text-decoration: none;
}

.view-cart-button:hover {
  background-color: #795548;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  color: white;
}

/* Nutritional Information Section - Separate White Box */
.nutritional-info-section {
  width: 100%;
  max-width: 800px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #5d4037;
  border-radius: 8px;
  padding: 2rem;
  margin-top: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nutritional-info-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: #3e2723;
  text-align: center;
  padding: 1rem;
  border: 2px solid #0a1a1d;
  border-radius: 8px;
  background-color: #14545c;
  font-family: var(--font-family);
}

.nutritional-panel {
  width: 100%;
  max-width: 600px;
  background-color: #ffffff;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  overflow: hidden;
}

.nutritional-header {
  background-color: #f5f5f5;
  padding: 1rem;
  border-bottom: 2px solid #8d6e63;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.nutritional-header-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 120px;
}

.header-label {
  font-size: 1.1rem;
  color: #5d4037;
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-family: var(--font-family);
}

.header-value {
  font-size: 1.3rem;
  color: #3e2723;
  font-weight: bold;
  font-family: var(--font-family);
}

.nutritional-table {
  background-color: #ffffff;
}

.nutritional-table-header {
  background-color: #8d6e63;
  color: white;
  padding: 0.75rem 1rem;
  font-weight: bold;
  font-size: 1.6rem;
  border-bottom: 1px solid #6d4c41;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
}

.nutritional-label-header {
  text-align: left;
}

.nutritional-value-header {
  text-align: center;
  font-weight: bold;
}

.nutritional-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e0e0e0;
  transition: background-color 0.2s ease;
}

.nutritional-row:hover {
  background-color: #f9f9f9;
}

.nutritional-row:last-child {
  border-bottom: none;
}

.nutritional-label {
  font-weight: bold;
  color: #3e2723;
  text-align: left;
  font-family: var(--font-family);
  font-size: 1.2rem;
}

.nutritional-value {
  font-weight: normal;
  color: #5d4037;
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1rem;
}

/* Removed border extensions for consistent table appearance
.fat-section,
.fat-subsection {
  border-left: 4px solid #8d6e63;
}
*/

.fat-subsection .nutritional-label,
.sugar-subsection .nutritional-label {
  padding-left: 1rem;
  font-style: italic;
  color: #6d4c41;
  font-family: var(--font-family);
  font-size: 1.1rem;
}

/* Removed border extensions for consistent table appearance
.sugar-subsection {
  border-left: 4px solid #8d6e63;
}
*/

.ingredients-section {
  background-color: #f8f5f0;
  padding: 1.5rem;
  border-top: 2px solid #8d6e63;
  text-align: center;
}

.ingredients-section p {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.ingredients-title {
  font-size: 2rem;
  font-weight: bold;
  color: #3e2723;
  margin-bottom: 1.5rem;
  text-align: center;
  padding: 1rem;
  border: 2px solid #000000;
  border-radius: 8px;
  background-color: #14545c;
}

.allergen-info {
  font-size: 1.5rem;
  color: #3e2723;
  margin: 1.5rem 0 0 0;
  line-height: 1.4;
  font-family: var(--font-family);
}

.allergen-info strong {
  color: #d32f2f;
  font-weight: normal;
  font-family: var(--font-family);
}

/* Dark mode styles */
.dark-mode .product-detail {
  background-color: #3e2723;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 84 48'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23412f2a' fill-opacity='0.25'%3E%3Cpath d='M42 48c23.196 0 42-10.745 42-24S65.196 0 42 0 0 10.745 0 24s18.804 24 42 24zm0-5c19.33 0 35-8.954 35-19s-15.67-19-35-19S7 13.954 7 24s15.67 19 35 19z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
  background-position: center, center;
  background-blend-mode: multiply;
  position: relative;
}

.dark-mode .product-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode .product-detail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

.dark-mode .product-detail-title-panel {
  background-color: #3e2723;
  border: 3px solid #000000;
  border-radius: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  padding: 1.5rem 3rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.dark-mode .product-detail-title {
  color: #8d6e63 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
  font-size: 3rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
  font-family: var(--font-family);
  cursor: pointer;
  transition: color 0.3s ease;
}

.dark-mode .product-detail-title:hover {
  color: #a1887f !important;
}

.dark-mode .product-content {
  background-color: #3e2723;
  border: 3px solid #000000;
}

.dark-mode .product-detail-description {
  color: #fff8e1;
}

.dark-mode .product-detail-name {
  color: #8d6e63 !important;
  text-shadow: 
    -1.5px -1.5px 0 #000,
    1.5px -1.5px 0 #000,
    -1.5px 1.5px 0 #000,
    1.5px 1.5px 0 #000 !important;
}

.dark-mode .product-detail-name:hover {
  color: #a1887f !important;
}

.dark-mode .product-detail-image {
  border: 3px solid #000000;
}

.dark-mode .flavor-panel {
  background-color: #8d6e63 !important;
  border: 3px solid #000000;
}

.dark-mode .size-option {
  background-color: #444444;
  border: 3px solid #000000;
  color: #fff8e1;
}

.dark-mode .size-option.selected {
  background-color: #a1887f;
  border: 3px solid #000000;
}

.dark-mode .size-name {
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.dark-mode .size-price {
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: #ff0000 !important;
}

.dark-mode .product-quantity label,
.dark-mode .max-quantity-info {
  color: #ffffff !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 900 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .quantity-value {
  background-color: #444444;
  color: #c4a690 !important;
  padding: 0.5rem;
  border-radius: 4px;
  border: 2px solid #000000;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dark-mode .nutritional-info-section {
  background-color: #3e2723;
  color: #fff8e1;
  border: 3px solid #000000;
}

.dark-mode .nutritional-info-title,
.dark-mode .nutritional-label,
.dark-mode .nutritional-value {
  color: #fff8e1;
}

.dark-mode .nutritional-info-title {
  border: 2px solid #000000 !important;
}

.dark-mode .nutritional-info-item {
  background-color: rgba(141, 110, 99, 0.2);
  border-color: #5d4037;
}

.dream-mode .nutritional-info-section {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: 3px solid #000000;
}

.dream-mode .product-detail {
  background-color: #0d0d0d;
  background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  position: relative;
}

.dream-mode .product-detail-title-panel {
  background: #1a0d23 !important;
  background-color: #1a0d23 !important;
  background-image: none !important;
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .product-content {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 3px solid #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dream-mode .flavor-panel {
  background: #111111 !important;
  background-color: #111111 !important;
  background-image: none !important;
  border: 3px solid #000000;
  box-shadow: 
    0 8px 25px rgba(26, 13, 35, 0.4),
    0 0 40px rgba(45, 20, 60, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.dream-mode .nav-button,
.dream-mode .back-to-products,
.dream-mode .add-to-cart-button,
.dream-mode .view-cart-button,
.dream-mode .quantity-button {
  border: 2px solid #000000;
}

.dream-mode .size-option {
  border: 3px solid #000000;
}

.dream-mode .size-option {
  background-color: #8d6e63 !important; /* Match add-to-cart button color */
  border: 3px solid #000000;
}

.dream-mode .size-option.selected {
  background-color: #888888 !important; /* Grey selected state instead of brown */
  border: 3px solid #000000;
  color: white !important;
}

.dream-mode .nutritional-info-item {
  background-color: #111111 !important;
  border-color: #000000;
}

.dream-mode .nutritional-panel {
  background-color: #ffffff !important;
  border: 3px solid #000000;
}

.dream-mode .nutritional-header {
  background-color: #e8e8e8 !important;
  border-bottom: 2px solid #000000;
}

.dream-mode .nutritional-table {
  background-color: #e8e8e8 !important;
}

.dream-mode .nutritional-table-header {
  background-color: #8d6e63 !important;
  color: #ffffff !important;
  border-bottom: 1px solid #6d4c41;
  font-size: 1.6rem;
}

.dream-mode .nutritional-info-title,
.dream-mode .nutritional-label,
.dream-mode .nutritional-value,
.dream-mode .header-label,
.dream-mode .header-value,
.dream-mode .nutritional-label-header,
.dream-mode .nutritional-value-header,
.dream-mode .fat-subsection .nutritional-label,
.dream-mode .sugar-subsection .nutritional-label {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .product-detail .ingredients-section,
.dream-mode .nutritional-info-section .ingredients-section {
  background-color: #e8e8e8 !important;
  border-top: 2px solid #000000;
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .product-detail .ingredients-section p,
.dream-mode .product-detail .ingredients-section span,
.dream-mode .nutritional-info-section .ingredients-section p,
.dream-mode .nutritional-info-section .ingredients-section span {
  color: #000000 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dream-mode .product-detail .allergen-info,
.dream-mode .product-detail .allergen-info p,
.dream-mode .product-detail .allergen-info span,
.dream-mode .nutritional-info-section .allergen-info,
.dream-mode .nutritional-info-section .allergen-info p,
.dream-mode .nutritional-info-section .allergen-info span {
  color: #ffffff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dream-mode .product-detail .allergen-info strong,
.dream-mode .nutritional-info-section .allergen-info strong {
  color: #d32f2f !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  animation: none !important;
}

.dark-mode .product-detail .ingredients-section,
.dark-mode .product-detail .ingredients-section p,
.dark-mode .product-detail .ingredients-section span,
.dark-mode .nutritional-info-section .ingredients-section,
.dark-mode .nutritional-info-section .ingredients-section p,
.dark-mode .nutritional-info-section .ingredients-section span {
  color: #d7ccc8 !important;
  text-shadow: none !important;
  animation: none !important;
}

.dark-mode .product-detail .allergen-info,
.dark-mode .product-detail .allergen-info p,
.dark-mode .product-detail .allergen-info span,
.dark-mode .nutritional-info-section .allergen-info,
.dark-mode .nutritional-info-section .allergen-info p,
.dark-mode .nutritional-info-section .allergen-info span {
  color: #d7ccc8 !important;
  text-shadow: none !important;
  animation: none !important;
}



.dream-mode .ingredients-title {
  background-color: #111111 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  border: 3px solid #000000;
}

.dark-mode .nutritional-info-title,
.dark-mode .nutritional-label,
.dark-mode .nutritional-value {
  color: #fff8e1;
}

.dark-mode .nutritional-info-section {
  background-color: #3e2723;
  color: #fff8e1;
  border: 3px solid #000000;
}

.dark-mode .nutritional-panel {
  background-color: #8d6e63;
  border: 3px solid #000000;
}

.dark-mode .nutritional-header {
  background-color: #8d6e63;
  border-bottom: 2px solid #000000;
}

.dark-mode .header-label {
  color: #d7ccc8;
}

.dark-mode .header-value {
  color: #fff8e1;
}

.dark-mode .nutritional-table {
  background-color: #8d6e63;
}

.dark-mode .nutritional-table-header {
  background-color: #14545c;
  color: #d7ccc8;
  border-bottom: 1px solid #3e2723;
  font-size: 1.6rem;
}

.dark-mode .nutritional-label-header,
.dark-mode .nutritional-value-header {
  color: #fff8e1;
}

.dark-mode .nutritional-label,
.dark-mode .nutritional-value {
  color: #fff8e1;
}

.dark-mode .nutritional-value {
  color: #d7ccc8;
}

.dark-mode .nutritional-row {
  border-bottom: 1px solid #666666;
}

.dark-mode .nutritional-row:hover {
  background-color: #8d6e63;
}

/* Removed border extensions for consistent table appearance
.dark-mode .fat-section,
.dark-mode .fat-subsection,
.dark-mode .sugar-subsection {
  border-left: 4px solid #000000;
}
*/

.dark-mode .fat-subsection .nutritional-label,
.dark-mode .sugar-subsection .nutritional-label {
  color: #b0b0b0;
}

.dark-mode .ingredients-section {
  background-color: #3a3a3a;
  border-top: 2px solid #000000;
}

.dark-mode .allergen-info {
  color: #fff8e1;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .allergen-info strong {
  color: #d32f2f;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.dark-mode .nutritional-info-item {
  background-color: rgba(141, 110, 99, 0.2);
  border-color: #5d4037;
}

.dream-mode .nutritional-info-title {
  background-color: #111111 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
  border: 3px solid #000000;
}

.dream-mode .product-detail-name {
  background-color: #1a0d23 !important;
  background: #1a0d23 !important;
  border: 3px solid #000000 !important;
  text-shadow: 
    -1.5px -1.5px 0 #000,
    1.5px -1.5px 0 #000,
    -1.5px 1.5px 0 #000,
    1.5px 1.5px 0 #000;
}

/* Dream mode product detail title - remove glow, add clean black outline like flavor title */
.dream-mode .product-detail-title {
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important; /* Clean 1px black outline, override global glow */
  animation: dreamText 20s infinite linear !important; /* Keep the color-changing animation */
}

/* Dream mode size option text - black by default */
.dream-mode .size-name {
  color: #000000 !important;
  text-shadow: none !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.dream-mode .size-price {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Dream mode size option text - white on hover */
.dream-mode .size-option:hover .size-name,
.dream-mode .size-option:hover .size-price {
  color: #ffffff !important;
  text-shadow: none !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Dream mode quantity value override - red with 1px black border */
.dream-mode .quantity-value {
  color: #ff0000 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  border: 2px solid #000000;
}

/* Dream mode quantity label and max info - black with no outline */
.dream-mode .product-quantity label,
.dream-mode .max-quantity-info {
  color: #000000 !important;
  text-shadow: none !important;
  font-family: 'The Wanters DEMO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 900 !important;
}

/* Dream mode max quantity number - cyan with outline */
.dream-mode .max-quantity-info .max-quantity-num {
  color: #40e0d0 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.dream-mode .product-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(13, 13, 13, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%23ff00cc' stroke-width='1.5' stroke-opacity='0.7'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dream-mode .product-detail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff00cc' fill-opacity='0.7' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.9;
  z-index: 0;
}

.dark-mode .product-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 39, 35, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none'%3E%3Cg stroke='%2318100a' stroke-width='1.5' stroke-opacity='0.5'%3E%3Cpath d='M14 25.5L28 32.5L42 25.5L28 18.5z'/%3E%3Cpath d='M14 25.5L28 32.5L28 46.5L14 39.5z'/%3E%3Cpath d='M28 32.5L42 25.5L42 39.5L28 46.5z'/%3E%3Cpath d='M14 53.5L28 60.5L42 53.5L28 46.5z'/%3E%3Cpath d='M0 39.5L14 46.5L14 60.5L0 53.5z'/%3E%3Cpath d='M14 46.5L28 39.5L28 53.5L14 60.5z'/%3E%3Cpath d='M28 39.5L42 46.5L42 60.5L28 53.5z'/%3E%3Cpath d='M42 46.5L56 39.5L56 53.5L42 60.5z'/%3E%3Cpath d='M42 25.5L56 32.5L56 46.5L42 39.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
  z-index: 0;
}

.dark-mode .product-detail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2318100a' fill-opacity='0.5' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.7;
  z-index: 0;
}

/* Responsive scaling for product detail name */
@media (max-width: 768px) {
  .product-detail-name {
    font-size: 4rem;
    white-space: normal;
    word-wrap: break-word;
  }
  
  .product-detail-title {
    font-size: 2.5rem;
  }
  
  .product-detail-title-panel {
    padding: 1rem 2rem;
  }
}

@media (max-width: 480px) {
  .product-detail-name {
    font-size: 3rem;
    white-space: normal;
    word-wrap: break-word;
  }
  
  .product-detail-title {
    font-size: 2rem;
  }
  
  .product-detail-title-panel {
    padding: 0.8rem 1.5rem;
  }
  
  .flavor-panel {
    padding: 0.8rem;
  }
}

/* Sold Out and Stock Warning Styles */
.sold-out-info {
  color: #ff0000 !important;
  font-family: 'The Wanters DEMO', sans-serif !important;
  font-weight: bold;
  margin: 5px 0;
  text-align: center;
  font-size: 1.3rem;
}

.dark-mode .sold-out-info,
.dream-mode .sold-out-info {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.light-mode .sold-out-info {
  text-shadow: none !important;
}

.low-stock-warning {
  color: #ff6b35;
  font-weight: bold;
  font-size: 0.8rem;
}

.add-to-cart-button:disabled {
  background-color: #666 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

.quantity-button:disabled {
  background-color: #666 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

.max-quantity-num, .max-quantity-num.low-stock-max, .dark-mode .max-quantity-num, .dark-mode .max-quantity-num.low-stock-max, .dream-mode .max-quantity-num, .dream-mode .max-quantity-num.low-stock-max {
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important;
}

.max-num-light {
  color: #3e2723;
  text-shadow: none;
}

.max-num-dark {
  color: #fff;
  text-shadow:
    -0.5px -0.5px 0 #000,
    0.5px -0.5px 0 #000,
    -0.5px 0.5px 0 #000,
    0.5px 0.5px 0 #000;
}

.dark-mode .max-quantity-num {
  color: #fff !important;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important;
}

.dark-mode .max-quantity-num.low-stock-max {
  color: #d32f2f !important;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important;
}

.low-stock-max {
  color: #ff3333 !important;
}

.dream-mode .max-quantity-num {
  color: unset !important; /* Let animation set the color */
  animation: dreamText 20s infinite linear !important;
  text-shadow:
    -0.75px -0.75px 0 #000,
    0.75px -0.75px 0 #000,
    -0.75px 0.75px 0 #000,
    0.75px 0.75px 0 #000 !important;
  filter: none !important;
}

.dream-mode .max-quantity-num.low-stock-max {
  color: #d32f2f !important;
  animation: none !important;
  text-shadow:
    -0.75px -0.75px 0 #000,
    0.75px -0.75px 0 #000,
    -0.75px 0.75px 0 #000,
    0.75px 0.75px 0 #000 !important;
}

.dark-mode .sold-out-info {
  color: #d32f2f !important;
  font-family: 'The Wanters DEMO', Tahoma, sans-serif !important;
  font-size: 1.3rem;
  font-weight: 900;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000 !important;
  letter-spacing: 0.5px;
  margin: 5px 0;
  text-align: center;
}

.light-mode .sold-out-info {
  text-shadow: none !important;
}

.light-mode .max-quantity-num {
  text-shadow: none !important;
} 
.theme-switch-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  padding: 1rem;
  position: relative;
  z-index: 1;
}

/* Lower positioning for specific pages */
.landing-screen .theme-switch-container {
  margin-top: 8rem;
  margin-bottom: 2rem;
}

.options-page .theme-switch-container,
.product-detail .theme-switch-container {
  margin-top: 4rem;
  margin-bottom: 2rem;
}

.theme-switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.switch-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.switch-labels.two-position,
.theme-switch.two-position .switch-labels {
  width: 80px;
}

.switch-labels.three-position,
.theme-switch.three-position .switch-labels {
  width: 120px;
}

.switch-label {
  font-size: 1.2rem;
  opacity: 0.4;
  transition: all 0.3s ease;
}

.switch-label.active {
  opacity: 1;
  transform: scale(1.1);
}

.switch-track {
  position: relative;
  height: 36px;
  background: #e0e0e0;
  border-radius: 18px;
  border: 2px solid #ccc;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.switch-track:hover {
  background: #d5d5d5;
  border-color: #aaa;
}

.switch-track.two-position {
  width: 80px;
}

.switch-track.three-position {
  width: 120px;
}

.switch-thumb {
  position: absolute;
  top: 2px;
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #bbb;
  transition: all 0.4s ease;
  z-index: 2;
  pointer-events: none; /* Prevent thumb from blocking clicks */
}

/* Two-position thumb positions */
.switch-thumb.light-position.two-position {
  left: 2px;
  background: #fff3e0;
}

.switch-thumb.dark-position.two-position {
  left: 46px;
  background: #424242;
}

/* Three-position thumb positions */
.switch-thumb.light-position.three-position {
  left: 2px;
  background: #fff3e0;
}

.switch-thumb.dark-position.three-position {
  left: 44px;
  background: #424242;
}

.switch-thumb.dream-position.three-position {
  left: 86px;
  background: #9c27b0;
}

/* Dark mode styles */
.dark-mode .switch-track {
  background: #2a2a2a;
  border-color: #555;
}

.dark-mode .switch-track:hover {
  background: #333;
  border-color: #666;
}

.dark-mode .switch-thumb {
  border-color: #555;
}

/* Dream mode styles */
.dream-mode .switch-track {
  background: #333;
  border: 3px solid #000000;
}

.dream-mode .switch-track:hover {
  background: #444;
}

.dream-mode .switch-thumb {
  border: 2px solid #000000;
}

.dream-mode .switch-label {
  animation: dreamText 20s infinite linear;
  text-shadow: 0 0 5px currentColor;
}

/* Responsive design */
@media (max-width: 768px) {
  .theme-switch-container {
    margin-top: 1.5rem;
    padding: 0.8rem;
  }
  
  /* Lower positioning for specific pages on mobile */
  .landing-screen .theme-switch-container {
    margin-top: 6rem;
    margin-bottom: 1.5rem;
  }
  
  .options-page .theme-switch-container,
  .product-detail .theme-switch-container {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
  }
  
  .switch-track {
    height: 32px;
  }
  
  .switch-track.two-position {
    width: 70px;
  }
  
  .switch-track.three-position {
    width: 105px;
  }
  
  .switch-thumb {
    width: 24px;
    height: 24px;
    top: 2px;
  }
  
  .switch-thumb.light-position.two-position {
    left: 2px;
  }
  
  .switch-thumb.dark-position.two-position {
    left: 42px;
  }
  
  .switch-thumb.light-position.three-position {
    left: 2px;
  }
  
  .switch-thumb.dark-position.three-position {
    left: 38px;
  }
  
  .switch-thumb.dream-position.three-position {
    left: 77px;
  }
  
  .switch-labels.two-position,
  .theme-switch.two-position .switch-labels {
    width: 70px;
  }
  
  .switch-labels.three-position,
  .theme-switch.three-position .switch-labels {
    width: 105px;
  }
  

} 
/* UserMenu Component Styles - Center Aligned */

.user-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.user-menu-modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  margin: 1rem;
  border: 2px solid #8d6e63;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.user-menu-modal.dark-mode {
  background: #3e2723;
  border-color: #000000;
  color: #fff8e1;
}

.user-menu-modal.dream-mode {
  background: linear-gradient(135deg, rgba(26, 13, 35, 1) 0%, rgba(45, 20, 60, 1) 25%, rgba(60, 30, 80, 1) 50%, rgba(45, 20, 60, 1) 75%, rgba(26, 13, 35, 1) 100%);
  border-color: #000000;
  color: #3e2723;
}

.user-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.user-menu-header h2 {
  margin: 0;
  font-family: 'The Wanters DEMO', serif;
  font-size: 2rem;
  color: #8d6e63;
  font-weight: 700;
  flex: 1;
  text-align: center;
}

.dark-mode .user-menu-header {
  border-bottom-color: #000000;
}

.dark-mode .user-menu-header h2 {
  color: #fff8e1;
}

.dream-mode .user-menu-header {
  border-bottom-color: #000000;
}

.dream-mode .user-menu-header h2 {
  color: #3e2723;
}

.user-menu-close {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #999;
  transition: all 0.2s ease;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.user-menu-close:hover {
  color: #d32f2f;
  transform: scale(1.1);
}

.user-menu-content {
  padding: 1.5rem;
}

.user-info-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #8d6e63;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  border: 3px solid #3e2723;
}

.dark-mode .user-avatar {
  background: #8d6e63;
  border-color: #000000;
}

.dream-mode .user-avatar {
  background: #8d6e63;
  border-color: #000000;
}

.avatar-initial {
  font-size: 3.2rem;
  font-weight: 700;
  color: white;
  font-family: 'The Wanters DEMO', serif;
}

.user-details {
  width: 100%;
  max-width: 380px;
}

.user-field-section {
  margin-bottom: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.user-field-section.flash-red {
  background-color: rgba(244, 67, 54, 0.1);
  border: 2px solid #f44336;
  border-radius: 8px;
  padding: 1rem;
  animation: flashRed 0.5s ease-in-out;
}

@keyframes flashRed {
  0% { background-color: rgba(244, 67, 54, 0.1); }
  50% { background-color: rgba(244, 67, 54, 0.3); }
  100% { background-color: rgba(244, 67, 54, 0.1); }
}

.user-field-section label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #3e2723;
  font-size: 1rem;
  text-align: center;
}

.dark-mode .user-field-section label {
  color: #fff8e1;
}

.dream-mode .user-field-section label {
  color: #3e2723;
}

.display-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: #f5f5f5;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.dark-mode .display-container {
  background: #8d6e63;
  border-color: #000000;
}

.dream-mode .display-container {
  background: rgba(26, 26, 26, 0.9);
  border-color: #000000;
}

.current-value {
  font-weight: 500;
  color: #3e2723;
  font-size: 1rem;
  text-align: center;
  word-break: break-word;
}

.dark-mode .current-value {
  color: #3e2723;
}

.dream-mode .current-value {
  color: #3e2723;
}

.readonly-value {
  background: #f5f5f5;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid #ddd;
  color: #666;
  font-style: italic;
  display: block;
  text-align: center;
  word-break: break-word;
}

.dark-mode .readonly-value {
  background: #8d6e63;
  border-color: #000000;
  color: #3e2723;
}

.dream-mode .readonly-value {
  background: rgba(26, 26, 26, 0.9);
  border-color: #000000;
  color: #3e2723;
}

.edit-button {
  background: #8d6e63;
  color: white;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
  font-weight: 600;
}

.edit-button:hover {
  background: #a1887f;
}

.dream-mode .edit-button {
  background: #ff00cc;
}

.dream-mode .edit-button:hover {
  background: #cc0099;
}

.dark-mode .edit-button {
  border: 2px solid #000000;
}

.dark-mode .hate-jerky-button {
  border: 2px solid #000000;
}

.edit-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

.field-input {
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background: white;
  color: #3e2723;
  width: 100%;
  max-width: 300px;
  text-align: center;
}

.address-input {
  text-align: left;
  resize: vertical;
  min-height: 80px;
}

.dark-mode .field-input {
  background: #8d6e63;
  border-color: #000000;
  color: #000000 !important;
}

.dream-mode .field-input {
  background: rgba(26, 26, 26, 0.9);
  border-color: #000000;
  color: #3e2723;
}

.edit-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.save-button,
.cancel-button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.save-button {
  background: #4caf50;
  color: white;
}

.save-button:hover:not(:disabled) {
  background: #45a049;
}

.save-button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.cancel-button {
  background: #f44336;
  color: white;
}

.cancel-button:hover:not(:disabled) {
  background: #da190b;
}

.user-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.dark-mode .user-stats-grid {
  border-top-color: #000000;
}

.dream-mode .user-stats-grid {
  border-top-color: #000000;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #f9f9f9;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid #eee;
}

.dark-mode .stat-item {
  background: #8d6e63;
  border-color: #000000;
}

.dream-mode .stat-item {
  background: rgba(26, 26, 26, 0.9);
  border-color: #000000;
}

.stat-item label {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.dark-mode .stat-item label {
  color: #3e2723;
}

.dream-mode .stat-item label {
  color: #3e2723;
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: #8d6e63;
  font-family: 'The Wanters DEMO', serif;
}

.dark-mode .stat-value {
  color: #3e2723;
}

.dream-mode .stat-value {
  color: #3e2723;
}

.user-menu-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #eee;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.dark-mode .user-menu-footer {
  border-top-color: #000000;
}

.dream-mode .user-menu-footer {
  border-top-color: #000000;
}

/* Delivery Preference Checkbox */
.delivery-preference-section {
  display: flex;
  justify-content: center;
  width: 100%;
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.checkbox-container:hover {
  background-color: rgba(139, 110, 99, 0.1);
}

.dark-mode .checkbox-container:hover {
  background-color: rgba(255, 248, 225, 0.1);
}

.dream-mode .checkbox-container:hover {
  background-color: rgba(255, 0, 204, 0.1);
}

.checkbox-input {
  width: 18px;
  height: 18px;
  accent-color: #8d6e63;
  cursor: pointer;
}

.dream-mode .checkbox-input {
  accent-color: #ff00cc;
}

.checkbox-label {
  font-size: 14px;
  font-weight: 500;
  color: #3e2723;
  cursor: pointer;
  user-select: none;
}

.dark-mode .checkbox-label {
  color: #fff8e1;
}

.dream-mode .checkbox-label {
  color: #ffffff !important;
  text-shadow: none !important;
  animation: none !important;
}

.hate-jerky-button {
  background: #d32f2f;
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-family: 'The Wanters DEMO', serif;
}

.hate-jerky-button:hover {
  background: #c62828;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Delete Confirmation Modal */
.delete-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1100;
  backdrop-filter: blur(4px);
}

.delete-confirm-modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  max-width: 450px;
  width: 90%;
  margin: 1rem;
  border: 3px solid #d32f2f;
  text-align: center;
  padding: 2rem;
}

.delete-confirm-modal.dark-mode {
  background: #3e2723;
  color: #fff8e1;
}

.delete-confirm-modal.dream-mode {
  background: linear-gradient(135deg, rgba(26, 13, 35, 0.95) 0%, rgba(45, 20, 60, 0.9) 25%, rgba(60, 30, 80, 0.85) 50%, rgba(45, 20, 60, 0.9) 75%, rgba(26, 13, 35, 0.95) 100%);
  color: #3e2723;
}

.delete-confirm-modal h3 {
  margin: 0 0 1rem 0;
  font-size: 1.8rem;
  color: #d32f2f;
  font-weight: 700;
  font-family: 'The Wanters DEMO', serif;
}

.delete-confirm-modal p {
  margin: 0.5rem 0 1rem 0;
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 500;
}

.delete-confirm-modal ul {
  text-align: left;
  margin: 1rem 0;
  padding-left: 1.5rem;
  display: inline-block;
}

.delete-confirm-modal li {
  margin: 0.5rem 0;
  font-size: 1rem;
  line-height: 1.3;
}

.delete-confirm-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.confirm-delete-button,
.cancel-delete-button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s ease;
  font-family: 'The Wanters DEMO', serif;
  min-width: 150px;
}

.confirm-delete-button {
  background: #d32f2f;
  color: white;
}

.confirm-delete-button:hover {
  background: #c62828;
  transform: translateY(-2px);
}

.cancel-delete-button {
  background: #4caf50;
  color: white;
}

.cancel-delete-button:hover {
  background: #45a049;
  transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 600px) {
  .user-menu-modal {
    width: 95%;
    margin: 0.5rem;
  }
  
  .user-menu-header,
  .user-menu-content,
  .user-menu-footer {
    padding: 1rem;
  }
  
  .user-stats-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .stat-item {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  
  .user-avatar {
    width: 60px;
    height: 60px;
  }
  
  .avatar-initial {
    font-size: 1.5rem;
  }
  
  .delete-confirm-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .confirm-delete-button,
  .cancel-delete-button {
    width: 100%;
    max-width: 200px;
  }
}

@media (max-width: 400px) {
  .field-input {
    max-width: 100%;
  }
  
  .edit-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .save-button,
  .cancel-button {
    width: 100%;
  }
} 

.dream-mode .avatar-initial {
  color: #00ffff;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
} 

.dream-mode .current-value,
.dream-mode .readonly-value,
.dream-mode .stat-value,
.dream-mode .stat-item label {
  color: #ffffff !important;
  animation: none !important;
  text-shadow: none !important;
} 

.dream-mode .user-menu-close {
  background: none !important;
  border: none !important;
} 

.dream-mode .user-menu-header h2 {
  color: #ffffff !important;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000 !important;
  animation: none !important;
} 

.dream-mode .hate-jerky-button {
  background: #d32f2f !important;
  color: #000 !important;
  border: 2px solid #000 !important;
} 

/* Dream mode: Only the level number is cyan */
.dream-mode .stat-item.level .stat-value {
  color: #00ffff !important;
  animation: none !important;
  text-shadow: none !important;
} 

.dream-mode .user-menu-close:hover {
  background: none !important;
  color: #fff !important;
  box-shadow: none !important;
  border: none !important;
  transform: none !important;
}

/* Rewards Section Styles */
.rewards-section {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.rewards-title {
  font-family: 'The Wanters DEMO', serif !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: #8d6e63 !important;
  text-align: center;
  display: block;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

.dark-mode .rewards-title {
  color: #000000 !important;
}

.dream-mode .rewards-title {
  color: #ffffff !important;
}

.rewards-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  /* No scrolling - let content flow naturally */
}

/* Free Bag Codes Panel Styles */
.free-bag-codes-panel {
  background: #f5f5f5;
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 0.75rem;
  max-height: 200px;
  overflow-y: auto;
  
  /* Enable smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.dark-mode .free-bag-codes-panel {
  background: #8d6e63;
  border-color: #000000;
}

.dream-mode .free-bag-codes-panel {
  background: rgba(26, 26, 26, 0.9);
  border-color: #000000;
}

.free-bag-codes-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.free-bag-code-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #8d6e63 !important;
  padding: 1rem;
  border-radius: 8px;
  border: 2px solid #000000;
  transition: all 0.2s ease;
  text-align: center;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.dark-mode .free-bag-code-item {
  background: #3e2723;
  border-color: #000000;
}

.dream-mode .free-bag-code-item {
  background: rgba(45, 20, 60, 0.8);
  border-color: #000000;
}

.free-bag-code-item:hover {
  background: #5d4037;
  border-color: #000000;
}

.free-bag-code-item.applied {
  background: #4CAF50 !important;
  border-color: #2E7D32 !important;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

.free-bag-code-item.applied:hover {
  background: #388E3C !important;
  border-color: #1B5E20 !important;
}

.dark-mode .free-bag-code-item:hover {
  background: #5d4037;
  border-color: #fff8e1;
}

.dream-mode .free-bag-code-item:hover {
  background: rgba(60, 30, 80, 0.9);
  border-color: #ffffff;
}

.free-bag-code-text {
  font-weight: 500;
  color: #000000;
  font-size: 1rem;
  text-align: center;
  word-break: break-word;
  margin-bottom: 0.25rem;
}

.free-bag-code-description {
  font-weight: 500;
  color: #000000;
  font-size: 0.9rem;
  text-align: center;
  word-break: break-word;
  opacity: 0.8;
  font-style: italic;
}

.dark-mode .free-bag-code-text {
  color: #3e2723;
}

.dark-mode .free-bag-code-description {
  color: #3e2723;
}

.dream-mode .free-bag-code-text {
  color: #3e2723;
}

.dream-mode .free-bag-code-description {
  color: #3e2723;
}

/* Applied state styling for dark and dream modes */
.dark-mode .free-bag-code-item.applied {
  background: #4CAF50 !important;
  border-color: #2E7D32 !important;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

.dark-mode .free-bag-code-item.applied:hover {
  background: #388E3C !important;
  border-color: #1B5E20 !important;
}

.dream-mode .free-bag-code-item.applied {
  background: #4CAF50 !important;
  border-color: #2E7D32 !important;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

.dream-mode .free-bag-code-item.applied:hover {
  background: #388E3C !important;
  border-color: #1B5E20 !important;
}

/* Toast Notification Styles */
.toast-notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #4CAF50;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  font-weight: 600;
  font-size: 0.9rem;
  animation: toastSlideIn 0.3s ease-out;
}

.toast-notification.dark-mode {
  background: #4CAF50;
  color: white;
  border: 2px solid #2E7D32;
}

.toast-notification.dream-mode {
  background: #4CAF50;
  color: white;
  border: 2px solid #2E7D32;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(76, 175, 80, 0.2);
}

.toast-message {
  display: block;
  text-align: center;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.remove-code-button {
  background: #d32f2f;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  transition: all 0.2s ease;
  margin-left: 0.5rem;
}

.remove-code-button:hover {
  background: #b71c1c;
  transform: scale(1.1);
}

.dark-mode .remove-code-button {
  background: #d32f2f;
}

.dark-mode .remove-code-button:hover {
  background: #b71c1c;
}

.dream-mode .remove-code-button {
  background: #d32f2f;
}

.dream-mode .remove-code-button:hover {
  background: #b71c1c;
} 

/* Dream mode: force promo code description and applied indicator to black */
.dream-mode .free-bag-code-description,
.dream-mode .applied-indicator {
  color: #000 !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Light mode: cream panel and hover for promo code items */
.free-bag-code-item {
  background: #f5f5dc !important;
  border: 2px solid #8d6e63;
}

.free-bag-code-item:hover {
  background: #e0d7c3 !important;
  border-color: #5d4037 !important;
}

/* Dark mode: restore original dark brown panel and hover */
.dark-mode .free-bag-code-item {
  background: #3e2723 !important;
  border-color: #000000 !important;
}
.dark-mode .free-bag-code-item:hover {
  background: #5d4037 !important;
  border-color: #fff8e1 !important;
}

/* Dream mode: restore original dream panel and hover */
.dream-mode .free-bag-code-item {
  background: rgba(45, 20, 60, 0.8) !important;
  border-color: #000000 !important;
}
.dream-mode .free-bag-code-item:hover {
  background: rgba(60, 30, 80, 0.9) !important;
  border-color: #ffffff !important;
}

/* Applied indicator styling */
.applied-indicator {
  font-weight: bold;
  color: #388E3C;
  letter-spacing: 0.5px;
  font-size: 1.01em;
  display: inline-block;
  margin-top: 2px;
} 

/* Dark mode: match stats panel for promo code items */
.dark-mode .free-bag-code-item {
  background: #8d6e63 !important;
  border-color: #000000 !important;
}
.dark-mode .free-bag-code-item:hover {
  background: #8d6e63 !important;
  border-color: #fff8e1 !important;
} 

/* Dream mode: match stats panel for promo code items */
.dream-mode .free-bag-code-item {
  background: rgba(26, 26, 26, 0.9) !important;
  border-color: #000000 !important;
  color: #fff !important;
}
.dream-mode .free-bag-code-item * {
  color: #fff !important;
  text-shadow: none !important;
}
.dream-mode .free-bag-code-item:hover {
  background: rgba(26, 26, 26, 0.9) !important;
  border-color: #fff !important;
} 

/* Light mode: cream background and border for stats and display panels */
.stat-item,
.display-container {
  background: #f5f5dc !important;
  border: 1px solid #8d6e63 !important;
}

/* Dark mode: brown background for stats and display panels (matching rewards) */
.dark-mode .stat-item,
.dark-mode .display-container {
  background: #8d6e63 !important;
  border: 1px solid #000000 !important;
}

/* Dream mode: dark gray background for stats and display panels (matching rewards) */
.dream-mode .stat-item,
.dream-mode .display-container {
  background: rgba(26, 26, 26, 0.9) !important;
  border: 1px solid #000000 !important;
}

/* Remove hover effect for stat and display panels in light mode */
.stat-item:hover,
.display-container:hover {
  background: #f5f5dc !important;
  border: 1px solid #8d6e63 !important;
}

/* Dark mode: no hover effect for stats and display panels */
.dark-mode .stat-item:hover,
.dark-mode .display-container:hover {
  background: #8d6e63 !important;
  border: 1px solid #000000 !important;
}

/* Dream mode: no hover effect for stats and display panels */
.dream-mode .stat-item:hover,
.dream-mode .display-container:hover {
  background: rgba(26, 26, 26, 0.9) !important;
  border: 1px solid #000000 !important;
}

/* Checkout-specific rewards styling - smaller panels in rows of 2 */
.checkout-rewards-section {
  max-width: 800px !important;
  padding: 1.5rem !important;
}

.checkout-rewards-container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.75rem !important;
}

.checkout-rewards-container .customer-settings-reward-code {
  padding: 1rem !important;
  min-height: auto !important;
}

.checkout-rewards-container .customer-settings-reward-reason {
  font-size: 1.2rem !important;
  margin-bottom: 0.3rem !important;
}

.checkout-rewards-container .customer-settings-reward-code-text {
  font-size: 1.1rem !important;
  padding: 0.4rem 0.8rem !important;
}

.checkout-rewards-container .customer-settings-reward-description {
  font-size: 0.9rem !important;
  margin-top: 0.3rem !important;
}

.checkout-rewards-container .customer-settings-reward-description-text {
  font-size: 1rem !important;
}

/* Dark mode clear button styling */
.dark-mode .clear-button {
  border: 2px solid #000000 !important;
}

/* Dream mode clear button styling - make it red like dark mode */
.dream-mode .clear-button {
  border: 2px solid #000000 !important;
  background-color: #d32f2f !important;
  color: #000000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  background-image: none !important;
  background: #d32f2f !important;
}

/* Additional override for any inline styles */
.dream-mode .clear-button[style*="background"] {
  background: #d32f2f !important;
  background-color: #d32f2f !important;
  background-image: none !important;
}

/* Light mode enter code button styling - ensure white text */
.light-mode .enter-code-button {
  color: #ffffff !important;
}

/* Dream mode reward reason - ensure The Wanters DEMO font */
.dream-mode .customer-settings-reward-reason {
  font-family: 'The Wanters DEMO', serif !important;
}

/* Reward description text - The Wanters DEMO font for both checkout and customer settings */
.customer-settings-reward-description-text,
.checkout-rewards-container .customer-settings-reward-description-text {
  font-family: 'The Wanters DEMO, serif' !important;
}

/* Dream mode checkout rewards title - 1px black outline */
.dream-mode .checkout-rewards-section .customer-settings-rewards-title {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

:root {
  /* Base Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  
  /* Green Accents */
  --color-green-100: rgba(72, 187, 120, 0.1);
  --color-green-200: rgba(72, 187, 120, 0.2);
  --color-green-300: rgba(72, 187, 120, 0.3);
  --color-green-400: #48bb78;
  --color-green-500: #38a169;
  
  /* Seasonal Colors */
  --color-spring: #a8e6cf;
  --color-summer: #ffd3b6;
  --color-autumn: #ffaaa5;
  --color-winter: #d4e7ee;
  
  /* UI Colors */
  --background-color: #0a0f0d;
  --background-color-secondary: #111815;
  --text-color: #e2e8f0;
  --text-color-secondary: #a0aec0;
  --accent-color: var(--color-green-400);
  --border-color: #2d3748;
  
  /* Typography */
  --font-decorative: 'Cinzel Decorative', serif;
  --font-body: 'Crimson Text', serif;
  
  /* Gradients */
  --gradient-green: linear-gradient(135deg, 
    var(--color-green-100) 0%,
    var(--color-green-200) 100%);
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(72, 187, 120, 0.1);
  --shadow-md: 0 4px 6px rgba(72, 187, 120, 0.15);
  --shadow-lg: 0 10px 15px rgba(72, 187, 120, 0.2);
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

/* Back Button for Achievements Menu */
.customer-stats-container .customer-settings-back-button {
  background-color: #8d6e63;
  color: white;
  border: 2px solid #0a1a1d;
  border-radius: 25px;
  padding: 0.75rem 2rem;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: 'The Wanters DEMO', serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.customer-stats-container .customer-settings-back-button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Dark mode back button */
.dark .customer-stats-container .customer-settings-back-button {
  background-color: #2c1810 !important;
  border: 4px solid #000000 !important;
  border-color: #000000 !important;
  color: #fff8e1 !important;
}

.dark .customer-stats-container .customer-settings-back-button:hover {
  background-color: #3e2723 !important;
  border: 4px solid #000000 !important;
  border-color: #000000 !important;
  color: #fff8e1 !important;
}

/* Dream mode back button */
.dream .customer-stats-container .customer-settings-back-button {
  background: linear-gradient(135deg, rgba(26, 13, 35, 1) 0%, rgba(45, 20, 60, 1) 50%, rgba(26, 13, 35, 1) 100%);
  border-color: #000000;
  color: #3e2723;
}

.dream .customer-stats-container .customer-settings-back-button:hover {
  background: linear-gradient(135deg, rgba(45, 20, 60, 1) 0%, rgba(60, 30, 80, 1) 50%, rgba(45, 20, 60, 1) 100%);
}

/* Social Media Input Pulse Animation */
.social-media-input-pulse {
  animation: socialMediaPulse 2s ease-in-out;
  border-color: #4caf50 !important;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.3) !important;
}

@keyframes socialMediaPulse {
  0% {
    border-color: #8d6e63;
    box-shadow: 0 0 0 rgba(76, 175, 80, 0);
  }
  20% {
    border-color: #6bbf6b;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
  }
  40% {
    border-color: #4caf50;
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.6);
  }
  60% {
    border-color: #4caf50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
  }
  80% {
    border-color: #6bbf6b;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
  }
  100% {
    border-color: #4caf50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
  }
}

/* Master Dropdown Design - Complete border with rounded edges */
.master-dropdown,
select.master-dropdown {
  padding: 0.75rem !important;
  border: 2px solid #8d6e63 !important;
  border-radius: 12px !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  font-family: 'The Wanters DEMO', serif !important;
  background: white !important;
  color: #5d4037 !important;
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  vertical-align: top !important;
}

.master-dropdown:focus,
select.master-dropdown:focus {
  outline: none !important;
  border: 2px solid #5d4037 !important;
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.1) !important;
}

.master-dropdown:hover,
select.master-dropdown:hover {
  border: 2px solid #5d4037 !important;
}

/* Center-align dropdown options */
.master-dropdown option {
  text-align: center;
}

/* Ensure large font size on narrow screens */
@media (max-width: 768px) {
  .master-dropdown,
  select.master-dropdown {
    font-size: 1.8rem !important;
    border: 2px solid #8d6e63 !important;
    border-radius: 12px !important;
  }
}

/* Force dropdown styling with maximum specificity (Ingredients modal + batch weight) */
.ingredients-selection-modal .master-dropdown,
.ingredients-selection-modal select.master-dropdown,
.batch-weight-input-container .master-dropdown,
.batch-weight-input-container select.master-dropdown {
  border: 2px solid #8d6e63 !important;
  border-radius: 8px !important;
  background: white !important;
  color: #5d4037 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  padding: 0.35rem 0.5rem !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .ingredients-selection-modal .master-dropdown,
  .ingredients-selection-modal select.master-dropdown,
  .batch-weight-input-container .master-dropdown,
  .batch-weight-input-container select.master-dropdown {
    font-size: 1.1rem !important;
    border: 2px solid #8d6e63 !important;
    border-radius: 8px !important;
  }
}

/* Emergency override - maximum specificity */
select.master-dropdown[class*="master-dropdown"] {
  border: 2px solid #8d6e63 !important;
  border-radius: 12px !important;
  background: white !important;
  color: #5d4037 !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  padding: 0.75rem !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  vertical-align: top !important;
}

/* Master dropdown in modals */
.add-ingredient-modal .master-dropdown,
.quick-add-ingredient-modal .master-dropdown,
.add-size-modal .master-dropdown,
.quick-add-modal .master-dropdown,
.quick-add-size-modal .master-dropdown {
  border: 2px solid #8d6e63 !important;
  border-radius: 8px !important;
  background: white !important;
  color: #5d4037 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  padding: 0.35rem 0.5rem !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  box-sizing: border-box !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Master dropdown in inventory table - smaller and ingredients blue */
.inventory-table .master-dropdown {
  border: 2px solid #007bff !important;
  border-radius: 6px !important;
  background: white !important;
  color: #000000 !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  font-family: 'The Wanters DEMO', serif !important;
  text-align: center !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  padding: 8px 12px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  box-sizing: border-box !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Center dropdown containers in modals */
.add-ingredient-modal .quick-add-form-field > div > div:last-child,
.quick-add-ingredient-modal .quick-add-form-field > div > div:last-child,
.add-size-modal .quick-add-form-field > div > div:last-child,
.quick-add-modal .quick-add-form-field > div > div:last-child,
.quick-add-size-modal .quick-add-form-field > div > div:last-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

@media (max-width: 768px) {
  .add-ingredient-modal .master-dropdown,
  .quick-add-ingredient-modal .master-dropdown,
  .add-size-modal .master-dropdown,
  .quick-add-modal .master-dropdown,
  .quick-add-size-modal .master-dropdown {
    font-size: 1.8rem !important;
    border: 2px solid #8d6e63 !important;
    border-radius: 12px !important;
  }
  
  .inventory-table .master-dropdown {
    font-size: 1rem !important;
    border: 2px solid #007bff !important;
    border-radius: 6px !important;
  }
}

/* Inventory table unit cell centering */
.inventory-table .inventory-table-cell.unit-cell {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.inventory-table .inventory-table-cell.unit-cell .master-dropdown {
  display: block !important;
  margin: 0 auto !important;
}

/* Shared 1s panel fade-in for tab/section content (Products, Customers, Business pages) */
.content-panel-fade-in {
  animation: content-panel-fade-in 1s ease-out forwards;
}

@keyframes content-panel-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Customer Businesses Page Styles */

.customer-businesses-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'The Wanters DEMO', serif;
}

.customer-businesses-background-panel {
  flex: 1;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.customer-businesses-container {
  width: 100%;
  max-width: 1200px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

/* Header Styles */
.customer-businesses-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  background: linear-gradient(135deg, #14545c 0%, #0f3d42 100%);
  color: white;
  border-bottom: 3px solid #000;
}

.customer-businesses-title-panel {
  flex: 1;
}

.customer-businesses-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
}

.customer-businesses-back-button {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid white;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'The Wanters DEMO', serif;
}

.customer-businesses-back-button:hover {
  background: white;
  color: #14545c;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Loading and Error States */
.customer-businesses-loading,
.customer-businesses-error,
.customer-businesses-empty {
  padding: 4rem 2rem;
  text-align: center;
  color: #333;
}

.customer-businesses-loading h2,
.customer-businesses-error h2,
.customer-businesses-empty h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #14545c;
}

.customer-businesses-retry-btn,
.customer-businesses-discover-btn {
  background: #14545c;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 25px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'The Wanters DEMO', serif;
  margin-top: 1rem;
}

.customer-businesses-retry-btn:hover,
.customer-businesses-discover-btn:hover {
  background: #0f3d42;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Businesses List */
.customer-businesses-list {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Business Card Styles */
.customer-business-card {
  position: relative;
  width: 100%;
  height: 200px;
  perspective: 1000px;
  cursor: pointer;
}

.customer-business-card-front,
.customer-business-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transition: transform 0.6s ease;
  border: 3px solid #14545c;
  overflow: hidden;
}

.customer-business-card-front {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  transform: rotateY(0deg);
}

.customer-business-card-back {
  background: linear-gradient(135deg, #14545c 0%, #0f3d42 100%);
  transform: rotateY(180deg);
  color: white;
}

.customer-business-card.flipped .customer-business-card-front {
  transform: rotateY(-180deg);
}

.customer-business-card.flipped .customer-business-card-back {
  transform: rotateY(0deg);
}

.customer-business-card-content {
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Front Card Content */
.customer-business-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.customer-business-logo-placeholder {
  width: 60px;
  height: 60px;
  background: #14545c;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.customer-business-info {
  text-align: center;
  flex: 1;
}

.customer-business-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: #14545c;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.customer-business-type {
  font-size: 1rem;
  color: #666;
  margin: 0 0 1rem 0;
  font-weight: 500;
}

.customer-business-stats {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.customer-business-stat {
  background: #14545c;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.9rem;
  font-weight: 600;
}

.customer-business-flip-indicator {
  text-align: center;
  color: #666;
  font-size: 0.9rem;
  font-style: italic;
}

/* Back Card Content */
.customer-business-profile-summary {
  margin-bottom: 1.5rem;
}

.customer-business-profile-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.customer-business-profile-description {
  font-size: 0.9rem;
  margin: 0 0 1rem 0;
  opacity: 0.9;
  line-height: 1.4;
}

.customer-business-profile-contact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.customer-business-contact-item {
  font-size: 0.8rem;
  opacity: 0.8;
}

/* Action Buttons */
.customer-business-action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.customer-business-action-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 0.75rem 1rem;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'The Wanters DEMO', serif;
  text-align: center;
  backdrop-filter: blur(10px);
}

.customer-business-action-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Specific button styles */
.store-btn {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  border-color: #28a745;
}

.store-btn:hover {
  background: linear-gradient(135deg, #218838 0%, #1ea085 100%);
}

.orders-btn {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border-color: #007bff;
}

.orders-btn:hover {
  background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
}

.loyalty-btn {
  background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
  border-color: #ffc107;
  color: #000;
}

.loyalty-btn:hover {
  background: linear-gradient(135deg, #e0a800 0%, #d39e00 100%);
}

.achievements-btn {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  border-color: #dc3545;
}

.achievements-btn:hover {
  background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
}

/* Dark Mode Styles */
.dark-mode .customer-businesses-background-panel {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.dark-mode .customer-businesses-container {
  background: rgba(45, 45, 45, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .customer-business-card-front {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border-color: #14545c;
}

.dark-mode .customer-business-name {
  color: #14545c;
}

.dark-mode .customer-business-type {
  color: #ccc;
}

.dark-mode .customer-business-flip-indicator {
  color: #ccc;
}

/* Dream Mode Styles */
.dream-mode .customer-businesses-background-panel {
  background: linear-gradient(135deg, #4a148c 0%, #7b1fa2 100%);
}

.dream-mode .customer-businesses-container {
  background: rgba(74, 20, 140, 0.95);
  border-color: rgba(255, 255, 255, 0.3);
}

.dream-mode .customer-businesses-header {
  background: linear-gradient(135deg, #14545c 0%, #0f3d42 100%);
  border-bottom-color: #ffd700;
}

.dream-mode .customer-business-card-front {
  background: linear-gradient(135deg, #6a1b9a 0%, #8e24aa 100%);
  border-color: #ffd700;
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}

.dream-mode .customer-business-card-back {
  background: linear-gradient(135deg, #14545c 0%, #0f3d42 100%);
  border-color: #ffd700;
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}

.dream-mode .customer-business-name {
  color: #ffd700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.dream-mode .customer-business-type {
  color: #e1bee7;
}

.dream-mode .customer-business-stat {
  background: #ffd700;
  color: #000;
  font-weight: 700;
}

.dream-mode .customer-business-flip-indicator {
  color: #e1bee7;
}

/* Responsive Design */
@media (max-width: 768px) {
  .customer-businesses-container {
    margin: 0.5rem;
    border-radius: 15px;
  }
  
  .customer-businesses-header {
    padding: 1.5rem;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .customer-businesses-title {
    font-size: 2rem;
  }
  
  .customer-businesses-list {
    padding: 1rem;
  }
  
  .customer-business-card {
    height: 180px;
  }
  
  .customer-business-card-content {
    padding: 1rem;
  }
  
  .customer-business-name {
    font-size: 1.3rem;
  }
  
  .customer-business-action-buttons {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .customer-business-action-btn {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
  }
}