body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* Root CSS Variables for Theme System */
:root {
  /* Light Theme Variables */
  --primary-main: #2E7D32;
  --primary-light: #4CAF50;
  --primary-dark: #1B5E20;
  --secondary-main: #FF9800;
  --secondary-light: #FFB74D;
  --secondary-dark: #F57C00;
  --background-default: #F5F5F5;
  --background-paper: #FFFFFF;
  --text-primary: #212121;
  --text-secondary: #757575;
  --divider: #E0E0E0;
  --error-main: #F44336;
  --warning-main: #FF9800;
  --info-main: #2196F3;
  --success-main: #4CAF50;
  
  /* Toast Notifications */
  --toast-background: #FFFFFF;
  --toast-color: #212121;
  
  /* Shadows and Effects */
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.2);
  
  /* Border Radius */
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-large: 12px;
  --border-radius-xl: 16px;
}

/* Dark Theme Variables */
[data-theme="dark"] {
  --primary-main: #4CAF50;
  --primary-light: #81C784;
  --primary-dark: #2E7D32;
  --secondary-main: #FFB74D;
  --secondary-light: #FFCC02;
  --secondary-dark: #FF9800;
  --background-default: #121212;
  --background-paper: #1E1E1E;
  --text-primary: #FFFFFF;
  --text-secondary: #B0B0B0;
  --divider: #424242;
  --error-main: #F44336;
  --warning-main: #FF9800;
  --info-main: #2196F3;
  --success-main: #4CAF50;
  
  /* Toast Notifications */
  --toast-background: #1E1E1E;
  --toast-color: #FFFFFF;
  
  /* Shadows and Effects for Dark Mode */
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Auto Theme Support */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --primary-main: #4CAF50;
    --primary-light: #81C784;
    --primary-dark: #2E7D32;
    --secondary-main: #FFB74D;
    --secondary-light: #FFCC02;
    --secondary-dark: #FF9800;
    --background-default: #121212;
    --background-paper: #1E1E1E;
    --text-primary: #FFFFFF;
    --text-secondary: #B0B0B0;
    --divider: #424242;
    --toast-background: #1E1E1E;
    --toast-color: #FFFFFF;
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.5);
  }
}

/* Global Element Styles */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #F5F5F5;
  background-color: var(--background-default);
  color: #212121;
  color: var(--text-primary);
}

/* Selection Styles */
::selection {
  background-color: #2E7D32;
  background-color: var(--primary-main);
  color: white;
}

::-moz-selection {
  background-color: #2E7D32;
  background-color: var(--primary-main);
  color: white;
}

/* Scrollbar Styles */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #FFFFFF;
  background: var(--background-paper);
}

::-webkit-scrollbar-thumb {
  background: #E0E0E0;
  background: var(--divider);
  border-radius: 8px;
  border-radius: var(--border-radius-medium);
}

::-webkit-scrollbar-thumb:hover {
  background: #757575;
  background: var(--text-secondary);
}

/* Focus Styles */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #2E7D32;
  outline: 2px solid var(--primary-main);
  outline-offset: 2px;
}

/* Loading Animation */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

/* Theme Transition Animation */
.theme-transition,
.theme-transition *,
.theme-transition *:before,
.theme-transition *:after {
  transition: all 0.3s ease !important;
  transition-delay: 0 !important;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --primary-main: #000000;
    --text-primary: #000000;
    --background-paper: #FFFFFF;
    --divider: #000000;
  }
  
  [data-theme="dark"] {
    --primary-main: #FFFFFF;
    --text-primary: #FFFFFF;
    --background-paper: #000000;
    --divider: #FFFFFF;
  }
}

/* Print Styles */
@media print {
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  
  .no-print {
    display: none !important;
  }
}

/* Utility Classes */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #2E7D32;
  background: var(--primary-main);
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 1000;
  border-radius: 8px;
  border-radius: var(--border-radius-medium);
}

.skip-link:focus {
  top: 6px;
}

/* Toast Container Override */
.Toastify__toast-container {
  font-family: inherit;
}

.Toastify__toast {
  border-radius: 8px;
  border-radius: var(--border-radius-medium);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  box-shadow: var(--shadow-medium);
}

.Toastify__toast--success {
  background-color: #4CAF50;
  background-color: var(--success-main);
}

.Toastify__toast--error {
  background-color: #F44336;
  background-color: var(--error-main);
}

.Toastify__toast--warning {
  background-color: #FF9800;
  background-color: var(--warning-main);
}

.Toastify__toast--info {
  background-color: #2196F3;
  background-color: var(--info-main);
}
/* Custom Toast Component Styles */

.custom-toast-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 9999;
  pointer-events: none;
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  perspective: 1000px;
}

.custom-toast {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 16px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 8px 25px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #ffffff;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  transform: translateX(120%) scale(0.9);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin: 0;
  will-change: transform, opacity;
}

.custom-toast--visible {
  transform: translateX(0) scale(1);
  opacity: 1;
  animation: toastSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.custom-toast--exiting {
  transform: translateX(120%) scale(0.9);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.5, 0, 0.75, 0);
}

@keyframes toastSlideIn {
  0% {
    transform: translateX(120%) scale(0.9) rotateY(15deg);
    opacity: 0;
  }
  60% {
    transform: translateX(-8px) scale(1.02) rotateY(-2deg);
    opacity: 0.9;
  }
  100% {
    transform: translateX(0) scale(1) rotateY(0deg);
    opacity: 1;
  }
}

.custom-toast__content {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  position: relative;
}

/* Toast Types */
.custom-toast--success {
  background: linear-gradient(135deg, 
    rgba(16, 24, 16, 0.95) 0%, 
    rgba(26, 36, 26, 0.95) 50%,
    rgba(20, 30, 20, 0.95) 100%);
  border-left: 5px solid #22c55e;
}

.custom-toast--success::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(34, 197, 94, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.custom-toast--error {
  background: linear-gradient(135deg, 
    rgba(24, 16, 16, 0.95) 0%, 
    rgba(36, 26, 26, 0.95) 50%,
    rgba(30, 20, 20, 0.95) 100%);
  border-left: 5px solid #ef4444;
}

.custom-toast--error::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(239, 68, 68, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.custom-toast--warning {
  background: linear-gradient(135deg, 
    rgba(24, 20, 16, 0.95) 0%, 
    rgba(36, 32, 26, 0.95) 50%,
    rgba(30, 26, 20, 0.95) 100%);
  border-left: 5px solid #f59e0b;
}

.custom-toast--warning::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(245, 158, 11, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.custom-toast--info {
  background: linear-gradient(135deg, 
    rgba(16, 20, 24, 0.95) 0%, 
    rgba(26, 32, 36, 0.95) 50%,
    rgba(20, 26, 30, 0.95) 100%);
  border-left: 5px solid #3b82f6;
}

.custom-toast--info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

/* Toast Icon */
.custom-toast__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  animation: iconBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
  transform: scale(0.3) rotate(-180deg);
  animation-delay: 0.3s;
}

@keyframes iconBounce {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-180deg);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.3) rotate(-10deg);
  }
  70% {
    opacity: 1;
    transform: scale(0.9) rotate(5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.custom-toast--success .custom-toast__icon {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
  box-shadow: 
    0 0 20px rgba(34, 197, 94, 0.4),
    inset 0 1px 0 rgba(34, 197, 94, 0.3);
}

.custom-toast--error .custom-toast__icon {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  box-shadow: 
    0 0 20px rgba(239, 68, 68, 0.4),
    inset 0 1px 0 rgba(239, 68, 68, 0.3);
}

.custom-toast--warning .custom-toast__icon {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  box-shadow: 
    0 0 20px rgba(245, 158, 11, 0.4),
    inset 0 1px 0 rgba(245, 158, 11, 0.3);
}

.custom-toast--info .custom-toast__icon {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.15);
  box-shadow: 
    0 0 20px rgba(59, 130, 246, 0.4),
    inset 0 1px 0 rgba(59, 130, 246, 0.3);
}

.custom-toast__icon svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Toast Message */
.custom-toast__message {
  flex: 1 1;
  font-weight: 500;
  padding-top: 4px;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.01em;
  animation: messageSlideIn 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(10px);
  animation-delay: 0.4s;
}

@keyframes messageSlideIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Close Button */
.custom-toast__close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  position: relative;
  z-index: 2;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  animation: closeButtonFadeIn 0.5s ease-out forwards;
  opacity: 0;
  animation-delay: 0.5s;
}

@keyframes closeButtonFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.custom-toast__close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.custom-toast__close:active {
  transform: scale(0.95);
}

.custom-toast__close svg {
  width: 14px;
  height: 14px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Progress Bar */
.custom-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.custom-toast__progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.custom-toast__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0.4), 
    rgba(255, 255, 255, 0.8), 
    rgba(255, 255, 255, 0.4));
  box-shadow: 
    0 0 10px rgba(255, 255, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: width 0.1s linear;
  position: relative;
  overflow: hidden;
}

.custom-toast__progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.6), 
    transparent);
  animation: progressShimmer 2s infinite;
}

@keyframes progressShimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.custom-toast--success .custom-toast__progress-bar {
  background: linear-gradient(90deg, 
    rgba(34, 197, 94, 0.6), 
    rgba(34, 197, 94, 1), 
    rgba(34, 197, 94, 0.6));
  box-shadow: 
    0 0 15px rgba(34, 197, 94, 0.6),
    inset 0 1px 0 rgba(34, 197, 94, 0.4);
}

.custom-toast--error .custom-toast__progress-bar {
  background: linear-gradient(90deg, 
    rgba(239, 68, 68, 0.6), 
    rgba(239, 68, 68, 1), 
    rgba(239, 68, 68, 0.6));
  box-shadow: 
    0 0 15px rgba(239, 68, 68, 0.6),
    inset 0 1px 0 rgba(239, 68, 68, 0.4);
}

.custom-toast--warning .custom-toast__progress-bar {
  background: linear-gradient(90deg, 
    rgba(245, 158, 11, 0.6), 
    rgba(245, 158, 11, 1), 
    rgba(245, 158, 11, 0.6));
  box-shadow: 
    0 0 15px rgba(245, 158, 11, 0.6),
    inset 0 1px 0 rgba(245, 158, 11, 0.4);
}

.custom-toast--info .custom-toast__progress-bar {
  background: linear-gradient(90deg, 
    rgba(59, 130, 246, 0.6), 
    rgba(59, 130, 246, 1), 
    rgba(59, 130, 246, 0.6));
  box-shadow: 
    0 0 15px rgba(59, 130, 246, 0.6),
    inset 0 1px 0 rgba(59, 130, 246, 0.4);
}

/* Hover Effects */
.custom-toast:hover {
  transform: translateX(-8px) scale(1.03);
  box-shadow: 
    0 25px 70px rgba(0, 0, 0, 0.7),
    0 12px 30px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-toast:hover .custom-toast__progress-bar {
  box-shadow: 
    0 0 20px rgba(255, 255, 255, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.custom-toast:hover .custom-toast__icon {
  transform: scale(1.1) rotate(5deg);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-toast--exiting:hover {
  transform: translateX(120%) scale(0.9);
}

/* Pulse animation for new toasts */
.custom-toast--visible {
  animation: toastSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             subtlePulse 2s ease-in-out 1s 1;
}

@keyframes subtlePulse {
  0%, 100% {
    box-shadow: 
      0 20px 60px rgba(0, 0, 0, 0.6),
      0 8px 25px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow: 
      0 25px 70px rgba(0, 0, 0, 0.7),
      0 12px 30px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .custom-toast-container {
    top: 70px;
    right: 12px;
    left: 12px;
    max-width: none;
    gap: 12px;
  }
  
  .custom-toast {
    border-radius: 12px;
    font-size: 13px;
  }
  
  .custom-toast__content {
    padding: 16px 18px;
    gap: 12px;
  }
  
  .custom-toast__icon {
    width: 24px;
    height: 24px;
  }
  
  .custom-toast__icon svg {
    width: 16px;
    height: 16px;
  }
  
  .custom-toast__close {
    width: 22px;
    height: 22px;
  }
  
  .custom-toast__close svg {
    width: 12px;
    height: 12px;
  }
  
  .custom-toast__progress {
    height: 5px;
  }
  
  .custom-toast:hover {
    transform: translateX(-4px) scale(1.02);
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .custom-toast {
    border-width: 2px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
  }
  
  .custom-toast--success {
    background: #000000;
    border-color: #00ff00;
    color: #ffffff;
  }
  
  .custom-toast--error {
    background: #000000;
    border-color: #ff0000;
    color: #ffffff;
  }
  
  .custom-toast--warning {
    background: #000000;
    border-color: #ffff00;
    color: #000000;
  }
  
  .custom-toast--info {
    background: #000000;
    border-color: #0000ff;
    color: #ffffff;
  }
}

/* Additional Visual Effects */
.custom-toast::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    transparent 50%, 
    rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
  border-radius: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.custom-toast:hover::after {
  opacity: 1;
}

/* Stacking effect for multiple toasts */
.custom-toast-container .custom-toast:nth-child(2) {
  transform: translateX(120%) scale(0.95);
  z-index: -1;
}

.custom-toast-container .custom-toast:nth-child(3) {
  transform: translateX(120%) scale(0.9);
  z-index: -2;
}

.custom-toast-container .custom-toast--visible:nth-child(2) {
  transform: translateX(0) scale(0.95);
  opacity: 0.9;
}

.custom-toast-container .custom-toast--visible:nth-child(3) {
  transform: translateX(0) scale(0.9);
  opacity: 0.8;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .custom-toast {
    transition: opacity 0.3s ease, transform 0.3s ease;
    animation: none;
  }
  
  .custom-toast__icon {
    animation: none;
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  
  .custom-toast__message {
    animation: none;
    opacity: 1;
    transform: translateY(0);
  }
  
  .custom-toast__close {
    animation: none;
    opacity: 1;
    transform: scale(1);
  }
  
  .custom-toast__progress-bar::after {
    animation: none;
  }
  
  .custom-toast:hover {
    transform: translateX(-2px) scale(1.01);
  }
}

/* Print Styles */
@media print {
  .custom-toast-container {
    display: none;
  }
}

/* Focus States for Accessibility */
.custom-toast:focus {
  outline: 2px solid #ffd700;
  outline-offset: 2px;
}

.custom-toast__close:focus {
  outline: 2px solid #ffd700;
  outline-offset: 1px;
}
/**
 * Global Accessibility Styles
 * Provides consistent accessibility support across the application
 */

/* Screen reader only content */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip links for keyboard navigation */
.skip-link {
  position: absolute;
  top: -100px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 6px;
  z-index: 99999;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.skip-link:focus {
  top: 80px; /* Position below the navbar */
  transform: translateX(0);
  outline: 2px solid #FFD600;
  outline-offset: 2px;
}

/* Focus management */
.focus-trap {
  position: relative;
}

.focus-trap::before,
.focus-trap::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  * {
    border-color: currentColor !important;
  }
  
  button,
  input,
  select,
  textarea {
    border: 2px solid !important;
  }
  
  .card,
  .modal,
  .dropdown {
    border: 2px solid !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Disable specific animations that might cause issues */
  .spinner,
  .loading-animation,
  .pulse-animation {
    animation: none !important;
  }
  
  /* Keep essential animations but make them faster */
  .fade-in,
  .slide-in,
  .scale-in {
    animation-duration: 0.1s !important;
  }
}

/* Global reduced motion class */
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Focus styles for interactive elements */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Enhanced focus for high contrast */
@media (prefers-contrast: high) {
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  a:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid !important;
    outline-offset: 2px;
  }
}

/* Keyboard navigation indicators */
.keyboard-navigation button:focus,
.keyboard-navigation input:focus,
.keyboard-navigation select:focus,
.keyboard-navigation textarea:focus,
.keyboard-navigation a:focus,
.keyboard-navigation [tabindex]:focus {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Touch target sizes */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a,
[role="button"],
[tabindex] {
  min-height: 44px;
  min-width: 44px;
}

/* Mobile touch targets */
@media (max-width: 768px) {
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a,
  [role="button"],
  [tabindex] {
    min-height: 48px;
    min-width: 48px;
  }
}

/* Color contrast helpers */
.high-contrast {
  background: #000 !important;
  color: #fff !important;
}

.high-contrast button,
.high-contrast input,
.high-contrast select,
.high-contrast textarea {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}

/* Text scaling support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  body {
    font-size: 16px;
  }
}

/* Large text support */
@media (min-width: 1200px) {
  .large-text {
    font-size: 1.25em;
    line-height: 1.6;
  }
}

/* Error and status announcements */
[role="alert"],
[aria-live="assertive"],
[aria-live="polite"] {
  position: relative;
}

.error-announcement {
  color: #dc3545;
  font-weight: 500;
}

.success-announcement {
  color: #28a745;
  font-weight: 500;
}

.warning-announcement {
  color: #ffc107;
  font-weight: 500;
}

/* Loading states */
.loading-state {
  position: relative;
}

.loading-state::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Keyboard navigation helpers */
.keyboard-only {
  display: none;
}

.keyboard-navigation .keyboard-only {
  display: block;
}

/* ARIA live regions */
#sr-live-region,
#sr-live-region-assertive {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Form accessibility */
.form-group {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-label.required::after {
  content: ' *';
  color: #dc3545;
}

.form-error {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.form-helper {
  color: #6c757d;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* Modal accessibility */
.modal-open {
  overflow: hidden;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
}

/* Dropdown accessibility */
.dropdown-menu {
  position: absolute;
  z-index: 1000;
}

.dropdown-item:focus {
  background-color: #f8f9fa;
  outline: none;
}

/* Table accessibility */
.table-responsive {
  overflow-x: auto;
}

.table th {
  position: relative;
}

.table th[aria-sort]::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.table th[aria-sort="ascending"]::after {
  content: '↑';
}

.table th[aria-sort="descending"]::after {
  content: '↓';
}

/* Print accessibility */
@media print {
  .sr-only {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
  }
  
  .skip-link {
    display: none;
  }
  
  [aria-hidden="true"] {
    display: none !important;
  }
}

/* Dark mode accessibility */
@media (prefers-color-scheme: dark) {
  .skip-link {
    background: #fff;
    color: #000;
  }
  
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  a:focus-visible,
  [tabindex]:focus-visible {
    outline-color: #66b3ff;
  }
  
  .keyboard-navigation button:focus,
  .keyboard-navigation input:focus,
  .keyboard-navigation select:focus,
  .keyboard-navigation textarea:focus,
  .keyboard-navigation a:focus,
  .keyboard-navigation [tabindex]:focus {
    box-shadow: 0 0 0 3px rgba(102, 179, 255, 0.25);
  }
}

/* Global theme styles */
body[data-theme="dark"] {
  background-color: #111111;
  color: #FFFFFF;
}

/* Fixed dark theme - no light theme or transitions needed */
/* Global Theme System - Black & Yellow Design */
/* 
 * Standardized CSS Custom Properties based on Home Page Theme
 * 
 * This file contains all standardized design tokens extracted from the home page:
 * - Color palette (blacks, yellows, whites, grays)
 * - Gradient definitions matching home page design
 * - Shadow and spacing variables for consistency
 * - Typography scale and font weight variables
 * - Border radius, transitions, and other design tokens
 * 
 * All components should use these custom properties for consistent theming.
 */

/* CSS Custom Properties - Color System Based on Home Page Theme */
:root {
  /* Primary Black Palette - Matching Home Page */
  --color-black-primary: #000000;
  --color-black-secondary: #1a1a1a;
  --color-black-tertiary: #2d2d2d;
  --color-black-quaternary: #404040;
  
  /* Yellow Accent Palette - Matching Home Page */
  --color-yellow-primary: #FFD600;
  --color-yellow-secondary: #FFC107;
  --color-yellow-tertiary: #FFE135;
  --color-yellow-dark: #E6C200;
  --color-yellow-light: #FFED4E;
  
  /* Neutral Colors */
  --color-white: #FFFFFF;
  --color-white-soft: #F8F9FA; /* Soft white from CTA buttons */
  --color-gray-100: #F5F5F5;
  --color-gray-150: #F0F0F0; /* Loading skeleton light */
  --color-gray-200: #E5E5E5;
  --color-gray-220: #E0E0E0; /* Loading skeleton mid */
  --color-gray-250: #E2E8F0; /* Specific gray from stats section */
  --color-gray-300: #CCCCCC;
  --color-gray-400: #999999;
  --color-gray-500: #666666;
  --color-gray-600: #4A4A4A;
  --color-gray-700: #333333;
  --color-gray-800: #1F1F1F;
  --color-gray-850: #1A202C; /* Stats section dark */
  --color-gray-875: #2D3748; /* Stats section darker */
  --color-gray-900: #0F0F0F;
  --color-gray-950: #111111; /* Modern stats section */
  
  /* Status Colors */
  --color-success: #22C55E;
  --color-success-light: #10B981; /* rgba(16, 185, 129, 1) */
  --color-warning: #F59E0B;
  --color-warning-light: #FBBF24; /* rgba(251, 191, 36, 1) */
  --color-warning-orange: #FB923C; /* rgba(251, 146, 60, 1) */
  --color-error: #EF4444;
  --color-info: #3B82F6;
  --color-info-light: #3B82F6; /* rgba(59, 130, 246, 1) */
  
  /* Semantic Colors */
  --color-background-primary: var(--color-black-primary);
  --color-background-secondary: var(--color-black-secondary);
  --color-background-tertiary: var(--color-black-tertiary);
  --color-surface-primary: var(--color-black-secondary);
  --color-surface-secondary: var(--color-black-tertiary);
  --color-surface-elevated: var(--color-black-quaternary);
  
  /* Glassmorphism Backgrounds */
  --color-glass-light: rgba(255, 255, 255, 0.95);
  --color-glass-dark: rgba(255, 255, 255, 0.08);
  --color-glass-dark-hover: rgba(255, 255, 255, 0.12);
  --color-glass-search: rgba(0, 0, 0, 0.3);
  --color-glass-search-focus: rgba(0, 0, 0, 0.5);
  --color-glass-quick-action: rgba(255, 255, 255, 0.1);
  --color-glass-quick-action-hover: rgba(255, 255, 255, 0.2);
  --color-glass-stats: rgba(255, 255, 255, 0.05);
  --color-glass-stats-hover: rgba(255, 255, 255, 0.1);
  
  --color-text-primary: var(--color-white);
  --color-text-secondary: var(--color-gray-300);
  --color-text-tertiary: var(--color-gray-400);
  --color-text-inverse: var(--color-black-primary);
  
  --color-accent-primary: var(--color-yellow-primary);
  --color-accent-secondary: var(--color-yellow-secondary);
  --color-accent-hover: var(--color-yellow-tertiary);
  
  --color-border-primary: var(--color-gray-700);
  --color-border-secondary: var(--color-gray-600);
  --color-border-accent: var(--color-yellow-primary);
  
  /* Glassmorphism Borders */
  --color-border-glass: rgba(255, 255, 255, 0.18);
  --color-border-glass-light: rgba(255, 255, 255, 0.1);
  --color-border-glass-search: rgba(255, 255, 255, 0.1);
  --color-border-glass-stats: rgba(255, 255, 255, 0.1);
  --color-border-glass-quick-action: rgba(255, 255, 255, 0.2);
  
  /* Shadow System */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.7);
  --shadow-accent: 0 0 20px rgba(255, 215, 0, 0.3);
  --shadow-accent-hover: 0 0 30px rgba(255, 215, 0, 0.5);
  
  /* Home Page Specific Shadows */
  --shadow-glassmorphism: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  --shadow-glassmorphism-hover: 0 12px 40px 0 rgba(31, 38, 135, 0.45);
  --shadow-search-button: 0 10px 25px rgba(102, 126, 234, 0.4);
  --shadow-search-modern: 0 8px 25px rgba(255, 214, 0, 0.4);
  --shadow-search-modern-hover: 0 15px 35px rgba(255, 214, 0, 0.6);
  --shadow-quick-action: 0 5px 15px rgba(0, 0, 0, 0.2);
  --shadow-cta-button: 0 10px 20px rgba(0, 0, 0, 0.2);
  --shadow-cta-modern: 0 15px 35px rgba(0, 0, 0, 0.3);
  --shadow-stats-hover: 0 10px 30px rgba(0, 0, 0, 0.3);
  --shadow-modern-search: 0 20px 40px rgba(0, 0, 0, 0.3);
  --shadow-modern-search-hover: 0 30px 60px rgba(0, 0, 0, 0.4);
  --shadow-view-all-link: 0 10px 25px rgba(255, 214, 0, 0.4);
  
  /* Spacing System */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  
  /* Typography Scale */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  --font-size-6xl: 3.75rem;   /* 60px */
  --font-size-7xl: 4rem;      /* 64px - Used in modern stat numbers */
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900; /* Used in modern hero titles */
  
  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  
  /* Border Radius */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  --radius-3xl: 1.5rem;   /* 24px */
  --radius-4xl: 1.25rem;  /* 20px - Used in modern components */
  --radius-5xl: 1.125rem; /* 18px - Used in search components */
  --radius-6xl: 3.125rem; /* 50px - Used in CTA buttons */
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-bounce: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-elastic: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Backdrop Filters */
  --backdrop-blur-sm: blur(10px);
  --backdrop-blur-md: blur(20px);
  --backdrop-blur-lg: blur(30px);
  --backdrop-blur-xl: blur(40px);
  
  /* Gradient System - Based on Home Page Theme */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --gradient-yellow: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  --gradient-yellow-hover: linear-gradient(135deg, #FFED4E 0%, #FFD600 100%);
  --gradient-yellow-light: linear-gradient(135deg, #FFD600 0%, #FFED4E 100%);
  --gradient-dark: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
  --gradient-dark-modern: linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
  --gradient-text-shimmer: linear-gradient(135deg, #FFFFFF 0%, #FFD600 50%, #FFFFFF 100%);
  --gradient-radial-accent: radial-gradient(ellipse at center, rgba(255, 214, 0, 0.05) 0%, transparent 70%);
  --gradient-radial-light: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  --gradient-radial-dark: radial-gradient(circle, rgba(0, 0, 0, 0.1) 0%, transparent 70%);
  --gradient-shimmer: linear-gradient(90deg, transparent, rgba(255, 214, 0, 0.1), transparent);
  --gradient-loading: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  --gradient-loading-light: linear-gradient(90deg, var(--color-gray-150) 25%, var(--color-gray-220) 50%, var(--color-gray-150) 75%);
  --gradient-loading-dark: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 215, 0, 0.2) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  
  /* Additional Home Page Specific Gradients */
  --gradient-stats-bg: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
  --gradient-stats-modern: linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
  --gradient-glassmorphism: linear-gradient(90deg, transparent, rgba(255, 214, 0, 0.1), transparent);
  --gradient-hero-shimmer: linear-gradient(135deg, #FFFFFF 0%, #FFD600 50%, #FFFFFF 100%);
  --gradient-cta-modern: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  --gradient-stat-number: linear-gradient(135deg, #FFD600 0%, #FFED4E 100%);
  
  /* Legacy Variable Aliases for Home.css Compatibility */
  --primary-gradient: var(--gradient-primary);
  --secondary-gradient: var(--gradient-secondary);
  --success-gradient: var(--gradient-success);
  --primary-color: var(--color-accent-primary);
  --secondary-color: var(--color-accent-secondary);
  --bg-secondary: var(--color-background-secondary);
  --border-color: var(--color-border-primary);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --category-color: var(--color-accent-primary);

  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  
  /* Breakpoints (for reference in media queries) */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* Touch Target Sizes */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;
}

/* Base Reset and Typography */
* {
  box-sizing: border-box;
}

html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  line-height: 1.5;
  line-height: var(--line-height-normal);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  background-color: #000000;
  background-color: var(--color-background-primary);
  color: #FFFFFF;
  color: var(--color-text-primary);
  font-size: 1rem;
  font-size: var(--font-size-base);
  line-height: 1.5;
  line-height: var(--line-height-normal);
}

/* Responsive Grid System */
.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  padding: 0 var(--space-4);
}

@media (min-width: 640px) {
  .container {
    padding: 0 1.5rem;
    padding: 0 var(--space-6);
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 2rem;
    padding: 0 var(--space-8);
  }
}

@media (min-width: 1280px) {
  .container {
    padding: 0 2.5rem;
    padding: 0 var(--space-10);
  }
}

/* Grid Layout System */
.grid {
  display: grid;
  gap: 1rem;
  grid-gap: 1rem;
  grid-gap: var(--space-4);
  gap: var(--space-4);
}

/* Mobile First Grid - 1 column default */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

/* Small screens (480px+) - 2 columns */
@media (min-width: 480px) {
  .grid-cols-2-sm { grid-template-columns: repeat(2, 1fr); }
}

/* Medium screens (768px+) - 3 columns */
@media (min-width: 768px) {
  .grid-cols-2-md { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3-md { grid-template-columns: repeat(3, 1fr); }
}

/* Large screens (1024px+) - 4 columns */
@media (min-width: 1024px) {
  .grid-cols-2-lg { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3-lg { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-4-lg { grid-template-columns: repeat(4, 1fr); }
}

/* Extra large screens (1280px+) - 5+ columns */
@media (min-width: 1280px) {
  .grid-cols-5-xl { grid-template-columns: repeat(5, 1fr); }
  .grid-cols-6-xl { grid-template-columns: repeat(6, 1fr); }
}

/* Gap Utilities */
.gap-1 { gap: 0.25rem; gap: var(--space-1); }
.gap-2 { gap: 0.5rem; gap: var(--space-2); }
.gap-3 { gap: 0.75rem; gap: var(--space-3); }
.gap-4 { gap: 1rem; gap: var(--space-4); }
.gap-5 { gap: 1.25rem; gap: var(--space-5); }
.gap-6 { gap: 1.5rem; gap: var(--space-6); }
.gap-8 { gap: 2rem; gap: var(--space-8); }
.gap-10 { gap: 2.5rem; gap: var(--space-10); }
.gap-12 { gap: 3rem; gap: var(--space-12); }

/* Responsive Gap */
@media (max-width: 767px) {
  .gap-responsive { gap: 0.75rem; gap: var(--space-3); }
}

@media (min-width: 768px) {
  .gap-responsive { gap: 1.5rem; gap: var(--space-6); }
}

@media (min-width: 1024px) {
  .gap-responsive { gap: 2rem; gap: var(--space-8); }
}

/* Button System */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  padding: var(--space-3) var(--space-6);
  border: none;
  border-radius: 0.5rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  font-size: var(--font-size-base);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all var(--transition-bounce);
  position: relative;
  overflow: hidden;
  min-height: 44px;
  min-height: var(--touch-target-min);
  min-width: 44px;
  min-width: var(--touch-target-min);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Primary Button */
.btn-primary {
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  background: var(--gradient-yellow);
  color: #000000;
  color: var(--color-text-inverse);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #FFED4E 0%, #FFD600 100%);
  background: var(--gradient-yellow-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
  box-shadow: var(--shadow-lg), var(--shadow-accent);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: var(--shadow-sm);
}

/* Secondary Button */
.btn-secondary {
  background: transparent;
  color: #FFD600;
  color: var(--color-accent-primary);
  border: 2px solid #FFD600;
  border: 2px solid var(--color-accent-primary);
}

.btn-secondary:hover:not(:disabled) {
  background: #FFD600;
  background: var(--color-accent-primary);
  color: #000000;
  color: var(--color-text-inverse);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
  box-shadow: var(--shadow-lg), var(--shadow-accent);
}

/* Ghost Button */
.btn-ghost {
  background: transparent;
  color: #FFFFFF;
  color: var(--color-text-primary);
  border: 1px solid #333333;
  border: 1px solid var(--color-border-primary);
}

.btn-ghost:hover:not(:disabled) {
  background: #2d2d2d;
  background: var(--color-surface-secondary);
  border-color: #FFD600;
  border-color: var(--color-accent-primary);
  color: #FFD600;
  color: var(--color-accent-primary);
  transform: translateY(-1px);
}

/* Button Sizes */
.btn-sm {
  padding: 0.5rem 1rem;
  padding: var(--space-2) var(--space-4);
  font-size: 0.875rem;
  font-size: var(--font-size-sm);
  min-height: 36px;
}

.btn-lg {
  padding: 1rem 2rem;
  padding: var(--space-4) var(--space-8);
  font-size: 1.125rem;
  font-size: var(--font-size-lg);
  min-height: 52px;
}

.btn-xl {
  padding: 1.25rem 2.5rem;
  padding: var(--space-5) var(--space-10);
  font-size: 1.25rem;
  font-size: var(--font-size-xl);
  min-height: 56px;
}

/* Card System */
.card {
  background: #1a1a1a;
  background: var(--color-surface-primary);
  border: 1px solid #333333;
  border: 1px solid var(--color-border-primary);
  border-radius: 1rem;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all var(--transition-bounce);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
  box-shadow: var(--shadow-md);
}

.card:hover {
  transform: translateY(-4px);
  border-color: #FFD600;
  border-color: var(--color-border-accent);
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.3);
  box-shadow: var(--shadow-xl), var(--shadow-accent);
}

.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  transform: translateY(-8px) scale(1.02);
}

.card-interactive:active {
  transform: translateY(-4px) scale(1.01);
}

/* Typography Utilities */
.text-xs { font-size: 0.75rem; font-size: var(--font-size-xs); }
.text-sm { font-size: 0.875rem; font-size: var(--font-size-sm); }
.text-base { font-size: 1rem; font-size: var(--font-size-base); }
.text-lg { font-size: 1.125rem; font-size: var(--font-size-lg); }
.text-xl { font-size: 1.25rem; font-size: var(--font-size-xl); }
.text-2xl { font-size: 1.5rem; font-size: var(--font-size-2xl); }
.text-3xl { font-size: 1.875rem; font-size: var(--font-size-3xl); }
.text-4xl { font-size: 2.25rem; font-size: var(--font-size-4xl); }
.text-5xl { font-size: 3rem; font-size: var(--font-size-5xl); }
.text-6xl { font-size: 3.75rem; font-size: var(--font-size-6xl); }

.font-light { font-weight: 300; font-weight: var(--font-weight-light); }
.font-normal { font-weight: 400; font-weight: var(--font-weight-normal); }
.font-medium { font-weight: 500; font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: 600; font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: 700; font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: 800; font-weight: var(--font-weight-extrabold); }

.text-primary { color: #FFFFFF; color: var(--color-text-primary); }
.text-secondary { color: #CCCCCC; color: var(--color-text-secondary); }
.text-tertiary { color: #999999; color: var(--color-text-tertiary); }
.text-accent { color: #FFD600; color: var(--color-accent-primary); }
.text-success { color: #22C55E; color: var(--color-success); }
.text-warning { color: #F59E0B; color: var(--color-warning); }
.text-error { color: #EF4444; color: var(--color-error); }

/* Responsive Typography */
.text-responsive-sm {
  font-size: clamp(0.875rem, 2vw, 1rem);
  font-size: clamp(var(--font-size-sm), 2vw, var(--font-size-base));
}

.text-responsive-md {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-size: clamp(var(--font-size-base), 2.5vw, var(--font-size-xl));
}

.text-responsive-lg {
  font-size: clamp(1.25rem, 3vw, 1.875rem);
  font-size: clamp(var(--font-size-xl), 3vw, var(--font-size-3xl));
}

.text-responsive-xl {
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-5xl));
}

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Animation Classes */
.animate-fade-in { animation: fadeIn 0.5s ease-out; }
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
.animate-fade-in-down { animation: fadeInDown 0.6s ease-out; }
.animate-slide-in-left { animation: slideInLeft 0.6s ease-out; }
.animate-slide-in-right { animation: slideInRight 0.6s ease-out; }
.animate-pulse { animation: pulse 2s infinite; }
.animate-bounce { animation: bounce 1s infinite; }

/* Staggered Animations */
.animate-stagger > *:nth-child(1) { animation-delay: 0.1s; }
.animate-stagger > *:nth-child(2) { animation-delay: 0.2s; }
.animate-stagger > *:nth-child(3) { animation-delay: 0.3s; }
.animate-stagger > *:nth-child(4) { animation-delay: 0.4s; }
.animate-stagger > *:nth-child(5) { animation-delay: 0.5s; }
.animate-stagger > *:nth-child(6) { animation-delay: 0.6s; }

/* Focus States for Accessibility */
.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 3px #FFD600;
  box-shadow: 0 0 0 3px var(--color-accent-primary);
}

.focus-ring:focus:not(:focus-visible) {
  box-shadow: none;
}

.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #FFD600;
  box-shadow: 0 0 0 3px var(--color-accent-primary);
}

/* Interactive Elements */
.interactive {
  cursor: pointer;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all var(--transition-bounce);
}

.interactive:hover {
  transform: translateY(-2px);
}

.interactive:active {
  transform: translateY(0);
}

/* Loading States */
.loading-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 215, 0, 0.2) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  background: var(--gradient-loading-dark);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.loading-shimmer-light {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background: var(--gradient-loading);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Gradient Utilities */
.bg-gradient-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: var(--gradient-primary); }
.bg-gradient-secondary { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); background: var(--gradient-secondary); }
.bg-gradient-success { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); background: var(--gradient-success); }
.bg-gradient-yellow { background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%); background: var(--gradient-yellow); }
.bg-gradient-yellow-hover { background: linear-gradient(135deg, #FFED4E 0%, #FFD600 100%); background: var(--gradient-yellow-hover); }
.bg-gradient-dark { background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); background: var(--gradient-dark); }
.bg-gradient-dark-modern { background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%); background: var(--gradient-dark-modern); }

.text-gradient-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-success {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  background: var(--gradient-success);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-yellow {
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  background: var(--gradient-yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-shimmer {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFD600 50%, #FFFFFF 100%);
  background: var(--gradient-text-shimmer);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 3s ease-in-out infinite;
}

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

/* Modern Glassmorphism Effects */
.glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-light {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.glass-dark {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Modern Hero Section Styles */
.hero-animated-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background: var(--gradient-primary);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

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

/* Floating Animation */
.float-animation {
  animation: float 20s infinite ease-in-out;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -30px) rotate(120deg); }
  66% { transform: translate(-20px, 20px) rotate(240deg); }
}

/* Rotate Animation */
.rotate-animation {
  animation: rotate 30s linear infinite;
}

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

/* Utility Classes */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive Utilities */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

@media (max-width: 479px) {
  .hidden-xs { display: none; }
  .block-xs { display: block; }
  .flex-xs { display: flex; }
}

@media (min-width: 480px) and (max-width: 639px) {
  .hidden-sm { display: none; }
  .block-sm { display: block; }
  .flex-sm { display: flex; }
}

@media (min-width: 640px) and (max-width: 767px) {
  .hidden-md { display: none; }
  .block-md { display: block; }
  .flex-md { display: flex; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hidden-lg { display: none; }
  .block-lg { display: block; }
  .flex-lg { display: flex; }
}

@media (min-width: 1024px) {
  .hidden-xl { display: none; }
  .block-xl { display: block; }
  .flex-xl { display: flex; }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .animate-fade-in,
  .animate-fade-in-up,
  .animate-fade-in-down,
  .animate-slide-in-left,
  .animate-slide-in-right,
  .animate-pulse,
  .animate-bounce {
    animation: none;
  }
  
  .loading-shimmer {
    animation: none;
    background: rgba(255, 255, 255, 0.1);
  }
}

/* Modern Product Card Styles */
.product-card-modern {
  background: #1a1a1a;
  background: var(--color-surface-primary);
  border: 1px solid #333333;
  border: 1px solid var(--color-border-primary);
  border-radius: 1.5rem;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all var(--transition-bounce);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
  box-shadow: var(--shadow-md);
  position: relative;
}

.product-card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 300ms ease;
  transition: opacity var(--transition-normal);
  z-index: 1;
}

.product-card-modern:hover::before {
  opacity: 0.03;
}

.product-card-modern:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.6);
  box-shadow: var(--shadow-xl);
  border-color: #FFD600;
  border-color: var(--color-border-accent);
}

/* Modern Category Card Styles */
.category-card-modern {
  background: #1a1a1a;
  background: var(--color-surface-primary);
  border-radius: 1.5rem;
  border-radius: var(--radius-3xl);
  padding: 2rem 1.5rem;
  padding: var(--space-8) var(--space-6);
  text-decoration: none;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all var(--transition-bounce);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: var(--shadow-sm);
  border: 1px solid #333333;
  border: 1px solid var(--color-border-primary);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.category-card-modern::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: #FFD600;
  background: var(--color-accent-primary);
  opacity: 0.05;
  transform: rotate(45deg);
  transition: all 0.5s ease;
}

.category-card-modern:hover::before {
  top: -60%;
  left: -60%;
}

.category-card-modern:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.6);
  box-shadow: var(--shadow-xl);
  text-decoration: none;
}

/* Modern Stats Card */
.stat-card-modern {
  padding: 1.5rem;
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 1.5rem;
  border-radius: var(--radius-3xl);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all var(--transition-bounce);
  text-align: center;
}

.stat-card-modern:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.6);
  box-shadow: var(--shadow-xl);
}

.stat-number-enhanced {
  font-size: 3rem;
  font-size: var(--font-size-5xl);
  font-weight: 800;
  font-weight: var(--font-weight-extrabold);
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  background: var(--gradient-yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  margin-bottom: var(--space-2);
}

/* Modern CTA Section */
.cta-section-modern {
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  background: var(--gradient-yellow);
  color: #000000;
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}

.cta-section-modern::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.1) 0%, transparent 70%);
  background: var(--gradient-radial-dark);
  animation: rotate 30s linear infinite;
}

/* Condition Badges */
.condition-badge {
  position: absolute;
  top: 0.5rem;
  top: var(--space-2);
  right: 0.5rem;
  right: var(--space-2);
  padding: 0.25rem 0.75rem;
  padding: var(--space-1) var(--space-3);
  border-radius: 9999px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.condition-badge.new {
  background: rgba(34, 197, 94, 0.9);
  color: white;
}

.condition-badge.like-new {
  background: rgba(59, 130, 246, 0.9);
  color: white;
}

.condition-badge.good {
  background: rgba(251, 191, 36, 0.9);
  color: white;
}

.condition-badge.fair {
  background: rgba(251, 146, 60, 0.9);
  color: white;
}

/* Time Badge */
.time-badge {
  position: absolute;
  top: 0.5rem;
  top: var(--space-2);
  left: 0.5rem;
  left: var(--space-2);
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  padding: 0.25rem 0.75rem;
  padding: var(--space-1) var(--space-3);
  border-radius: 9999px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-size: var(--font-size-xs);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

/* Quick Action Buttons */
.quick-action-btn {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  padding: var(--space-3) var(--space-6);
  border-radius: 0.75rem;
  border-radius: var(--radius-xl);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--space-2);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all var(--transition-bounce);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.quick-action-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 300ms ease, height 300ms ease;
  transition: width var(--transition-normal), height var(--transition-normal);
}

.quick-action-btn:hover::before {
  width: 100%;
  height: 100%;
}

.quick-action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  color: white;
  text-decoration: none;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
  box-shadow: var(--shadow-lg);
}

/* Section Headers */
.section-header-enhanced {
  text-align: center;
  margin-bottom: 4rem;
  margin-bottom: var(--space-16);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.section-title-enhanced {
  font-size: clamp(1.875rem, 4vw, 3.75rem);
  font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-6xl));
  font-weight: 800;
  font-weight: var(--font-weight-extrabold);
  margin-bottom: 1.5rem;
  margin-bottom: var(--space-6);
  line-height: 1.25;
  line-height: var(--line-height-tight);
  position: relative;
  display: inline-block;
}

.section-title-enhanced::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background: var(--gradient-primary);
  border-radius: 0.25rem;
  border-radius: var(--radius-sm);
}

.section-description-enhanced {
  font-size: 1.125rem;
  font-size: var(--font-size-lg);
  color: #CCCCCC;
  color: var(--color-text-secondary);
  line-height: 1.625;
  line-height: var(--line-height-relaxed);
  margin-bottom: 2rem;
  margin-bottom: var(--space-8);
}

@media (prefers-contrast: high) {
  :root {
    --color-border-primary: var(--color-white);
    --color-border-secondary: var(--color-gray-300);
    --color-text-secondary: var(--color-white);
    --color-text-tertiary: var(--color-gray-200);
  }
  
  .card {
    border-width: 2px;
  }
  
  .btn {
    border-width: 2px;
  }
}

/* Print Styles */
@media print {
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  .btn,
  .card {
    border: 1px solid black !important;
  }
  
  .hidden-print {
    display: none !important;
  }
}

/* Dark Mode Support (for future implementation) */
@media (prefers-color-scheme: dark) {
  /* Already using dark theme as default */
}

/* Modern Form Elements */
.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  border: 2px solid #333333;
  border: 2px solid var(--color-border-primary);
  border-radius: 0.75rem;
  border-radius: var(--radius-xl);
  font-size: 1rem;
  font-size: var(--font-size-base);
  color: #FFFFFF;
  color: var(--color-text-primary);
  background: #2d2d2d;
  background: var(--color-surface-secondary);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all var(--transition-bounce);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

.form-input::placeholder {
  color: #999999;
  color: var(--color-text-tertiary);
  font-weight: 400;
  font-weight: var(--font-weight-normal);
}

.form-input:focus {
  outline: none;
  background: #1a1a1a;
  background: var(--color-surface-primary);
  border-color: #FFD600;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.2);
}

.form-input-with-icon {
  padding-left: 3.5rem;
}

.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  border: 2px solid #333333;
  border: 2px solid var(--color-border-primary);
  border-radius: 0.75rem;
  border-radius: var(--radius-xl);
  background: #2d2d2d;
  background: var(--color-surface-secondary);
  color: #FFFFFF;
  color: var(--color-text-primary);
  font-size: 1rem;
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all var(--transition-bounce);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%23FFD600%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27m6 8 4 4 4-4%27%2F%3e%3c%2Fsvg%3e");
  background-position: right 1rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 3rem;
}

.form-select:focus {
  outline: none;
  background-color: #1a1a1a;
  background-color: var(--color-surface-primary);
  border-color: #FFD600;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.2);
}

.form-select option {
  background: #2d2d2d;
  background: var(--color-surface-secondary);
  color: #FFFFFF;
  color: var(--color-text-primary);
  padding: 0.5rem;
  padding: var(--space-2);
}

.form-input-icon {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: rgba(255, 214, 0, 0.8);
  z-index: 2;
  transition: all 300ms ease;
  transition: all var(--transition-normal);
}

.form-input:focus + .form-input-icon {
  color: #FFD600;
  color: var(--color-accent-primary);
  transform: translateY(-50%) scale(1.2);
}

/* Modern Search Container */
.search-container-modern {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-radius: 25px;
  padding: 0.8rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 214, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.search-container-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 0, 0.1), transparent);
  background: var(--gradient-shimmer);
  transition: left 0.8s ease;
}

.search-container-modern:hover::before {
  left: 100%;
}

.search-container-modern:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 214, 0, 0.4);
  background: rgba(255, 255, 255, 0.12);
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .card-interactive,
  .interactive {
    min-height: 48px;
    min-height: var(--touch-target-comfortable);
    min-width: 48px;
    min-width: var(--touch-target-comfortable);
  }
  
  /* Remove hover effects on touch devices */
  .btn:hover,
  .card:hover,
  .interactive:hover {
    transform: none;
  }
}

/* High DPI Display Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Optimize for high DPI displays */
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
/* Consistent UI Styling - Black & Yellow Theme */
/* This file provides consistent styling overrides for all UI components */

/* Import theme variables */

/* Global Material-UI overrides for consistent dark theme */
.MuiDialog-paper {
  background: linear-gradient(135deg, #000000 0%, #111111 100%) !important;
  border: 1px solid rgba(255, 214, 0, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8) !important;
  position: relative;
}

.MuiDialog-paper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FFD600 0%, #E6C200 100%);
  z-index: 1;
}

.MuiDialogTitle-root {
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255, 214, 0, 0.2) !important;
  position: relative;
  z-index: 2;
}

.MuiDialogContent-root {
  color: #FFFFFF !important;
  position: relative;
  z-index: 2;
}

.MuiDialogActions-root {
  border-top: 1px solid rgba(255, 214, 0, 0.2) !important;
  position: relative;
  z-index: 2;
}

/* Consistent Button Styling */
.MuiButton-containedPrimary {
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%) !important;
  color: #111111 !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(255, 214, 0, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.MuiButton-containedPrimary:hover {
  background: linear-gradient(135deg, #FFED4E 0%, #FFD600 100%) !important;
  box-shadow: 0 8px 24px rgba(255, 214, 0, 0.4) !important;
  transform: translateY(-2px) !important;
}

.MuiButton-outlinedPrimary {
  color: #FFD600 !important;
  border-color: #FFD600 !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
}

.MuiButton-outlinedPrimary:hover {
  background-color: rgba(255, 214, 0, 0.1) !important;
  border-color: #FFD600 !important;
  transform: translateY(-1px) !important;
}

/* Consistent Input Styling */
.MuiTextField-root .MuiOutlinedInput-root {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.MuiTextField-root .MuiOutlinedInput-root fieldset {
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-width: 2px !important;
}

.MuiTextField-root .MuiOutlinedInput-root:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.MuiTextField-root .MuiOutlinedInput-root:hover fieldset {
  border-color: rgba(255, 214, 0, 0.5) !important;
}

.MuiTextField-root .MuiOutlinedInput-root.Mui-focused {
  background-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.2) !important;
}

.MuiTextField-root .MuiOutlinedInput-root.Mui-focused fieldset {
  border-color: #FFD600 !important;
}

.MuiTextField-root .MuiInputLabel-root {
  color: rgba(255, 255, 255, 0.7) !important;
}

.MuiTextField-root .MuiInputLabel-root.Mui-focused {
  color: #FFD600 !important;
}

.MuiTextField-root .MuiOutlinedInput-input {
  color: #FFFFFF !important;
}

.MuiTextField-root .MuiOutlinedInput-input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  opacity: 1 !important;
}

.MuiTextField-root .MuiFormHelperText-root {
  color: rgba(255, 255, 255, 0.6) !important;
}

.MuiTextField-root .MuiFormHelperText-root.Mui-error {
  color: #EF4444 !important;
}

/* Consistent Select Styling */
.MuiSelect-root {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #FFFFFF !important;
}

.MuiSelect-icon {
  color: #FFD600 !important;
}

.MuiMenu-paper {
  background-color: #111111 !important;
  border: 1px solid rgba(255, 214, 0, 0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.MuiMenuItem-root {
  color: #FFFFFF !important;
}

.MuiMenuItem-root:hover {
  background-color: rgba(255, 214, 0, 0.1) !important;
}

.MuiMenuItem-root.Mui-selected {
  background-color: rgba(255, 214, 0, 0.15) !important;
  color: #FFD600 !important;
}

/* Consistent Checkbox Styling */
.MuiCheckbox-root {
  color: rgba(255, 255, 255, 0.7) !important;
}

.MuiCheckbox-root.Mui-checked {
  color: #FFD600 !important;
}

/* Consistent Radio Button Styling */
.MuiRadio-root {
  color: rgba(255, 255, 255, 0.7) !important;
}

.MuiRadio-root.Mui-checked {
  color: #FFD600 !important;
}

/* Consistent Switch Styling */
.MuiSwitch-root .MuiSwitch-track {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.MuiSwitch-root .Mui-checked + .MuiSwitch-track {
  background-color: rgba(255, 214, 0, 0.5) !important;
}

.MuiSwitch-root .MuiSwitch-thumb {
  background-color: #FFFFFF !important;
}

.MuiSwitch-root .Mui-checked .MuiSwitch-thumb {
  background-color: #FFD600 !important;
}

/* Consistent Slider Styling */
.MuiSlider-root {
  color: #FFD600 !important;
}

.MuiSlider-track {
  background-color: #FFD600 !important;
}

.MuiSlider-thumb {
  background-color: #FFD600 !important;
  border: 2px solid #FFD600 !important;
}

.MuiSlider-thumb:hover {
  box-shadow: 0 0 0 8px rgba(255, 214, 0, 0.16) !important;
}

/* Consistent Chip Styling */
.MuiChip-root {
  background-color: rgba(255, 214, 0, 0.1) !important;
  color: #FFD600 !important;
  border: 1px solid rgba(255, 214, 0, 0.3) !important;
}

.MuiChip-root:hover {
  background-color: rgba(255, 214, 0, 0.2) !important;
}

.MuiChip-deleteIcon {
  color: rgba(255, 214, 0, 0.7) !important;
}

.MuiChip-deleteIcon:hover {
  color: #FFD600 !important;
}

/* Consistent Alert Styling */
.MuiAlert-root {
  border-radius: 12px !important;
  border: 1px solid !important;
}

.MuiAlert-standardSuccess {
  background-color: rgba(16, 185, 129, 0.1) !important;
  color: #10B981 !important;
  border-color: #10B981 !important;
}

.MuiAlert-standardError {
  background-color: rgba(239, 68, 68, 0.1) !important;
  color: #EF4444 !important;
  border-color: #EF4444 !important;
}

.MuiAlert-standardWarning {
  background-color: rgba(255, 214, 0, 0.1) !important;
  color: #FFD600 !important;
  border-color: #FFD600 !important;
}

.MuiAlert-standardInfo {
  background-color: rgba(255, 214, 0, 0.1) !important;
  color: #FFD600 !important;
  border-color: #FFD600 !important;
}

/* Consistent Tooltip Styling */
.MuiTooltip-tooltip {
  background-color: #111111 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 214, 0, 0.3) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.MuiTooltip-arrow {
  color: #111111 !important;
}

/* Consistent Snackbar Styling */
.MuiSnackbar-root .MuiPaper-root {
  background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 214, 0, 0.3) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* Consistent Accordion Styling */
.MuiAccordion-root {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 214, 0, 0.2) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
}

.MuiAccordion-root:before {
  display: none !important;
}

.MuiAccordionSummary-root {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-radius: 12px 12px 0 0 !important;
}

.MuiAccordionSummary-content {
  color: #FFFFFF !important;
}

.MuiAccordionSummary-expandIconWrapper {
  color: #FFD600 !important;
}

.MuiAccordionDetails-root {
  color: rgba(255, 255, 255, 0.8) !important;
  border-top: 1px solid rgba(255, 214, 0, 0.2) !important;
}

/* Consistent Tab Styling */
.MuiTabs-root {
  border-bottom: 1px solid rgba(255, 214, 0, 0.2) !important;
}

.MuiTab-root {
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 500 !important;
}

.MuiTab-root.Mui-selected {
  color: #FFD600 !important;
  font-weight: 600 !important;
}

.MuiTabs-indicator {
  background-color: #FFD600 !important;
  height: 3px !important;
}

/* Consistent Card Styling */
.MuiCard-root {
  background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%) !important;
  border: 1px solid rgba(255, 214, 0, 0.2) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.MuiCard-root:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 214, 0, 0.4) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4) !important;
}

.MuiCardHeader-root {
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255, 214, 0, 0.2) !important;
}

.MuiCardContent-root {
  color: rgba(255, 255, 255, 0.8) !important;
}

.MuiCardActions-root {
  border-top: 1px solid rgba(255, 214, 0, 0.2) !important;
}

/* Consistent List Styling */
.MuiList-root {
  background-color: transparent !important;
}

.MuiListItem-root {
  color: #FFFFFF !important;
  border-radius: 8px !important;
  margin-bottom: 4px !important;
}

.MuiListItem-root:hover {
  background-color: rgba(255, 214, 0, 0.1) !important;
}

.MuiListItemIcon-root {
  color: #FFD600 !important;
  min-width: 40px !important;
}

.MuiListItemText-primary {
  color: #FFFFFF !important;
}

.MuiListItemText-secondary {
  color: rgba(255, 255, 255, 0.7) !important;
}

.MuiDivider-root {
  background-color: rgba(255, 214, 0, 0.2) !important;
}

/* Consistent Table Styling */
.MuiTable-root {
  background-color: transparent !important;
}

.MuiTableHead-root {
  background-color: rgba(255, 214, 0, 0.1) !important;
}

.MuiTableCell-head {
  color: #FFD600 !important;
  font-weight: 600 !important;
  border-bottom: 2px solid rgba(255, 214, 0, 0.3) !important;
}

.MuiTableCell-body {
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.MuiTableRow-root:hover {
  background-color: rgba(255, 214, 0, 0.05) !important;
}

/* Consistent Pagination Styling */
.MuiPagination-root .MuiPaginationItem-root {
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.MuiPagination-root .MuiPaginationItem-root:hover {
  background-color: rgba(255, 214, 0, 0.1) !important;
  border-color: #FFD600 !important;
}

.MuiPagination-root .MuiPaginationItem-root.Mui-selected {
  background-color: #FFD600 !important;
  color: #111111 !important;
  border-color: #FFD600 !important;
}

/* Consistent Stepper Styling */
.MuiStepper-root {
  background-color: transparent !important;
}

.MuiStepLabel-label {
  color: rgba(255, 255, 255, 0.7) !important;
}

.MuiStepLabel-label.Mui-active {
  color: #FFD600 !important;
  font-weight: 600 !important;
}

.MuiStepLabel-label.Mui-completed {
  color: #FFD600 !important;
}

.MuiStepIcon-root {
  color: rgba(255, 255, 255, 0.3) !important;
}

.MuiStepIcon-root.Mui-active {
  color: #FFD600 !important;
}

.MuiStepIcon-root.Mui-completed {
  color: #FFD600 !important;
}

.MuiStepConnector-line {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.MuiStepConnector-root.Mui-active .MuiStepConnector-line {
  border-color: #FFD600 !important;
}

.MuiStepConnector-root.Mui-completed .MuiStepConnector-line {
  border-color: #FFD600 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .MuiDialog-paper {
    margin: 16px !important;
    width: calc(100% - 32px) !important;
    max-width: none !important;
  }
  
  .MuiButton-root {
    min-height: 48px !important;
  }
  
  .MuiTextField-root .MuiOutlinedInput-input {
    padding: 14px 16px !important;
  }
}
/* Modern Footer Styles */
.modern-footer {
  position: relative;
  background: #000000;
  color: #FFFFFF;
  overflow: hidden;
  margin-top: auto;
}

.footer-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.footer-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #111111 0%, #1a1a1a 50%, #000000 100%);
}

.footer-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="footerGrid" width="60" height="60" patternUnits="userSpaceOnUse"><path d="M 60 0 L 0 0 0 60" fill="none" stroke="rgba(255,214,0,0.05)" stroke-width="1"%2F></pattern></defs><rect width="100%" height="100%" fill="url(%23footerGrid)"%2F></svg>');
  opacity: 0.3;
}

.footer-content {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 4rem 2rem 0;
}

/* Main Footer Content */
.footer-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-gap: 3rem;
  gap: 3rem;
  margin-bottom: 3rem;
}

/* Brand Section */
.footer-brand {
  max-width: 400px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.footer-logo-image {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(255, 214, 0, 0.3);
  transition: all 0.3s ease;
}

.footer-logo-image:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 12px 30px rgba(255, 214, 0, 0.5);
}

.footer-brand-name {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #FFD600 0%, #FFED4E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.footer-description {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2rem;
}

.footer-social {
  display: flex;
  gap: 1rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(255, 214, 0, 0.2);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.social-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 0, 0.2), transparent);
  transition: left 0.5s ease;
}

.social-link:hover::before {
  left: 100%;
}

.social-link:hover {
  background: rgba(255, 214, 0, 0.1);
  border-color: rgba(255, 214, 0, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(255, 214, 0, 0.2);
}

.social-icon {
  font-size: 1.5rem;
  position: relative;
  z-index: 2;
}

/* Instagram Logo Styling */
.instagram-link {
  background: linear-gradient(45deg, #E4405F, #C13584, #833AB4);
  border-color: rgba(228, 64, 95, 0.3);
}

.instagram-link:hover {
  background: linear-gradient(45deg, #E4405F, #C13584, #833AB4);
  border-color: rgba(228, 64, 95, 0.6);
  box-shadow: 0 10px 25px rgba(228, 64, 95, 0.4);
}

.instagram-logo {
  width: 24px;
  height: 24px;
  color: #FFFFFF;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.instagram-link:hover .instagram-logo {
  transform: scale(1.1);
}

/* LinkedIn Logo Styling */
.linkedin-link {
  background: #0077B5;
  border-color: rgba(0, 119, 181, 0.3);
}

.linkedin-link:hover {
  background: #005885;
  border-color: rgba(0, 119, 181, 0.6);
  box-shadow: 0 10px 25px rgba(0, 119, 181, 0.4);
}

.linkedin-logo {
  width: 24px;
  height: 24px;
  color: #FFFFFF;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.linkedin-link:hover .linkedin-logo {
  transform: scale(1.1);
}

/* Footer Sections */
.footer-section {
  display: flex;
  flex-direction: column;
}

.footer-section-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #FFD600;
  margin-bottom: 1.5rem;
  position: relative;
}

.footer-section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, #FFD600, transparent);
  border-radius: 1px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  padding-left: 0;
}

.footer-link::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 2px;
  background: #FFD600;
  transition: width 0.3s ease;
}

.footer-link:hover::before {
  width: 10px;
}

.footer-link:hover {
  color: #FFD600;
  text-decoration: none;
  transform: translateX(5px);
}



/* Footer Bottom */
.footer-bottom {
  border-top: 1px solid rgba(255, 214, 0, 0.2);
  padding: 2rem 0;
}

.footer-bottom-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-copyright p,
.footer-made-with p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.heart {
  color: #FF6B6B;
  animation: heartbeat 2s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.footer-badges {
  display: flex;
  gap: 1rem;
}

.footer-badge {
  background: rgba(255, 214, 0, 0.1);
  color: #FFD600;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(255, 214, 0, 0.2);
  transition: all 0.3s ease;
}

.footer-badge:hover {
  background: rgba(255, 214, 0, 0.2);
  transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  
  .footer-brand {
    grid-column: 1 / -1;
    max-width: none;
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .footer-logo {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .footer-content {
    padding: 3rem 1rem 0;
  }
  
  .footer-main {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  
  .footer-brand {
    margin-bottom: 1rem;
  }
  
  .footer-social {
    justify-content: center;
  }
  

  
  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  
  .footer-badges {
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .footer-content {
    padding: 2rem 0.75rem 0;
  }
  

  
  .footer-brand-name {
    font-size: 1.8rem;
  }
  
  .footer-logo-image {
    width: 40px;
    height: 40px;
  }
  
  .social-link {
    width: 45px;
    height: 45px;
  }
  
  .social-icon {
    font-size: 1.3rem;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .footer-logo-image,
  .social-link,
  .footer-link,
  .footer-badge {
    transition: none;
  }
  
  .heart {
    animation: none;
  }
  
  .social-link::before {
    display: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .modern-footer {
    border-top: 2px solid #FFD600;
  }
  
  .footer-link,
  .footer-copyright p,
  .footer-made-with p {
    color: #FFFFFF;
  }
  
  .social-link,
  .footer-badge {
    border: 2px solid #FFD600;
  }
}
/* Bouncing Dots Loader */
.bouncing-dots-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
}

.bouncing-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.bouncing-dot {
  border-radius: 50%;
  animation: bouncingDots 1.4s infinite ease-in-out both;
  will-change: transform;
}

/* Size Variants */
.bouncing-dots-loader--small .bouncing-dot {
  width: 8px;
  height: 8px;
}

.bouncing-dots-loader--medium .bouncing-dot {
  width: 12px;
  height: 12px;
}

.bouncing-dots-loader--large .bouncing-dot {
  width: 16px;
  height: 16px;
}

/* Color Variants */
.bouncing-dots--primary .bouncing-dot {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.bouncing-dots--success .bouncing-dot {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.bouncing-dots--warning .bouncing-dot {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.bouncing-dots--error .bouncing-dot {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.bouncing-dots--white .bouncing-dot {
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.bouncing-dots--dark .bouncing-dot {
  background: linear-gradient(135deg, #374151, #1f2937);
  box-shadow: 0 4px 12px rgba(55, 65, 81, 0.4);
}

/* Animation Delays */
.bouncing-dot--1 {
  animation-delay: -0.32s;
}

.bouncing-dot--2 {
  animation-delay: -0.16s;
}

.bouncing-dot--3 {
  animation-delay: 0s;
}

/* Bouncing Animation */
@keyframes bouncingDots {
  0%, 80%, 100% {
    transform: scale(0.8) translateY(0);
    opacity: 0.7;
  }
  40% {
    transform: scale(1.2) translateY(-20px);
    opacity: 1;
  }
}

/* Text Styling */
.bouncing-dots-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  text-align: center;
  letter-spacing: 0.025em;
  animation: textPulse 2s ease-in-out infinite;
}

@keyframes textPulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

/* Dark Theme Support */
@media (prefers-color-scheme: dark) {
  .bouncing-dots-text {
    color: #94a3b8;
  }
}

/* Hover Effects */
.bouncing-dots-loader:hover .bouncing-dot {
  animation-duration: 1s;
}

.bouncing-dots-loader:hover .bouncing-dots--primary .bouncing-dot {
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.6);
}

.bouncing-dots-loader:hover .bouncing-dots--success .bouncing-dot {
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.6);
}

.bouncing-dots-loader:hover .bouncing-dots--warning .bouncing-dot {
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.6);
}

.bouncing-dots-loader:hover .bouncing-dots--error .bouncing-dot {
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.6);
}

.bouncing-dots-loader:hover .bouncing-dots--white .bouncing-dot {
  box-shadow: 0 6px 16px rgba(255, 255, 255, 0.5);
}

.bouncing-dots-loader:hover .bouncing-dots--dark .bouncing-dot {
  box-shadow: 0 6px 16px rgba(55, 65, 81, 0.6);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .bouncing-dot {
    animation: none;
  }
  
  .bouncing-dots--primary .bouncing-dot,
  .bouncing-dots--success .bouncing-dot,
  .bouncing-dots--warning .bouncing-dot,
  .bouncing-dots--error .bouncing-dot,
  .bouncing-dots--white .bouncing-dot,
  .bouncing-dots--dark .bouncing-dot {
    opacity: 0.8;
    animation: simplePulse 2s ease-in-out infinite;
  }
  
  @keyframes simplePulse {
    0%, 100% {
      opacity: 0.5;
    }
    50% {
      opacity: 1;
    }
  }
  
  .bouncing-dots-text {
    animation: none;
    opacity: 0.8;
  }
}

/* Full Screen Loader Variant */
.bouncing-dots-loader--fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.bouncing-dots-loader--fullscreen .bouncing-dots-text {
  font-size: 16px;
  color: #ffffff;
}

/* Page Transition Loader */
.bouncing-dots-loader--page-transition {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (prefers-color-scheme: dark) {
  .bouncing-dots-loader--page-transition {
    background: rgba(30, 30, 30, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
  }
}

/* Inline Loader Variant */
.bouncing-dots-loader--inline {
  display: inline-flex;
  padding: 8px;
  gap: 8px;
}

.bouncing-dots-loader--inline .bouncing-dots {
  gap: 4px;
}

.bouncing-dots-loader--inline .bouncing-dot {
  width: 6px;
  height: 6px;
}

.bouncing-dots-loader--inline .bouncing-dots-text {
  font-size: 12px;
  margin-left: 8px;
}

/* Button Loader Variant */
.bouncing-dots-loader--button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}

.bouncing-dots-loader--button .bouncing-dot {
  width: 4px;
  height: 4px;
}

.bouncing-dots-loader--button .bouncing-dots {
  gap: 3px;
}

.bouncing-dots-loader--button .bouncing-dots-text {
  font-size: 14px;
  margin: 0;
}
/* Import standardized theme variables */

/* Home page now uses standardized CSS custom properties from theme.css */

.home-container {
  min-height: 100vh;
  width: 100%;
  background: var(--color-background-primary);
}

/* Hero Section with Animated Background */
.hero-section {
  background: var(--gradient-primary);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  color: var(--color-text-primary);
  padding: 6rem 1rem 4rem;
  position: relative;
  overflow: hidden;
}

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

/* Animated shapes in background */
.hero-section::before,
.hero-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 20s infinite ease-in-out;
}

.hero-section::before {
  width: 300px;
  height: 300px;
  top: -150px;
  right: -150px;
  animation-delay: 0s;
}

.hero-section::after {
  width: 200px;
  height: 200px;
  bottom: -100px;
  left: -100px;
  animation-delay: 5s;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -30px) rotate(120deg); }
  66% { transform: translate(-20px, 20px) rotate(240deg); }
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  line-height: 1.2;
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-subtitle {
  display: block;
  font-size: 2.5rem;
  font-weight: 600;
  margin-top: 0.5rem;
  opacity: 0.9;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.hero-description {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto 3rem;
  opacity: 0.9;
  line-height: 1.6;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

/* Modern Glassmorphism Search Form */
.search-form {
  margin-bottom: 3rem;
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.search-container {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 0.5rem;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.search-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.45);
}

.search-input-group {
  display: flex;
  flex: 1 1;
  gap: 0.5rem;
}

.search-input {
  flex: 1 1;
  padding: var(--space-4) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: var(--color-surface-secondary);
  transition: all var(--transition-bounce);
}

.search-input:focus {
  outline: none;
  background: var(--color-surface-primary);
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.2);
}

.category-select {
  padding: var(--space-4);
  border: 2px solid transparent;
  border-radius: var(--radius-xl);
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  min-width: 180px;
  cursor: pointer;
  transition: all var(--transition-bounce);
}

.category-select:focus {
  outline: none;
  background: var(--color-surface-primary);
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.2);
}

.search-button {
  background: var(--gradient-primary);
  color: var(--color-text-primary);
  border: none;
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: all var(--transition-bounce);
  min-width: 120px;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.search-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: left 0.3s ease;
}

.search-button:hover::before {
  left: 100%;
}

.search-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.search-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.button-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.search-icon {
  font-size: 1.2rem;
}

/* Quick Actions with Hover Effects */
.quick-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeInUp 0.8s ease-out 0.8s both;
}

.quick-action-btn {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  text-decoration: none;
  padding: 0.8rem 1.5rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.quick-action-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

.quick-action-btn:hover::before {
  width: 100%;
  height: 100%;
}

.quick-action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  color: white;
  text-decoration: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.action-icon {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.quick-action-btn:hover .action-icon {
  transform: scale(1.2);
}

/* Section Styles */
.section-header {
  text-align: center;
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--gradient-primary);
  border-radius: var(--radius-sm);
}

.section-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-top: var(--space-6);
}

.view-all-link {
  color: var(--color-accent-primary);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  transition: all var(--transition-bounce);
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.view-all-link:hover {
  color: var(--color-accent-hover);
  text-decoration: none;
  transform: translateX(5px);
}

/* Modern Categories Section */
.categories-section {
  padding: 5rem 1rem;
  background: var(--bg-secondary);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.category-card {
  background: white;
  border-radius: 20px;
  padding: 2rem 1.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.category-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: var(--category-color);
  opacity: 0.05;
  transform: rotate(45deg);
  transition: all 0.5s ease;
}

.category-card:hover::before {
  top: -60%;
  left: -60%;
}

.category-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  text-decoration: none;
}

.category-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.category-card:hover .category-icon {
  animation: bounce 0.5s ease;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.category-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.category-count {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.category-price {
  color: var(--category-color);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Modern Product Cards */
.featured-section {
  padding: 5rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.products-carousel {
  position: relative;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
}

.product-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  position: relative;
}

.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--primary-gradient);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.product-card:hover::before {
  opacity: 0.03;
}

.product-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-xl);
  text-decoration: none;
}

.product-image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--bg-secondary);
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
}

.product-card:hover .product-image {
  transform: scale(1.1);
}

.condition-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 25px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.condition-badge.new {
  background: rgba(16, 185, 129, 0.9);
  color: white;
}

.condition-badge.like-new {
  background: rgba(59, 130, 246, 0.9);
  color: white;
}

.condition-badge.good {
  background: rgba(251, 191, 36, 0.9);
  color: white;
}

.condition-badge.fair {
  background: rgba(251, 146, 60, 0.9);
  color: white;
}

.time-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 25px;
  font-size: 0.8rem;
  font-weight: 500;
}

.product-info {
  padding: 1.5rem;
  position: relative;
  z-index: 2;
}

.product-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.current-price {
  font-size: 1.3rem;
  font-weight: 700;
  background: var(--success-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.original-price {
  font-size: 1rem;
  color: var(--text-secondary);
  text-decoration: line-through;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.seller-info {
  font-weight: 500;
}

.product-location {
  color: var(--text-secondary);
  opacity: 0.8;
}

.product-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Recent Hostel Section */
.recent-hostel-section {
  padding: 5rem 1rem;
  background: var(--bg-secondary);
  max-width: 1200px;
  margin: 0 auto;
}

.recent-product .seller-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.room-info {
  color: var(--text-secondary);
  font-size: 0.8rem;
  opacity: 0.8;
}

/* Modern CTA Section */
.cta-section {
  background: var(--primary-gradient);
  color: white;
  padding: 5rem 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::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: rotate 30s linear infinite;
}

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

.cta-content {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.cta-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.cta-description {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  opacity: 0.9;
  line-height: 1.6;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-button {
  padding: 1rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
}

.cta-button.primary {
  background: white;
  color: var(--primary-color);
}

.cta-button.primary:hover {
  background: #f8f9fa;
  color: var(--primary-color);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.cta-button.secondary {
  background: transparent;
  color: white;
  border: 2px solid white;
}

.cta-button.secondary:hover {
  background: white;
  color: var(--primary-color);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Modern Statistics Section */
.stats-section {
  padding: 5rem 1rem;
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.stats-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"%2F></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"%2F></svg>');
  opacity: 0.5;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.stat-item {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.stat-number {
  font-size: 3rem;
  font-weight: 800;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 1.1rem;
  color: #e2e8f0;
  font-weight: 500;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary);
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
  animation: float 3s ease-in-out infinite;
}

.browse-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem 2rem;
  background: var(--primary-gradient);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.browse-button:hover {
  background: var(--secondary-gradient);
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.8rem;
  }
  
  .hero-description {
    font-size: 1rem;
  }
  
  .search-container {
    padding: 0.75rem;
  }
  
  .search-input-group {
    flex-direction: column;
  }
  
  .search-input, .category-select {
    padding: 0.75rem 1rem;
  }
  
  .search-button {
    padding: 0.75rem 1.5rem;
  }
  
  .quick-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .quick-action-btn {
    width: 200px;
    justify-content: center;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .categories-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
  }
  
  .category-card {
    padding: 1.5rem 1rem;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .cta-button {
    width: 200px;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 4rem 1rem 3rem;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1.5rem;
  }
  
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .products-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .stat-number {
    font-size: 2.5rem;
  }
}

/* Loading Animations */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-color);
} 
/* 
Modern Search Form */
.hero-search-form-modern {
  margin-bottom: 2rem;
  animation: searchFormSlideIn 1s cubic-bezier(0.4, 0, 0.2, 1) 1.6s both;
}

.search-container-modern {
  max-width: 700px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-radius: 25px;
  padding: 0.8rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 214, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.search-container-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 0, 0.1), transparent);
  transition: left 0.8s ease;
}

.search-container-modern:hover::before {
  left: 100%;
}

.search-container-modern:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 214, 0, 0.4);
  background: rgba(255, 255, 255, 0.12);
}

.search-input-group-modern {
  display: flex;
  flex: 1 1;
  gap: 0.8rem;
}

.search-input-wrapper,
.category-select-wrapper {
  position: relative;
  flex: 1 1;
}

.search-input-wrapper {
  flex: 2 1;
}

.search-input-icon,
.category-select-icon {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: rgba(255, 214, 0, 0.8);
  z-index: 2;
  transition: all 0.3s ease;
}

.search-input-modern {
  width: 100%;
  padding: 1.2rem 1.2rem 1.2rem 3.5rem;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  font-size: 1rem;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
}

.search-input-modern::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
}

.search-input-modern:focus {
  outline: none;
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 214, 0, 0.8);
  box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.2);
  color: #FFFFFF;
}

.search-input-modern:focus + .search-input-icon {
  color: #FFD600;
  transform: translateY(-50%) scale(1.2);
}

.category-select-modern {
  width: 100%;
  padding: 1.2rem 1.2rem 1.2rem 3.5rem;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: #FFFFFF;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%23FFD600%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27m6 8 4 4 4-4%27%2F%3e%3c%2Fsvg%3e");
  background-position: right 1rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 3rem;
}

.category-select-modern:focus {
  outline: none;
  background-color: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 214, 0, 0.8);
  box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.2);
}

.category-select-modern:focus + .category-select-icon {
  color: #FFD600;
  transform: translateY(-50%) scale(1.2);
}

.category-select-modern option {
  background: #1a1a1a;
  color: #FFFFFF;
  padding: 0.5rem;
}

.search-button-modern {
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  color: #000000;
  border: none;
  border-radius: 18px;
  padding: 1.2rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(255, 214, 0, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.search-button-modern:hover {
  background: linear-gradient(135deg, #FFED4E 0%, #FFD600 100%);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 35px rgba(255, 214, 0, 0.6);
}

.search-button-modern:active {
  transform: translateY(-1px) scale(1.01);
}

.search-button-modern:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.search-button-content {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  position: relative;
  z-index: 2;
}

.search-button-icon {
  font-size: 1.3rem;
  transition: transform 0.3s ease;
}

.search-button-modern:hover .search-button-icon {
  transform: scale(1.2) rotate(10deg);
}

.search-button-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.search-button-modern:hover .search-button-ripple {
  width: 300px;
  height: 300px;
}

.search-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-top: 2px solid #000000;
  border-radius: 50%;
  animation: searchSpin 1s linear infinite;
}

@keyframes searchFormSlideIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes searchSpin {
  to { transform: rotate(360deg); }
}

/* Responsive Search Form */
@media (max-width: 768px) {
  .search-container-modern {
    max-width: 100%;
    padding: 0.6rem;
  }
  
  .search-input-group-modern {
    flex-direction: column;
    gap: 0.6rem;
  }
  
  .search-input-wrapper {
    flex: 1 1;
  }
  
  .search-input-modern,
  .category-select-modern {
    padding: 1rem 1rem 1rem 3rem;
    font-size: 0.95rem;
  }
  
  .search-button-modern {
    padding: 1rem 2rem;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .search-container-modern {
    padding: 0.5rem;
  }
  
  .search-input-modern,
  .category-select-modern {
    padding: 0.9rem 0.9rem 0.9rem 2.8rem;
    font-size: 0.9rem;
  }
  
  .search-input-icon,
  .category-select-icon {
    left: 1rem;
    font-size: 1rem;
  }
  
  .search-button-modern {
    padding: 0.9rem 1.5rem;
    font-size: 0.95rem;
  }
}/* Mode
rn Categories Grid */
.categories-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (max-width: 768px) {
  .categories-grid-modern {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .categories-grid-modern {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/* Modern Products Grid */
.products-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (max-width: 768px) {
  .products-grid-modern {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .products-grid-modern {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Enhanced Section Styling */
.section-modern {
  padding: 6rem 2rem;
  position: relative;
}

.section-header-modern {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.section-title-modern {
  font-size: 3.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFD600 50%, #FFFFFF 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 3s ease-in-out infinite;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.section-description-modern {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.view-all-link-modern {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #FFD600;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 0.8rem 1.5rem;
  border: 2px solid #FFD600;
  border-radius: 50px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
}

.view-all-link-modern:hover {
  background: #FFD600;
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(255, 214, 0, 0.4);
  text-decoration: none;
}

.view-all-arrow {
  transition: transform 0.3s ease;
}

.view-all-link-modern:hover .view-all-arrow {
  transform: translateX(5px);
}

/* Modern Home Page Layout */
.home-page-modern {
  background: #000000;
  color: #FFFFFF;
  min-height: 100vh;
}

.home-section-modern {
  position: relative;
  overflow: hidden;
}

.home-section-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(255, 214, 0, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.home-section-content {
  position: relative;
  z-index: 2;
}



/* CTA Section Modern */
.cta-section-modern {
  padding: 8rem 2rem;
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  color: #000000;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section-modern::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.1) 0%, transparent 70%);
  animation: rotate 30s linear infinite;
}

.cta-content-modern {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.cta-title-modern {
  font-size: 4rem;
  font-weight: 900;
  margin-bottom: 2rem;
  line-height: 1.1;
}

.cta-description-modern {
  font-size: 1.4rem;
  margin-bottom: 3rem;
  line-height: 1.6;
  opacity: 0.9;
}

.cta-buttons-modern {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-btn-modern {
  padding: 1.5rem 3rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.2rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  min-width: 200px;
  justify-content: center;
}

.cta-btn-modern.primary {
  background: #000000;
  color: #FFD600;
  border: 2px solid #000000;
}

.cta-btn-modern.primary:hover {
  background: transparent;
  color: #000000;
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  text-decoration: none;
}

.cta-btn-modern.secondary {
  background: transparent;
  color: #000000;
  border: 2px solid #000000;
}

.cta-btn-modern.secondary:hover {
  background: #000000;
  color: #FFD600;
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  text-decoration: none;
}

/* Responsive Design for Modern Elements */
@media (max-width: 768px) {
  .section-title-modern {
    font-size: 2.8rem;
  }
  
  .section-description-modern {
    font-size: 1.1rem;
  }
  

  
  .cta-title-modern {
    font-size: 3rem;
  }
  
  .cta-description-modern {
    font-size: 1.2rem;
  }
  
  .cta-buttons-modern {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .section-title-modern {
    font-size: 2.2rem;
  }
  
  .stats-grid-modern {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .stat-number-enhanced {
    font-size: 2.5rem;
  }
  
  .cta-title-modern {
    font-size: 2.5rem;
  }
  
  .cta-btn-modern {
    padding: 1.2rem 2rem;
    font-size: 1.1rem;
  }
}
/* Modern Hero Section Styles */
.hero-section-modern {
  position: relative;
  padding: 4rem 2rem 2rem;
  background: #000000;
  color: white;
  text-align: center;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-section-modern.hero-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Modern Background */
.hero-background-modern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(255, 214, 0, 0.1) 0%, rgba(0, 0, 0, 0.8) 70%);
  animation: pulseGlow 4s ease-in-out infinite alternate;
}

.hero-mouse-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: all 0.3s ease;
}

@keyframes pulseGlow {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* Floating Elements */
.hero-floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.floating-element {
  position: absolute;
  font-size: 2rem;
  opacity: 0.6;
  animation: float 6s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 214, 0, 0.5));
}

.floating-element-1 {
  top: 20%;
  right: 15%;
  animation-delay: 0s;
  animation-duration: 8s;
  font-size: 3rem;
  background: linear-gradient(45deg, #E4405F, #C13584);
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 8px 20px rgba(228, 64, 95, 0.3);
}

@keyframes float {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg); 
    opacity: 0.6;
  }
  50% { 
    transform: translateY(-20px) rotate(180deg); 
    opacity: 0.8;
  }
}

/* Logo - Clean standalone image like PNG with transparent background */
.hero-main-logo {
  width: 120px;
  height: 120px;
  position: relative;
  z-index: 2;
  margin-bottom: 2rem;
  animation: logoEntrance 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.hero-main-logo:hover {
  transform: scale(1.05);
}



@keyframes logoEntrance {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-180deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}



/* Modern Content */
.hero-content-modern {
  position: relative;
  z-index: 2;
  max-width: 900px;
  width: 100%;
}

.hero-title-modern {
  font-size: 4rem;
  font-weight: 900;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  animation: titleSlideIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.8s both;
}

.title-line-1 {
  display: block;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFD600 50%, #FFFFFF 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 3s ease-in-out infinite;
}

.hero-subtitle-modern {
  display: block;
  font-size: 2.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, #FFD600 0%, #FFED4E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: 0.5rem;
  animation: subtitleSlideIn 1s cubic-bezier(0.4, 0, 0.2, 1) 1s both;
}

@keyframes titleSlideIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes subtitleSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

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

.hero-description-modern {
  font-size: 1.4rem;
  margin-bottom: 3rem;
  opacity: 0.9;
  line-height: 1.7;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  animation: descriptionFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 1.2s both;
}

@keyframes descriptionFadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 0.9;
    transform: translateY(0);
  }
}

/* Enhanced Features */
.hero-features-modern {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 3rem 0;
  flex-wrap: wrap;
  animation: featuresSlideUp 1s cubic-bezier(0.4, 0, 0.2, 1) 1.4s both;
}

.feature-item-modern {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  padding: 1.5rem 2rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 214, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.feature-item-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 0, 0.1), transparent);
  transition: left 0.6s ease;
}

.feature-item-modern:hover::before {
  left: 100%;
}

.feature-item-modern:hover {
  transform: translateY(-8px) scale(1.05);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 214, 0, 0.5);
  box-shadow: 0 20px 40px rgba(255, 214, 0, 0.2);
}

.feature-icon-modern {
  font-size: 2.5rem;
  background: linear-gradient(135deg, #FFD600, #FFED4E);
  border-radius: 16px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(255, 214, 0, 0.3);
  transition: all 0.3s ease;
}

.feature-item-modern:hover .feature-icon-modern {
  transform: scale(1.2) rotate(10deg);
  box-shadow: 0 12px 24px rgba(255, 214, 0, 0.5);
}

.feature-text-modern {
  font-weight: 600;
  font-size: 1rem;
  color: #FFFFFF;
  text-align: center;
}

@keyframes featuresSlideUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced Search */
.hero-search-modern {
  margin-bottom: 3rem;
  animation: searchFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 1.6s both;
}

@keyframes searchFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Enhanced CTA Buttons */
.hero-cta-buttons-modern {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin: 3rem 0 2rem 0;
  flex-wrap: wrap;
  animation: ctaSlideIn 1s cubic-bezier(0.4, 0, 0.2, 1) 1.8s both;
}

.cta-button-modern {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 2.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  min-width: 180px;
  justify-content: center;
}

.cta-button-modern.primary {
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  color: #000000;
  box-shadow: 0 8px 25px rgba(255, 214, 0, 0.4);
}

.cta-button-modern.primary:hover {
  background: linear-gradient(135deg, #FFED4E 0%, #FFD600 100%);
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 15px 35px rgba(255, 214, 0, 0.6);
  color: #000000;
  text-decoration: none;
}

.cta-button-modern.secondary {
  background: transparent;
  color: #FFD600;
  border-color: #FFD600;
  box-shadow: 0 8px 25px rgba(255, 214, 0, 0.2);
}

.cta-button-modern.secondary:hover {
  background: rgba(255, 214, 0, 0.1);
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 15px 35px rgba(255, 214, 0, 0.4);
  color: #FFD600;
  text-decoration: none;
}

.cta-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.cta-button-modern:hover .cta-ripple {
  width: 300px;
  height: 300px;
}

.cta-icon-modern {
  font-size: 1.3rem;
  transition: transform 0.3s ease;
}

.cta-button-modern:hover .cta-icon-modern {
  transform: scale(1.2) rotate(10deg);
}

@keyframes ctaSlideIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced Statistics */
.hero-stats-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255, 214, 0, 0.2);
  animation: statsSlideUp 1s cubic-bezier(0.4, 0, 0.2, 1) 2s both;
}

.stat-item-modern {
  text-align: center;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 214, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-item-modern:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 214, 0, 0.3);
  box-shadow: 0 20px 40px rgba(255, 214, 0, 0.15);
}

.stat-number-modern {
  font-size: 3.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, #FFD600 0%, #FFED4E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  animation: countUp 2s ease-out 2.5s both;
}

.stat-label-modern {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@keyframes statsSlideUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes countUp {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
  animation: scrollIndicatorFade 1s ease 3s both;
  z-index: 10;
}

.scroll-arrow {
  width: 2px;
  height: 30px;
  background: linear-gradient(to bottom, transparent, #FFD600);
  position: relative;
  animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-arrow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #FFD600;
}

.scroll-text {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

@keyframes scrollIndicatorFade {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

.hero-section {
  position: relative;
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  overflow: hidden;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  width: 100%;
}

.hero-content-redesign {
  position: relative;
  z-index: 2;
  max-width: 800px;
  width: 100%;
}

.hero-decoration-redesign {
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  z-index: 1;
}

.hero-decoration-redesign:nth-child(1) {
  top: 10%;
  left: 10%;
  animation: float 6s ease-in-out infinite;
}

.hero-decoration-redesign:nth-child(2) {
  top: 20%;
  right: 15%;
  animation: float 8s ease-in-out infinite reverse;
}

.hero-decoration-redesign:nth-child(3) {
  bottom: 15%;
  left: 20%;
  animation: float 7s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-title-redesign {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
  display: block;
  font-size: 2.5rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 0.5rem;
}

.hero-subtitle-redesign {
  display: block;
  font-size: 2.5rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 0.5rem;
}

/* Hero Features */
.hero-features {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.feature-icon {
  font-size: 1.25rem;
}

.feature-text {
  font-weight: 500;
  font-size: 0.9rem;
}

/* CTA Buttons */
.hero-cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.cta-button.primary {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
}

.cta-button.primary:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  text-decoration: none;
  color: white;
}

.cta-button.secondary {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.5);
}

.cta-button.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  text-decoration: none;
  color: white;
}

.cta-icon {
  font-size: 1.1rem;
}

/* Hero Stats */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  background: linear-gradient(45deg, #fff, #f0f8ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
  font-weight: 500;
}

.hero-description {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  opacity: 0.9;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-search {
  margin-bottom: 2rem;
}

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

/* Responsive Design */
@media (max-width: 1024px) {
  .hero-section-modern {
    padding: 3rem 1.5rem 2rem;
    min-height: 75vh;
  }
  
  .hero-main-logo {
    width: 100px;
    height: 100px;
  }
  

  
  .hero-title-modern {
    font-size: 3.2rem;
  }
  
  .hero-subtitle-modern {
    font-size: 2.2rem;
  }
  
  .hero-description-modern {
    font-size: 1.2rem;
  }
  
  .hero-features-modern {
    gap: 1.5rem;
  }
  
  .feature-item-modern {
    padding: 1.2rem 1.5rem;
  }
  
  .stat-number-modern {
    font-size: 3rem;
  }
}

@media (max-width: 768px) {
  .hero-section-modern {
    padding: 2rem 1rem 1.5rem;
    min-height: 70vh;
  }
  
  .hero-main-logo {
    width: 80px;
    height: 80px;
  }
  

  
  .hero-title-modern {
    font-size: 2.8rem;
  }
  
  .hero-subtitle-modern {
    font-size: 1.8rem;
  }
  
  .hero-description-modern {
    font-size: 1.1rem;
    margin-bottom: 2rem;
  }
  
  .hero-features-modern {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .feature-item-modern {
    padding: 1rem;
  }
  
  .feature-icon-modern {
    width: 50px;
    height: 50px;
    font-size: 2rem;
  }
  
  .hero-cta-buttons-modern {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 1.5rem 0;
  }
  
  .cta-button-modern {
    width: 100%;
    max-width: 280px;
  }
  
  .hero-stats-modern {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .stat-number-modern {
    font-size: 2.5rem;
  }
  
  .floating-element {
    font-size: 1.5rem;
  }
  
  .floating-element img {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  .hero-section-modern {
    padding: 1.5rem 0.75rem 1rem;
    min-height: 65vh;
  }
  
  .hero-main-logo {
    width: 70px;
    height: 70px;
  }
  

  
  .hero-title-modern {
    font-size: 2.2rem;
  }
  
  .hero-subtitle-modern {
    font-size: 1.5rem;
  }
  
  .hero-description-modern {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .hero-features-modern {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  
  .feature-item-modern {
    padding: 0.8rem;
    flex-direction: row;
    text-align: left;
  }
  
  .feature-icon-modern {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
  
  .cta-button-modern {
    padding: 1rem 2rem;
    font-size: 1rem;
  }
  
  .hero-stats-modern {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
  }
  
  .stat-item-modern {
    padding: 1rem;
  }
  
  .stat-number-modern {
    font-size: 2.2rem;
  }
  
  .scroll-indicator {
    bottom: 2rem;
  }
  
  .floating-element {
    display: none; /* Hide floating elements on very small screens */
  }
}

/* Animation Effects */
.hero-content {
  animation: heroFadeIn 1s ease-out;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .hero-section {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
  }
  
  .hero-subtitle {
    color: rgba(255, 255, 255, 0.8);
  }
  
  .hero-description {
    opacity: 0.8;
  }
}

/* Performance optimizations */
.hero-section {
  contain: layout style paint;
  will-change: transform;
}

.hero-background {
  will-change: opacity;
}
/* Modern Loading Skeleton Styles */
.modern-skeleton-container {
  display: contents;
}

/* Base Skeleton Styles */
.skeleton-text,
.skeleton-image,
.skeleton-icon,
.skeleton-button,
.skeleton-logo,
.skeleton-search {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 214, 0, 0.2) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  background-size: 200% 100%;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.animated .skeleton-text,
.animated .skeleton-image,
.animated .skeleton-icon,
.animated .skeleton-button,
.animated .skeleton-logo,
.animated .skeleton-search {
  animation: modernShimmer 2s ease-in-out infinite;
}

@keyframes modernShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Hero Skeleton */
.modern-skeleton-hero {
  padding: 6rem 2rem 4rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: #000000;
  text-align: center;
}

.skeleton-logo {
  width: 120px;
  height: 120px;
  border-radius: 24px;
  margin-bottom: 2rem;
}

.skeleton-title {
  width: 600px;
  height: 4rem;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.skeleton-subtitle {
  width: 500px;
  height: 3rem;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.skeleton-description {
  width: 700px;
  height: 1.5rem;
  border-radius: 8px;
  margin-bottom: 3rem;
}

.skeleton-search {
  width: 700px;
  height: 4rem;
  border-radius: 25px;
  margin-bottom: 3rem;
}

.skeleton-buttons {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 4rem;
}

.skeleton-button {
  width: 180px;
  height: 3.5rem;
  border-radius: 50px;
}

/* Category Skeleton */
.modern-skeleton-category {
  padding: 2rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.skeleton-icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  margin-bottom: 1rem;
}

.skeleton-title {
  width: 120px;
  height: 1.5rem;
  border-radius: 8px;
}

.skeleton-subtitle {
  width: 80px;
  height: 1rem;
  border-radius: 6px;
}

/* Product Skeleton */
.modern-skeleton-product {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

.skeleton-image {
  width: 100%;
  height: 220px;
  border-radius: 0;
}

.skeleton-content {
  padding: 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.skeleton-price {
  width: 100px;
  height: 2rem;
  border-radius: 8px;
}

.skeleton-meta {
  width: 150px;
  height: 1rem;
  border-radius: 6px;
}

.skeleton-stats {
  display: flex;
  gap: 1rem;
  margin-top: auto;
}

.skeleton-stat {
  width: 60px;
  height: 1rem;
  border-radius: 6px;
}

/* Section Header Skeleton */
.modern-skeleton-section-header {
  text-align: center;
  margin-bottom: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.skeleton-section-title {
  width: 400px;
  height: 3.5rem;
  border-radius: 12px;
}

.skeleton-section-description {
  width: 600px;
  height: 1.5rem;
  border-radius: 8px;
}

/* Card Skeleton */
.modern-skeleton-card {
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  min-height: 150px;
}

.skeleton-line-1 {
  width: 100%;
  height: 1.5rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.skeleton-line-2 {
  width: 80%;
  height: 1rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.skeleton-line-3 {
  width: 60%;
  height: 1rem;
  border-radius: 6px;
}

/* Grid Skeleton */
.modern-skeleton-grid {
  display: grid;
  grid-gap: 2rem;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Page Skeleton */
.modern-page-skeleton {
  background: #000000;
  color: #FFFFFF;
  min-height: 100vh;
}

.skeleton-section {
  padding: 6rem 2rem;
  position: relative;
}

.skeleton-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(255, 214, 0, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.skeleton-section > * {
  position: relative;
  z-index: 2;
}

/* Responsive Design */
@media (max-width: 768px) {
  .modern-skeleton-hero {
    padding: 3rem 1rem 2rem;
    min-height: 85vh;
  }
  
  .skeleton-logo {
    width: 80px;
    height: 80px;
  }
  
  .skeleton-title {
    width: 90%;
    height: 3rem;
  }
  
  .skeleton-subtitle {
    width: 80%;
    height: 2rem;
  }
  
  .skeleton-description {
    width: 95%;
    height: 1.2rem;
  }
  
  .skeleton-search {
    width: 100%;
    height: 3.5rem;
  }
  
  .skeleton-buttons {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  .skeleton-button {
    width: 100%;
    max-width: 280px;
  }
  
  .modern-skeleton-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
  }
  
  .skeleton-section-title {
    width: 90%;
    height: 2.8rem;
  }
  
  .skeleton-section-description {
    width: 95%;
    height: 1.2rem;
  }
}

@media (max-width: 480px) {
  .modern-skeleton-hero {
    padding: 2rem 0.75rem 1.5rem;
    min-height: 80vh;
  }
  
  .skeleton-logo {
    width: 70px;
    height: 70px;
  }
  
  .skeleton-title {
    height: 2.5rem;
  }
  
  .skeleton-subtitle {
    height: 1.8rem;
  }
  
  .modern-skeleton-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .modern-skeleton-category {
    padding: 1.2rem 0.8rem;
    min-height: 140px;
  }
  
  .skeleton-icon {
    width: 60px;
    height: 60px;
  }
  
  .skeleton-section {
    padding: 4rem 1rem;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .animated .skeleton-text,
  .animated .skeleton-image,
  .animated .skeleton-icon,
  .animated .skeleton-button,
  .animated .skeleton-logo,
  .animated .skeleton-search {
    animation: none;
    background: rgba(255, 255, 255, 0.1);
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .skeleton-text,
  .skeleton-image,
  .skeleton-icon,
  .skeleton-button,
  .skeleton-logo,
  .skeleton-search {
    background: rgba(255, 214, 0, 0.3);
    border: 1px solid rgba(255, 214, 0, 0.5);
  }
  
  .modern-skeleton-category,
  .modern-skeleton-product,
  .modern-skeleton-card {
    border: 2px solid rgba(255, 214, 0, 0.5);
  }
}
.error-boundary {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #fafafa;
  border-radius: 8px;
  margin: 20px 0;
}

.error-boundary__container {
  max-width: 600px;
  width: 100%;
  text-align: center;
  background: white;
  border-radius: 12px;
  padding: 40px 30px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
}

.error-boundary__icon {
  font-size: 48px;
  margin-bottom: 20px;
  opacity: 0.8;
}

.error-boundary__content {
  margin-bottom: 30px;
}

.error-boundary__title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 12px 0;
}

.error-boundary__message {
  font-size: 16px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.error-boundary__retry-info {
  font-size: 14px;
  color: #9ca3af;
  margin: 0 0 20px 0;
  font-style: italic;
}

.error-boundary__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.error-boundary__primary-btn {
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 140px;
}

.error-boundary__primary-btn:hover {
  background-color: #2563eb;
  transform: translateY(-1px);
}

.error-boundary__primary-btn:active {
  background-color: #1d4ed8;
  transform: translateY(0);
}

.error-boundary__secondary-btn {
  background-color: transparent;
  color: #6b7280;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 120px;
}

.error-boundary__secondary-btn:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
  color: #374151;
}

.error-boundary__secondary-btn:active {
  background-color: #f3f4f6;
}

.error-boundary__error-id {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 20px;
  font-family: 'Courier New', monospace;
  background-color: #f9fafb;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
}

.error-boundary__details {
  margin-top: 30px;
  text-align: left;
  border-top: 1px solid #e5e7eb;
  padding-top: 20px;
}

.error-boundary__details summary {
  cursor: pointer;
  font-weight: 500;
  color: #6b7280;
  padding: 8px 0;
  outline: none;
}

.error-boundary__details summary:hover {
  color: #374151;
}

.error-boundary__debug {
  margin-top: 16px;
  font-size: 12px;
}

.error-boundary__debug h4 {
  margin: 16px 0 8px 0;
  font-size: 14px;
  color: #374151;
  font-weight: 600;
}

.error-boundary__debug h4:first-child {
  margin-top: 0;
}

.error-boundary__debug pre {
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 12px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.4;
  color: #374151;
  max-height: 200px;
  overflow-y: auto;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .error-boundary {
    padding: 15px;
    margin: 15px 0;
  }

  .error-boundary__container {
    padding: 30px 20px;
  }

  .error-boundary__title {
    font-size: 20px;
  }

  .error-boundary__message {
    font-size: 15px;
  }

  .error-boundary__actions {
    flex-direction: column;
    width: 100%;
  }

  .error-boundary__primary-btn,
  .error-boundary__secondary-btn {
    width: 100%;
    min-width: 0;
    min-width: initial;
  }

  .error-boundary__icon {
    font-size: 40px;
  }
}

/* Tablet responsiveness */
@media (min-width: 641px) and (max-width: 1024px) {
  .error-boundary__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .error-boundary__container {
    border: 2px solid #000;
  }

  .error-boundary__primary-btn {
    border: 2px solid #000;
  }

  .error-boundary__secondary-btn {
    border: 2px solid #000;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .error-boundary__primary-btn,
  .error-boundary__secondary-btn {
    transition: none;
    transform: none;
  }

  .error-boundary__primary-btn:hover,
  .error-boundary__primary-btn:active {
    transform: none;
  }
}
.lazy-component {
  transition: opacity 0.3s ease-in-out;
}

.lazy-component.loading {
  opacity: 0.7;
}

.lazy-component.loaded {
  opacity: 1;
}

.lazy-placeholder {
  min-height: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes loading-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .lazy-placeholder {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
  }
}
/* Modern Card Base Styles */
.modern-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.modern-card:hover {
  text-decoration: none;
  color: inherit;
}

/* Card Background Effects */
.modern-card-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.modern-card-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.modern-card:hover .modern-card-gradient {
  opacity: 1;
}

.modern-card-mouse-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    600px circle at var(--mouse-x) var(--mouse-y),
    rgba(255, 214, 0, 0.1),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modern-card-hovered .modern-card-mouse-gradient {
  opacity: 1;
}

.modern-card-border-gradient {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background: linear-gradient(
    45deg,
    transparent,
    #FFD600,
    transparent
  );
  background: linear-gradient(
    45deg,
    transparent,
    var(--glow-color, #FFD600),
    transparent
  );
  border-radius: 24px;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.modern-card:hover .modern-card-border-gradient {
  opacity: 0.5;
}

/* Card Content */
.modern-card-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Shine Effect */
.modern-card-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.6s ease;
  z-index: 3;
  pointer-events: none;
}

.modern-card:hover .modern-card-shine {
  left: 100%;
}

/* Hover Effects */
.modern-card-lift:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.modern-card-lift-rotate:hover {
  transform: translateY(-8px) rotate(2deg);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);
}

.modern-card-lift-scale:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* Category Card Styles */
.category-card-modern {
  padding: 2rem 1.5rem;
  text-align: center;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: relative;
}

.category-icon-container {
  position: relative;
  margin-bottom: 1rem;
}

.category-icon-modern {
  font-size: 4rem;
  display: block;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 2;
}

.category-card-modern:hover .category-icon-modern {
  transform: scale(1.2) rotate(10deg);
}

.category-icon-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #FFD600 0%, transparent 70%);
  background: radial-gradient(circle, var(--glow-color, #FFD600) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 1;
}

.category-card-modern:hover .category-icon-glow {
  opacity: 0.3;
  transform: translate(-50%, -50%) scale(1.5);
}

.category-info {
  text-align: center;
  flex: 1 1;
}

.category-name-modern {
  font-size: 1.4rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.category-card-modern:hover .category-name-modern {
  color: #FFD600;
  color: var(--glow-color, #FFD600);
}

.category-stats {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.category-count-modern {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  font-weight: 500;
}

.category-price-modern {
  color: #FFD600;
  color: var(--glow-color, #FFD600);
  font-weight: 600;
  font-size: 0.9rem;
}

.category-arrow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-card-modern:hover .category-arrow {
  color: #FFD600;
  color: var(--glow-color, #FFD600);
  transform: translateX(5px);
}

/* Product Card Styles */
.product-card-modern {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.product-image-container-modern {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.product-image-modern {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card-modern:hover .product-image-modern {
  transform: scale(1.1);
}

.product-badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 2;
}

.condition-badge-modern {
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.condition-badge-modern.new {
  background: rgba(34, 197, 94, 0.9);
  color: white;
}

.condition-badge-modern.like-new {
  background: rgba(59, 130, 246, 0.9);
  color: white;
}

.condition-badge-modern.good {
  background: rgba(251, 191, 36, 0.9);
  color: white;
}

.condition-badge-modern.fair {
  background: rgba(251, 146, 60, 0.9);
  color: white;
}

.time-badge-modern {
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: white;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.product-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 2;
}

.product-card-modern:hover .product-overlay {
  opacity: 1;
}

.product-quick-actions {
  display: flex;
  gap: 1rem;
}

.quick-action-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-action-btn:hover {
  background: rgba(255, 214, 0, 0.8);
  color: #000000;
  transform: scale(1.1);
}

.product-info-modern {
  padding: 1.5rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.product-title-modern {
  font-size: 1.2rem;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.product-card-modern:hover .product-title-modern {
  color: #FFD600;
}

.product-price-modern {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
}

.current-price-modern {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #FFD600 0%, #FFED4E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.original-price-modern {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
  font-weight: 500;
}

.product-meta-modern {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto;
}

.seller-info-modern {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.seller-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.seller-location {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.product-stats-modern {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.stat {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .category-card-modern {
    padding: 1.5rem 1rem;
    min-height: 160px;
  }
  
  .category-icon-modern {
    font-size: 3rem;
  }
  
  .category-name-modern {
    font-size: 1.2rem;
  }
  
  .product-image-container-modern {
    height: 180px;
  }
  
  .product-info-modern {
    padding: 1.2rem;
  }
  
  .product-title-modern {
    font-size: 1.1rem;
  }
  
  .current-price-modern {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .category-card-modern {
    padding: 1.2rem 0.8rem;
    min-height: 140px;
  }
  
  .category-icon-modern {
    font-size: 2.5rem;
  }
  
  .category-name-modern {
    font-size: 1.1rem;
  }
  
  .product-image-container-modern {
    height: 160px;
  }
  
  .product-info-modern {
    padding: 1rem;
  }
  
  .product-meta-modern {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .product-stats-modern {
    align-self: flex-end;
  }
}

/* Animation Delays for Staggered Effects */
.modern-card:nth-child(1) { animation-delay: 0.1s; }
.modern-card:nth-child(2) { animation-delay: 0.2s; }
.modern-card:nth-child(3) { animation-delay: 0.3s; }
.modern-card:nth-child(4) { animation-delay: 0.4s; }
.modern-card:nth-child(5) { animation-delay: 0.5s; }
.modern-card:nth-child(6) { animation-delay: 0.6s; }
.modern-card:nth-child(7) { animation-delay: 0.7s; }
.modern-card:nth-child(8) { animation-delay: 0.8s; }

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .modern-card,
  .modern-card *,
  .modern-card::before,
  .modern-card::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .modern-card {
    border: 2px solid #FFD600;
  }
  
  .category-name-modern,
  .product-title-modern {
    color: #FFFFFF;
  }
  
  .current-price-modern {
    color: #FFD600;
    -webkit-text-fill-color: #FFD600;
  }
}
/* Responsive Layout System - Mobile First Approach */

/* Import theme variables */

/* Home Page Layout Container */
.home-page-layout {
  min-height: 100vh;
  background: var(--color-background-primary);
  display: flex;
  flex-direction: column;
}

/* Main Content Area */
.main-content {
  flex: 1 1;
  width: 100%;
}

/* Section Spacing System */
.section {
  padding: var(--space-12) 0;
}

.section-sm {
  padding: var(--space-8) 0;
}

.section-lg {
  padding: var(--space-16) 0;
}

.section-xl {
  padding: var(--space-20) 0;
}

/* Responsive Section Padding */
@media (max-width: 767px) {
  .section {
    padding: var(--space-8) 0;
  }
  
  .section-sm {
    padding: var(--space-6) 0;
  }
  
  .section-lg {
    padding: var(--space-10) 0;
  }
  
  .section-xl {
    padding: var(--space-12) 0;
  }
}

@media (max-width: 479px) {
  .section {
    padding: var(--space-6) 0;
  }
  
  .section-sm {
    padding: var(--space-4) 0;
  }
  
  .section-lg {
    padding: var(--space-8) 0;
  }
  
  .section-xl {
    padding: var(--space-10) 0;
  }
}

/* Items Grid Layout - Mobile First */
.items-grid {
  display: grid;
  width: 100%;
  grid-gap: var(--space-4);
  gap: var(--space-4);
}

/* Mobile (default): 1 column for very small screens */
@media (max-width: 359px) {
  .items-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* Mobile: 2 columns (360px+) */
@media (min-width: 360px) {
  .items-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

/* Small Tablet: 2 columns with larger gap (480px+) */
@media (min-width: 480px) {
  .items-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

/* Tablet: 3 columns (768px+) */
@media (min-width: 768px) {
  .items-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

/* Large Tablet/Small Desktop: 3 columns with larger gap (1024px+) */
@media (min-width: 1024px) {
  .items-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}

/* Desktop: 4 columns (1200px+) */
@media (min-width: 1200px) {
  .items-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }
}

/* Large Desktop: 4 columns with max gap (1400px+) */
@media (min-width: 1400px) {
  .items-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-10);
  }
}

/* Hero Section Responsive Layout */
.hero-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-16) var(--space-4);
  min-height: 80vh;
  justify-content: center;
}

@media (max-width: 767px) {
  .hero-layout {
    padding: var(--space-12) var(--space-4);
    min-height: 70vh;
  }
}

@media (max-width: 479px) {
  .hero-layout {
    padding: var(--space-8) var(--space-4);
    min-height: 60vh;
  }
}

/* Hero Content Layout */
.hero-content-layout {
  max-width: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (max-width: 767px) {
  .hero-content-layout {
    gap: var(--space-6);
  }
}

@media (max-width: 479px) {
  .hero-content-layout {
    gap: var(--space-4);
  }
}

/* Hero Features Layout */
.hero-features-layout {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .hero-features-layout {
    gap: var(--space-4);
  }
}

@media (max-width: 479px) {
  .hero-features-layout {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }
}

/* Hero CTA Layout */
.hero-cta-layout {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .hero-cta-layout {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }
}

/* Hero Stats Layout */
.hero-stats-layout {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .hero-stats-layout {
    gap: var(--space-4);
  }
}

@media (max-width: 479px) {
  .hero-stats-layout {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }
}

/* Section Header Layout */
.section-header-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-8);
  gap: var(--space-4);
}

@media (max-width: 767px) {
  .section-header-layout {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }
}

@media (max-width: 479px) {
  .section-header-layout {
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }
}

/* Loading Grid Layout */
.loading-grid {
  display: grid;
  grid-gap: var(--space-4);
  gap: var(--space-4);
}

/* Match the items grid breakpoints */
@media (max-width: 359px) {
  .loading-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

@media (min-width: 360px) {
  .loading-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

@media (min-width: 480px) {
  .loading-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 768px) {
  .loading-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .loading-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}

@media (min-width: 1200px) {
  .loading-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }
}

@media (min-width: 1400px) {
  .loading-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-10);
  }
}

/* Error/Empty State Layout */
.state-layout {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  padding: var(--space-8);
}

@media (max-width: 767px) {
  .state-layout {
    min-height: 300px;
    padding: var(--space-6);
  }
}

@media (max-width: 479px) {
  .state-layout {
    min-height: 250px;
    padding: var(--space-4);
  }
}

.state-content {
  text-align: center;
  max-width: 500px;
  width: 100%;
}

/* Action Buttons Layout */
.actions-layout {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

@media (max-width: 479px) {
  .actions-layout {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }
}

/* Load More Section Layout */
.load-more-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

@media (max-width: 767px) {
  .load-more-layout {
    gap: var(--space-4);
    margin-top: var(--space-6);
  }
}

/* Touch Target Optimization */
.touch-target {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
}

.touch-target-comfortable {
  min-height: var(--touch-target-comfortable);
  min-width: var(--touch-target-comfortable);
}

/* Interactive Element Spacing */
.interactive-spacing {
  margin: var(--space-2);
}

@media (hover: none) and (pointer: coarse) {
  .interactive-spacing {
    margin: var(--space-3);
  }
}

/* Content Width Constraints */
.content-narrow {
  max-width: 600px;
  margin: 0 auto;
}

.content-medium {
  max-width: 800px;
  margin: 0 auto;
}

.content-wide {
  max-width: 1200px;
  margin: 0 auto;
}

.content-full {
  max-width: 1400px;
  margin: 0 auto;
}

/* Aspect Ratio Utilities */
.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-photo {
  aspect-ratio: 4 / 3;
}

.aspect-portrait {
  aspect-ratio: 3 / 4;
}

/* Responsive Image Container */
.image-container {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-secondary);
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.image-container:hover img {
  transform: scale(1.05);
}

/* Responsive Text Scaling */
.text-scale-sm {
  font-size: clamp(0.875rem, 1.5vw, 1rem);
}

.text-scale-base {
  font-size: clamp(1rem, 2vw, 1.125rem);
}

.text-scale-lg {
  font-size: clamp(1.125rem, 2.5vw, 1.25rem);
}

.text-scale-xl {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
}

.text-scale-2xl {
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.text-scale-3xl {
  font-size: clamp(1.875rem, 5vw, 3rem);
}

.text-scale-4xl {
  font-size: clamp(2.25rem, 6vw, 4rem);
}

/* Responsive Spacing */
.space-responsive-sm {
  padding: clamp(var(--space-2), 2vw, var(--space-4));
}

.space-responsive-md {
  padding: clamp(var(--space-4), 3vw, var(--space-8));
}

.space-responsive-lg {
  padding: clamp(var(--space-6), 4vw, var(--space-12));
}

.space-responsive-xl {
  padding: clamp(var(--space-8), 5vw, var(--space-16));
}

/* Margin Responsive */
.margin-responsive-sm {
  margin: clamp(var(--space-2), 2vw, var(--space-4));
}

.margin-responsive-md {
  margin: clamp(var(--space-4), 3vw, var(--space-8));
}

.margin-responsive-lg {
  margin: clamp(var(--space-6), 4vw, var(--space-12));
}

/* Gap Responsive */
.gap-responsive-sm {
  gap: clamp(var(--space-2), 2vw, var(--space-4));
}

.gap-responsive-md {
  gap: clamp(var(--space-4), 3vw, var(--space-8));
}

.gap-responsive-lg {
  gap: clamp(var(--space-6), 4vw, var(--space-12));
}

/* Viewport Height Utilities */
.min-h-screen {
  min-height: 100vh;
}

.min-h-screen-safe {
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height for mobile */
}

.h-screen {
  height: 100vh;
}

.h-screen-safe {
  height: 100vh;
  height: 100dvh;
}

/* Safe Area Support for Mobile */
@supports (padding: max(0px)) {
  .safe-area-inset-top {
    padding-top: max(var(--space-4), env(safe-area-inset-top));
  }
  
  .safe-area-inset-bottom {
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  }
  
  .safe-area-inset-left {
    padding-left: max(var(--space-4), env(safe-area-inset-left));
  }
  
  .safe-area-inset-right {
    padding-right: max(var(--space-4), env(safe-area-inset-right));
  }
}

/* Print Layout Adjustments */
@media print {
  .items-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-4) !important;
  }
  
  .hero-layout {
    min-height: auto !important;
    padding: var(--space-4) !important;
  }
  
  .section {
    padding: var(--space-4) 0 !important;
  }
  
  .load-more-layout,
  .actions-layout {
    display: none !important;
  }
}

/* Landscape Mobile Optimization */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-layout {
    min-height: 90vh;
    padding: var(--space-6) var(--space-4);
  }
  
  .hero-content-layout {
    gap: var(--space-4);
  }
  
  .section {
    padding: var(--space-6) 0;
  }
}

/* Mobile Keyboard Handling Optimizations */
.mobile-keyboard-open {
  /* Prevent layout shifts when keyboard appears */
  overflow-x: hidden;
}

.mobile-keyboard-open .hero-layout {
  min-height: 50vh;
  padding: var(--space-4) var(--space-4);
}

.mobile-keyboard-open .section {
  padding: var(--space-4) 0;
}

.mobile-keyboard-open .item-card {
  transition: none;
}

.mobile-keyboard-open .item-card:hover {
  transform: none;
}

/* Mobile keyboard input focus improvements */
.mobile-keyboard-open input:focus,
.mobile-keyboard-open textarea:focus,
.mobile-keyboard-open select:focus {
  transform: scale(1.02);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3);
  border-color: #FFD700;
  border-color: var(--primary-yellow, #FFD700);
  outline: none;
}

/* Smooth Scrolling Performance Optimizations */
.is-scrolling * {
  pointer-events: none;
}

.is-scrolling .item-card {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.is-scrolling .item-card:hover {
  transform: translateZ(0);
}

/* Touch Gesture Feedback */
.touch-active {
  background: rgba(255, 215, 0, 0.1);
  transform: scale(0.98);
  transition: all 0.1s ease;
}

.long-press-active {
  background: rgba(255, 215, 0, 0.2);
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.5);
  animation: pulse-yellow 1s infinite;
}

@keyframes pulse-yellow {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.3);
  }
}

/* Mobile Navigation Optimizations */
.mobile-nav-active .item-card {
  transition-duration: 0.1s;
}

.mobile-nav-active .item-card:hover {
  transform: none;
}

/* Enhanced Touch Targets for Mobile */
@media (max-width: 768px) {
  .touch-target {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
  }
  
  .touch-target-large {
    min-height: 56px;
    min-width: 56px;
  }
  
  /* Improve button touch targets */
  .btn {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }
  
  .btn-lg {
    min-height: 56px;
    padding: var(--space-4) var(--space-6);
  }
  
  /* Improve form input touch targets */
  input, textarea, select {
    min-height: 44px;
    padding: var(--space-3);
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

/* Mobile Loading Optimizations */
.mobile-loading-optimized {
  contain: layout style paint;
  will-change: transform;
}

.mobile-loading-optimized img {
  will-change: transform;
  transform: translateZ(0);
}

/* Low-end Device Optimizations */
.low-end-device * {
  animation-duration: 0.1s !important;
  transition-duration: 0.1s !important;
}

.low-end-device .complex-animation {
  animation: none !important;
}

.low-end-device .item-card:hover {
  transform: none !important;
}

.low-end-device .item-card:hover .item-card-image {
  transform: none !important;
}

/* Mobile Swipe Gesture Feedback */
.swipe-feedback-left {
  transform: translateX(-10px);
  transition: transform 0.2s ease;
}

.swipe-feedback-right {
  transform: translateX(10px);
  transition: transform 0.2s ease;
}

.swipe-feedback-up {
  transform: translateY(-10px);
  transition: transform 0.2s ease;
}

.swipe-feedback-down {
  transform: translateY(10px);
  transition: transform 0.2s ease;
}

/* Mobile-specific Grid Optimizations */
@media (max-width: 480px) {
  .items-grid {
    /* Ensure consistent spacing on small screens */
    padding: 0 var(--space-2);
    gap: var(--space-3);
  }
  
  .items-grid > * {
    /* Prevent items from being too small */
    min-width: 140px;
  }
}

/* Mobile Performance: Reduce Motion for Battery Saving */
@media (prefers-reduced-motion: reduce) {
  .touch-active,
  .long-press-active,
  .swipe-feedback-left,
  .swipe-feedback-right,
  .swipe-feedback-up,
  .swipe-feedback-down {
    transition: none;
    transform: none;
    animation: none;
  }
}

/* Mobile Accessibility Improvements */
@media (max-width: 768px) {
  /* Larger focus indicators for mobile */
  *:focus-visible {
    outline: 3px solid #FFD700;
    outline: 3px solid var(--primary-yellow, #FFD700);
    outline-offset: 2px;
  }
  
  /* Better contrast for touch feedback */
  .touch-active {
    background: rgba(255, 215, 0, 0.15);
  }
  
  /* Ensure text remains readable during interactions */
  .touch-active * {
    color: inherit;
  }
}

/* Mobile Viewport Units with Fallbacks */
@supports (height: 100dvh) {
  .mobile-full-height {
    height: 100dvh;
    min-height: 100dvh;
  }
}

@supports not (height: 100dvh) {
  .mobile-full-height {
    height: 100vh;
    min-height: 100vh;
  }
}

/* Mobile-specific Container Adjustments */
@media (max-width: 768px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

/* Mobile Network-aware Loading */
@media (prefers-reduced-data: reduce) {
  .item-card-image {
    background: #f8f9fa;
    background: var(--color-surface-secondary, #f8f9fa);
  }
  
  .loading-shimmer {
    animation: none;
  }
}

/* Mobile Keyboard Handling Optimizations */
.mobile-keyboard-open {
  /* Prevent layout shifts when keyboard appears */
  overflow-x: hidden;
}

.mobile-keyboard-open .hero-layout {
  min-height: 50vh;
  padding: var(--space-4) var(--space-4);
}

.mobile-keyboard-open .section {
  padding: var(--space-4) 0;
}

.mobile-keyboard-open .item-card {
  transition: none;
}

.mobile-keyboard-open .item-card:hover {
  transform: none;
}

/* Mobile keyboard input focus improvements */
.mobile-keyboard-open input:focus,
.mobile-keyboard-open textarea:focus,
.mobile-keyboard-open select:focus {
  transform: scale(1.02);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3);
  border-color: #FFD700;
  border-color: var(--primary-yellow, #FFD700);
  outline: none;
}

/* Smooth Scrolling Performance Optimizations */
.is-scrolling * {
  pointer-events: none;
}

.is-scrolling .item-card {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.is-scrolling .item-card:hover {
  transform: translateZ(0);
}

/* Touch Gesture Feedback */
.touch-active {
  background: rgba(255, 215, 0, 0.1);
  transform: scale(0.98);
  transition: all 0.1s ease;
}

.long-press-active {
  background: rgba(255, 215, 0, 0.2);
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.5);
  animation: pulse-yellow 1s infinite;
}

@keyframes pulse-yellow {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.3);
  }
}

/* Mobile Navigation Optimizations */
.mobile-nav-active .item-card {
  transition-duration: 0.1s;
}

.mobile-nav-active .item-card:hover {
  transform: none;
}

/* Enhanced Touch Targets for Mobile */
@media (max-width: 768px) {
  .touch-target {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
  }
  
  .touch-target-large {
    min-height: 56px;
    min-width: 56px;
  }
  
  /* Improve button touch targets */
  .btn {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }
  
  .btn-lg {
    min-height: 56px;
    padding: var(--space-4) var(--space-6);
  }
  
  /* Improve form input touch targets */
  input, textarea, select {
    min-height: 44px;
    padding: var(--space-3);
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

/* Mobile Loading Optimizations */
.mobile-loading-optimized {
  contain: layout style paint;
  will-change: transform;
}

.mobile-loading-optimized img {
  will-change: transform;
  transform: translateZ(0);
}

/* Low-end Device Optimizations */
.low-end-device * {
  animation-duration: 0.1s !important;
  transition-duration: 0.1s !important;
}

.low-end-device .complex-animation {
  animation: none !important;
}

.low-end-device .item-card:hover {
  transform: none !important;
}

.low-end-device .item-card:hover .item-card-image {
  transform: none !important;
}

/* Mobile Swipe Gesture Feedback */
.swipe-feedback-left {
  transform: translateX(-10px);
  transition: transform 0.2s ease;
}

.swipe-feedback-right {
  transform: translateX(10px);
  transition: transform 0.2s ease;
}

.swipe-feedback-up {
  transform: translateY(-10px);
  transition: transform 0.2s ease;
}

.swipe-feedback-down {
  transform: translateY(10px);
  transition: transform 0.2s ease;
}

/* Mobile-specific Grid Optimizations */
@media (max-width: 480px) {
  .items-grid {
    /* Ensure consistent spacing on small screens */
    padding: 0 var(--space-2);
    gap: var(--space-3);
  }
  
  .items-grid > * {
    /* Prevent items from being too small */
    min-width: 140px;
  }
}

/* Mobile Performance: Reduce Motion for Battery Saving */
@media (prefers-reduced-motion: reduce) {
  .touch-active,
  .long-press-active,
  .swipe-feedback-left,
  .swipe-feedback-right,
  .swipe-feedback-up,
  .swipe-feedback-down {
    transition: none;
    transform: none;
    animation: none;
  }
}

/* Mobile Accessibility Improvements */
@media (max-width: 768px) {
  /* Larger focus indicators for mobile */
  *:focus-visible {
    outline: 3px solid #FFD700;
    outline: 3px solid var(--primary-yellow, #FFD700);
    outline-offset: 2px;
  }
  
  /* Better contrast for touch feedback */
  .touch-active {
    background: rgba(255, 215, 0, 0.15);
  }
  
  /* Ensure text remains readable during interactions */
  .touch-active * {
    color: inherit;
  }
}

/* Mobile Viewport Units with Fallbacks */
@supports (height: 100dvh) {
  .mobile-full-height {
    height: 100dvh;
    min-height: 100dvh;
  }
}

@supports not (height: 100dvh) {
  .mobile-full-height {
    height: 100vh;
    min-height: 100vh;
  }
}

/* Mobile-specific Container Adjustments */
@media (max-width: 768px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

/* Mobile Network-aware Loading */
@media (prefers-reduced-data: reduce) {
  .item-card-image {
    background: #f8f9fa;
    background: var(--color-surface-secondary, #f8f9fa);
  }
  
  .loading-shimmer {
    animation: none;
  }
}

/* Large Screen Optimizations */
@media (min-width: 1600px) {
  .container {
    max-width: 1600px;
  }
  
  .items-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  
  .loading-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: 1800px;
  }
  
  .items-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  
  .loading-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Mobile Keyboard Handling Optimizations */
.mobile-keyboard-open {
  /* Prevent layout shifts when keyboard appears */
  overflow-x: hidden;
}

.mobile-keyboard-open .hero-layout {
  min-height: 50vh;
  padding: var(--space-4) var(--space-4);
}

.mobile-keyboard-open .section {
  padding: var(--space-4) 0;
}

.mobile-keyboard-open .item-card {
  transition: none;
}

.mobile-keyboard-open .item-card:hover {
  transform: none;
}

/* Mobile keyboard input focus improvements */
.mobile-keyboard-open input:focus,
.mobile-keyboard-open textarea:focus,
.mobile-keyboard-open select:focus {
  transform: scale(1.02);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3);
  border-color: #FFD700;
  border-color: var(--primary-yellow, #FFD700);
  outline: none;
}

/* Smooth Scrolling Performance Optimizations */
.is-scrolling * {
  pointer-events: none;
}

.is-scrolling .item-card {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.is-scrolling .item-card:hover {
  transform: translateZ(0);
}

/* Touch Gesture Feedback */
.touch-active {
  background: rgba(255, 215, 0, 0.1);
  transform: scale(0.98);
  transition: all 0.1s ease;
}

.long-press-active {
  background: rgba(255, 215, 0, 0.2);
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.5);
  animation: pulse-yellow 1s infinite;
}

@keyframes pulse-yellow {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.3);
  }
}

/* Mobile Navigation Optimizations */
.mobile-nav-active .item-card {
  transition-duration: 0.1s;
}

.mobile-nav-active .item-card:hover {
  transform: none;
}

/* Enhanced Touch Targets for Mobile */
@media (max-width: 768px) {
  .touch-target {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
  }
  
  .touch-target-large {
    min-height: 56px;
    min-width: 56px;
  }
  
  /* Improve button touch targets */
  .btn {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }
  
  .btn-lg {
    min-height: 56px;
    padding: var(--space-4) var(--space-6);
  }
  
  /* Improve form input touch targets */
  input, textarea, select {
    min-height: 44px;
    padding: var(--space-3);
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

/* Mobile Loading Optimizations */
.mobile-loading-optimized {
  contain: layout style paint;
  will-change: transform;
}

.mobile-loading-optimized img {
  will-change: transform;
  transform: translateZ(0);
}

/* Low-end Device Optimizations */
.low-end-device * {
  animation-duration: 0.1s !important;
  transition-duration: 0.1s !important;
}

.low-end-device .complex-animation {
  animation: none !important;
}

.low-end-device .item-card:hover {
  transform: none !important;
}

.low-end-device .item-card:hover .item-card-image {
  transform: none !important;
}

/* Mobile Swipe Gesture Feedback */
.swipe-feedback-left {
  transform: translateX(-10px);
  transition: transform 0.2s ease;
}

.swipe-feedback-right {
  transform: translateX(10px);
  transition: transform 0.2s ease;
}

.swipe-feedback-up {
  transform: translateY(-10px);
  transition: transform 0.2s ease;
}

.swipe-feedback-down {
  transform: translateY(10px);
  transition: transform 0.2s ease;
}

/* Mobile-specific Grid Optimizations */
@media (max-width: 480px) {
  .items-grid {
    /* Ensure consistent spacing on small screens */
    padding: 0 var(--space-2);
    gap: var(--space-3);
  }
  
  .items-grid > * {
    /* Prevent items from being too small */
    min-width: 140px;
  }
}

/* Mobile Performance: Reduce Motion for Battery Saving */
@media (prefers-reduced-motion: reduce) {
  .touch-active,
  .long-press-active,
  .swipe-feedback-left,
  .swipe-feedback-right,
  .swipe-feedback-up,
  .swipe-feedback-down {
    transition: none;
    transform: none;
    animation: none;
  }
}

/* Mobile Accessibility Improvements */
@media (max-width: 768px) {
  /* Larger focus indicators for mobile */
  *:focus-visible {
    outline: 3px solid #FFD700;
    outline: 3px solid var(--primary-yellow, #FFD700);
    outline-offset: 2px;
  }
  
  /* Better contrast for touch feedback */
  .touch-active {
    background: rgba(255, 215, 0, 0.15);
  }
  
  /* Ensure text remains readable during interactions */
  .touch-active * {
    color: inherit;
  }
}

/* Mobile Viewport Units with Fallbacks */
@supports (height: 100dvh) {
  .mobile-full-height {
    height: 100dvh;
    min-height: 100dvh;
  }
}

@supports not (height: 100dvh) {
  .mobile-full-height {
    height: 100vh;
    min-height: 100vh;
  }
}

/* Mobile-specific Container Adjustments */
@media (max-width: 768px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

/* Mobile Network-aware Loading */
@media (prefers-reduced-data: reduce) {
  .item-card-image {
    background: #f8f9fa;
    background: var(--color-surface-secondary, #f8f9fa);
  }
  
  .loading-shimmer {
    animation: none;
  }
}
.network-status-indicator {
  position: fixed;
  z-index: 9999;
  max-width: 300px;
  min-width: 250px;
  background: white;
  border-radius: 12px;
  box-shadow: 
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  animation: slideIn 0.3s ease-out;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Position variants */
.network-status-indicator--top-right {
  top: 20px;
  right: 20px;
}

.network-status-indicator--top-left {
  top: 20px;
  left: 20px;
}

.network-status-indicator--bottom-right {
  bottom: 20px;
  right: 20px;
}

.network-status-indicator--bottom-left {
  bottom: 20px;
  left: 20px;
}

.network-status-indicator--top-center {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.network-status-indicator--bottom-center {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

/* Status variants */
.network-status-indicator--online {
  border-left: 4px solid #10b981;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.network-status-indicator--offline {
  border-left: 4px solid #ef4444;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.network-status-indicator__content {
  display: flex;
  align-items: center;
  padding: 16px;
  gap: 12px;
}

.network-status-indicator__icon {
  font-size: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.network-status-indicator--offline .network-status-indicator__icon {
  animation: pulse 2s infinite;
}

.network-status-indicator__text {
  flex: 1 1;
  min-width: 0;
}

.network-status-indicator__title {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 2px 0;
  line-height: 1.2;
}

.network-status-indicator__message {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  line-height: 1.3;
}

.network-status-indicator__timestamp {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 4px;
  font-style: italic;
}

.network-status-indicator__actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.network-status-indicator__retry-btn,
.network-status-indicator__dismiss-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.network-status-indicator__retry-btn:hover {
  background-color: rgba(59, 130, 246, 0.1);
  transform: rotate(180deg);
}

.network-status-indicator__dismiss-btn:hover {
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.network-status-indicator__retry-btn:active,
.network-status-indicator__dismiss-btn:active {
  transform: scale(0.95);
}

/* Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

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

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

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

/* Position-specific animations */
.network-status-indicator--top-left {
  animation: slideInLeft 0.3s ease-out;
}

.network-status-indicator--bottom-right,
.network-status-indicator--bottom-left,
.network-status-indicator--bottom-center {
  animation: slideInUp 0.3s ease-out;
}

.network-status-indicator--top-center {
  animation: slideInDown 0.3s ease-out;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .network-status-indicator {
    max-width: calc(100vw - 40px);
    min-width: calc(100vw - 40px);
    left: 20px !important;
    right: 20px !important;
    transform: none !important;
  }

  .network-status-indicator--top-center,
  .network-status-indicator--bottom-center {
    left: 20px;
    transform: none;
  }

  .network-status-indicator__content {
    padding: 14px;
  }

  .network-status-indicator__icon {
    font-size: 20px;
    width: 28px;
    height: 28px;
  }

  .network-status-indicator__title {
    font-size: 13px;
  }

  .network-status-indicator__message {
    font-size: 12px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .network-status-indicator {
    background: #1f2937;
    border-color: #374151;
  }

  .network-status-indicator--online {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
  }

  .network-status-indicator--offline {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
  }

  .network-status-indicator__title {
    color: #f9fafb;
  }

  .network-status-indicator__message {
    color: #d1d5db;
  }

  .network-status-indicator__timestamp {
    color: #9ca3af;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .network-status-indicator {
    border: 2px solid #000;
  }

  .network-status-indicator--online {
    border-left: 6px solid #00ff00;
  }

  .network-status-indicator--offline {
    border-left: 6px solid #ff0000;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .network-status-indicator {
    animation: none;
  }

  .network-status-indicator--offline .network-status-indicator__icon {
    animation: none;
  }

  .network-status-indicator__retry-btn:hover {
    transform: none;
  }

  .network-status-indicator__retry-btn:active,
  .network-status-indicator__dismiss-btn:active {
    transform: none;
  }
}

/* Focus styles for accessibility */
.network-status-indicator__retry-btn:focus,
.network-status-indicator__dismiss-btn:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .network-status-indicator {
    display: none;
  }
}
/**
 * Password Reset Error Handler Component Styles
 */

.password-reset-error-handler {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

.password-reset-error-handler .MuiCard-root {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(26, 26, 26, 0.95) !important;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 16px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 
              0 0 0 1px rgba(255, 214, 0, 0.1) !important;
  overflow: hidden;
}

.password-reset-error-handler .MuiCard-root::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f44336 0%, #ff5722 50%, #f44336 100%);
  background-size: 200% 100%;
  animation: errorGlow 2s ease-in-out infinite;
}

.password-reset-error-handler .MuiCard-root:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 
              0 0 0 1px rgba(255, 214, 0, 0.2);
}

/* Animation for error appearance */
@keyframes errorSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

.password-reset-error-handler {
  animation: errorSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .password-reset-error-handler .MuiCardContent-root {
    padding: 16px !important;
  }
  
  .password-reset-error-handler .MuiButton-root {
    font-size: 0.875rem;
    padding: 8px 16px;
  }
}

/* Loading state animations */
.password-reset-error-handler .MuiLinearProgress-root {
  animation: pulse 2s ease-in-out infinite;
}

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

/* Tip rotation animation */
.password-reset-error-handler .tip-container {
  min-height: 60px;
  display: flex;
  align-items: center;
}

/* Action button hover effects */
.password-reset-error-handler .MuiButton-root {
  transition: all 0.2s ease-in-out;
  border-radius: 8px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 4px 8px 8px 0 !important;
  min-width: 120px !important;
}

.password-reset-error-handler .MuiButton-root:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.password-reset-error-handler .MuiButton-contained {
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%) !important;
  color: #111111 !important;
}

.password-reset-error-handler .MuiButton-contained:hover {
  background: linear-gradient(135deg, #FFED4E 0%, #FFD600 100%) !important;
}

.password-reset-error-handler .MuiButton-outlined {
  border-color: #FFD600 !important;
  color: #FFD600 !important;
  background: rgba(255, 214, 0, 0.05) !important;
}

.password-reset-error-handler .MuiButton-outlined:hover {
  background: rgba(255, 214, 0, 0.1) !important;
  border-color: #FFED4E !important;
}

/* Icon animations */
.password-reset-error-handler .error-icon {
  animation: iconBounce 0.6s ease-out;
}

@keyframes iconBounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Enhanced styling for error content */
.password-reset-error-handler .MuiCardContent-root {
  background: rgba(26, 26, 26, 0.8);
  color: #ffffff;
}

.password-reset-error-handler .MuiTypography-h6 {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.password-reset-error-handler .MuiTypography-body1 {
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.6 !important;
}

.password-reset-error-handler .MuiChip-root {
  background: rgba(255, 214, 0, 0.1) !important;
  color: #FFD600 !important;
  border-color: rgba(255, 214, 0, 0.3) !important;
}

.password-reset-error-handler .MuiLinearProgress-root {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
}

.password-reset-error-handler .MuiLinearProgress-bar {
  background: linear-gradient(90deg, #FFD600 0%, #FFED4E 100%) !important;
  border-radius: 4px !important;
}

.password-reset-error-handler .MuiDivider-root {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Button container spacing */
.password-reset-error-handler .MuiStack-root {
  gap: 12px !important;
}

.password-reset-error-handler .MuiStack-root .MuiButton-root {
  margin: 0 !important;
}

/* Improved tip styling */
.password-reset-error-handler .tip-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.password-reset-error-handler .tip-container li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.8);
}

.password-reset-error-handler .tip-container li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #FFD600;
  font-weight: bold;
  font-size: 1.2em;
}
/**
 * Password Reset Loading State Component Styles
 */

.password-reset-loading-state {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

/* Main loading animation */
.password-reset-loading-state .loading-icon {
  animation: loadingBounce 2s ease-in-out infinite;
}

@keyframes loadingBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Spinning border animation */
.password-reset-loading-state .spinning-border {
  animation: spin 2s linear infinite;
}

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

/* Shimmer effect for top border */
.password-reset-loading-state .shimmer-border::after {
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}

/* Progress bar glow effect */
.password-reset-loading-state .MuiLinearProgress-root {
  position: relative;
  overflow: hidden;
}

.password-reset-loading-state .MuiLinearProgress-bar {
  position: relative;
}

.password-reset-loading-state .MuiLinearProgress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: translateX(-100%);
  animation: progressShimmer 2s infinite;
}

@keyframes progressShimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Tip rotation animation */
.password-reset-loading-state .tip-container {
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.password-reset-loading-state .tip-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 12px;
}

.password-reset-loading-state .tip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.password-reset-loading-state .tip-dot.active {
  animation: dotPulse 1s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}

/* Timer chip animation */
.password-reset-loading-state .timer-chip {
  animation: timerBlink 1s ease-in-out infinite;
}

@keyframes timerBlink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Skeleton loading animations */
.password-reset-loading-state .MuiSkeleton-root {
  animation: skeletonWave 1.6s ease-in-out infinite;
}

@keyframes skeletonWave {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

/* Minimal variant styles */
.password-reset-loading-state--minimal {
  padding: 16px;
  background: rgba(26, 26, 26, 0.8);
  border-radius: 8px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.password-reset-loading-state--minimal .MuiCircularProgress-root {
  animation: gentleSpin 2s linear infinite;
}

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

/* Detailed variant styles */
.password-reset-loading-state--detailed .loading-content {
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .password-reset-loading-state .MuiCardContent-root {
    padding: 24px 16px !important;
  }
  
  .password-reset-loading-state .loading-icon {
    width: 48px !important;
    height: 48px !important;
  }
  
  .password-reset-loading-state .tip-container {
    min-height: 60px;
  }
}

/* Pulsing effect for active states */
.password-reset-loading-state .pulse {
  animation: pulse 2s ease-in-out infinite;
}

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

/* Breathing animation for the main card */
.password-reset-loading-state .MuiCard-root {
  animation: cardBreathe 4s ease-in-out infinite;
}

@keyframes cardBreathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.01);
  }
}
/**
 * Password Reset Success Handler Component Styles
 */

.password-reset-success-handler {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* Success animation entrance */
.password-reset-success-handler {
  animation: successSlideIn 0.5s ease-out;
}

@keyframes successSlideIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Success icon animation */
.password-reset-success-handler .success-icon {
  animation: successIconBounce 0.8s ease-out;
}

@keyframes successIconBounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

/* Gradient border animation */
.password-reset-success-handler .gradient-border::before {
  animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
  0%, 100% {
    background: linear-gradient(90deg, #4CAF50 0%, #45A049 100%);
  }
  50% {
    background: linear-gradient(90deg, #45A049 0%, #4CAF50 100%);
  }
}

/* Security action list animations */
.password-reset-success-handler .security-action {
  animation: fadeInLeft 0.4s ease-out;
  animation-fill-mode: both;
}

.password-reset-success-handler .security-action:nth-child(1) {
  animation-delay: 0.1s;
}

.password-reset-success-handler .security-action:nth-child(2) {
  animation-delay: 0.2s;
}

.password-reset-success-handler .security-action:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Next steps animations */
.password-reset-success-handler .next-step {
  animation: fadeInUp 0.4s ease-out;
  animation-fill-mode: both;
  transition: all 0.3s ease-in-out;
}

.password-reset-success-handler .next-step:nth-child(1) {
  animation-delay: 0.2s;
}

.password-reset-success-handler .next-step:nth-child(2) {
  animation-delay: 0.3s;
}

.password-reset-success-handler .next-step:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Next step hover effects */
.password-reset-success-handler .next-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.password-reset-success-handler .next-step.primary:hover {
  box-shadow: 0 8px 24px rgba(255, 214, 0, 0.3);
}

/* Primary action button animation */
.password-reset-success-handler .primary-button {
  animation: buttonGlow 2s ease-in-out infinite;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes buttonGlow {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(255, 214, 0, 0.3);
  }
  50% {
    box-shadow: 0 8px 24px rgba(255, 214, 0, 0.5);
  }
}

.password-reset-success-handler .primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 214, 0, 0.4);
}

/* Countdown animation */
.password-reset-success-handler .countdown {
  animation: countdownPulse 1s ease-in-out infinite;
}

@keyframes countdownPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

/* Security details expand animation */
.password-reset-success-handler .security-details {
  animation: expandIn 0.3s ease-out;
}

@keyframes expandIn {
  0% {
    opacity: 0;
    max-height: 0;
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    max-height: 200px;
    transform: scaleY(1);
  }
}

/* Chip animations */
.password-reset-success-handler .status-chip {
  animation: chipSlideIn 0.3s ease-out;
}

@keyframes chipSlideIn {
  0% {
    opacity: 0;
    transform: translateX(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Email chip special animation */
.password-reset-success-handler .email-chip {
  animation: emailChipGlow 3s ease-in-out infinite;
}

@keyframes emailChipGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(76, 175, 80, 0);
  }
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .password-reset-success-handler .MuiCardContent-root {
    padding: 24px 16px !important;
  }
  
  .password-reset-success-handler .success-icon {
    width: 64px !important;
    height: 64px !important;
  }
  
  .password-reset-success-handler .next-step {
    margin-bottom: 12px;
  }
  
  .password-reset-success-handler .primary-button {
    font-size: 1rem;
    padding: 12px 24px;
  }
}

/* Loading state for action buttons */
.password-reset-success-handler .button-loading {
  animation: buttonLoading 1.5s ease-in-out infinite;
}

@keyframes buttonLoading {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Success checkmark animation */
.password-reset-success-handler .checkmark {
  animation: checkmarkDraw 0.6s ease-out;
}

@keyframes checkmarkDraw {
  0% {
    stroke-dasharray: 0 100;
  }
  100% {
    stroke-dasharray: 100 0;
  }
}

/* Card hover effect */
.password-reset-success-handler .MuiCard-root {
  transition: all 0.3s ease-in-out;
}

.password-reset-success-handler .MuiCard-root:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

/* Celebration confetti effect (optional) */
.password-reset-success-handler .celebration {
  position: relative;
  overflow: hidden;
}

.password-reset-success-handler .celebration::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(76, 175, 80, 0.1) 0%, transparent 70%);
  animation: celebrationPulse 4s ease-in-out infinite;
}

@keyframes celebrationPulse {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}
/**
 * Mobile Responsive and Accessible Styles for ForgotPassword Component
 */

/* Base mobile-first styles */
.forgot-password-container {
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height for mobile */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  position: relative;
}

.forgot-password-form {
  width: 100%;
  max-width: 400px;
  background: rgba(26, 26, 26, 0.95);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 214, 0, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

/* Mobile optimizations */
@media (max-width: 480px) {
  .forgot-password-container {
    padding: 0.5rem;
    align-items: flex-start;
    padding-top: 2rem;
  }
  
  .forgot-password-form {
    padding: 1rem;
    border-radius: 12px;
    max-width: none;
    margin: 0;
  }
}

/* Touch-friendly form elements */
.forgot-password-form .MuiTextField-root {
  margin-bottom: 1.5rem;
}

.forgot-password-form .MuiOutlinedInput-root {
  min-height: 56px; /* Touch-friendly height */
  font-size: 16px; /* Prevent zoom on iOS */
  transition: all 0.3s ease;
}

@media (max-width: 480px) {
  .forgot-password-form .MuiOutlinedInput-root {
    min-height: 48px;
    font-size: 16px;
  }
}

/* Touch-friendly buttons */
.forgot-password-submit-btn {
  min-height: 56px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  margin-bottom: 1.5rem !important;
  position: relative;
  overflow: hidden;
}

@media (max-width: 480px) {
  .forgot-password-submit-btn {
    min-height: 48px !important;
    font-size: 1rem !important;
  }
}

/* Loading state optimizations */
.forgot-password-loading {
  pointer-events: none;
  opacity: 0.7;
}

.forgot-password-loading .MuiCircularProgress-root {
  width: 20px !important;
  height: 20px !important;
}

/* Header responsive design */
.forgot-password-header {
  text-align: center;
  margin-bottom: 2rem;
}

.forgot-password-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  box-shadow: 0 8px 24px rgba(255, 214, 0, 0.3);
}

@media (max-width: 480px) {
  .forgot-password-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    margin-bottom: 1rem;
  }
  
  .forgot-password-icon .MuiSvgIcon-root {
    font-size: 2rem !important;
  }
}

.forgot-password-title {
  font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #FFD600 0%, #FFED4E 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem !important;
  line-height: 1.2 !important;
}

.forgot-password-subtitle {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
}

/* Back to login link */
.forgot-password-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  color: #FFD600 !important;
  text-decoration: none !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  padding: 0.5rem !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  min-height: 44px !important; /* Touch target */
  justify-content: center !important;
}

.forgot-password-back-link:hover {
  text-decoration: underline !important;
  background: rgba(255, 214, 0, 0.1) !important;
}

.forgot-password-back-link:focus-visible {
  outline: 2px solid #FFD600 !important;
  outline-offset: 2px !important;
}

/* Accessibility enhancements */
.forgot-password-form .MuiFormHelperText-root {
  font-size: 0.875rem;
  margin-top: 0.5rem;
  line-height: 1.4;
}

.forgot-password-form .MuiFormHelperText-root.Mui-error {
  color: #f44336;
  font-weight: 500;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .forgot-password-form {
    border: 2px solid #FFD600;
    background: #000;
  }
  
  .forgot-password-form .MuiOutlinedInput-root {
    border: 2px solid #FFD600;
  }
  
  .forgot-password-submit-btn {
    border: 2px solid #000 !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .forgot-password-form,
  .forgot-password-form * {
    animation: none !important;
    transition: none !important;
  }
  
  .forgot-password-icon {
    transform: none !important;
  }
}

/* Dark mode optimizations (already dark theme) */
.forgot-password-form .MuiOutlinedInput-root {
  background-color: rgba(255, 255, 255, 0.05);
}

.forgot-password-form .MuiOutlinedInput-root:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.forgot-password-form .MuiOutlinedInput-root.Mui-focused {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 2px rgba(255, 214, 0, 0.2);
}

/* Network status indicator positioning */
.forgot-password-container .network-status-indicator {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
}

@media (max-width: 480px) {
  .forgot-password-container .network-status-indicator {
    top: 0.5rem;
    right: 0.5rem;
    scale: 0.9;
  }
}

/* Success state responsive design */
.forgot-password-success {
  text-align: center;
  padding: 2rem;
}

@media (max-width: 480px) {
  .forgot-password-success {
    padding: 1rem;
  }
}

/* Error state responsive design */
.forgot-password-error {
  margin-bottom: 1.5rem;
}

@media (max-width: 480px) {
  .forgot-password-error {
    margin-bottom: 1rem;
  }
}

/* Landscape orientation optimizations */
@media (orientation: landscape) and (max-height: 500px) {
  .forgot-password-container {
    padding: 0.5rem;
    align-items: flex-start;
  }
  
  .forgot-password-form {
    padding: 1rem;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .forgot-password-header {
    margin-bottom: 1rem;
  }
  
  .forgot-password-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 0.5rem;
  }
}

/* Safe area support for devices with notches */
.forgot-password-container {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  padding-top: max(1rem, env(safe-area-inset-top));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* Focus management */
.forgot-password-form *:focus-visible {
  outline: 2px solid #FFD600;
  outline-offset: 2px;
}

/* Loading skeleton for better perceived performance */
.forgot-password-loading-skeleton {
  animation: pulse 1.5s ease-in-out infinite;
}

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

/* Print styles */
@media print {
  .forgot-password-container {
    background: white !important;
    color: black !important;
  }
  
  .forgot-password-form {
    background: white !important;
    border: 1px solid black !important;
    box-shadow: none !important;
  }
  
  .forgot-password-submit-btn,
  .forgot-password-back-link {
    display: none !important;
  }
}
/**
 * Password Reset Progress Indicator Component Styles
 */

.password-reset-progress-indicator {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* Progress bar animations */
.password-reset-progress-indicator .MuiLinearProgress-root {
  overflow: hidden;
  position: relative;
}

.password-reset-progress-indicator .MuiLinearProgress-bar {
  transition: transform 0.4s ease-in-out;
}

/* Shimmer effect for progress bar */
.password-reset-progress-indicator .MuiLinearProgress-root::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: translateX(-100%);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Step indicator animations */
.password-reset-progress-indicator .step-icon {
  transition: all 0.3s ease-in-out;
}

.password-reset-progress-indicator .step-icon.active {
  animation: pulse 2s ease-in-out infinite;
}

.password-reset-progress-indicator .step-icon.completed {
  animation: checkmark 0.6s ease-out;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 214, 0, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(255, 214, 0, 0);
  }
}

@keyframes checkmark {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Connecting line animation */
.password-reset-progress-indicator .connecting-line {
  transition: background-color 0.5s ease-in-out;
}

.password-reset-progress-indicator .connecting-line.completed {
  background: linear-gradient(to bottom, #4CAF50, #45A049);
  animation: lineGrow 0.5s ease-out;
}

@keyframes lineGrow {
  0% {
    height: 0;
  }
  100% {
    height: 32px;
  }
}

/* Timer chip animation */
.password-reset-progress-indicator .timer-chip {
  animation: timerPulse 1s ease-in-out infinite;
}

@keyframes timerPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .password-reset-progress-indicator .MuiCardContent-root {
    padding: 16px !important;
  }
  
  .password-reset-progress-indicator .step-content {
    margin-left: 8px;
  }
  
  .password-reset-progress-indicator .step-icon {
    width: 28px !important;
    height: 28px !important;
  }
}

/* Loading spinner in step icons */
.password-reset-progress-indicator .step-loading {
  animation: spin 1s linear infinite;
}

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

/* Step content fade in */
.password-reset-progress-indicator .step-content {
  animation: fadeInLeft 0.3s ease-out;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Hover effects for clickable steps */
.password-reset-progress-indicator .step-clickable {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.password-reset-progress-indicator .step-clickable:hover {
  background-color: rgba(255, 214, 0, 0.05);
  border-radius: 8px;
  transform: translateX(4px);
}
/**
 * Mobile Responsive and Accessible Styles for PasswordStrengthIndicator Component
 */

/* Base container styles */
.password-strength-container {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  width: 100%;
}

/* Strength indicator header */
.password-strength-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.password-strength-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .password-strength-label {
    font-size: 0.8rem;
  }
}

/* Strength chip styling */
.password-strength-chip {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  height: 24px !important;
  border-radius: 12px !important;
  min-width: 60px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 480px) {
  .password-strength-chip {
    font-size: 0.7rem !important;
    height: 22px !important;
    min-width: 55px;
  }
}

.password-strength-chip .MuiChip-icon {
  width: 14px !important;
  height: 14px !important;
  margin-left: 4px !important;
  margin-right: -4px !important;
}

@media (max-width: 480px) {
  .password-strength-chip .MuiChip-icon {
    width: 12px !important;
    height: 12px !important;
  }
}

/* Expand/collapse button */
.password-strength-toggle {
  margin-left: auto !important;
  padding: 4px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

@media (max-width: 480px) {
  .password-strength-toggle {
    min-width: 28px !important;
    min-height: 28px !important;
  }
}

.password-strength-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.password-strength-toggle:focus-visible {
  outline: 2px solid #FFD600 !important;
  outline-offset: 2px !important;
}

/* Progress bar styling */
.password-strength-progress {
  height: 6px !important;
  border-radius: 3px !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.password-strength-progress .MuiLinearProgress-bar {
  border-radius: 3px !important;
  transition: background-color 0.3s ease, width 0.3s ease !important;
}

@media (max-width: 480px) {
  .password-strength-progress {
    height: 5px !important;
  }
}

/* Requirements section */
.password-strength-requirements {
  margin-top: 1rem;
}

.password-strength-requirements-title {
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
}

@media (max-width: 480px) {
  .password-strength-requirements-title {
    font-size: 0.75rem !important;
  }
}

/* Requirements list */
.password-strength-requirements-list {
  padding: 0.5rem 0 !important;
}

.password-strength-requirement-item {
  padding: 0.25rem 0 !important;
  min-height: 32px;
}

@media (max-width: 480px) {
  .password-strength-requirement-item {
    padding: 0.2rem 0 !important;
    min-height: 28px;
  }
}

.password-strength-requirement-icon {
  min-width: 28px !important;
  padding-right: 0.5rem;
}

.password-strength-requirement-icon .MuiSvgIcon-root {
  width: 16px !important;
  height: 16px !important;
}

@media (max-width: 480px) {
  .password-strength-requirement-icon {
    min-width: 24px !important;
  }
  
  .password-strength-requirement-icon .MuiSvgIcon-root {
    width: 14px !important;
    height: 14px !important;
  }
}

.password-strength-requirement-text {
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
}

@media (max-width: 480px) {
  .password-strength-requirement-text {
    font-size: 0.75rem !important;
  }
}

/* Requirement states */
.password-strength-requirement-met {
  color: #4caf50 !important;
  text-decoration: line-through;
  opacity: 0.8;
}

.password-strength-requirement-unmet {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Missing requirements chips */
.password-strength-missing {
  margin-top: 0.5rem;
}

.password-strength-missing-title {
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
}

@media (max-width: 480px) {
  .password-strength-missing-title {
    font-size: 0.75rem !important;
  }
}

.password-strength-missing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (max-width: 480px) {
  .password-strength-missing-chips {
    gap: 0.25rem;
  }
}

.password-strength-missing-chip {
  font-size: 0.65rem !important;
  height: 20px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  margin-bottom: 0.25rem;
}

@media (max-width: 480px) {
  .password-strength-missing-chip {
    font-size: 0.6rem !important;
    height: 18px !important;
  }
}

/* Warnings section */
.password-strength-warnings {
  margin-top: 0.5rem;
}

.password-strength-warnings-title {
  font-size: 0.8rem !important;
  color: #ff9800 !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
  font-weight: 500 !important;
}

@media (max-width: 480px) {
  .password-strength-warnings-title {
    font-size: 0.75rem !important;
  }
}

.password-strength-warning-item {
  font-size: 0.75rem !important;
  color: #ff9800 !important;
  margin-bottom: 0.25rem;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .password-strength-warning-item {
    font-size: 0.7rem !important;
  }
}

/* Suggestions section */
.password-strength-suggestions {
  margin-top: 0.5rem;
}

.password-strength-suggestions-title {
  font-size: 0.8rem !important;
  color: #4caf50 !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
  font-weight: 500 !important;
}

@media (max-width: 480px) {
  .password-strength-suggestions-title {
    font-size: 0.75rem !important;
  }
}

.password-strength-suggestion-item {
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 0.25rem;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .password-strength-suggestion-item {
    font-size: 0.7rem !important;
  }
}

/* Strength level colors */
.password-strength-weak {
  background-color: #f44336 !important;
  color: #ffffff !important;
}

.password-strength-medium {
  background-color: #ff9800 !important;
  color: #ffffff !important;
}

.password-strength-strong {
  background-color: #4caf50 !important;
  color: #ffffff !important;
}

.password-strength-very-strong {
  background-color: #2e7d32 !important;
  color: #ffffff !important;
}

.password-strength-invalid {
  background-color: #666666 !important;
  color: #ffffff !important;
}

/* Progress bar colors */
.password-strength-progress-weak .MuiLinearProgress-bar {
  background-color: #f44336 !important;
}

.password-strength-progress-medium .MuiLinearProgress-bar {
  background-color: #ff9800 !important;
}

.password-strength-progress-strong .MuiLinearProgress-bar {
  background-color: #4caf50 !important;
}

.password-strength-progress-very-strong .MuiLinearProgress-bar {
  background-color: #2e7d32 !important;
}

.password-strength-progress-invalid .MuiLinearProgress-bar {
  background-color: #666666 !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .password-strength-container {
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 0.5rem;
    border-radius: 4px;
  }
  
  .password-strength-chip {
    border: 2px solid currentColor !important;
  }
  
  .password-strength-progress {
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
  }
  
  .password-strength-missing-chip {
    border: 2px solid currentColor !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .password-strength-progress .MuiLinearProgress-bar {
    transition: none !important;
  }
  
  .password-strength-toggle {
    transition: none !important;
  }
  
  .password-strength-container * {
    animation: none !important;
    transition: none !important;
  }
}

/* Focus management */
.password-strength-container *:focus-visible {
  outline: 2px solid #FFD600 !important;
  outline-offset: 2px !important;
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .password-strength-toggle:hover {
    background-color: transparent !important;
  }
  
  .password-strength-toggle:active {
    background-color: rgba(255, 255, 255, 0.2) !important;
  }
}

/* Landscape orientation optimizations */
@media (orientation: landscape) and (max-height: 500px) {
  .password-strength-container {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
  }
  
  .password-strength-requirements {
    margin-top: 0.5rem;
  }
  
  .password-strength-requirement-item {
    padding: 0.15rem 0 !important;
    min-height: 24px;
  }
}

/* Print styles */
@media print {
  .password-strength-container {
    background: white !important;
    color: black !important;
    border: 1px solid black !important;
  }
  
  .password-strength-toggle {
    display: none !important;
  }
  
  .password-strength-progress {
    background: #ccc !important;
  }
  
  .password-strength-progress .MuiLinearProgress-bar {
    background: black !important;
  }
}

/* Animation for collapsible content */
.password-strength-collapse-enter {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
}

.password-strength-collapse-enter-active {
  opacity: 1;
  transform: scaleY(1);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.password-strength-collapse-exit {
  opacity: 1;
  transform: scaleY(1);
}

.password-strength-collapse-exit-active {
  opacity: 0;
  transform: scaleY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .password-strength-collapse-enter,
  .password-strength-collapse-enter-active,
  .password-strength-collapse-exit,
  .password-strength-collapse-exit-active {
    transition: none !important;
    animation: none !important;
  }
}
/**
 * Mobile Responsive and Accessible Styles for ResetPassword Component
 */

/* Base mobile-first styles */
.reset-password-container {
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height for mobile */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  position: relative;
}

.reset-password-form {
  width: 100%;
  max-width: 450px;
  background: rgba(26, 26, 26, 0.95);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 214, 0, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

/* Mobile optimizations */
@media (max-width: 480px) {
  .reset-password-container {
    padding: 0.5rem;
    align-items: flex-start;
    padding-top: 2rem;
  }
  
  .reset-password-form {
    padding: 1rem;
    border-radius: 12px;
    max-width: none;
    margin: 0;
  }
}

/* Touch-friendly form elements */
.reset-password-form .MuiTextField-root {
  margin-bottom: 1rem;
}

.reset-password-form .MuiOutlinedInput-root {
  min-height: 56px; /* Touch-friendly height */
  font-size: 16px; /* Prevent zoom on iOS */
  transition: all 0.3s ease;
}

@media (max-width: 480px) {
  .reset-password-form .MuiOutlinedInput-root {
    min-height: 48px;
    font-size: 16px;
  }
}

/* Password visibility toggle button */
.reset-password-form .MuiInputAdornment-root .MuiIconButton-root {
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}

@media (max-width: 480px) {
  .reset-password-form .MuiInputAdornment-root .MuiIconButton-root {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
  }
}

/* Touch-friendly buttons */
.reset-password-submit-btn {
  min-height: 56px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  margin-bottom: 1.5rem !important;
  position: relative;
  overflow: hidden;
}

@media (max-width: 480px) {
  .reset-password-submit-btn {
    min-height: 48px !important;
    font-size: 1rem !important;
  }
}

/* Loading state optimizations */
.reset-password-loading {
  pointer-events: none;
  opacity: 0.7;
}

.reset-password-loading .MuiCircularProgress-root {
  width: 20px !important;
  height: 20px !important;
}

/* Header responsive design */
.reset-password-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.reset-password-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  box-shadow: 0 8px 24px rgba(255, 214, 0, 0.3);
}

@media (max-width: 480px) {
  .reset-password-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    margin-bottom: 1rem;
  }
  
  .reset-password-icon .MuiSvgIcon-root {
    font-size: 2rem !important;
  }
}

.reset-password-title {
  font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #FFD600 0%, #FFED4E 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem !important;
  line-height: 1.2 !important;
}

.reset-password-subtitle {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  line-height: 1.5 !important;
  margin-bottom: 1rem !important;
}

/* Email chip styling */
.reset-password-email-chip {
  background-color: rgba(255, 214, 0, 0.1) !important;
  color: #FFD600 !important;
  border: 1px solid rgba(255, 214, 0, 0.3) !important;
  font-size: 0.875rem !important;
  margin-bottom: 1rem !important;
}

@media (max-width: 480px) {
  .reset-password-email-chip {
    font-size: 0.75rem !important;
    height: 28px !important;
  }
}

/* Password strength indicator responsive design */
.reset-password-strength-indicator {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

@media (max-width: 480px) {
  .reset-password-strength-indicator {
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
  }
}

/* Progress indicator responsive design */
.reset-password-progress {
  margin-bottom: 1.5rem;
}

@media (max-width: 480px) {
  .reset-password-progress {
    margin-bottom: 1rem;
  }
}

/* Back to login link */
.reset-password-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  color: #FFD600 !important;
  text-decoration: none !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  padding: 0.5rem !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  min-height: 44px !important; /* Touch target */
  justify-content: center !important;
}

.reset-password-back-link:hover {
  text-decoration: underline !important;
  background: rgba(255, 214, 0, 0.1) !important;
}

.reset-password-back-link:focus-visible {
  outline: 2px solid #FFD600 !important;
  outline-offset: 2px !important;
}

/* Accessibility enhancements */
.reset-password-form .MuiFormHelperText-root {
  font-size: 0.875rem;
  margin-top: 0.5rem;
  line-height: 1.4;
}

.reset-password-form .MuiFormHelperText-root.Mui-error {
  color: #f44336;
  font-weight: 500;
}

/* Password field specific styling */
.reset-password-field {
  position: relative;
}

.reset-password-field .MuiInputLabel-root {
  font-size: 1rem;
  font-weight: 500;
}

.reset-password-field .MuiInputLabel-root.Mui-focused {
  color: #FFD600;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .reset-password-form {
    border: 2px solid #FFD600;
    background: #000;
  }
  
  .reset-password-form .MuiOutlinedInput-root {
    border: 2px solid #FFD600;
  }
  
  .reset-password-submit-btn {
    border: 2px solid #000 !important;
  }
  
  .reset-password-email-chip {
    border: 2px solid #FFD600 !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .reset-password-form,
  .reset-password-form * {
    animation: none !important;
    transition: none !important;
  }
  
  .reset-password-icon {
    transform: none !important;
  }
  
  .reset-password-strength-indicator * {
    animation: none !important;
    transition: none !important;
  }
}

/* Dark mode optimizations (already dark theme) */
.reset-password-form .MuiOutlinedInput-root {
  background-color: rgba(255, 255, 255, 0.05);
}

.reset-password-form .MuiOutlinedInput-root:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.reset-password-form .MuiOutlinedInput-root.Mui-focused {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 2px rgba(255, 214, 0, 0.2);
}

/* Network status indicator positioning */
.reset-password-container .network-status-indicator {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
}

@media (max-width: 480px) {
  .reset-password-container .network-status-indicator {
    top: 0.5rem;
    right: 0.5rem;
    scale: 0.9;
  }
}

/* Success state responsive design */
.reset-password-success {
  text-align: center;
  padding: 2rem;
}

@media (max-width: 480px) {
  .reset-password-success {
    padding: 1rem;
  }
}

/* Error state responsive design */
.reset-password-error {
  margin-bottom: 1.5rem;
}

@media (max-width: 480px) {
  .reset-password-error {
    margin-bottom: 1rem;
  }
}

/* Token validation loading state */
.reset-password-token-validation {
  text-align: center;
  padding: 2rem;
}

@media (max-width: 480px) {
  .reset-password-token-validation {
    padding: 1rem;
  }
}

/* Landscape orientation optimizations */
@media (orientation: landscape) and (max-height: 500px) {
  .reset-password-container {
    padding: 0.5rem;
    align-items: flex-start;
  }
  
  .reset-password-form {
    padding: 1rem;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .reset-password-header {
    margin-bottom: 1rem;
  }
  
  .reset-password-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 0.5rem;
  }
  
  .reset-password-strength-indicator {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
  }
}

/* Safe area support for devices with notches */
.reset-password-container {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  padding-top: max(1rem, env(safe-area-inset-top));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* Focus management */
.reset-password-form *:focus-visible {
  outline: 2px solid #FFD600;
  outline-offset: 2px;
}

/* Loading skeleton for better perceived performance */
.reset-password-loading-skeleton {
  animation: pulse 1.5s ease-in-out infinite;
}

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

/* Form validation styling */
.reset-password-form .MuiTextField-root.Mui-error .MuiOutlinedInput-root {
  border-color: #f44336;
}

.reset-password-form .MuiTextField-root.Mui-error .MuiInputLabel-root {
  color: #f44336;
}

/* Success validation styling */
.reset-password-form .MuiTextField-root.success .MuiOutlinedInput-root {
  border-color: #4caf50;
}

.reset-password-form .MuiTextField-root.success .MuiInputLabel-root {
  color: #4caf50;
}

/* Print styles */
@media print {
  .reset-password-container {
    background: white !important;
    color: black !important;
  }
  
  .reset-password-form {
    background: white !important;
    border: 1px solid black !important;
    box-shadow: none !important;
  }
  
  .reset-password-submit-btn,
  .reset-password-back-link {
    display: none !important;
  }
  
  .reset-password-strength-indicator {
    display: none !important;
  }
}
/* Email Change Verification Page Styles */

.email-verification-container {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.verification-header {
  text-align: center;
  margin-bottom: 2rem;
}

.verification-icon {
  font-size: 3rem !important;
  margin-bottom: 1rem;
}

.verification-title {
  font-weight: 600;
  margin-bottom: 1rem;
}

.verification-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 0;
}

.verification-loading .MuiCircularProgress-root {
  margin-bottom: 1.5rem;
}

.verification-details {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
  border-left: 4px solid #007bff;
}

.verification-error-list {
  text-align: left;
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.verification-error-list li {
  margin-bottom: 0.5rem;
  color: #6c757d;
}

.verification-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
}

.verification-support-link {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
}

.verification-support-link a {
  color: inherit;
  text-decoration: none;
}

.verification-support-link a:hover {
  text-decoration: underline;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  .email-verification-container {
    padding: 1rem 0.5rem;
  }
  
  .verification-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .verification-actions .MuiButton-root {
    width: 100%;
    max-width: 300px;
  }
}

/* Accessibility improvements */
.verification-loading[role="status"] {
  position: relative;
}

.verification-loading::after {
  content: "Verifying email change...";
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .verification-details {
    border-left-width: 6px;
    background-color: #ffffff;
    border: 2px solid #000000;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .MuiCircularProgress-root {
    animation: none;
  }
}

/* Focus management */
.verification-result:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}
.hostel-switcher {
  position: relative;
  display: inline-block;
  min-width: 200px;
}

.hostel-switcher-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background: white;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #495057;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.hostel-switcher-button:hover:not(:disabled) {
  border-color: #007bff;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}

.hostel-switcher-button.open {
  border-color: #007bff;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}

.hostel-switcher-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.button-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1;
  min-width: 0;
}

.button-icon {
  color: #6c757d;
  font-size: 16px;
  flex-shrink: 0;
}

.button-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.chevron-icon {
  color: #6c757d;
  font-size: 16px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.chevron-icon.rotated {
  transform: rotate(180deg);
}

.hostel-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
  margin-top: 4px;
}

.dropdown-error {
  padding: 16px;
  text-align: center;
  color: #dc3545;
  font-size: 14px;
  border-left: 4px solid #dc3545;
  background: #f8d7da;
  margin: 8px;
  border-radius: 4px;
}

.error-message {
  margin-bottom: 12px;
  font-weight: 500;
}

.error-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.retry-button {
  background: #dc3545;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-weight: 500;
}

.retry-button:hover {
  background: #c82333;
}

.fallback-option {
  padding: 6px 12px;
  background: #28a745;
  color: white;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-weight: 500;
}

.fallback-option:hover {
  background: #218838;
}

.debug-info {
  margin-top: 8px;
  padding: 4px 8px;
  background: #e9ecef;
  border-radius: 3px;
  font-family: monospace;
  color: #6c757d;
}

.fallback-option:hover {
  background: #e9ecef;
}

.dropdown-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #6c757d;
  gap: 12px;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #e1e5e9;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.hostel-section {
  border-bottom: 1px solid #f1f3f4;
}

.hostel-section:last-child {
  border-bottom: none;
}

.section-header {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #f8f9fa;
  border-bottom: 1px solid #f1f3f4;
}

.hostel-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid #f8f9fa;
}

.hostel-option:last-child {
  border-bottom: none;
}

.hostel-option:hover {
  background: #f8f9fa;
}

.hostel-option.selected {
  background: #e3f2fd;
  border-left: 3px solid #007bff;
}

.hostel-option.current-user {
  background: #f0f8f0;
}

.hostel-option.current-user.selected {
  background: #e8f5e8;
  border-left-color: #28a745;
}

.hostel-option.all-option {
  font-weight: 500;
}

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

.hostel-main {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.hostel-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.hostel-code {
  font-size: 12px;
  color: #6c757d;
  font-weight: 400;
}

.current-badge {
  background: #28a745;
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.hostel-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #6c757d;
}

.hostel-type,
.hostel-students {
  display: flex;
  align-items: center;
  gap: 4px;
}

.meta-icon {
  font-size: 11px;
}

.hostel-description {
  font-style: italic;
  color: #6c757d;
}

.selected-icon {
  color: #007bff;
  font-size: 16px;
  flex-shrink: 0;
}

.hostel-option.current-user .selected-icon {
  color: #28a745;
}

.no-hostels {
  padding: 20px;
  text-align: center;
  color: #6c757d;
  font-size: 14px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .hostel-switcher {
    min-width: 160px;
  }

  .hostel-switcher-button {
    padding: 10px 12px;
    font-size: 13px;
  }

  .button-icon,
  .chevron-icon {
    font-size: 14px;
  }

  .hostel-dropdown {
    max-height: 300px;
  }

  .hostel-option {
    padding: 10px 12px;
  }

  .hostel-name {
    font-size: 13px;
  }

  .hostel-code {
    font-size: 11px;
  }

  .hostel-meta {
    gap: 8px;
    font-size: 11px;
  }

  .current-badge {
    font-size: 9px;
    padding: 1px 4px;
  }
}

@media (max-width: 480px) {
  .hostel-switcher {
    min-width: 140px;
  }

  .hostel-switcher-button {
    padding: 8px 10px;
  }

  .hostel-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .hostel-switcher-button {
    background: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
  }

  .hostel-switcher-button:hover:not(:disabled) {
    border-color: #3182ce;
  }

  .hostel-switcher-button.open {
    border-color: #3182ce;
  }

  .button-icon,
  .chevron-icon {
    color: #a0aec0;
  }

  .hostel-dropdown {
    background: #2d3748;
    border-color: #4a5568;
  }

  .section-header {
    background: #1a202c;
    color: #a0aec0;
    border-bottom-color: #4a5568;
  }

  .hostel-option {
    border-bottom-color: #4a5568;
  }

  .hostel-option:hover {
    background: #4a5568;
  }

  .hostel-option.selected {
    background: #2a4a6b;
    border-left-color: #3182ce;
  }

  .hostel-option.current-user {
    background: #2d4a2d;
  }

  .hostel-option.current-user.selected {
    background: #2d5a2d;
    border-left-color: #38a169;
  }

  .hostel-name {
    color: #e2e8f0;
  }

  .hostel-code,
  .hostel-meta {
    color: #a0aec0;
  }

  .selected-icon {
    color: #3182ce;
  }

  .hostel-option.current-user .selected-icon {
    color: #38a169;
  }

  .no-hostels {
    color: #a0aec0;
  }

  .dropdown-error {
    color: #feb2b2;
  }

  .retry-button {
    background: #e53e3e;
  }

  .retry-button:hover {
    background: #c53030;
  }
}

/* Focus states for accessibility */
.hostel-switcher-button:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.hostel-option:focus {
  outline: 2px solid #007bff;
  outline-offset: -2px;
}

.retry-button:focus {
  outline: 2px solid #dc3545;
  outline-offset: 2px;
}

/* Smooth scrolling for dropdown */
.hostel-dropdown {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
.hostel-dropdown::-webkit-scrollbar {
  width: 6px;
}

.hostel-dropdown::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.hostel-dropdown::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.hostel-dropdown::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.advanced-filters {
  position: relative;
  display: inline-block;
}

.filters-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: white;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #495057;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  white-space: nowrap;
  height: 100%;
}

.filters-toggle:hover {
  border-color: #007bff;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
  transform: translateY(-2px);
}

.filters-toggle.active {
  border-color: #007bff;
  background: #007bff;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.filter-icon {
  font-size: 16px;
}

.filter-count {
  background: #dc3545;
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.filters-toggle.active .filter-count {
  background: rgba(255, 255, 255, 0.3);
  color: white;
}

.chevron {
  font-size: 14px;
  transition: transform 0.2s ease;
}

.chevron.rotated {
  transform: rotate(180deg);
}

.filters-panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: 400px;
  max-width: 90vw;
  background: white;
  border: 1px solid #e1e5e9;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-top: 8px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #f1f3f4;
  background: #f8f9fa;
}

.filters-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.clear-all-btn {
  background: none;
  border: 1px solid #dc3545;
  color: #dc3545;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.clear-all-btn:hover {
  background: #dc3545;
  color: white;
}

.close-btn {
  background: none;
  border: none;
  color: #6c757d;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: #f1f3f4;
  color: #495057;
}

.filters-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.filter-section {
  margin-bottom: 24px;
}

.filter-section:last-child {
  margin-bottom: 0;
}

.filter-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

.section-icon {
  font-size: 14px;
  color: #6c757d;
}

.filter-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e1e5e9;
  border-radius: 6px;
  font-size: 14px;
  color: #495057;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.filter-select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.filter-select:disabled {
  background: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
}

.filter-hostel-switcher {
  width: 100%;
}

.filter-hostel-switcher .hostel-switcher-button {
  width: 100%;
  justify-content: space-between;
}

.loading-text {
  font-size: 12px;
  color: #6c757d;
  font-style: italic;
  margin-top: 4px;
}

.price-range {
  display: flex;
  align-items: center;
  gap: 12px;
}

.price-input {
  flex: 1 1;
  padding: 10px 12px;
  border: 1px solid #e1e5e9;
  border-radius: 6px;
  font-size: 14px;
  color: #495057;
  background: white;
}

.price-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.price-separator {
  font-size: 14px;
  color: #6c757d;
  font-weight: 500;
}

.checkbox-group,
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-label,
.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.checkbox-label:hover,
.radio-label:hover {
  color: #007bff;
}

.checkbox-label input[type="checkbox"],
.radio-label input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

.checkbox-text,
.radio-text {
  font-size: 14px;
  color: #495057;
  -webkit-user-select: none;
          user-select: none;
}

.filters-footer {
  display: flex;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid #f1f3f4;
  background: #f8f9fa;
}

.clear-button {
  flex: 1 1;
  background: none;
  border: 1px solid #6c757d;
  color: #6c757d;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.clear-button:hover {
  background: #6c757d;
  color: white;
}

.apply-button {
  flex: 1 1;
  background: #007bff;
  border: 1px solid #007bff;
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.apply-button:hover {
  background: #0056b3;
  border-color: #0056b3;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .filters-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
    z-index: 9999;
  }

  .filters-content {
    padding: 16px 20px;
  }

  .filters-header,
  .filters-footer {
    padding: 16px 20px;
  }

  .filter-section {
    margin-bottom: 20px;
  }

  .price-range {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .price-separator {
    text-align: center;
  }

  .filters-footer {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .filters-toggle {
    padding: 10px 12px;
    font-size: 13px;
  }

  .filter-icon {
    font-size: 14px;
  }

  .filters-header h3 {
    font-size: 16px;
  }

  .filter-title {
    font-size: 13px;
  }

  .filter-select,
  .price-input {
    padding: 8px 10px;
    font-size: 13px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .filters-toggle {
    background: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
  }

  .filters-toggle:hover {
    border-color: #3182ce;
  }

  .filters-toggle.active {
    background: #3182ce;
    border-color: #3182ce;
  }

  .filters-panel {
    background: #2d3748;
    border-color: #4a5568;
  }

  .filters-header {
    background: #1a202c;
    border-bottom-color: #4a5568;
  }

  .filters-header h3 {
    color: #e2e8f0;
  }

  .clear-all-btn {
    border-color: #e53e3e;
    color: #e53e3e;
  }

  .clear-all-btn:hover {
    background: #e53e3e;
  }

  .close-btn {
    color: #a0aec0;
  }

  .close-btn:hover {
    background: #4a5568;
    color: #e2e8f0;
  }

  .filter-title {
    color: #e2e8f0;
  }

  .section-icon {
    color: #a0aec0;
  }

  .filter-select,
  .price-input {
    background: #4a5568;
    border-color: #718096;
    color: #e2e8f0;
  }

  .filter-select:focus,
  .price-input:focus {
    border-color: #3182ce;
  }

  .filter-select:disabled {
    background: #2d3748;
    color: #718096;
  }

  .loading-text {
    color: #a0aec0;
  }

  .price-separator {
    color: #a0aec0;
  }

  .checkbox-text,
  .radio-text {
    color: #e2e8f0;
  }

  .checkbox-label:hover,
  .radio-label:hover {
    color: #63b3ed;
  }

  .filters-footer {
    background: #1a202c;
    border-top-color: #4a5568;
  }

  .clear-button {
    border-color: #718096;
    color: #a0aec0;
  }

  .clear-button:hover {
    background: #718096;
    color: #1a202c;
  }

  .apply-button {
    background: #3182ce;
    border-color: #3182ce;
  }

  .apply-button:hover {
    background: #2c5aa0;
    border-color: #2c5aa0;
  }
}

/* Custom scrollbar for filters content */
.filters-content::-webkit-scrollbar {
  width: 6px;
}

.filters-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.filters-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.filters-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Focus states for accessibility */
.filters-toggle:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.clear-all-btn:focus,
.close-btn:focus,
.clear-button:focus,
.apply-button:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.checkbox-label:focus-within,
.radio-label:focus-within {
  outline: 2px solid #007bff;
  outline-offset: 2px;
  border-radius: 4px;
}
/* Products Page - Complete Redesign Matching Home Page Theme */
.products-page {
  min-height: 100vh;
  width: 100%;
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  position: relative;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

/* Hero Section - Exact Match to Home Page */
.products-header {
  background: var(--gradient-primary);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  color: var(--color-text-primary);
  padding: 6rem 1rem 4rem;
  position: relative;
  overflow: hidden;
}

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

/* Animated shapes in background - matching Home page */
.products-header::before,
.products-header::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 20s infinite ease-in-out;
}

.products-header::before {
  width: 300px;
  height: 300px;
  top: -150px;
  right: -150px;
  animation-delay: 0s;
}

.products-header::after {
  width: 200px;
  height: 200px;
  bottom: -100px;
  left: -100px;
  animation-delay: 5s;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -30px) rotate(120deg); }
  66% { transform: translate(-20px, 20px) rotate(240deg); }
}

.page-title {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  line-height: 1.2;
  text-align: center;
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-subtitle {
  display: block;
  font-size: 2.5rem;
  font-weight: 600;
  margin-top: 0.5rem;
  opacity: 0.9;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.page-description {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto 3rem;
  opacity: 0.9;
  line-height: 1.6;
  text-align: center;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

/* Modern Search Form - Exact Match to Home Page */
.quick-search {
  margin-bottom: 3rem;
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.search-container-products {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 0.5rem;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.search-container-products:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.45);
}

.search-input-group-products {
  display: flex;
  flex: 1 1;
  gap: 0.5rem;
}

.search-input {
  flex: 1 1;
  padding: 1rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 15px;
  font-size: 1rem;
  color: var(--color-text-primary);
  background: var(--color-surface-secondary);
  transition: all var(--transition-bounce);
}

.search-input:focus {
  outline: none;
  background: var(--color-surface-primary);
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.2);
}

.search-input::placeholder {
  color: var(--color-text-secondary);
  font-weight: 400;
}

.category-select {
  padding: 1rem;
  border: 2px solid transparent;
  border-radius: 15px;
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
  font-size: 1rem;
  min-width: 180px;
  cursor: pointer;
  transition: all var(--transition-bounce);
}

.category-select:focus {
  outline: none;
  background: var(--color-surface-primary);
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.2);
}

.search-button {
  background: var(--gradient-yellow);
  color: var(--color-text-inverse);
  border: none;
  border-radius: 15px;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--transition-bounce);
  min-width: 120px;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.search-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: left 0.3s ease;
}

.search-button:hover::before {
  left: 100%;
}

.search-button:hover {
  background: var(--gradient-yellow-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-accent);
}

.search-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.filter-controls {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeInUp 0.8s ease-out 0.8s both;
}

.filter-control-btn {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  text-decoration: none;
  padding: 0.8rem 1.5rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: none;
}

.filter-control-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

.filter-control-btn:hover::before {
  width: 100%;
  height: 100%;
}

.filter-control-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  color: white;
  text-decoration: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.filter-icon {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.filter-control-btn:hover .filter-icon {
  transform: scale(1.2);
}

.filter-toggle {
  background: rgba(17, 17, 17, 0.9);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  color: #FFD600;
  border: 2px solid rgba(255, 214, 0, 0.3);
  padding: 1.25rem 1.5rem;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.filter-toggle:hover {
  background: rgba(17, 17, 17, 1);
  border-color: #FFD600;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 214, 0, 0.3);
}

.filter-icon {
  font-size: 1.2rem;
}

.filter-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, #FF1744 0%, #D50000 100%);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Main Content Layout */
.products-content {
  padding: 5rem 1rem;
  background: var(--color-background-primary);
}

/* Modern Sidebar Filters */
.filters-sidebar {
  background: rgba(26, 26, 26, 0.9);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 214, 0, 0.2);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  position: sticky;
  top: 6rem;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  transition: all 0.3s ease;
}

.filters-sidebar::-webkit-scrollbar {
  width: 6px;
}

.filters-sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.filters-sidebar::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  border-radius: 3px;
}

.filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 214, 0, 0.2);
}

.filters-header h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFD600;
  margin: 0;
  background: linear-gradient(135deg, #FFD600 0%, #FFED4E 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.clear-filters {
  background: none;
  border: 1px solid rgba(255, 214, 0, 0.3);
  color: #FFD600;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.clear-filters:hover {
  background: rgba(255, 214, 0, 0.1);
  border-color: #FFD600;
  transform: translateY(-1px);
}

.filter-group {
  margin-bottom: 2rem;
}

.filter-group h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-group h4::before {
  content: '';
  width: 4px;
  height: 16px;
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  border-radius: 2px;
}

.filter-select {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-select:focus {
  outline: none;
  border-color: #FFD600;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(255, 214, 0, 0.1);
}

.filter-select option {
  background: #1A1A1A;
  color: #FFFFFF;
}

.checkbox-group, .radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checkbox-label, .radio-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  padding: 0.75rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
}

.checkbox-label:hover, .radio-label:hover {
  background: rgba(255, 214, 0, 0.1);
  border-color: rgba(255, 214, 0, 0.3);
  transform: translateX(4px);
}

.checkbox-label input, .radio-label input {
  cursor: pointer;
  accent-color: #FFD600;
  transform: scale(1.1);
}

.checkbox-label span, .radio-label span {
  font-size: 0.95rem;
  color: #FFFFFF;
  font-weight: 400;
}

.price-inputs {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.price-input {
  flex: 1 1;
  padding: 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font-size: 0.95rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
  transition: all 0.3s ease;
}

.price-input:focus {
  outline: none;
  border-color: #FFD600;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(255, 214, 0, 0.1);
}

.price-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Section Header - Matching Home Page Style */
.section-header {
  text-align: center;
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--gradient-yellow);
  border-radius: 2px;
}

.section-description {
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-top: 1.5rem;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--color-surface-primary);
  border-radius: 15px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-primary);
}

.results-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.results-count {
  font-weight: 700;
  color: var(--color-accent-primary);
  font-size: 1.1rem;
}

.search-query {
  color: var(--color-text-secondary);
  font-style: italic;
  font-weight: 500;
}

.sort-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sort-controls label {
  font-size: 0.95rem;
  color: #718096;
  font-weight: 500;
}

.sort-select {
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.95rem;
  background: white;
  color: #1a202c;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 180px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.sort-select:focus {
  outline: none;
  border-color: #667eea;
  background: white;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.sort-select option {
  background: white;
  color: #1a202c;
}

/* Products Grid - Exact Match to Home Page */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.product-card {
  background: var(--color-surface-primary);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  transition: all var(--transition-bounce);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-primary);
  position: relative;
}

.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-yellow);
  opacity: 0;
  transition: opacity var(--transition-normal);
  z-index: 1;
}

.product-card:hover::before {
  opacity: 0.03;
}

.product-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-xl), var(--shadow-accent);
  text-decoration: none;
  border-color: var(--color-border-accent);
}

.product-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.product-image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--color-surface-secondary);
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
}

.product-card:hover .product-image {
  transform: scale(1.1);
}

.condition-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 25px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.condition-badge.new {
  background: rgba(16, 185, 129, 0.9);
  color: white;
}

.condition-badge.like-new {
  background: rgba(59, 130, 246, 0.9);
  color: white;
}

.condition-badge.good {
  background: rgba(251, 191, 36, 0.9);
  color: white;
}

.condition-badge.fair {
  background: rgba(251, 146, 60, 0.9);
  color: white;
}

.time-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 25px;
  font-size: 0.8rem;
  font-weight: 500;
}

.product-info {
  padding: 1.5rem;
  position: relative;
  z-index: 2;
}

.product-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.75rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.current-price {
  font-size: 1.3rem;
  font-weight: 700;
  background: var(--gradient-success);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.original-price {
  font-size: 1rem;
  color: var(--color-text-secondary);
  text-decoration: line-through;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.seller-info {
  font-weight: 500;
}

.product-location {
  color: var(--color-text-secondary);
  opacity: 0.8;
}

.product-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.wishlist-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  font-size: 1.1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 3;
}

.wishlist-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wishlist-btn.active {
  background: rgba(239, 68, 68, 0.9);
  color: #FFFFFF;
}

/* Pagination - Modern Style */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 3rem 0;
  margin-top: 2rem;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background: var(--gradient-yellow);
  color: var(--color-text-inverse);
  text-decoration: none;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  transition: all var(--transition-bounce);
  cursor: pointer;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--gradient-yellow-hover);
  color: var(--color-text-inverse);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-accent);
}

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

.pagination-numbers {
  display: flex;
  gap: 0.5rem;
}

.pagination-number {
  background: var(--color-surface-primary);
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
  padding: 0.75rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: all var(--transition-bounce);
  min-width: 44px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.pagination-number:hover {
  background: var(--color-surface-secondary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.pagination-number.active {
  background: var(--gradient-yellow);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-primary);
}

/* Empty State - Matching Home Page */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #718096;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.empty-state h3 {
  font-size: 1.75rem;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
  font-weight: 700;
}

.empty-state p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.browse-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem 2rem;
  background: var(--gradient-yellow);
  color: var(--color-text-inverse);
  text-decoration: none;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  transition: all var(--transition-bounce);
  cursor: pointer;
}

.browse-button:hover {
  background: var(--gradient-yellow-hover);
  color: var(--color-text-inverse);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-accent);
}

/* Loading Overlay - matching Home page style */
.loading-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 20px;
  margin: 2rem;
}

/* Modern animations and transitions */
.products-grid {
  animation: fadeInUp 0.6s ease-out;
}

.product-card {
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
}

.product-card:nth-child(1) { animation-delay: 0.1s; }
.product-card:nth-child(2) { animation-delay: 0.2s; }
.product-card:nth-child(3) { animation-delay: 0.3s; }
.product-card:nth-child(4) { animation-delay: 0.4s; }
.product-card:nth-child(5) { animation-delay: 0.5s; }
.product-card:nth-child(6) { animation-delay: 0.6s; }

/* Smooth transitions for all interactive elements */
* {
  transition: all 0.3s ease;
}

/* Focus states for accessibility */
.search-input:focus,
.sort-select:focus,
.pagination-btn:focus,
.pagination-number:focus {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* Responsive Design - matching Home page patterns */
@media (max-width: 1024px) {
  .products-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .filters-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
    background: rgba(17, 17, 17, 0.98);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
  }
  
  .filters-sidebar.show {
    display: block;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .search-container-products {
    padding: 0.75rem;
  }
  
  .search-input-group-products {
    flex-direction: column;
    gap: 0.6rem;
  }
  
  .search-input {
    padding: 0.75rem 1rem;
  }

  .results-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .sort-controls {
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  .products-header {
    padding: 5rem 1rem 3rem;
  }

  .page-title {
    font-size: 2.5rem;
  }

  .page-description {
    font-size: 1rem;
  }

  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    padding: 1rem;
  }

  .product-card {
    max-width: 100%;
  }

  .pagination {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .pagination-numbers {
    order: 3;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 0.5rem;
  }

  .products-header {
    padding: 4rem 0.5rem 2rem;
  }

  .page-title {
    font-size: 2rem;
  }

  .search-container-products {
    padding: 0.5rem;
  }
  
  .search-input {
    padding: 0.9rem 0.9rem;
    font-size: 0.9rem;
  }
  
  .filter-controls {
    flex-direction: column;
    width: 100%;
  }
  
  .hostel-switcher-header,
  .advanced-filters-header {
    width: 100%;
    min-width: 100%;
  }

  .products-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Hostel Switcher in Header */
.hostel-switcher-header {
  min-width: 180px;
  flex-shrink: 0;
}

.hostel-switcher-header .hostel-switcher-button {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(255, 214, 0, 0.3);
  color: #111111;
  font-weight: 600;
  height: 100%;
  padding: 1.25rem 1.5rem;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hostel-switcher-header .hostel-switcher-button:hover:not(:disabled) {
  border-color: rgba(255, 214, 0, 0.8);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 20px rgba(255, 214, 0, 0.3);
  transform: translateY(-2px);
}

.hostel-switcher-header .hostel-switcher-button.open {
  border-color: rgba(255, 214, 0, 0.8);
  background: rgba(255, 255, 255, 1);
}

/* Advanced Filters in Header */
.advanced-filters-header {
  flex-shrink: 0;
}

.advanced-filters-header .filters-toggle {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(255, 214, 0, 0.3);
  color: #111111;
  font-weight: 600;
  padding: 1.25rem 1.5rem;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.advanced-filters-header .filters-toggle:hover {
  border-color: rgba(255, 214, 0, 0.8);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 20px rgba(255, 214, 0, 0.3);
  transform: translateY(-2px);
}

.advanced-filters-header .filters-toggle.active {
  border-color: rgba(255, 214, 0, 0.8);
  background: rgba(255, 214, 0, 0.9);
  color: #111111;
}

.advanced-filters-header .filter-count {
  background: #dc3545;
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  min-width: 24px;
  text-align: center;
}

@media (max-width: 768px) {
  .hostel-switcher-header {
    min-width: 160px;
    order: 2;
    width: 48%;
  }
  
  .quick-search .search-input {
    order: 1;
    flex: 1 1;
    width: 100%;
  }
  
  .advanced-filters-header {
    order: 3;
    width: 48%;
  }

  .advanced-filters-header .filters-toggle {
    padding: 1rem;
    font-size: 0.9rem;
    width: 100%;
    justify-content: center;
  }

  .hostel-switcher-header .hostel-switcher-button {
    padding: 1rem;
    font-size: 0.9rem;
    width: 100%;
    justify-content: center;
  }

  .product-info {
    padding: 1rem;
  }

  .product-title {
    font-size: 1.1rem;
  }

  .current-price {
    font-size: 1.2rem;
  }
} 

/* Additional modern enhancements */
.products-page {
  scroll-behavior: smooth;
}

/* Modern filter sidebar improvements */
.filters-sidebar {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15);
  position: sticky;
  top: 6rem;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  transition: all 0.3s ease;
}

.filters-sidebar::-webkit-scrollbar {
  width: 6px;
}

.filters-sidebar::-webkit-scrollbar-track {
  background: rgba(102, 126, 234, 0.1);
  border-radius: 3px;
}

.filters-sidebar::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 3px;
}

.filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

.filters-header h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #667eea;
  margin: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.clear-filters {
  background: none;
  border: 1px solid rgba(102, 126, 234, 0.3);
  color: #667eea;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.clear-filters:hover {
  background: rgba(102, 126, 234, 0.1);
  border-color: #667eea;
  transform: translateY(-1px);
}

.filter-group {
  margin-bottom: 2rem;
}

.filter-group h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a202c;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-group h4::before {
  content: '';
  width: 4px;
  height: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

.filter-select {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.95rem;
  background: white;
  color: #1a202c;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.filter-select:focus {
  outline: none;
  border-color: #667eea;
  background: white;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.filter-select option {
  background: white;
  color: #1a202c;
}

.checkbox-group, .radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checkbox-label, .radio-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  padding: 0.75rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  background: rgba(102, 126, 234, 0.02);
  border: 1px solid transparent;
}

.checkbox-label:hover, .radio-label:hover {
  background: rgba(102, 126, 234, 0.1);
  border-color: rgba(102, 126, 234, 0.3);
  transform: translateX(4px);
}

.checkbox-label input, .radio-label input {
  cursor: pointer;
  accent-color: #667eea;
  transform: scale(1.1);
}

.checkbox-label span, .radio-label span {
  font-size: 0.95rem;
  color: #1a202c;
  font-weight: 400;
}

.price-inputs {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.price-input {
  flex: 1 1;
  padding: 0.875rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.95rem;
  text-align: center;
  background: white;
  color: #1a202c;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.price-input:focus {
  outline: none;
  border-color: #667eea;
  background: white;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.price-input::placeholder {
  color: #718096;
}

/* Enhanced product link styling */
.product-link {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
}

.product-link:hover {
  text-decoration: none;
  color: inherit;
}

/* Improved mobile responsiveness */
@media (max-width: 640px) {
  .page-title {
    font-size: 1.8rem;
  }
  
  .page-description {
    font-size: 0.95rem;
  }
  
  .search-container-products {
    margin: 0 -0.5rem;
  }
  
  .products-grid {
    padding: 1rem 0.5rem;
  }
  
  .product-info {
    padding: 1.25rem;
  }
  
  .product-title {
    font-size: 1rem;
  }
  
  .current-price {
    font-size: 1.2rem;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .product-card {
    border: 2px solid #000;
  }
  
  .condition-badge {
    border: 1px solid #000;
  }
  
  .search-input:focus,
  .sort-select:focus {
    outline: 3px solid #000;
  }
}

/* Dark mode support (if needed) */
@media (prefers-color-scheme: dark) {
  .products-page {
    background: #111111;
    color: #ffffff;
  }
  
  .product-card {
    background: #1a1a1a;
    border-color: #333;
    color: #ffffff;
  }
  
  .product-title {
    color: #ffffff;
  }
  
  .search-container-products {
    background: rgba(26, 26, 26, 0.95);
  }
  
  .search-input {
    background: #2a2a2a;
    color: #ffffff;
    border-color: #444;
  }
}

/* Print styles */
@media print {
  .products-header,
  .pagination,
  .wishlist-btn,
  .filter-controls {
    display: none;
  }
  
  .products-grid {
    display: block;
  }
  
  .product-card {
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 1rem;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* Error state styling */
.error-state {
  text-align: center;
  padding: 4rem 2rem;
  color: #718096;
}

.error-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.6;
}

.error-state h3 {
  font-size: 1.75rem;
  color: #e53e3e;
  margin-bottom: 1rem;
  font-weight: 700;
}

.error-state p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

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

.retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

.retry-btn:hover {
  background: linear-gradient(135deg, #c53030 0%, #9c2626 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(229, 62, 62, 0.3);
}

.retry-message {
  margin-top: 1rem;
  color: #667eea;
  font-weight: 500;
  font-size: 0.9rem;
}

/* Loading state improvements */
.loading-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 20px;
  margin: 2rem;
  text-align: center;
}

/* Skeleton loading for better UX */
.product-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 20px;
  overflow: hidden;
}

.product-skeleton .skeleton-image {
  height: 200px;
  background: #e0e0e0;
}

.product-skeleton .skeleton-content {
  padding: 1.5rem;
}

.product-skeleton .skeleton-line {
  height: 1rem;
  background: #e0e0e0;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.product-skeleton .skeleton-line.short {
  width: 60%;
}

.product-skeleton .skeleton-line.medium {
  width: 80%;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Enhanced mobile experience */
@media (max-width: 768px) {
  .error-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .retry-btn,
  .clear-filters-btn {
    width: 200px;
    justify-content: center;
  }
}/* Lo
ading State */
.loading-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem;
  text-align: center;
}

.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Modern animations and transitions */
.products-grid {
  animation: fadeInUp 0.6s ease-out;
}

.product-card {
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
}

.product-card:nth-child(1) { animation-delay: 0.1s; }
.product-card:nth-child(2) { animation-delay: 0.2s; }
.product-card:nth-child(3) { animation-delay: 0.3s; }
.product-card:nth-child(4) { animation-delay: 0.4s; }
.product-card:nth-child(5) { animation-delay: 0.5s; }
.product-card:nth-child(6) { animation-delay: 0.6s; }

/* Smooth transitions for all interactive elements */
* {
  transition: all 0.3s ease;
}

/* Focus states for accessibility */
.search-input:focus,
.category-select:focus,
.sort-select:focus,
.pagination-btn:focus,
.pagination-number:focus {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* Responsive Design - Matching Home Page Patterns */
@media (max-width: 768px) {
  .page-title {
    font-size: 2.5rem;
  }
  
  .page-subtitle {
    font-size: 1.8rem;
  }
  
  .page-description {
    font-size: 1rem;
  }
  
  .search-container-products {
    padding: 0.75rem;
  }
  
  .search-input-group-products {
    flex-direction: column;
  }
  
  .search-input, .category-select {
    padding: 0.75rem 1rem;
  }
  
  .search-button {
    padding: 0.75rem 1.5rem;
  }
  
  .filter-controls {
    flex-direction: column;
    align-items: center;
  }
  
  .filter-control-btn {
    width: 200px;
    justify-content: center;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
  }
  
  .results-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .sort-controls {
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .products-header {
    padding: 4rem 1rem 3rem;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .page-subtitle {
    font-size: 1.5rem;
  }
  
  .products-grid {
    grid-template-columns: 1fr;
  }
  
  .pagination {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .pagination-numbers {
    order: 3;
    width: 100%;
    justify-content: center;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f7fafc;
}

::-webkit-scrollbar-thumb {
  background: #667eea;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #764ba2;
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/* Loading Animations */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .product-card {
    border: 2px solid #000;
  }
  
  .condition-badge {
    border: 1px solid #000;
  }
  
  .search-input:focus,
  .category-select:focus,
  .sort-select:focus {
    outline: 3px solid #000;
  }
}

/* Print styles */
@media print {
  .products-header,
  .pagination,
  .wishlist-btn,
  .filter-controls {
    display: none;
  }
  
  .products-grid {
    display: block;
  }
  
  .product-card {
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 1rem;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}
.product-detail-page {
  min-height: 100vh;
  background: #f9fafb;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Breadcrumb */
.breadcrumb {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem 0;
}

.breadcrumb .container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.breadcrumb a {
  color: #667eea;
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumb a:hover {
  color: #764ba2;
}

.breadcrumb .current {
  color: #6b7280;
  font-weight: 500;
}

/* Main Layout */
.product-detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 3rem;
  gap: 3rem;
  padding: 2rem 0;
  align-items: start;
}

/* Image Gallery */
.image-gallery {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  position: sticky;
  top: 2rem;
}

.main-image-container {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1rem;
  background: #f3f4f6;
}

.main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.3s ease;
}

.main-image:hover {
  transform: scale(1.02);
}

.zoom-hint {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

.zoom-hint:hover {
  background: rgba(0, 0, 0, 0.8);
}

.condition-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.condition-badge.new {
  background: rgba(209, 250, 229, 0.9);
  color: #065f46;
}

.condition-badge.like-new {
  background: rgba(219, 234, 254, 0.9);
  color: #1e40af;
}

.condition-badge.good {
  background: rgba(254, 243, 199, 0.9);
  color: #92400e;
}

.condition-badge.fair {
  background: rgba(254, 215, 170, 0.9);
  color: #c2410c;
}

.rental-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(139, 92, 246, 0.9);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.thumbnail-gallery {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.5rem 0;
}

.thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.thumbnail:hover {
  border-color: #d1d5db;
}

.thumbnail.active {
  border-color: #667eea;
}

/* Product Information */
.product-info {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.product-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.3;
  margin: 0;
  flex: 1 1;
  margin-right: 1rem;
}

.product-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.wishlist-btn, .share-btn {
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.wishlist-btn:hover, .share-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.wishlist-btn.active {
  background: rgba(239, 68, 68, 0.1);
  border-color: #f87171;
}

.price-section {
  margin-bottom: 2rem;
}

.current-price {
  font-size: 2.5rem;
  font-weight: 800;
  color: #059669;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.period {
  font-size: 1.2rem;
  font-weight: 500;
  color: #6b7280;
}

.original-price {
  font-size: 1.5rem;
  color: #9ca3af;
  text-decoration: line-through;
  margin-top: 0.5rem;
}

.discount-percentage {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

.quick-info {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: #f9fafb;
  border-radius: 8px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #e5e7eb;
}

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

.info-item .label {
  font-weight: 500;
  color: #6b7280;
}

.info-item .value {
  font-weight: 600;
  color: #1f2937;
}

.status-available {
  color: #059669 !important;
}

.status-reserved {
  color: #d97706 !important;
}

.status-sold {
  color: #dc2626 !important;
}

.contact-section {
  margin-bottom: 2rem;
}

.contact-btn, .edit-btn {
  width: 100%;
  padding: 1rem 2rem;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  margin-bottom: 0.75rem;
}

.contact-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.contact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

.edit-btn {
  background: #f59e0b;
  color: white;
}

.edit-btn:hover {
  background: #d97706;
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
}

.product-stats {
  display: flex;
  justify-content: space-around;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 8px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
  color: #6b7280;
}

.stat .icon {
  font-size: 1.2rem;
}

/* Product Description */
.product-description-section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

.product-description-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1rem;
}

.description-content p {
  line-height: 1.7;
  color: #374151;
  margin-bottom: 1rem;
}

.tags-section {
  margin-top: 2rem;
}

.tags-section h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1rem;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  background: #e0e7ff;
  color: #5b21b6;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Seller Section */
.seller-section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

.seller-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1.5rem;
}

.seller-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  align-items: start;
}

.seller-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #e5e7eb;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.seller-details {
  flex: 1 1;
}

.seller-name {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.25rem;
}

.seller-real-name {
  color: #6b7280;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.seller-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.rating {
  color: #f59e0b;
  font-weight: 600;
}

.reviews-count {
  color: #6b7280;
  font-size: 0.9rem;
}

.seller-location, .seller-joined {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #6b7280;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.location-icon {
  font-size: 1rem;
}

.seller-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.message-seller-btn, .view-profile-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  text-align: center;
  font-size: 0.9rem;
}

.message-seller-btn {
  background: #667eea;
  color: white;
}

.message-seller-btn:hover {
  background: #5a67d8;
}

.view-profile-btn {
  background: transparent;
  color: #667eea;
  border: 1px solid #667eea;
}

.view-profile-btn:hover {
  background: #667eea;
  color: white;
  text-decoration: none;
}

/* Similar Products */
.similar-products-section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

.similar-products-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1.5rem;
}

.similar-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.similar-product-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.similar-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
}

.similar-product-image {
  height: 150px;
  overflow: hidden;
}

.similar-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.similar-product-card:hover .similar-product-image img {
  transform: scale(1.05);
}

.similar-product-info {
  padding: 1rem;
}

.similar-product-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.5rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.similar-product-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: #059669;
  margin-bottom: 0.5rem;
}

.similar-product-meta {
  font-size: 0.8rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Image Modal */
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 2rem;
}

.modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.close-modal {
  position: absolute;
  top: -50px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem;
  transition: opacity 0.3s ease;
}

.close-modal:hover {
  opacity: 0.7;
}

.modal-image {
  max-width: 100%;
  max-height: calc(90vh - 100px);
  object-fit: contain;
  border-radius: 8px;
}

.modal-navigation {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: white;
}

.nav-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
}

.nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.image-counter {
  font-weight: 500;
}

/* Error State */
.error-state {
  text-align: center;
  padding: 4rem 2rem;
  color: #6b7280;
}

.error-state h2 {
  color: #374151;
  margin-bottom: 1rem;
}

.error-state a {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .product-detail-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .image-gallery {
    position: static;
  }
  
  .seller-card {
    grid-template-columns: auto 1fr;
    gap: 1rem;
  }
  
  .seller-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    margin-top: 1rem;
  }
}

@media (max-width: 768px) {
  .product-header {
    flex-direction: column;
    gap: 1rem;
  }
  
  .product-title {
    margin-right: 0;
    text-align: center;
  }
  
  .product-actions {
    align-self: center;
  }
  
  .current-price {
    font-size: 2rem;
    justify-content: center;
  }
  
  .thumbnail-gallery {
    justify-content: center;
  }
  
  .similar-products-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
  }
  
  .seller-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .seller-avatar {
    justify-self: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 0.5rem;
  }
  
  .image-gallery, .product-info, .product-description-section, .seller-section, .similar-products-section {
    padding: 1rem;
  }
  
  .product-title {
    font-size: 1.5rem;
  }
  
  .current-price {
    font-size: 1.8rem;
  }
  
  .thumbnail {
    width: 60px;
    height: 60px;
  }
  
  .image-modal {
    padding: 1rem;
  }
  
  .modal-content {
    gap: 0.5rem;
  }
  
  .close-modal {
    top: -40px;
    font-size: 1.5rem;
  }
} 
/* Modern Create Listing Page Styles */
.create-listing-container {
  min-height: 100vh;
  background: var(--color-background-primary);
  position: relative;
  overflow-x: hidden;
  padding-top: 100px;
}

.create-listing-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  background: var(--gradient-radial-accent);
  pointer-events: none;
  z-index: 0;
}

.create-listing-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1rem;
  position: relative;
  z-index: 1;
  animation: fadeIn 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.create-listing-header {
  text-align: center;
  margin-bottom: 3rem;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.create-listing-title {
  font-size: 2.5rem;
  font-weight: 800;
  background: var(--gradient-yellow);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 1rem 0;
  letter-spacing: -0.02em;
}

.create-listing-subtitle {
  color: var(--color-text-secondary);
  font-size: 1.1rem;
  font-weight: 400;
}

.create-listing-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-section {
  background: rgba(26, 26, 26, 0.8);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 214, 0, 0.2);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  padding: 2rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.form-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(255, 214, 0, 0.1);
}

.form-section:nth-child(1) { animation-delay: 0.3s; }
.form-section:nth-child(2) { animation-delay: 0.4s; }
.form-section:nth-child(3) { animation-delay: 0.5s; }

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 1.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-title::before {
  content: '';
  width: 4px;
  height: 24px;
  background: linear-gradient(135deg, #FFD600 0%, #FFED4E 100%);
  border-radius: 2px;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
}

.form-label.required::after {
  content: ' *';
  color: #FF1744;
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(42, 42, 42, 0.8);
  border: 1px solid rgba(255, 214, 0, 0.3);
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 0.9rem;
  transition: all 0.2s ease-in-out;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.form-input:focus {
  outline: none;
  border-color: #FFD600;
  box-shadow: 0 0 0 3px rgba(255, 214, 0, 0.2);
  background: rgba(42, 42, 42, 0.9);
}

.form-input::placeholder {
  color: #999999;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(42, 42, 42, 0.8);
  border: 1px solid rgba(255, 214, 0, 0.3);
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 0.9rem;
  transition: all 0.2s ease-in-out;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  cursor: pointer;
}

.form-select:focus {
  outline: none;
  border-color: #FFD600;
  box-shadow: 0 0 0 3px rgba(255, 214, 0, 0.2);
}

.form-select option {
  background: #2A2A2A;
  color: #FFFFFF;
}

.form-error {
  color: #FF1744;
  font-size: 0.8rem;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.form-error::before {
  content: '⚠';
  font-size: 0.9rem;
}

.listing-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  gap: 1rem;
}

.listing-type-option {
  position: relative;
  cursor: pointer;
}

.listing-type-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(42, 42, 42, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.listing-type-card.selected {
  border-color: #FFD600;
  background: rgba(255, 214, 0, 0.1);
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(255, 214, 0, 0.2);
}

.listing-type-card:hover {
  border-color: rgba(255, 214, 0, 0.5);
  transform: translateY(-2px);
}

.listing-type-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: #FFFFFF;
  transition: color 0.2s ease-in-out;
}

.listing-type-card.selected .listing-type-text {
  color: #FFD600;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.price-input-group {
  position: relative;
}

.price-input-prefix {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #FFD600;
  font-weight: 600;
  font-size: 1rem;
  z-index: 2;
}

.price-input {
  padding-left: 2.5rem;
}

.discount-display {
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.2) 0%, rgba(0, 230, 118, 0.1) 100%);
  border: 1px solid rgba(0, 230, 118, 0.3);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 1rem;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.discount-text {
  color: #00E676;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.discount-text::before {
  content: '🎉';
  font-size: 1.2rem;
}

.discount-savings {
  color: #69F0AE;
  font-size: 0.9rem;
  margin-left: 0.5rem;
}

.image-upload-area {
  margin-top: 1rem;
}

.image-upload-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(255, 214, 0, 0.3);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  background: rgba(42, 42, 42, 0.3);
  min-height: 120px;
}

.image-upload-section:hover:not(.disabled) {
  border-color: #FFD600;
  background: rgba(255, 214, 0, 0.05);
  transform: translateY(-2px);
}

.image-upload-section.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.1);
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.upload-icon {
  font-size: 3rem;
  color: #FFD600;
  margin-bottom: 0.5rem;
}

.upload-text {
  color: #FFFFFF;
  font-weight: 600;
  font-size: 1rem;
}

.upload-subtext {
  color: #CCCCCC;
  font-size: 0.85rem;
}

.image-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 1.5rem;
}

.image-preview-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(42, 42, 42, 0.5);
  border: 1px solid rgba(255, 214, 0, 0.2);
}

.preview-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  transition: transform 0.2s ease-in-out;
}

.preview-image:hover {
  transform: scale(1.05);
}

.image-remove-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 28px;
  height: 28px;
  background: rgba(255, 23, 68, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  opacity: 0;
}

.image-preview-item:hover .image-remove-btn {
  opacity: 1;
}

.image-remove-btn:hover {
  background: #FF1744;
  transform: scale(1.1);
}

.image-counter {
  color: #CCCCCC;
  font-size: 0.9rem;
  margin-top: 1rem;
  text-align: center;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
}

.btn {
  padding: 0.75rem 2rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.btn-secondary {
  background: rgba(42, 42, 42, 0.8);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
  background: rgba(60, 60, 60, 0.8);
  border-color: rgba(255, 214, 0, 0.3);
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  color: #111111;
  border: none;
  box-shadow: 0 4px 12px rgba(255, 214, 0, 0.3);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #FFED4E 0%, #FFD600 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 214, 0, 0.4);
}

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

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(17, 17, 17, 0.3);
  border-top: 2px solid #111111;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Responsive Design */
@media (max-width: 768px) {
  .create-listing-container {
    padding-top: 80px;
  }
  
  .create-listing-content {
    padding: 1rem;
  }
  
  .create-listing-title {
    font-size: 2rem;
  }
  
  .form-section {
    padding: 1.5rem;
  }
  
  .listing-type-grid {
    grid-template-columns: 1fr;
  }
  
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  
  .image-preview-grid {
    grid-template-columns: 1fr;
  }
  
  .form-actions {
    flex-direction: column-reverse;
  }
  
  .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .create-listing-title {
    font-size: 1.75rem;
  }
  
  .section-title {
    font-size: 1.25rem;
  }
  
  .form-section {
    padding: 1rem;
  }
}

/* Custom scrollbar */
.create-listing-container::-webkit-scrollbar {
  width: 8px;
}

.create-listing-container::-webkit-scrollbar-track {
  background: rgba(42, 42, 42, 0.5);
  border-radius: 4px;
}

.create-listing-container::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  border-radius: 4px;
}

.create-listing-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #FFED4E 0%, #FFD600 100%);
}
/* Dashboard Page - Consistent Home Page Theme */
.dashboard-container {
  min-height: 100vh;
  background: var(--color-background-primary);
  position: relative;
  padding-top: 100px;
}

.dashboard-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  background: var(--gradient-radial-accent);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

/* Dashboard Welcome Section */
.dashboard-welcome {
  background: var(--color-surface-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  transition: all var(--transition-bounce);
  position: relative;
  z-index: 1;
}

.dashboard-welcome:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl), var(--shadow-accent);
  border-color: var(--color-border-accent);
}

/* Dashboard Stats Cards */
.dashboard-stat-card {
  background: var(--color-surface-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-bounce);
  position: relative;
  overflow: hidden;
}

.dashboard-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-yellow);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.dashboard-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), var(--shadow-accent);
  border-color: var(--color-border-accent);
}

.dashboard-stat-card:hover::before {
  opacity: 1;
}

/* Dashboard Quick Actions */
.dashboard-quick-actions {
  background: var(--color-surface-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}

.dashboard-action-card {
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-xl);
  transition: all var(--transition-bounce);
  cursor: pointer;
}

.dashboard-action-card:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-border-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Dashboard Listings Section */
.dashboard-listings {
  background: var(--color-surface-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}

.dashboard-listing-card {
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-xl);
  transition: all var(--transition-bounce);
}

.dashboard-listing-card:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-border-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Dashboard Typography */
.dashboard-title {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}

.dashboard-subtitle {
  color: var(--color-text-secondary);
}

.dashboard-stat-value {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-extrabold);
}

/* Dashboard Buttons */
.dashboard-primary-btn {
  background: var(--gradient-yellow);
  color: var(--color-text-inverse);
  border-radius: var(--radius-xl);
  transition: all var(--transition-bounce);
  box-shadow: var(--shadow-md);
}

.dashboard-primary-btn:hover {
  background: var(--gradient-yellow-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-accent);
}

.dashboard-secondary-btn {
  background: transparent;
  color: var(--color-accent-primary);
  border: 2px solid var(--color-accent-primary);
  border-radius: var(--radius-xl);
  transition: all var(--transition-bounce);
}

.dashboard-secondary-btn:hover {
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-accent);
}

/* Responsive Design */
@media (max-width: 768px) {
  .dashboard-container {
    padding-top: 80px;
  }
  
  .dashboard-welcome {
    padding: var(--space-6);
    margin-bottom: var(--space-6);
  }
  
  .dashboard-listings,
  .dashboard-quick-actions {
    padding: var(--space-4);
  }
}

@media (max-width: 480px) {
  .dashboard-welcome {
    padding: var(--space-4);
  }
}
.confirm-dialog-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: confirm-dialog-backdrop-fade-in 0.2s ease-out;
  padding: 20px;
}

.confirm-dialog-backdrop--exiting {
  animation: confirm-dialog-backdrop-fade-out 0.2s ease-in;
}

.confirm-dialog {
  background: linear-gradient(135deg, #000000 0%, #111111 100%);
  border: 1px solid rgba(255, 214, 0, 0.3);
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8);
  max-width: 400px;
  width: 100%;
  animation: confirm-dialog-slide-in 0.2s ease-out;
  overflow: hidden;
  position: relative;
}

.confirm-dialog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FFD600 0%, #E6C200 100%);
}

.confirm-dialog-backdrop--exiting .confirm-dialog {
  animation: confirm-dialog-slide-out 0.2s ease-in;
}

.confirm-dialog__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 24px 16px 24px;
}

.confirm-dialog__icon {
  font-size: 24px;
  flex-shrink: 0;
}

.confirm-dialog__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(135deg, #FFD600 0%, #FFED4E 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.4;
}

.confirm-dialog__body {
  padding: 0 24px 24px 24px;
}

.confirm-dialog__message {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.confirm-dialog__footer {
  display: flex;
  gap: 12px;
  padding: 16px 24px 24px 24px;
  justify-content: flex-end;
}

.confirm-dialog__button {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 80px;
  justify-content: center;
}

.confirm-dialog__button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.confirm-dialog__button--cancel {
  background-color: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.3);
}

.confirm-dialog__button--cancel:hover:not(:disabled) {
  background-color: rgba(255, 214, 0, 0.1);
  border-color: #FFD600;
  color: #FFD600;
}

.confirm-dialog__button--confirm {
  color: white;
}

.confirm-dialog__button--default {
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  border-color: #FFD600;
  color: #111111;
}

.confirm-dialog__button--default:hover:not(:disabled) {
  background: linear-gradient(135deg, #FFED4E 0%, #FFD600 100%);
  border-color: #FFED4E;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 214, 0, 0.4);
}

.confirm-dialog__button--danger {
  background-color: #ef4444;
  border-color: #ef4444;
}

.confirm-dialog__button--danger:hover:not(:disabled) {
  background-color: #dc2626;
  border-color: #dc2626;
}

.confirm-dialog__button--warning {
  background-color: #f59e0b;
  border-color: #f59e0b;
}

.confirm-dialog__button--warning:hover:not(:disabled) {
  background-color: #d97706;
  border-color: #d97706;
}

.confirm-dialog__loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: confirm-dialog-spinner-rotate 1s linear infinite;
}

/* Animations */
@keyframes confirm-dialog-backdrop-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes confirm-dialog-backdrop-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes confirm-dialog-slide-in {
  from {
    transform: scale(0.95) translateY(-10px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes confirm-dialog-slide-out {
  from {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  to {
    transform: scale(0.95) translateY(-10px);
    opacity: 0;
  }
}

@keyframes confirm-dialog-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .confirm-dialog-backdrop {
    padding: 16px;
  }
  
  .confirm-dialog {
    max-width: none;
  }
  
  .confirm-dialog__header {
    padding: 20px 20px 12px 20px;
  }
  
  .confirm-dialog__title {
    font-size: 16px;
  }
  
  .confirm-dialog__body {
    padding: 0 20px 20px 20px;
  }
  
  .confirm-dialog__footer {
    padding: 12px 20px 20px 20px;
    flex-direction: column-reverse;
  }
  
  .confirm-dialog__button {
    width: 100%;
  }
}
.chat-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
}

.chat-list-header {
  padding: 1.25rem;
  background: #ffffff;
  border-bottom: 1px solid #f3f4f6;
  flex-shrink: 0;
}

.search-container {
  margin-bottom: 0.75rem;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 100%;
  padding: 0.875rem 2.5rem 0.875rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-size: 0.875rem;
  background: #f9fafb;
  transition: all 0.15s ease;
  font-weight: 400;
}

.search-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-icon {
  position: absolute;
  right: 1rem;
  color: #666;
  pointer-events: none;
}

.search-clear-btn {
  position: absolute;
  right: 2.5rem;
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 50%;
  font-size: 0.875rem;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.search-clear-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.search-status {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.5rem;
  padding: 0.25rem 0;
  font-style: italic;
}

.total-unread-indicator {
  margin-left: 0.5rem;
  padding: 0.125rem 0.5rem;
  background: #ef4444;
  color: white;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.chat-list-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #666;
}

.connection-indicator {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
}

.connection-indicator.connected {
  color: #2e7d32;
}

.connection-indicator.disconnected {
  color: #c62828;
}

.chat-count {
  font-weight: 500;
}

.chat-list-content {
  flex: 1 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

.chat-list-content::-webkit-scrollbar {
  width: 6px;
}

.chat-list-content::-webkit-scrollbar-track {
  background: transparent;
}

.chat-list-content::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.chat-list-content::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

.empty-chat-list {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 2rem;
}

.no-search-results,
.no-conversations {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.empty-icon {
  font-size: 3rem;
  opacity: 0.5;
}

.no-search-results p,
.no-conversations p {
  margin: 0;
  font-weight: 500;
  color: #333;
}

.no-search-results small,
.no-conversations small {
  color: #666;
  font-size: 0.8rem;
}

.chat-list-items {
  padding: 0;
}

.chat-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #ffffff;
  position: relative;
}

.chat-item:hover {
  background: #f9fafb;
}

.chat-item.selected {
  background: #eff6ff;
  border-left: 3px solid #3b82f6;
}

.chat-item.unread {
  background: #fefce8;
}

.chat-item.unread.selected {
  background: #ecfdf5;
}

.chat-avatar {
  position: relative;
  flex-shrink: 0;
}

.avatar-image {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f3f4f6;
  transition: border-color 0.15s ease;
}

.chat-item.selected .avatar-image {
  border-color: #3b82f6;
}

.online-indicator {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  background: #10b981;
  border: 2px solid #ffffff;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.chat-info {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.chat-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1;
}

.chat-time {
  font-size: 0.8rem;
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 500;
}

.chat-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.message-preview {
  flex: 1 1;
  min-width: 0;
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #3b82f6;
  font-style: italic;
  font-size: 0.875rem;
}

.typing-text {
  font-weight: 500;
}

.typing-dots {
  display: flex;
  gap: 2px;
}

.typing-dots span {
  width: 4px;
  height: 4px;
  background: #3b82f6;
  border-radius: 50%;
  animation: typingDots 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typingDots {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.last-message {
  font-size: 0.875rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.4;
}

.chat-item.unread .last-message {
  color: #374151;
  font-weight: 500;
}

.unread-badge {
  background: #ef4444;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}



.chat-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  position: relative;
}

.chat-actions-container {
  position: relative;
}

.chat-actions-btn {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.15s ease;
  opacity: 0;
  transform: scale(0.8);
}

.chat-item:hover .chat-actions-btn {
  opacity: 1;
  transform: scale(1);
}

.chat-actions-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.chat-actions-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 160px;
  overflow: hidden;
  animation: slideDown 0.15s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-action-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem;
  border: none;
  background: none;
  color: #374151;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  position: relative;
}

.chat-action-item:hover {
  background: #f9fafb;
  transform: translateX(2px);
}

.chat-action-item.danger {
  color: #dc2626;
}

.chat-action-item.danger:hover {
  background: #fef2f2;
  color: #b91c1c;
}

.chat-action-item:active {
  transform: translateX(1px);
}

.chat-action-item:focus {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}

.blocked-indicator,
.archived-indicator {
  font-size: 0.875rem;
  opacity: 0.8;
}

.archived-indicator {
  color: #f59e0b;
}

.chat-list-footer {
  padding: 1rem 1.25rem;
  background: #ffffff;
  border-top: 1px solid #f3f4f6;
  flex-shrink: 0;
}

.chat-filters {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.chat-filters::-webkit-scrollbar {
  display: none;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  background: #ffffff;
  color: #6b7280;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.filter-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.filter-btn.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .chat-list {
    border-right: none;
    /* Optimize for mobile performance */
    will-change: transform;
  }

  .chat-list-header {
    padding: 1rem;
    /* Add safe area support */
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .search-input {
    padding: 0.875rem 2.5rem 0.875rem 1rem;
    font-size: 0.875rem;
    /* Prevent zoom on iOS */
    font-size: max(16px, 0.875rem);
    border-radius: 16px;
    /* Improve touch interaction */
    min-height: 52px;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Better mobile styling */
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  .search-input:focus {
    transform: scale(1.01);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    background: #ffffff;
    border-color: #3b82f6;
  }

  .search-clear-btn {
    /* Larger touch target */
    width: 32px;
    height: 32px;
    right: 2.75rem;
    font-size: 1rem;
  }

  .search-icon {
    right: 1.25rem;
    font-size: 1.1rem;
  }

  .chat-list-status {
    font-size: 0.75rem;
    margin-top: 0.75rem;
    /* Better spacing on mobile */
    padding: 0.5rem 0;
  }

  .connection-indicator {
    font-size: 0.7rem;
    gap: 0.375rem;
  }

  .total-unread-indicator {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
  }

  .chat-item {
    padding: 1rem;
    gap: 0.875rem;
    /* Improve touch interaction */
    min-height: 88px;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    /* Better touch feedback */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .chat-item:active {
    transform: scale(0.97);
    background: #e8f2ff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
  }

  .chat-item.selected {
    background: #e8f2ff;
    border-left: 4px solid #3b82f6;
  }

  .avatar-image {
    width: 52px;
    height: 52px;
    border-width: 2.5px;
    /* Smoother border radius on mobile */
    border-radius: 50%;
  }

  .online-indicator {
    width: 14px;
    height: 14px;
    border-width: 2.5px;
    /* More prominent on mobile */
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
  }

  .chat-name {
    font-size: 1rem;
    font-weight: 600;
    /* Better line height for mobile */
    line-height: 1.3;
  }

  .chat-time {
    font-size: 0.8rem;
    font-weight: 500;
    /* Better contrast on mobile */
    color: #64748b;
  }

  .last-message {
    font-size: 0.875rem;
    line-height: 1.4;
    /* Show more text on mobile */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
  }

  .unread-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.6rem;
    border-radius: 14px;
    min-width: 24px;
    /* More prominent on mobile */
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
  }

  .chat-actions-btn {
    /* Larger touch target */
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
    border-radius: 50%;
    /* Always visible on mobile for better UX */
    opacity: 0.7;
    transform: scale(1);
  }

  .chat-item:hover .chat-actions-btn,
  .chat-item:active .chat-actions-btn {
    opacity: 1;
    transform: scale(1.1);
  }

  .chat-actions-menu {
    /* Better positioning on mobile */
    right: -8px;
    top: calc(100% + 8px);
    min-width: 180px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    /* Add backdrop blur for modern mobile feel */
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
  }

  .chat-action-item {
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    /* Better touch targets */
    min-height: 48px;
    gap: 0.75rem;
  }

  .chat-list-footer {
    padding: 1rem;
    /* Add safe area support */
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .chat-filters {
    gap: 0.75rem;
    /* Better scrolling on mobile */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  .filter-btn {
    font-size: 0.8rem;
    padding: 0.6rem 1rem;
    border-radius: 20px;
    /* Better touch targets */
    min-height: 40px;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 600;
    transition: all 0.2s ease-out;
  }

  .filter-btn:active {
    transform: scale(0.95);
  }

  .filter-btn.active {
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  }

  /* Enhanced empty states for mobile */
  .empty-chat-list {
    padding: 2rem 1rem;
  }

  .empty-icon {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
  }

  .no-search-results p,
  .no-conversations p,
  .no-unread-conversations p {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
  }

  .no-search-results small,
  .no-conversations small,
  .no-unread-conversations small {
    font-size: 0.875rem;
    line-height: 1.4;
  }
}

@media (max-width: 480px) {
  .chat-list-header {
    padding: 0.875rem;
    /* Tighter padding on very small screens */
    padding-left: max(0.875rem, env(safe-area-inset-left));
    padding-right: max(0.875rem, env(safe-area-inset-right));
  }

  .search-input {
    padding: 0.75rem 2.25rem 0.75rem 1rem;
    /* Ensure 16px minimum to prevent zoom */
    font-size: max(16px, 0.875rem);
    border-radius: 14px;
    min-height: 44px;
  }

  .search-clear-btn {
    width: 28px;
    height: 28px;
    right: 2.5rem;
  }

  .search-icon {
    right: 1rem;
    font-size: 1rem;
  }

  .chat-item {
    padding: 0.875rem;
    gap: 0.75rem;
    min-height: 76px;
  }

  .avatar-image {
    width: 48px;
    height: 48px;
    border-width: 2px;
  }

  .online-indicator {
    width: 12px;
    height: 12px;
    border-width: 2px;
  }

  .chat-name {
    font-size: 0.95rem;
    line-height: 1.25;
  }

  .chat-time {
    font-size: 0.75rem;
  }

  .last-message {
    font-size: 0.8rem;
    line-height: 1.3;
  }

  .unread-badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    min-width: 20px;
    border-radius: 12px;
  }

  .chat-actions-btn {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
  }

  .chat-actions-menu {
    min-width: 160px;
    right: -4px;
  }

  .chat-action-item {
    padding: 0.875rem 1rem;
    font-size: 0.85rem;
    min-height: 44px;
  }

  .filter-btn {
    font-size: 0.75rem;
    padding: 0.5rem 0.875rem;
    min-height: 36px;
    border-radius: 18px;
  }

  .chat-list-footer {
    padding: 0.875rem;
    padding-bottom: max(0.875rem, env(safe-area-inset-bottom));
  }

  /* Optimize typing indicator for small screens */
  .typing-indicator {
    font-size: 0.8rem;
  }

  .typing-dots span {
    width: 3px;
    height: 3px;
  }

  /* Better search status display */
  .search-status {
    font-size: 0.7rem;
    margin-top: 0.375rem;
    padding: 0.25rem 0;
  }

  /* Optimize connection indicator */
  .connection-indicator {
    font-size: 0.65rem;
    gap: 0.25rem;
  }

  .total-unread-indicator {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .chat-list {
    background: #1f2937;
    border-right-color: #374151;
  }

  .chat-list-header {
    background: #111827;
    border-bottom-color: #374151;
  }

  .search-input {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
  }

  .search-input:focus {
    background: #4b5563;
    border-color: #3b82f6;
  }

  .search-icon {
    color: #d1d5db;
  }

  .chat-list-status {
    color: #d1d5db;
  }

  .chat-item {
    background: #111827;
    border-bottom-color: #374151;
  }

  .chat-item:hover {
    background: #1f2937;
  }

  .chat-item.selected {
    background: #1e3a8a;
  }

  .chat-item.unread {
    background: #1f2937;
  }

  .chat-name {
    color: #f9fafb;
  }

  .chat-time {
    color: #d1d5db;
  }

  .last-message {
    color: #d1d5db;
  }

  .chat-item.unread .last-message {
    color: #f3f4f6;
  }

  .chat-list-footer {
    background: #111827;
    border-top-color: #374151;
  }

  .filter-btn {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
  }

  .filter-btn:hover {
    background: #4b5563;
    border-color: #6b7280;
  }

  .filter-btn.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
  }

  .no-search-results p,
  .no-conversations p {
    color: #f9fafb;
  }

  .no-search-results small,
  .no-conversations small {
    color: #d1d5db;
  }
}

/* Search result highlighting */
.chat-item.search-result {
  border-left: 3px solid #f59e0b;
  background: #fffbeb;
}

.chat-item.search-result:hover {
  background: #fef3c7;
}

.chat-item.search-result.selected {
  background: #fde68a;
  border-left-color: #d97706;
}

.search-match-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #d97706;
  font-weight: 500;
  margin-left: 0.5rem;
}

.search-match-count {
  background: #f59e0b;
  color: white;
  padding: 0.125rem 0.375rem;
  border-radius: 8px;
  font-size: 0.7rem;
}

/* Enhanced status indicators */
.chat-status-indicator {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.375rem;
  border-radius: 12px;
  margin-left: 0.5rem;
}

.chat-status-indicator.archived {
  background: #fef3c7;
  color: #d97706;
}

.chat-status-indicator.blocked {
  background: #fee2e2;
  color: #dc2626;
}

/* Action feedback animations */
.chat-item.action-success {
  animation: successPulse 0.6s ease-out;
}

.chat-item.action-error {
  animation: errorShake 0.5s ease-out;
}

@keyframes successPulse {
  0% { background: #dcfce7; }
  50% { background: #bbf7d0; }
  100% { background: inherit; }
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* Loading states for actions */
.chat-actions-btn.loading {
  opacity: 0.6;
  cursor: not-allowed;
}

.chat-actions-btn.loading::after {
  content: '';
  width: 12px;
  height: 12px;
  border: 2px solid #e5e7eb;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 0.25rem;
}

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

/* Enhanced empty states */
.no-unread-conversations {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: #10b981;
}

.no-unread-conversations .empty-icon {
  color: #10b981;
}

/* Improved filter buttons */
.filter-btn {
  position: relative;
  overflow: hidden;
}

.filter-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.filter-btn:hover::before {
  left: 100%;
}

.filter-btn.active::before {
  display: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .online-indicator {
    animation: none;
  }

  .typing-dots span {
    animation: none;
  }

  .chat-item.action-success,
  .chat-item.action-error {
    animation: none;
  }

  .chat-actions-btn.loading::after {
    animation: none;
  }

  .filter-btn::before {
    transition: none;
  }

  * {
    transition: none !important;
  }
} 
/* Message Item Container */
.message-item {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  animation: fadeIn 0.3s ease-in;
}

.message-item.own {
  align-items: flex-end;
}

.message-item.other {
  align-items: flex-start;
}

/* Message Bubble */
.message-bubble {
  max-width: 70%;
  min-width: 120px;
  padding: 12px 16px;
  border-radius: 18px;
  position: relative;
  word-wrap: break-word;
  cursor: pointer;
  transition: all 0.2s ease;
}

.message-bubble:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.message-bubble.own {
  background: linear-gradient(135deg, #2E7D32, #4CAF50);
  color: white;
  border-bottom-right-radius: 6px;
}

.message-bubble.other {
  background: #f5f5f5;
  color: #333;
  border-bottom-left-radius: 6px;
  border: 1px solid #e0e0e0;
}

/* Dark mode support */
[data-theme="dark"] .message-bubble.other {
  background: #424242;
  color: #e0e0e0;
  border-color: #616161;
}

/* Message Content */
.message-content {
  margin-bottom: 4px;
  line-height: 1.4;
  font-size: 14px;
}

.message-timestamp {
  font-size: 11px;
  opacity: 0.7;
  text-align: right;
  margin-top: 4px;
}

.message-bubble.own .message-timestamp {
  color: rgba(255, 255, 255, 0.8);
}

.message-bubble.other .message-timestamp {
  color: #666;
}

/* Message Actions */
.message-actions {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  border-radius: 20px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 10;
}

.message-item:hover .message-actions {
  opacity: 1;
  visibility: visible;
}

.message-actions.own {
  left: -50px;
}

.message-actions.other {
  right: -50px;
}

.action-btn {
  background: none;
  border: none;
  padding: 6px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s ease;
}

.action-btn:hover {
  background: #f0f0f0;
}

/* Offer Messages */
.offer-message {
  background: #fff3e0;
  border: 2px solid #ff9800;
  border-radius: 12px;
  padding: 16px;
  margin: 8px 0;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.1);
  transition: all 0.3s ease;
}

.offer-message.accepted {
  border-color: #4caf50;
  background: #e8f5e8;
}

.offer-message.rejected {
  border-color: #f44336;
  background: #ffebee;
}

.offer-message.expired {
  border-color: #9e9e9e;
  background: #f5f5f5;
  opacity: 0.7;
}

.offer-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 600;
}

.offer-icon {
  font-size: 20px;
  margin-right: 8px;
}

.offer-title {
  color: #e65100;
  font-size: 16px;
}

.offer-details {
  margin-bottom: 12px;
}

.price-info {
  margin-bottom: 8px;
}

.original-price {
  color: #666;
  text-decoration: line-through;
  font-size: 14px;
}

.offered-price {
  font-size: 18px;
  color: #e65100;
  font-weight: 600;
}

.offer-text {
  background: rgba(255, 152, 0, 0.1);
  padding: 8px 12px;
  border-radius: 8px;
  margin: 8px 0;
  font-style: italic;
}

.offer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #666;
  margin-top: 8px;
}

.offer-status {
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  background: rgba(255, 152, 0, 0.1);
}

.offer-status.accepted {
  background: rgba(76, 175, 80, 0.1);
  color: #4caf50;
}

.offer-status.rejected {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}

.offer-expires {
  color: #666;
  font-size: 11px;
}

.offer-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.offer-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
  flex: 1 1;
  min-width: 80px;
}

.accept-btn {
  background: #4caf50;
  color: white;
}

.accept-btn:hover {
  background: #45a049;
  transform: translateY(-1px);
}

.reject-btn {
  background: #f44336;
  color: white;
}

.reject-btn:hover {
  background: #e53935;
  transform: translateY(-1px);
}

.counter-btn {
  background: #ff9800;
  color: white;
}

.counter-btn:hover {
  background: #f57c00;
  transform: translateY(-1px);
}

/* Meeting Messages */
.meeting-message {
  background: #e3f2fd;
  border: 2px solid #2196f3;
  border-radius: 12px;
  padding: 16px;
  margin: 8px 0;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
}

.meeting-message.confirmed {
  border-color: #4caf50;
  background: #e8f5e8;
}

.meeting-message.rejected {
  border-color: #f44336;
  background: #ffebee;
}

.meeting-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 600;
}

.meeting-icon {
  font-size: 20px;
  margin-right: 8px;
}

.meeting-title {
  color: #1976d2;
  font-size: 16px;
}

.meeting-details {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.meeting-info {
  flex: 1 1;
}

.meeting-time,
.meeting-location,
.meeting-notes {
  margin-bottom: 6px;
  font-size: 14px;
}

.meeting-time strong,
.meeting-location strong,
.meeting-notes strong {
  color: #1976d2;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge.proposed {
  background: rgba(33, 150, 243, 0.1);
  color: #1976d2;
}

.status-badge.confirmed {
  background: rgba(76, 175, 80, 0.1);
  color: #4caf50;
}

.status-badge.rejected {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}

.status-badge.completed {
  background: rgba(156, 39, 176, 0.1);
  color: #9c27b0;
}

/* Enhanced Image Messages with Mobile Optimizations */
.image-message {
  margin: 8px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 300px;
  position: relative;
  background: #f8fafc;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 12px;
  overflow: hidden;
}

.image-container.loaded {
  background: transparent;
}

.message-image {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0;
  transform: scale(0.95);
  border-radius: 12px;
  object-fit: cover;
  max-height: 400px;
}

.message-image.loaded {
  opacity: 1;
  transform: scale(1);
}

.message-image:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.image-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #64748b;
  font-size: 0.875rem;
  z-index: 2;
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #e2e8f0;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.image-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #ef4444;
  font-size: 0.875rem;
  text-align: center;
  z-index: 2;
  padding: 20px;
}

.error-icon {
  font-size: 2rem;
  opacity: 0.7;
}

.error-text {
  font-weight: 500;
}

.retry-button {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.retry-button:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

.retry-button:active {
  transform: translateY(0);
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 16px 12px 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3;
}

.image-container:hover .image-overlay {
  opacity: 1;
}

.overlay-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tap-hint {
  font-size: 0.75rem;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.image-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.625rem;
  opacity: 0.8;
}

.image-size-indicator {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.625rem;
}

.image-error {
  padding: 20px;
  text-align: center;
  background: #f5f5f5;
  color: #666;
  border: 2px dashed #ddd;
  border-radius: 8px;
}

/* System Messages */
.system-message {
  text-align: center;
  margin: 16px 0;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  font-size: 12px;
  color: #666;
  font-style: italic;
}

[data-theme="dark"] .system-message {
  background: rgba(255, 255, 255, 0.1);
  color: #bbb;
}

/* Deal Messages */
.deal-message {
  background: linear-gradient(135deg, #4caf50, #66bb6a);
  color: white;
  border-radius: 12px;
  padding: 16px;
  margin: 8px 0;
  text-align: center;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.deal-message .deal-icon {
  font-size: 24px;
  margin-bottom: 8px;
  display: block;
}

.deal-message .deal-text {
  font-size: 16px;
  font-weight: 600;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced Responsive Design with Mobile Image Optimizations */
@media (max-width: 768px) {
  .message-bubble {
    max-width: 85%;
    padding: 10px 14px;
  }
  
  /* Enhanced Mobile Image Optimizations */
  .image-message {
    max-width: min(280px, calc(100vw - 80px));
    min-height: 100px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .image-container {
    border-radius: 16px;
    min-height: 100px;
  }

  .message-image {
    border-radius: 16px;
    max-height: 300px;
    /* Optimize for mobile performance */
    will-change: transform;
    backface-visibility: hidden;
  }

  .message-image:hover {
    transform: none; /* Disable hover effects on mobile */
  }

  .message-image:active {
    transform: scale(0.98);
  }

  .image-overlay {
    /* Always show on mobile for better UX */
    opacity: 1;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    padding: 12px 10px 8px;
  }

  .tap-hint {
    font-size: 0.7rem;
    text-align: center;
  }

  .loading-spinner {
    width: 20px;
    height: 20px;
  }

  .image-loading {
    font-size: 0.8rem;
    gap: 8px;
  }

  .image-error {
    padding: 16px;
    font-size: 0.8rem;
  }

  .error-icon {
    font-size: 1.5rem;
  }

  .retry-button {
    padding: 10px 20px;
    font-size: 0.8rem;
    min-height: 44px; /* Better touch target */
    border-radius: 8px;
  }
  
  .offer-message,
  .meeting-message {
    padding: 12px;
  }
  
  .meeting-details {
    flex-direction: column;
    gap: 8px;
  }
  
  .offer-actions {
    flex-direction: column;
  }
  
  .offer-btn {
    min-width: auto;
  }
  
  .message-actions {
    position: static;
    transform: none;
    margin-top: 8px;
    opacity: 1;
    visibility: visible;
  }
}

/* Small Mobile Screens */
@media (max-width: 480px) {
  .image-message {
    max-width: min(260px, calc(100vw - 60px));
    min-height: 80px;
    border-radius: 14px;
  }

  .image-container {
    border-radius: 14px;
    min-height: 80px;
  }

  .message-image {
    border-radius: 14px;
    max-height: 250px;
  }

  .image-overlay {
    padding: 10px 8px 6px;
  }

  .tap-hint {
    font-size: 0.65rem;
  }

  .loading-spinner {
    width: 18px;
    height: 18px;
  }

  .image-loading {
    font-size: 0.75rem;
    gap: 6px;
  }

  .image-error {
    padding: 12px;
    font-size: 0.75rem;
  }

  .error-icon {
    font-size: 1.25rem;
  }

  .retry-button {
    padding: 8px 16px;
    font-size: 0.75rem;
    min-height: 40px;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .message-image:hover {
    transform: none;
    box-shadow: none;
  }

  .message-image:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  .image-container:hover .image-overlay {
    opacity: 1; /* Always show on touch devices */
  }

  .retry-button:hover {
    background: #3b82f6;
    transform: none;
  }

  .retry-button:active {
    background: #2563eb;
    transform: scale(0.98);
  }
}

/* High DPI Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .image-message {
    /* Ensure crisp borders on high DPI displays */
    border: 0.5px solid rgba(0, 0, 0, 0.05);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .message-image,
  .image-overlay,
  .loading-spinner {
    transition: none;
    animation: none;
  }

  .message-image.loaded {
    transform: none;
  }

  .message-image:active {
    transform: none;
  }
}

/* Enhanced message status indicators */
.message-status {
  display: flex;
  align-items: center;
  margin-left: 8px;
  gap: 4px;
}

.status-read,
.status-delivered,
.status-sent,
.status-sending {
  font-size: 12px;
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 2px;
  transition: opacity 0.2s ease;
}

.status-read {
  color: #4CAF50;
}

.status-delivered {
  color: #2196F3;
}

.status-sent {
  color: #9E9E9E;
}

.status-sending {
  color: #FF9800;
}

.checkmark.double.read {
  color: #4CAF50;
  font-weight: bold;
  font-size: 14px;
}

.checkmark.single.delivered {
  color: #2196F3;
  font-weight: bold;
  font-size: 14px;
}

.checkmark.single.sent {
  color: #9E9E9E;
  font-weight: bold;
  font-size: 14px;
}

/* Message meta container */
.message-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
}

.message-time {
  opacity: 0.7;
  white-space: nowrap;
}

.message-bubble.own .message-time {
  color: rgba(255, 255, 255, 0.8);
}

.message-bubble.other .message-time {
  color: #666;
}

/* Enhanced status indicators for reliability features */
.status-queued,
.status-pending,
.status-failed {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.status-queued {
  background: rgba(33, 150, 243, 0.1);
  color: #1976d2;
  border: 1px solid rgba(33, 150, 243, 0.2);
}

.status-pending {
  background: rgba(255, 152, 0, 0.1);
  color: #f57c00;
  border: 1px solid rgba(255, 152, 0, 0.2);
}

.status-failed {
  background: rgba(244, 67, 54, 0.1);
  color: #d32f2f;
  border: 1px solid rgba(244, 67, 54, 0.2);
}

.status-actions {
  display: flex;
  gap: 2px;
  margin-left: 4px;
}

.retry-btn,
.clear-btn {
  background: none;
  border: none;
  padding: 2px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.retry-btn:hover {
  background: rgba(76, 175, 80, 0.2);
}

.clear-btn:hover {
  background: rgba(244, 67, 54, 0.2);
}

.status-text {
  font-size: 10px;
  font-weight: 500;
}

/* Animations for enhanced status */
.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.status-sending .status-icon {
  animation: pulse 1.5s infinite;
}

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

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .message-bubble,
  .offer-message,
  .meeting-message,
  .message-image,
  .offer-btn,
  .action-btn {
    transition: none;
  }
  
  .message-item {
    animation: none;
  }
  
  .spinning,
  .status-sending .status-icon {
    animation: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .message-bubble.other {
    border: 2px solid #000;
  }
  
  .offer-message,
  .meeting-message {
    border-width: 3px;
  }
} 
.mobile-image-handler {
  position: relative;
  display: inline-block;
}

.image-button {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #f8fafc;
  color: #64748b;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  border: 1px solid #e2e8f0;
}

.image-button:hover:not(:disabled) {
  background: #e2e8f0;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.image-button:active:not(:disabled) {
  transform: scale(0.98);
}

.image-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.image-button.processing {
  background: #3b82f6;
  color: white;
  cursor: not-allowed;
}

.processing-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.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;
}

.compression-progress {
  width: 20px;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 1px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: white;
  transition: width 0.3s ease-out;
  border-radius: 1px;
}

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

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.image-menu {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  min-width: 160px;
  animation: slideUp 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

.menu-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  border: none;
  background: none;
  color: #374151;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 56px;
  position: relative;
}

.option-hint {
  font-size: 0.75rem;
  color: #6b7280;
  margin-left: auto;
  font-weight: 400;
}

.menu-option:hover {
  background: #f8fafc;
}

.menu-option:active {
  background: #e2e8f0;
  transform: scale(0.98);
}

.menu-option:not(:last-child) {
  border-bottom: 1px solid #f1f5f9;
}

.option-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.option-text {
  font-weight: 500;
  flex: 1 1;
  text-align: left;
}

.camera-option .option-icon {
  filter: hue-rotate(200deg);
}

.gallery-option .option-icon {
  filter: hue-rotate(120deg);
}

/* Enhanced mobile optimizations */
@media (max-width: 768px) {
  .image-button {
    width: 48px;
    height: 48px;
    font-size: 1.375rem;
    /* Better mobile touch target */
    min-width: 48px;
    min-height: 48px;
    /* Enhanced mobile styling */
    border: 2px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .image-button:active:not(:disabled) {
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .image-menu {
    bottom: calc(100% + 16px);
    min-width: 200px;
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    /* Enhanced mobile menu */
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .menu-option {
    padding: 20px 24px;
    font-size: 1rem;
    min-height: 64px;
    gap: 16px;
    /* Better mobile touch feedback */
    position: relative;
    overflow: hidden;
  }

  .menu-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(59, 130, 246, 0.1);
    opacity: 0;
    transition: opacity 0.2s ease-out;
  }

  .menu-option:active::before {
    opacity: 1;
  }

  .option-icon {
    font-size: 1.5rem;
    z-index: 1;
    position: relative;
  }

  .option-text {
    font-weight: 600;
    z-index: 1;
    position: relative;
  }

  .option-hint {
    font-size: 0.8rem;
    z-index: 1;
    position: relative;
  }

  /* Enhanced compression progress for mobile */
  .compression-progress {
    width: 24px;
    height: 3px;
  }
}

@media (max-width: 480px) {
  .image-button {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }

  .image-menu {
    min-width: 160px;
    border-radius: 16px;
  }

  .menu-option {
    padding: 16px 20px;
    font-size: 0.9rem;
    min-height: 56px;
    gap: 14px;
  }

  .option-icon {
    font-size: 1.375rem;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .image-button {
    background: #374151;
    color: #d1d5db;
    border-color: #4b5563;
  }

  .image-button:hover:not(:disabled) {
    background: #4b5563;
  }

  .image-button.processing {
    background: #3b82f6;
    color: white;
  }

  .menu-overlay {
    background: rgba(0, 0, 0, 0.5);
  }

  .image-menu {
    background: #1f2937;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }

  .menu-option {
    color: #f9fafb;
  }

  .menu-option:hover {
    background: #374151;
  }

  .menu-option:active {
    background: #4b5563;
  }

  .menu-option:not(:last-child) {
    border-bottom-color: #374151;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .image-button {
    border: 2px solid currentColor;
  }

  .image-menu {
    border: 2px solid currentColor;
  }

  .menu-option:not(:last-child) {
    border-bottom: 2px solid currentColor;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .image-button,
  .menu-option {
    transition: none;
  }

  .image-menu {
    animation: none;
  }

  .spinner {
    animation: none;
  }

  .image-button:hover:not(:disabled),
  .image-button:active:not(:disabled),
  .menu-option:active {
    transform: none;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .image-button:hover {
    background: #f8fafc;
    transform: none;
    box-shadow: none;
  }

  .image-button:active:not(:disabled) {
    background: #e2e8f0;
    transform: scale(0.95);
  }

  .menu-option:hover {
    background: none;
  }

  .menu-option:active {
    background: #f8fafc;
    transform: scale(0.98);
  }
}
/* Chat Loading State Styles */
.chat-loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.chat-loading-state--small {
  padding: 10px;
}

.chat-loading-state--medium {
  padding: 20px;
}

.chat-loading-state--large {
  padding: 40px;
}

.chat-loading-state__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 300px;
}

.chat-loading-state__icon {
  font-size: 32px;
  opacity: 0.8;
}

.chat-loading-state--small .chat-loading-state__icon {
  font-size: 20px;
}

.chat-loading-state--large .chat-loading-state__icon {
  font-size: 48px;
}

.chat-loading-state__spinner-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-loading-state__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-loading-state__message {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.chat-loading-state--small .chat-loading-state__message {
  font-size: 14px;
}

.chat-loading-state--large .chat-loading-state__message {
  font-size: 18px;
}

.chat-loading-state__description {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.chat-loading-state--small .chat-loading-state__description {
  font-size: 12px;
}

/* Loading Spinner */
.chat-loading-spinner {
  display: flex;
  gap: 4px;
  align-items: center;
}

.chat-loading-spinner--small {
  gap: 2px;
}

.chat-loading-spinner--large {
  gap: 6px;
}

.chat-loading-spinner__circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #007bff;
  animation: chatLoadingBounce 1.4s ease-in-out infinite both;
}

.chat-loading-spinner--small .chat-loading-spinner__circle {
  width: 6px;
  height: 6px;
}

.chat-loading-spinner--large .chat-loading-spinner__circle {
  width: 12px;
  height: 12px;
}

.chat-loading-spinner__circle:nth-child(1) {
  animation-delay: -0.32s;
}

.chat-loading-spinner__circle:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes chatLoadingBounce {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Progress Bar */
.chat-loading-progress {
  width: 100%;
  max-width: 200px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-loading-progress__track {
  flex: 1 1;
  height: 4px;
  background: #e9ecef;
  border-radius: 2px;
  overflow: hidden;
}

.chat-loading-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, #007bff, #0056b3);
  border-radius: 2px;
  transition: width 0.3s ease;
  position: relative;
}

.chat-loading-progress__fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: progressShimmer 2s infinite;
}

@keyframes progressShimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.chat-loading-progress__text {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  min-width: 35px;
  text-align: right;
}

/* Overlay */
.chat-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-loading-overlay__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.chat-loading-overlay__content {
  position: relative;
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  max-width: 90%;
  max-height: 90%;
}

/* Typing Indicator */
.typing-indicator {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  margin: 4px 0;
  max-width: fit-content;
}

.typing-indicator__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.typing-indicator__avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e9ecef, #dee2e6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #6c757d;
}

.typing-indicator__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.typing-indicator__name {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.typing-indicator .chat-loading-state {
  padding: 4px 8px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.typing-indicator .chat-loading-state__content {
  flex-direction: row;
  gap: 6px;
}

.typing-indicator .chat-loading-state__message {
  font-size: 13px;
  color: #666;
  font-style: italic;
}

/* Specific loading state variants */
.chat-loading-state--messages {
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  border: 1px solid #e3e8ff;
  border-radius: 8px;
}

.chat-loading-state--sending {
  background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
  border: 1px solid #ffe8cc;
  border-radius: 8px;
}

.chat-loading-state--uploading {
  background: linear-gradient(135deg, #f0fff4 0%, #ffffff 100%);
  border: 1px solid #c6f6d5;
  border-radius: 8px;
}

.chat-loading-state--connecting {
  background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
  border: 1px solid #fed7d7;
  border-radius: 8px;
}

.chat-loading-state--chat-list {
  background: linear-gradient(135deg, #f7fafc 0%, #ffffff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .chat-loading-state--large {
    padding: 20px;
  }

  .chat-loading-state__icon {
    font-size: 28px;
  }

  .chat-loading-state--large .chat-loading-state__icon {
    font-size: 36px;
  }

  .chat-loading-overlay__content {
    padding: 20px;
    margin: 20px;
  }

  .typing-indicator {
    gap: 6px;
    padding: 6px 10px;
  }

  .typing-indicator__avatar {
    width: 28px;
    height: 28px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .chat-loading-state__message {
    color: #e2e8f0;
  }

  .chat-loading-state__description {
    color: #a0aec0;
  }

  .chat-loading-spinner__circle {
    background: #63b3ed;
  }

  .chat-loading-progress__track {
    background: #4a5568;
  }

  .chat-loading-progress__fill {
    background: linear-gradient(90deg, #63b3ed, #3182ce);
  }

  .chat-loading-progress__text {
    color: #a0aec0;
  }

  .chat-loading-overlay__content {
    background: #2d3748;
    color: #e2e8f0;
  }

  .typing-indicator .chat-loading-state {
    background: #4a5568;
    border-color: #718096;
  }

  .typing-indicator__name {
    color: #a0aec0;
  }

  .typing-indicator .chat-loading-state__message {
    color: #a0aec0;
  }

  .chat-loading-state--messages {
    background: linear-gradient(135deg, #2a2d3a 0%, #2d3748 100%);
    border-color: #4a5568;
  }

  .chat-loading-state--sending {
    background: linear-gradient(135deg, #3a2d2a 0%, #2d3748 100%);
    border-color: #744210;
  }

  .chat-loading-state--uploading {
    background: linear-gradient(135deg, #2a3a2d 0%, #2d3748 100%);
    border-color: #276749;
  }

  .chat-loading-state--connecting {
    background: linear-gradient(135deg, #3a2a2a 0%, #2d3748 100%);
    border-color: #742a2a;
  }

  .chat-loading-state--chat-list {
    background: linear-gradient(135deg, #2a2d3a 0%, #2d3748 100%);
    border-color: #4a5568;
  }
}
.message-input-container {
  background: white;
  border-top: 1px solid #e0e0e0;
  padding: 12px 16px;
}

.reply-preview {
  background: #f5f5f5;
  border-left: 4px solid #2E7D32;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.875rem;
}

.reply-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.reply-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.reply-label {
  color: #2E7D32;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.reply-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.reply-close:hover {
  background-color: #e0e0e0;
}

.reply-message {
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.message-input {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 24px;
  padding: 8px 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.message-input:focus-within {
  border-color: #2E7D32;
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.1);
}

.input-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.action-button:hover:not(:disabled) {
  background-color: #e0e0e0;
}

.action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.emoji-picker-container {
  position: relative;
}

.emoji-picker {
  position: absolute;
  bottom: 100%;
  left: 0;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-bottom: 8px;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 4px;
  gap: 4px;
}

.emoji-option {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: background-color 0.2s;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emoji-option:hover {
  background-color: #f0f0f0;
}

.input-field {
  flex: 1 1;
  min-width: 0;
}

.message-textarea {
  width: 100%;
  border: none;
  background: transparent;
  resize: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  padding: 6px 0;
  min-height: 20px;
  max-height: 120px;
  overflow-y: auto;
}

.message-textarea::placeholder {
  color: #999;
}

.send-button {
  background: #e0e0e0;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: #666;
}

.send-button.active {
  background: #2E7D32;
  color: white;
  transform: scale(1.1);
}

.send-button:disabled {
  cursor: not-allowed;
  transform: none;
}

.send-button:hover:not(:disabled) {
  transform: scale(1.05);
}

.send-button.active:hover {
  background: #1B5E20;
  transform: scale(1.15);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .message-input-container {
    padding: 12px 16px;
    /* Add safe area support */
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    /* Better mobile styling */
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
  }

  .reply-preview {
    margin-bottom: 12px;
    border-radius: 12px;
    padding: 12px 16px;
    /* Better mobile styling */
    background: #f8fafc;
    border-left: 4px solid #3b82f6;
  }

  .reply-close {
    /* Larger touch target */
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
    border-radius: 50%;
  }

  .reply-message {
    max-width: 200px;
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .message-input {
    padding: 12px 16px;
    border-radius: 28px;
    /* Better mobile styling */
    background: #f8fafc;
    border: 2px solid #e5e7eb;
    min-height: 56px;
    align-items: center;
  }

  .message-input:focus-within {
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }

  .input-actions {
    gap: 8px;
  }

  .action-button {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    border-radius: 50%;
    /* Better touch feedback */
    transition: all 0.2s ease-out;
  }

  .action-button:hover:not(:disabled),
  .action-button:active:not(:disabled) {
    background-color: #e2e8f0;
    transform: scale(1.05);
  }

  .emoji-picker {
    /* Better mobile positioning */
    bottom: calc(100% + 12px);
    left: -8px;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    /* Modern mobile styling */
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
  }

  .emoji-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
  }

  .emoji-option {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    border-radius: 8px;
    /* Better touch feedback */
    transition: all 0.2s ease-out;
  }

  .emoji-option:hover,
  .emoji-option:active {
    background-color: #e2e8f0;
    transform: scale(1.1);
  }

  .message-textarea {
    font-size: 16px; /* Prevent zoom on iOS */
    line-height: 1.5;
    padding: 8px 0;
    min-height: 24px;
    max-height: 120px;
    /* Better mobile text input */
    -webkit-appearance: none;
    resize: none;
  }

  .message-textarea::placeholder {
    color: #9ca3af;
    font-size: 16px; /* Prevent zoom on iOS */
  }

  .send-button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* Better mobile styling */
    background: #e5e7eb;
    transition: all 0.2s ease-out;
  }

  .send-button.active {
    background: #3b82f6;
    color: white;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }

  .send-button:hover:not(:disabled) {
    transform: scale(1.02);
  }

  .send-button.active:hover {
    background: #2563eb;
    transform: scale(1.08);
  }

  .send-button:active {
    transform: scale(0.98);
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .message-input-container {
    background: #1e1e1e;
    border-top-color: #333;
  }

  .reply-preview {
    background: #2a2a2a;
    color: #e0e0e0;
  }

  .reply-label {
    color: #66BB6A;
  }

  .reply-close:hover {
    background-color: #333;
  }

  .message-input {
    background: #2a2a2a;
    border-color: #333;
  }

  .message-input:focus-within {
    border-color: #66BB6A;
    box-shadow: 0 0 0 2px rgba(102, 187, 106, 0.1);
  }

  .action-button:hover:not(:disabled) {
    background-color: #333;
  }

  .emoji-picker {
    background: #2a2a2a;
    border-color: #333;
  }

  .emoji-option:hover {
    background-color: #333;
  }

  .message-textarea {
    color: #e0e0e0;
  }

  .message-textarea::placeholder {
    color: #999;
  }
} /
* Small Mobile Screens */
@media (max-width: 480px) {
  .message-input-container {
    padding: 10px 12px;
    /* Maintain safe area support */
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .reply-preview {
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
  }

  .reply-close {
    width: 28px;
    height: 28px;
    font-size: 1.1rem;
  }

  .reply-message {
    max-width: 140px;
    font-size: 0.8rem;
  }

  .message-input {
    padding: 10px 14px;
    border-radius: 24px;
    min-height: 48px;
    /* Ensure adequate touch area */
    border-width: 2px;
  }

  .input-actions {
    gap: 6px;
  }

  .action-button {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
    /* Ensure minimum touch target */
    min-width: 36px;
    min-height: 36px;
  }

  .emoji-picker {
    left: -6px;
    padding: 14px;
    border-radius: 14px;
    /* Adjust for smaller screens */
    max-width: 280px;
  }

  .emoji-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }

  .emoji-option {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
    border-radius: 6px;
  }

  .message-textarea {
    font-size: 16px; /* Prevent zoom on iOS */
    line-height: 1.4;
    padding: 6px 0;
    min-height: 22px;
    max-height: 100px;
  }

  .message-textarea::placeholder {
    font-size: 16px; /* Prevent zoom on iOS */
  }

  .send-button {
    width: 40px;
    height: 40px;
    /* Ensure minimum touch target */
    min-width: 40px;
    min-height: 40px;
  }

  .send-button.active {
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
  }
}

/* Landscape Mobile Optimization */
@media (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {
  .message-input-container {
    padding: 8px 12px;
  }

  .message-input {
    min-height: 44px;
    padding: 8px 12px;
  }

  .action-button {
    width: 36px;
    height: 36px;
  }

  .send-button {
    width: 40px;
    height: 40px;
  }

  .emoji-picker {
    max-height: 200px;
    overflow-y: auto;
  }

  .message-textarea {
    max-height: 80px;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .action-button:hover {
    background-color: transparent;
    transform: none;
  }

  .action-button:active {
    background-color: #e2e8f0;
    transform: scale(0.95);
  }

  .emoji-option:hover {
    background-color: transparent;
    transform: none;
  }

  .emoji-option:active {
    background-color: #e2e8f0;
    transform: scale(0.95);
  }

  .send-button:hover {
    transform: none;
  }

  .send-button:active {
    transform: scale(0.95);
  }

  .send-button.active:hover {
    background: #3b82f6;
    transform: none;
  }

  .send-button.active:active {
    background: #2563eb;
    transform: scale(0.95);
  }
}

/* High DPI Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .message-input {
    border-width: 0.5px;
  }

  .reply-preview {
    border-left-width: 2px;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .action-button,
  .emoji-option,
  .send-button {
    transition: none;
  }

  .action-button:active,
  .emoji-option:active,
  .send-button:active {
    transform: none;
  }
}/
* Error Display */
.message-input-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: 6px;
  font-size: 14px;
  color: #c53030;
  margin-bottom: 8px;
}

.message-input-error .error-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.message-input-error .error-text {
  flex: 1 1;
}

.message-input-error .error-dismiss {
  background: none;
  border: none;
  color: #c53030;
  cursor: pointer;
  font-size: 16px;
  padding: 2px;
  border-radius: 2px;
  transition: background 0.2s ease;
}

.message-input-error .error-dismiss:hover {
  background: rgba(197, 48, 48, 0.1);
}

/* Progress Display */
.message-input-progress {
  padding: 8px 12px;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-bottom: 8px;
}

/* Send Button Loading State */
.send-button.sending {
  opacity: 0.7;
  cursor: not-allowed;
}

.send-button-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Mobile responsiveness for error states */
@media (max-width: 768px) {
  .message-input-error {
    padding: 6px 10px;
    font-size: 13px;
  }

  .message-input-progress {
    padding: 6px 10px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .message-input-error {
    background: #2d1b1b;
    border-color: #742a2a;
    color: #feb2b2;
  }

  .message-input-error .error-dismiss {
    color: #feb2b2;
  }

  .message-input-error .error-dismiss:hover {
    background: rgba(254, 178, 178, 0.1);
  }

  .message-input-progress {
    background: #1a202c;
    border-color: #4a5568;
  }
}
.image-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  z-index: 1500;
  overflow: hidden;
  -webkit-user-select: none;
          user-select: none;
}

.image-preview-modal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: white;
}

.image-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.image-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sender-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sender-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.sender-name {
  font-weight: 600;
  font-size: 0.875rem;
}

.image-timestamp {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

.image-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
}

.action-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.zoom-btn {
  font-family: monospace;
  font-weight: bold;
}

.zoom-level {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  padding: 0 8px;
  min-width: 50px;
  text-align: center;
}

.close-btn {
  background: rgba(244, 67, 54, 0.2);
  border-color: rgba(244, 67, 54, 0.3);
}

.close-btn:hover:not(:disabled) {
  background: rgba(244, 67, 54, 0.3);
  border-color: rgba(244, 67, 54, 0.4);
}

.image-container {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.1s ease;
}

.image-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.8);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top: 3px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.error-icon {
  font-size: 3rem;
}

.image-error button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.image-error button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.image-instructions {
  padding: 12px 20px;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .image-preview-header {
    padding: 12px 16px;
  }

  .image-actions {
    gap: 4px;
  }

  .action-btn {
    padding: 6px 8px;
    min-width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  .zoom-level {
    font-size: 0.65rem;
    min-width: 40px;
  }

  .sender-avatar {
    width: 28px;
    height: 28px;
  }

  .sender-name {
    font-size: 0.75rem;
  }

  .image-timestamp {
    font-size: 0.65rem;
  }

  .image-instructions {
    padding: 8px 16px;
    font-size: 0.65rem;
  }
}

/* Touch gestures for mobile */
@media (max-width: 768px) {
  .image-container {
    touch-action: pan-x pan-y pinch-zoom;
  }
}

/* Dark mode adjustments (already dark, but for consistency) */
@media (prefers-color-scheme: dark) {
  .image-preview-overlay {
    background: rgba(0, 0, 0, 0.95);
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .image-container img {
    transition: none;
  }
  
  .action-btn {
    transition: none;
  }
  
  .loading-spinner {
    animation: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .image-preview-header {
    background: black;
    border-bottom-color: white;
  }
  
  .action-btn {
    background: black;
    border-color: white;
  }
  
  .action-btn:hover:not(:disabled) {
    background: white;
    color: black;
  }
} 
/* Chat Error Display Styles */
.chat-error-display {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: 500px;
  width: 90%;
  margin: 0 auto;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

.chat-error-display.visible {
  opacity: 1;
  visibility: visible;
}

.chat-error-display.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Position variants */
.chat-error-display--top {
  top: 20px;
  transform: translateX(-50%) translateY(-10px);
}

.chat-error-display--top.visible {
  transform: translateX(-50%) translateY(0);
}

.chat-error-display--bottom {
  bottom: 20px;
  transform: translateX(-50%) translateY(10px);
}

.chat-error-display--bottom.visible {
  transform: translateX(-50%) translateY(0);
}

.chat-error-display--center {
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0.9);
}

.chat-error-display--center.visible {
  transform: translateX(-50%) translateY(-50%) scale(1);
}

/* Container */
.chat-error-display__container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border: 1px solid #e1e5e9;
  overflow: hidden;
  animation: slideIn 0.3s ease;
}

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

/* Severity variants */
.chat-error-display--high .chat-error-display__container {
  border-left: 4px solid #dc3545;
  background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
}

.chat-error-display--medium .chat-error-display__container {
  border-left: 4px solid #ffc107;
  background: linear-gradient(135deg, #fffbf0 0%, #ffffff 100%);
}

.chat-error-display--low .chat-error-display__container {
  border-left: 4px solid #17a2b8;
  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
}

/* Content */
.chat-error-display__content {
  display: flex;
  align-items: flex-start;
  padding: 16px 20px;
  gap: 12px;
}

.chat-error-display__icon {
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.chat-error-display__message {
  flex: 1 1;
  min-width: 0;
}

.chat-error-display__title {
  font-weight: 600;
  font-size: 16px;
  color: #1a1a1a;
  margin-bottom: 4px;
  line-height: 1.3;
}

.chat-error-display__description {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  margin-bottom: 8px;
}

.chat-error-display__retry-info {
  font-size: 12px;
  color: #888;
  font-style: italic;
}

.chat-error-display__close {
  background: none;
  border: none;
  font-size: 20px;
  color: #999;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  line-height: 1;
}

.chat-error-display__close:hover {
  background: #f5f5f5;
  color: #666;
}

/* Actions */
.chat-error-display__actions {
  display: flex;
  gap: 8px;
  padding: 0 20px 16px;
  flex-wrap: wrap;
}

.chat-error-display__action {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
}

.chat-error-display__action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.chat-error-display__action--primary {
  background: #007bff;
  color: white;
}

.chat-error-display__action--primary:hover:not(:disabled) {
  background: #0056b3;
  transform: translateY(-1px);
}

.chat-error-display__action--secondary {
  background: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
}

.chat-error-display__action--secondary:hover:not(:disabled) {
  background: #e9ecef;
  border-color: #adb5bd;
}

.chat-error-display__action--danger {
  background: #dc3545;
  color: white;
}

.chat-error-display__action--danger:hover:not(:disabled) {
  background: #c82333;
}

.chat-error-display__action--default {
  background: #6c757d;
  color: white;
}

.chat-error-display__action--default:hover:not(:disabled) {
  background: #545b62;
}

/* Spinner for retry button */
.chat-error-display__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Details section (development only) */
.chat-error-display__details {
  border-top: 1px solid #e9ecef;
  background: #f8f9fa;
}

.chat-error-display__details-toggle {
  width: 100%;
  padding: 12px 20px;
  background: none;
  border: none;
  text-align: left;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  transition: background 0.2s ease;
}

.chat-error-display__details-toggle:hover {
  background: #e9ecef;
}

.chat-error-display__debug {
  padding: 16px 20px;
  border-top: 1px solid #dee2e6;
}

.chat-error-display__debug-section {
  margin-bottom: 12px;
  font-size: 12px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.chat-error-display__debug-section strong {
  color: #495057;
  display: inline-block;
  min-width: 80px;
}

.chat-error-display__debug-section pre {
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 8px;
  margin-top: 4px;
  font-size: 11px;
  overflow-x: auto;
  max-height: 200px;
  overflow-y: auto;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .chat-error-display {
    width: 95%;
    max-width: none;
  }

  .chat-error-display--top {
    top: 10px;
  }

  .chat-error-display--bottom {
    bottom: 10px;
  }

  .chat-error-display__content {
    padding: 14px 16px;
    gap: 10px;
  }

  .chat-error-display__icon {
    font-size: 20px;
  }

  .chat-error-display__title {
    font-size: 15px;
  }

  .chat-error-display__description {
    font-size: 13px;
  }

  .chat-error-display__actions {
    padding: 0 16px 14px;
    gap: 6px;
  }

  .chat-error-display__action {
    padding: 6px 12px;
    font-size: 13px;
    min-height: 32px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .chat-error-display__container {
    background: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
  }

  .chat-error-display--high .chat-error-display__container {
    background: linear-gradient(135deg, #2d1b1b 0%, #2d3748 100%);
  }

  .chat-error-display--medium .chat-error-display__container {
    background: linear-gradient(135deg, #2d2a1b 0%, #2d3748 100%);
  }

  .chat-error-display--low .chat-error-display__container {
    background: linear-gradient(135deg, #1b2d2d 0%, #2d3748 100%);
  }

  .chat-error-display__title {
    color: #f7fafc;
  }

  .chat-error-display__description {
    color: #a0aec0;
  }

  .chat-error-display__close {
    color: #a0aec0;
  }

  .chat-error-display__close:hover {
    background: #4a5568;
    color: #e2e8f0;
  }

  .chat-error-display__action--secondary {
    background: #4a5568;
    color: #e2e8f0;
    border-color: #718096;
  }

  .chat-error-display__action--secondary:hover:not(:disabled) {
    background: #2d3748;
    border-color: #4a5568;
  }

  .chat-error-display__details {
    background: #1a202c;
    border-color: #4a5568;
  }

  .chat-error-display__details-toggle {
    color: #a0aec0;
  }

  .chat-error-display__details-toggle:hover {
    background: #2d3748;
  }

  .chat-error-display__debug {
    border-color: #4a5568;
  }

  .chat-error-display__debug-section pre {
    background: #1a202c;
    border-color: #4a5568;
    color: #e2e8f0;
  }
}
.chat-conversation {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  position: relative;
}

.chat-conversation-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
}

.chat-conversation-loading p {
  margin-top: 1rem;
  font-size: 1rem;
}

/* Chat Header */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
  position: relative;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1;
  min-width: 0;
}

.back-button {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #667eea;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.back-button:hover {
  background: #f0f0f0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1;
  min-width: 0;
}

.user-avatar {
  position: relative;
  flex-shrink: 0;
}

.avatar-image {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e0e0e0;
}

.online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: #4caf50;
  border: 2px solid #ffffff;
  border-radius: 50%;
}

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

.user-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-status {
  font-size: 0.8rem;
  color: #666;
  display: block;
}

.typing-status {
  color: #667eea;
  font-style: italic;
  animation: pulse 1.5s infinite;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}



.action-buttons {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: #f5f5f5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: #eeeeee;
  transform: translateY(-1px);
}



.menu-btn:hover {
  background: #f0f0f0;
}

.user-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 150px;
  overflow: hidden;
}

.user-menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  color: #333;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.user-menu button:hover {
  background: #f5f5f5;
}

.user-menu button:last-child {
  border-top: 1px solid #e0e0e0;
  color: #d32f2f;
}

/* Messages Container */
.messages-container {
  flex: 1 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

.messages-container::-webkit-scrollbar {
  width: 6px;
}

.messages-container::-webkit-scrollbar-track {
  background: transparent;
}

.messages-container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.messages-container::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

.empty-messages {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 2rem;
  color: #666;
}

.empty-messages .empty-icon {
  font-size: 3rem;
  opacity: 0.5;
  margin-bottom: 1rem;
}

.empty-messages p {
  margin: 0 0 0.5rem 0;
  font-weight: 500;
  font-size: 1.1rem;
}

.empty-messages small {
  font-size: 0.9rem;
  opacity: 0.8;
}

.messages-list {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Blocked Message */
.blocked-message {
  padding: 1rem;
  background: #ffebee;
  color: #c62828;
  text-align: center;
  border-top: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-weight: 500;
}

.unblock-btn {
  background: #667eea;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background-color 0.2s;
}

.unblock-btn:hover {
  background: #5a6fd8;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .chat-conversation {
    /* Optimize for mobile performance */
    will-change: transform;
  }

  .chat-header {
    padding: 0.875rem 1rem;
    /* Add safe area support */
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-top: max(0.875rem, env(safe-area-inset-top));
    /* Better mobile header height */
    min-height: 64px;
    /* Add subtle shadow for depth */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .back-button {
    display: flex;
    /* Larger touch target */
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    border-radius: 50%;
    /* Better visual feedback */
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Remove tap highlight */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    /* Better visual styling */
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
  }

  .back-button:hover,
  .back-button:active {
    background: rgba(59, 130, 246, 0.15);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
  }

  .user-info {
    gap: 0.75rem;
    flex: 1 1;
    min-width: 0;
  }

  .avatar-image {
    width: 40px;
    height: 40px;
    border-width: 2px;
    /* Better border radius */
    border-radius: 50%;
  }

  .online-dot {
    width: 12px;
    height: 12px;
    border-width: 2px;
    /* More prominent indicator */
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
  }

  .user-name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    /* Better text truncation */
    max-width: 200px;
  }

  .user-status {
    font-size: 0.8rem;
    line-height: 1.2;
    /* Better color contrast */
    color: #64748b;
  }

  .typing-status {
    color: #3b82f6;
    font-weight: 500;
  }

  .header-actions {
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .action-btn {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    border-radius: 50%;
    /* Better touch feedback */
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Remove tap highlight */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    /* Ensure minimum touch target */
    min-width: 44px;
    min-height: 44px;
  }

  .action-btn:hover,
  .action-btn:active {
    background: #e8f2ff;
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
  }

  .menu-btn {
    /* More prominent menu button */
    background: #f8fafc;
    border: 1px solid #e2e8f0;
  }

  .user-menu {
    /* Better mobile menu positioning */
    right: 0;
    top: calc(100% + 8px);
    min-width: 200px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    /* Modern mobile styling */
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
  }

  .user-menu button {
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    /* Better touch targets */
    min-height: 48px;
    gap: 0.75rem;
    transition: all 0.2s ease-out;
  }

  .user-menu button:active {
    transform: scale(0.98);
  }

  /* Enhanced messages container */
  .messages-container {
    /* Better scrolling performance */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  .messages-list {
    padding: 1rem;
    gap: 0.5rem;
    /* Add safe area support */
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .empty-messages {
    padding: 2rem 1rem;
    /* Better vertical centering */
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .empty-messages .empty-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    opacity: 0.6;
  }

  .empty-messages p {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #374151;
  }

  .empty-messages small {
    font-size: 0.875rem;
    line-height: 1.4;
    color: #6b7280;
  }

  .blocked-message {
    padding: 1rem;
    /* Add safe area support */
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    flex-direction: column;
    gap: 1rem;
    font-size: 0.9rem;
    /* Better mobile styling */
    border-radius: 12px 12px 0 0;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-top: 2px solid #fca5a5;
  }

  .unblock-btn {
    /* Better mobile button */
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    min-height: 44px;
    transition: all 0.2s ease-out;
  }

  .unblock-btn:active {
    transform: scale(0.98);
  }
}

@media (max-width: 480px) {
  .chat-header {
    padding: 0.75rem 0.875rem;
    /* Maintain safe area support */
    padding-left: max(0.875rem, env(safe-area-inset-left));
    padding-right: max(0.875rem, env(safe-area-inset-right));
    min-height: 60px;
  }

  .back-button {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  .user-info {
    gap: 0.625rem;
  }

  .avatar-image {
    width: 36px;
    height: 36px;
    border-width: 2px;
  }

  .online-dot {
    width: 10px;
    height: 10px;
    border-width: 2px;
  }

  .user-name {
    font-size: 0.95rem;
    line-height: 1.25;
    /* Adjust max width for smaller screens */
    max-width: 150px;
  }

  .user-status {
    font-size: 0.75rem;
  }

  .action-btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .user-menu {
    min-width: 180px;
    right: -4px;
  }

  .user-menu button {
    padding: 0.875rem 1rem;
    font-size: 0.85rem;
    min-height: 44px;
  }

  .messages-list {
    padding: 0.75rem;
    /* Maintain safe area support */
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }

  .empty-messages {
    padding: 1.5rem 0.875rem;
    min-height: 250px;
  }

  .empty-messages .empty-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }

  .empty-messages p {
    font-size: 1rem;
  }

  .empty-messages small {
    font-size: 0.8rem;
  }

  .blocked-message {
    padding: 0.875rem;
    /* Maintain safe area support */
    padding-left: max(0.875rem, env(safe-area-inset-left));
    padding-right: max(0.875rem, env(safe-area-inset-right));
    padding-bottom: max(0.875rem, env(safe-area-inset-bottom));
    gap: 0.875rem;
    font-size: 0.85rem;
  }

  .unblock-btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.85rem;
    min-height: 40px;
  }

  /* Optimize typing status for small screens */
  .typing-status {
    font-size: 0.75rem;
  }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
  .chat-header {
    padding: 0.875rem;
  }

  .avatar-image {
    width: 40px;
    height: 40px;
  }

  .product-info {
    max-width: 130px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .chat-conversation {
    background: #1a1a1a;
  }

  .chat-header {
    background: #1a1a1a;
    border-bottom-color: #404040;
  }

  .back-button:hover {
    background: #333;
  }

  .user-name {
    color: #ffffff;
  }

  .user-status {
    color: #ccc;
  }

  .product-title {
    color: #ffffff;
  }

  .product-price {
    color: #4caf50;
  }

  .action-btn {
    background: #333;
    color: #ffffff;
  }

  .action-btn:hover {
    background: #404040;
  }

  .user-menu {
    background: #2d2d2d;
    border-color: #404040;
  }

  .user-menu button {
    color: #ffffff;
  }

  .user-menu button:hover {
    background: #404040;
  }

  .user-menu button:last-child {
    border-top-color: #404040;
    color: #ff6b6b;
  }

  .deal-banner.negotiating {
    background: #2d2d00;
    color: #ffb74d;
  }

  .deal-banner.deal_agreed {
    background: #1b5e20;
    color: #a5d6a7;
  }

  .deal-banner.deal_completed {
    background: #0d47a1;
    color: #90caf9;
  }

  .empty-messages {
    color: #ccc;
  }

  .empty-messages p {
    color: #ffffff;
  }

  .blocked-message {
    background: #2d1b1b;
    color: #ff6b6b;
  }

  .unblock-btn {
    background: #667eea;
  }

  .unblock-btn:hover {
    background: #5a6fd8;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .chat-header {
    border-bottom: 2px solid #000000;
  }

  .action-btn {
    border: 1px solid #000000;
  }

  .user-menu {
    border: 2px solid #000000;
  }

  .deal-banner {
    border: 1px solid currentColor;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .typing-status {
    animation: none;
  }

  .action-btn:hover {
    transform: none;
  }

  * {
    transition: none !important;
  }
}

/* Print styles */
@media print {
  .chat-header {
    border-bottom: 1px solid #000000;
  }

  .action-buttons,
  .user-menu,
  .blocked-message {
    display: none;
  }

  .messages-container {
    overflow: visible;
  }
} 
.connection-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  border: 1px solid #e1e5e9;
  font-size: 14px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.connection-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-icon {
  font-size: 12px;
  animation: pulse 2s infinite;
}

.status-text {
  font-weight: 500;
  color: #2c3e50;
}

.message-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.queued-count,
.pending-count,
.failed-count {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.queued-count {
  background: #e3f2fd;
  color: #1976d2;
}

.pending-count {
  background: #fff3e0;
  color: #f57c00;
}

.failed-messages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.failed-count {
  background: #ffebee;
  color: #d32f2f;
}

.failed-actions {
  display: flex;
  gap: 2px;
}

.retry-btn,
.clear-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
}

.retry-btn:hover {
  background: #e8f5e8;
}

.clear-btn:hover {
  background: #ffebee;
}

/* Enhanced mobile responsive design */
@media (max-width: 768px) {
  .connection-status {
    padding: 8px 12px;
    font-size: 0.75rem;
    gap: 8px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* Better mobile performance */
    will-change: transform;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  .connection-indicator {
    gap: 8px;
  }

  .status-icon {
    font-size: 0.875rem;
    /* Better mobile visibility */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
  }

  .status-text {
    font-size: 0.75rem;
    font-weight: 600;
    /* Show abbreviated text on mobile */
    display: block;
  }

  .message-status {
    gap: 6px;
    margin-left: 8px;
  }

  .queued-count,
  .pending-count,
  .failed-count {
    font-size: 0.7rem;
    padding: 3px 6px;
    border-radius: 10px;
    font-weight: 600;
    /* Better mobile touch targets */
    min-height: 20px;
    display: flex;
    align-items: center;
  }

  .failed-actions {
    gap: 4px;
  }

  .retry-btn,
  .clear-btn {
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 0.75rem;
    /* Better mobile touch targets */
    min-width: 24px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-out;
    -webkit-tap-highlight-color: transparent;
  }

  .retry-btn:active {
    transform: scale(0.95);
    background: #dcfce7;
  }

  .clear-btn:active {
    transform: scale(0.95);
    background: #fee2e2;
  }
}

@media (max-width: 480px) {
  .connection-status {
    padding: 6px 10px;
    font-size: 0.7rem;
    gap: 6px;
    border-radius: 14px;
  }

  .connection-indicator {
    gap: 6px;
  }

  .status-icon {
    font-size: 0.8rem;
  }

  .status-text {
    font-size: 0.7rem;
    /* Ultra-short text for very small screens */
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .message-status {
    gap: 4px;
    margin-left: 6px;
  }

  .queued-count,
  .pending-count,
  .failed-count {
    font-size: 0.65rem;
    padding: 2px 5px;
    border-radius: 8px;
    min-height: 18px;
  }

  .retry-btn,
  .clear-btn {
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 0.7rem;
    min-width: 20px;
    min-height: 20px;
  }
}

/* Animation for status icon */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Connection quality and state specific styles */
.connection-status[data-quality="poor"] .status-icon,
.connection-status[data-state="reconnecting"] .status-icon {
  animation: blink 1s infinite;
}

.connection-status[data-quality="offline"] .status-icon,
.connection-status[data-state="disconnected"] .status-icon {
  animation: none;
  opacity: 0.5;
}

.connection-status[data-state="connecting"] .status-icon,
.connection-status[data-state="reconnecting"] .status-icon {
  animation: spin 1.5s linear infinite;
}

.offline-notice {
  margin-top: 4px;
  padding: 4px 8px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 6px;
  font-size: 11px;
  color: #dc2626;
  text-align: center;
}

.retry-btn:disabled,
.clear-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.retry-btn:disabled:hover,
.clear-btn:disabled:hover {
  background: none;
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0.3;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}/* Mo
bile-specific enhancements */
@media (max-width: 768px) {
  /* Enhanced status indicator for mobile */
  .connection-status[data-quality="good"] {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
  }

  .connection-status[data-quality="fair"] {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
  }

  .connection-status[data-quality="poor"] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
  }

  .connection-status[data-quality="offline"] {
    background: rgba(107, 114, 128, 0.1);
    border-color: rgba(107, 114, 128, 0.3);
  }

  /* Mobile-optimized animations */
  .status-icon {
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
  }

  /* Better mobile feedback for failed messages */
  .failed-messages {
    background: rgba(239, 68, 68, 0.05);
    border-radius: 12px;
    padding: 4px 6px;
    border: 1px solid rgba(239, 68, 68, 0.2);
  }

  /* Enhanced mobile touch feedback */
  .retry-btn:hover {
    background: rgba(16, 185, 129, 0.15);
  }

  .clear-btn:hover {
    background: rgba(239, 68, 68, 0.15);
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .retry-btn:hover,
  .clear-btn:hover {
    background: none;
  }

  .retry-btn:active {
    background: rgba(16, 185, 129, 0.2);
    transform: scale(0.9);
  }

  .clear-btn:active {
    background: rgba(239, 68, 68, 0.2);
    transform: scale(0.9);
  }
}

/* Dark mode mobile support */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
  .connection-status {
    background: rgba(31, 41, 55, 0.9);
    border-color: rgba(75, 85, 99, 0.5);
    color: #f9fafb;
  }

  .status-text {
    color: #f9fafb;
  }

  .queued-count {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
  }

  .pending-count {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
  }

  .failed-count {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
  }

  .failed-messages {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .status-icon {
    animation: none;
  }

  .connection-status {
    transition: none;
  }

  .retry-btn:active,
  .clear-btn:active {
    transform: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .connection-status {
    border: 2px solid currentColor;
    background: white;
  }

  .queued-count,
  .pending-count,
  .failed-count {
    border: 1px solid currentColor;
  }
}
/* Chat Performance Monitor Styles */
.chat-performance-monitor {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 320px;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  border-radius: 8px;
  padding: 16px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  z-index: 10000;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.chat-performance-monitor.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
}

.chat-performance-monitor__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.chat-performance-monitor__title {
  font-weight: bold;
  color: #00ff88;
}

.chat-performance-monitor__toggle {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.chat-performance-monitor__toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.chat-performance-monitor__content {
  max-height: 400px;
  overflow-y: auto;
}

.chat-performance-monitor__section {
  margin-bottom: 16px;
}

.chat-performance-monitor__section-title {
  font-weight: bold;
  color: #ffaa00;
  margin-bottom: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.chat-performance-monitor__metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  padding: 2px 0;
}

.chat-performance-monitor__metric-name {
  color: #cccccc;
}

.chat-performance-monitor__metric-value {
  font-weight: bold;
  color: white;
}

.chat-performance-monitor__metric-value.good {
  color: #00ff88;
}

.chat-performance-monitor__metric-value.warning {
  color: #ffaa00;
}

.chat-performance-monitor__metric-value.critical {
  color: #ff4444;
}

.chat-performance-monitor__bar {
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.chat-performance-monitor__bar-fill {
  height: 100%;
  background-color: #00ff88;
  transition: width 0.3s ease;
}

.chat-performance-monitor__bar-fill.warning {
  background-color: #ffaa00;
}

.chat-performance-monitor__bar-fill.critical {
  background-color: #ff4444;
}

.chat-performance-monitor__alert {
  background-color: rgba(255, 68, 68, 0.2);
  border: 1px solid #ff4444;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 8px;
  font-size: 11px;
}

.chat-performance-monitor__alert-title {
  font-weight: bold;
  color: #ff4444;
  margin-bottom: 4px;
}

.chat-performance-monitor__alert-message {
  color: #ffcccc;
}

.chat-performance-monitor__fps {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-performance-monitor__fps-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #00ff88;
  animation: pulse 2s infinite;
}

.chat-performance-monitor__fps-indicator.warning {
  background-color: #ffaa00;
}

.chat-performance-monitor__fps-indicator.critical {
  background-color: #ff4444;
}

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

.chat-performance-monitor__memory-usage {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-performance-monitor__memory-item {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
}

.chat-performance-monitor__render-count {
  font-size: 10px;
  color: #888;
  text-align: right;
  margin-top: 4px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .chat-performance-monitor {
    width: 280px;
    top: 10px;
    right: 10px;
    font-size: 11px;
  }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .chat-performance-monitor {
    background: rgba(20, 20, 20, 0.95);
    border-color: rgba(255, 255, 255, 0.15);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .chat-performance-monitor,
  .chat-performance-monitor__bar-fill,
  .chat-performance-monitor__toggle {
    transition: none;
  }
  
  .chat-performance-monitor__fps-indicator {
    animation: none;
  }
}
/* Chat Animation Styles */

.message-animation-wrapper {
  /* Optimize for animations */
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.typing-animation {
  padding: 8px 16px;
  margin: 4px 0;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 16px;
  border-left: 3px solid #3b82f6;
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #3b82f6;
}

.typing-user {
  font-weight: 500;
  font-style: italic;
}

.typing-dots {
  display: flex;
  gap: 2px;
  align-items: center;
}

.typing-dot {
  width: 4px;
  height: 4px;
  background: #3b82f6;
  border-radius: 50%;
  display: inline-block;
}

.chat-list-item-animation {
  /* Optimize for animations */
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.page-transition {
  width: 100%;
  height: 100%;
  /* Optimize for page transitions */
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.connection-status-animation {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  /* Optimize for animations */
  will-change: transform, background-color;
}

.connection-indicator {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: currentColor;
}

.message-status-animation {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Optimize for animations */
  will-change: transform, color;
}

.status-icon {
  font-size: 12px;
  line-height: 1;
}

.loading-skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  border-radius: 4px;
  /* Optimize for animations */
  will-change: background-position;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .typing-animation {
    padding: 6px 12px;
    margin: 2px 0;
    border-radius: 12px;
  }

  .typing-indicator {
    font-size: 0.8rem;
    gap: 6px;
  }

  .typing-dots {
    gap: 1.5px;
  }

  .typing-dot {
    width: 3px;
    height: 3px;
  }

  .connection-status-animation {
    width: 10px;
    height: 10px;
  }

  .status-icon {
    font-size: 11px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .typing-animation {
    background: rgba(59, 130, 246, 0.2);
    border-left-color: #60a5fa;
  }

  .typing-indicator {
    color: #60a5fa;
  }

  .typing-dot {
    background: #60a5fa;
  }

  .loading-skeleton {
    background: linear-gradient(
      90deg,
      #374151 25%,
      #4b5563 50%,
      #374151 75%
    );
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .message-animation-wrapper,
  .chat-list-item-animation,
  .page-transition,
  .connection-status-animation,
  .message-status-animation,
  .loading-skeleton {
    /* Disable animations for users who prefer reduced motion */
    animation: none !important;
    transition: none !important;
  }

  .typing-dot {
    animation: none !important;
  }

  /* Provide alternative visual feedback without motion */
  .typing-dots {
    opacity: 0.7;
  }

  .connection-status-animation[data-state="connecting"] {
    opacity: 0.7;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .typing-animation {
    border-left-width: 4px;
    background: rgba(0, 0, 0, 0.1);
  }

  .typing-indicator {
    color: #000;
    font-weight: 600;
  }

  .typing-dot {
    background: #000;
    width: 5px;
    height: 5px;
  }

  .loading-skeleton {
    background: linear-gradient(
      90deg,
      #ccc 25%,
      #999 50%,
      #ccc 75%
    );
  }
}

/* Performance optimizations */
.message-animation-wrapper,
.chat-list-item-animation,
.page-transition {
  /* Use GPU acceleration for smooth animations */
  transform: translate3d(0, 0, 0);
  /* Contain layout and paint for better performance */
  contain: layout style paint;
}

/* Smooth transitions for interactive elements */
.chat-list-item-animation:hover {
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.message-animation-wrapper:hover {
  transition: transform 0.15s ease-out;
}

/* Loading states */
.loading-skeleton {
  /* Ensure smooth animation */
  animation-fill-mode: forwards;
  /* Optimize for continuous animation */
  will-change: background-position;
}

/* Focus states for accessibility */
.message-animation-wrapper:focus-within,
.chat-list-item-animation:focus-within {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .chat-list-item-animation:hover {
    /* Disable hover effects on touch devices */
    transform: none;
  }

  .message-animation-wrapper:hover {
    transform: none;
  }

  /* Provide touch feedback instead */
  .chat-list-item-animation:active {
    transform: scale(0.98);
    transition: transform 0.1s ease-out;
  }

  .message-animation-wrapper:active {
    transform: scale(0.99);
    transition: transform 0.1s ease-out;
  }
}

/* Print styles */
@media print {
  .typing-animation,
  .connection-status-animation,
  .loading-skeleton {
    display: none;
  }

  .message-animation-wrapper,
  .chat-list-item-animation,
  .page-transition {
    transform: none !important;
    opacity: 1 !important;
  }
}
.chat-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 0;
}

.chat-container {
  max-width: 1400px;
  margin: 0 auto;
  height: 100vh;
  background: #ffffff;
  border-radius: 0;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  color: #ffffff;
}

.chat-loading p {
  margin-top: 1rem;
  font-size: 1.1rem;
  opacity: 0.9;
}

.chat-mobile-header {
  display: none;
  padding: 1rem;
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  align-items: center;
  justify-content: space-between;
}

.chat-mobile-header h1 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;
  font-weight: 600;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status-indicator {
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-weight: 500;
}

.status-indicator.online {
  background: #e8f5e8;
  color: #2e7d32;
}

.status-indicator.offline {
  background: #ffebee;
  color: #c62828;
}

.chat-layout {
  display: flex;
  flex: 1 1;
  height: calc(100vh - 80px);
  overflow: hidden;
}

.chat-list-container {
  width: 380px;
  border-right: 1px solid #e0e0e0;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-conversation-container {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  overflow: hidden;
}

.no-chat-selected {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #f8f9fa;
}

.empty-state {
  text-align: center;
  padding: 2rem;
  max-width: 400px;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state h3 {
  margin: 0 0 0.5rem 0;
  color: #333;
  font-weight: 600;
  font-size: 1.5rem;
}

.empty-state p {
  margin: 0 0 1rem 0;
  color: #666;
  font-size: 1rem;
}

.no-chats {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #f0f0f0;
  border-radius: 8px;
}

.no-chats p {
  margin: 0 0 0.5rem 0;
  font-weight: 500;
  color: #555;
}

.no-chats small {
  color: #777;
  font-size: 0.875rem;
}

.chat-notifications {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 350px;
}

.notification-item {
  background: #333;
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: slideInRight 0.3s ease-out;
}

.notification-text {
  font-size: 0.875rem;
  flex: 1 1;
  word-break: break-word;
}

.notification-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

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

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

/* Mobile Responsive */
@media (max-width: 768px) {
  .chat-page {
    background: #ffffff;
    /* Use dynamic viewport height for better mobile support */
    min-height: 100vh;
    min-height: 100dvh;
    /* Prevent horizontal scrolling */
    overflow-x: hidden;
  }

  .chat-container {
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    /* Optimize for mobile performance */
    will-change: transform;
    /* Prevent horizontal scrolling */
    overflow-x: hidden;
  }

  .chat-mobile-header {
    display: flex;
    /* Add safe area support for devices with notches */
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-top: max(1rem, env(safe-area-inset-top));
    /* Improve touch targets */
    min-height: 64px;
    /* Better mobile header styling */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .chat-mobile-header h1 {
    color: white;
    font-weight: 700;
    font-size: 1.375rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .mobile-connection-status {
    /* Optimize connection status for mobile */
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
  }

  .chat-layout {
    height: calc(100vh - 80px);
    height: calc(100dvh - 80px);
    /* Smooth transitions between views */
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    /* Better mobile performance */
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Enhanced mobile navigation with slide animations */
  .chat-layout.show-list {
    transform: translateX(0);
  }

  .chat-layout.show-list .chat-list-container {
    width: 100vw;
    border-right: none;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.35s ease-out;
    /* Better mobile performance */
    will-change: transform, opacity;
    z-index: 2;
  }

  .chat-layout.show-list .chat-conversation-container {
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.35s ease-out,
                visibility 0s linear 0.35s;
    z-index: 1;
  }

  .chat-layout.show-conversation {
    transform: translateX(0);
  }

  .chat-layout.show-conversation .chat-list-container {
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.35s ease-out,
                visibility 0s linear 0.35s;
    z-index: 1;
  }

  .chat-layout.show-conversation .chat-conversation-container {
    width: 100vw;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.35s ease-out;
    /* Better mobile performance */
    will-change: transform, opacity;
    z-index: 2;
  }

  /* Mobile-optimized notifications */
  .chat-notifications {
    top: max(80px, calc(env(safe-area-inset-top) + 80px));
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    max-width: none;
    z-index: 1100; /* Above mobile navigation */
  }

  .notification-item {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    border-radius: 12px;
    /* Improve touch targets */
    min-height: 48px;
    display: flex;
    align-items: center;
    /* Add subtle mobile-friendly shadow */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }

  .notification-close {
    /* Larger touch target for mobile */
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Mobile keyboard optimization */
  .chat-container.keyboard-open {
    height: 100vh;
    height: 100dvh;
  }

  .chat-layout.keyboard-open {
    height: calc(100vh - 70px);
    height: calc(100dvh - 70px);
  }

  /* Optimize empty states for mobile */
  .empty-state {
    padding: 2rem 1rem;
    text-align: center;
  }

  .empty-icon {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
  }

  .empty-state h3 {
    font-size: 1.375rem;
    margin-bottom: 0.75rem;
  }

  .empty-state p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1rem;
  }

  .no-chats {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border-radius: 12px;
  }
}

@media (max-width: 480px) {
  .chat-mobile-header {
    padding: 0.75rem 1rem;
    /* Ensure adequate touch targets on small screens */
    min-height: 60px;
    /* Better gradient for small screens */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  .chat-mobile-header h1 {
    font-size: 1.25rem;
    font-weight: 700;
    /* Prevent text from being too cramped */
    line-height: 1.3;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .mobile-connection-status {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    /* Smaller but still readable */
    min-height: 28px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.25);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
  }

  .chat-layout {
    height: calc(100vh - 76px);
    height: calc(100dvh - 76px);
  }

  .status-indicator {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    /* Ensure minimum touch target */
    min-height: 28px;
    display: flex;
    align-items: center;
  }

  .empty-state {
    padding: 1.25rem 0.75rem;
  }

  .empty-icon {
    font-size: 2.75rem;
    margin-bottom: 1rem;
  }

  .empty-state h3 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
  }

  .empty-state p {
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .no-chats {
    margin-top: 1rem;
    padding: 1rem;
  }

  .no-chats p {
    font-size: 0.875rem;
  }

  .no-chats small {
    font-size: 0.75rem;
  }

  /* Optimize notification layout for small screens */
  .notification-item {
    padding: 0.625rem 0.875rem;
    font-size: 0.8rem;
    min-height: 44px;
  }

  .notification-close {
    width: 28px;
    height: 28px;
    font-size: 1.1rem;
  }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
  .chat-list-container {
    width: 320px;
  }

  .chat-container {
    margin: 0;
    border-radius: 0;
    height: 100vh;
  }
}

/* Desktop styles */
@media (min-width: 1025px) {
  .chat-page {
    padding: 2rem;
  }

  .chat-container {
    border-radius: 12px;
    height: calc(100vh - 4rem);
  }

  .chat-layout {
    height: 100%;
  }

  .chat-mobile-header {
    display: none;
  }
}

/* High resolution displays */
@media (min-width: 1400px) {
  .chat-list-container {
    width: 420px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .chat-container {
    background: #1a1a1a;
    color: #ffffff;
  }

  .chat-list-container {
    background: #2d2d2d;
    border-right-color: #404040;
  }

  .chat-conversation-container {
    background: #1a1a1a;
  }

  .no-chat-selected {
    background: #2d2d2d;
  }

  .empty-state h3 {
    color: #ffffff;
  }

  .empty-state p {
    color: #cccccc;
  }

  .no-chats {
    background: #404040;
  }

  .no-chats p {
    color: #ffffff;
  }

  .no-chats small {
    color: #cccccc;
  }

  .chat-mobile-header {
    background: #1a1a1a;
    border-bottom-color: #404040;
  }

  .chat-mobile-header h1 {
    color: #ffffff;
  }
}

/* Print styles */
@media print {
  .chat-page {
    background: white;
    padding: 0;
  }

  .chat-notifications {
    display: none;
  }

  .chat-mobile-header {
    display: none;
  }
}

/* Focus and accessibility */
.chat-page *:focus {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

.chat-page button:focus,
.chat-page input:focus,
.chat-page textarea:focus {
  outline: 2px solid #667eea;
  outline-offset: 1px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .notification-item {
    animation: none;
  }

  * {
    transition: none !important;
    animation: none !important;
  }
} /* Cha
t Error Display */
.chat-errors {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.chat-errors > * {
  pointer-events: all;
}

/* Offline Warning */
.chat-offline-warning {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
  color: #212529;
  padding: 8px 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.offline-warning-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 600px;
  margin: 0 auto;
}

.offline-icon {
  font-size: 16px;
}

.offline-text {
  font-size: 14px;
  font-weight: 500;
}

.offline-dismiss {
  background: none;
  border: none;
  color: #212529;
  cursor: pointer;
  font-size: 18px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.2s ease;
  margin-left: auto;
}

.offline-dismiss:hover {
  background: rgba(33, 37, 41, 0.1);
}

/* Chat Conversation Errors */
.chat-conversation-errors {
  position: absolute;
  bottom: 80px;
  left: 16px;
  right: 16px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.chat-conversation-errors > * {
  pointer-events: all;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .chat-errors {
    top: 10px;
    left: 10px;
    right: 10px;
    transform: none;
  }

  .chat-offline-warning {
    padding: 6px 12px;
  }

  .offline-text {
    font-size: 13px;
  }

  .chat-conversation-errors {
    bottom: 70px;
    left: 10px;
    right: 10px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .chat-offline-warning {
    background: linear-gradient(135deg, #d69e2e 0%, #b7791f 100%);
    color: #1a202c;
  }

  .offline-dismiss {
    color: #1a202c;
  }

  .offline-dismiss:hover {
    background: rgba(26, 32, 44, 0.1);
  }
}
.error-message {
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
  border: 1px solid;
  background-color: #fff;
}

.error-message--general {
  border-color: #ef4444;
  background-color: #fef2f2;
}

.error-message--network {
  border-color: #f59e0b;
  background-color: #fffbeb;
}

.error-message--auth {
  border-color: #8b5cf6;
  background-color: #faf5ff;
}

.error-message--validation {
  border-color: #f59e0b;
  background-color: #fffbeb;
}

.error-message--server {
  border-color: #ef4444;
  background-color: #fef2f2;
}

.error-message--success {
  border-color: #10b981;
  background-color: #f0fdf4;
}

.error-message--info {
  border-color: #3b82f6;
  background-color: #eff6ff;
}

.error-message--partial {
  border-color: #f59e0b;
  background-color: #fffbeb;
}

.error-message__content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.error-message__icon {
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.error-message__text {
  flex: 1 1;
}

.error-message__title {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

.error-message__description {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

.error-message__details {
  margin-top: 12px;
  font-size: 12px;
}

.error-message__details summary {
  cursor: pointer;
  color: #6b7280;
  font-weight: 500;
}

.error-message__details pre {
  margin-top: 8px;
  padding: 8px;
  background-color: #f3f4f6;
  border-radius: 4px;
  font-size: 11px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.error-message__actions {
  flex-shrink: 0;
  margin-left: auto;
}

.error-message__retry-btn {
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.error-message__retry-btn:hover {
  background-color: #2563eb;
}

.error-message__retry-btn:active {
  background-color: #1d4ed8;
}

.error-message__retry-btn:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}

/* Compact variant for inline errors */
.error-message--compact {
  padding: 8px 12px;
  margin: 8px 0;
}

.error-message--compact .error-message__icon {
  font-size: 16px;
}

.error-message--compact .error-message__title {
  font-size: 14px;
}

.error-message--compact .error-message__description {
  font-size: 13px;
}
.toast {
  position: fixed;
  z-index: 10000;
  min-width: 300px;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
  border: 1px solid;
  animation: toast-slide-in 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}

.toast--exiting {
  animation: toast-slide-out 0.3s ease-in;
}

/* Position variants */
.toast--top-right {
  top: 20px;
  right: 20px;
}

.toast--top-left {
  top: 20px;
  left: 20px;
}

.toast--top-center {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.toast--bottom-right {
  bottom: 20px;
  right: 20px;
}

.toast--bottom-left {
  bottom: 20px;
  left: 20px;
}

.toast--bottom-center {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

/* Type variants */
.toast--success {
  border-color: #10b981;
  background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
}

.toast--error {
  border-color: #ef4444;
  background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
}

.toast--warning {
  border-color: #FFD600;
  background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
}

.toast--info {
  border-color: #FFD600;
  background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
}

.toast--loading {
  border-color: #FFD600;
  background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
}

.toast__content {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  gap: 12px;
}

.toast__icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.toast__message {
  flex: 1 1;
  font-size: 14px;
  line-height: 1.5;
  color: #FFFFFF;
  word-wrap: break-word;
}

.toast__actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.toast__action {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.toast__action--default {
  background-color: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.3);
}

.toast__action--default:hover {
  background-color: rgba(255, 214, 0, 0.1);
  border-color: #FFD600;
  color: #FFD600;
}

.toast__action--primary {
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  color: #111111;
  border-color: #FFD600;
}

.toast__action--primary:hover {
  background: linear-gradient(135deg, #FFED4E 0%, #FFD600 100%);
  transform: translateY(-1px);
}

.toast__action--danger {
  background-color: #ef4444;
  color: white;
}

.toast__action--danger:hover {
  background-color: #dc2626;
}

.toast__close {
  background: none;
  border: none;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.toast__close:hover {
  background-color: rgba(255, 214, 0, 0.1);
  color: #FFD600;
}

/* Animations */
@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Position-specific animations */
.toast--top-left,
.toast--bottom-left {
  animation: toast-slide-in-left 0.3s ease-out;
}

.toast--top-left.toast--exiting,
.toast--bottom-left.toast--exiting {
  animation: toast-slide-out-left 0.3s ease-in;
}

.toast--top-center,
.toast--bottom-center {
  animation: toast-slide-in-center 0.3s ease-out;
}

.toast--top-center.toast--exiting,
.toast--bottom-center.toast--exiting {
  animation: toast-slide-out-center 0.3s ease-in;
}

@keyframes toast-slide-in-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-slide-out-left {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes toast-slide-in-center {
  from {
    transform: translateX(-50%) translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

@keyframes toast-slide-out-center {
  from {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  to {
    transform: translateX(-50%) translateY(-20px);
    opacity: 0;
  }
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .toast {
    min-width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    left: 20px !important;
    right: 20px !important;
    transform: none !important;
  }
  
  .toast--top-center,
  .toast--bottom-center {
    transform: none !important;
  }
  
  .toast__content {
    padding: 12px;
  }
  
  .toast__message {
    font-size: 13px;
  }
}
/* Email Update Section Styles */
.email-update-section {
  background: var(--color-surface-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: all var(--transition-bounce);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-md);
}

.email-update-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-yellow);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.email-update-section.editing::before {
  opacity: 1;
}

.email-update-section:hover {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-md);
}

.email-update-section h3 {
  color: var(--color-text-primary);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Current Email Display */
.current-email-display {
  margin-bottom: 1.5rem;
}

.email-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.email-label {
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: 0.9rem;
}

.email-value {
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: 1rem;
  background: var(--color-surface-secondary);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--color-border-secondary);
}

.verified-badge {
  background: var(--color-success);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Enhanced Pending Change Indicator */
.pending-change-indicator {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 1rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pending-change-indicator::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-warning);
  border-radius: 0 2px 2px 0;
}

.pending-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--color-warning);
  margin-bottom: 0.75rem;
  animation: pulse-warning 2s infinite;
}

.pending-icon {
  font-size: 1.1rem;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.pending-details p {
  margin: 0.5rem 0;
  color: var(--color-warning);
  line-height: 1.5;
}

.pending-details strong {
  font-weight: 600;
  color: var(--color-text-primary);
}

.pending-note {
  font-size: 0.9rem;
  font-style: italic;
  opacity: 0.9;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(245, 158, 11, 0.2);
}

/* Enhanced status indicators */
.email-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

.email-status-indicator::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.email-status-indicator:hover::before {
  left: 100%;
}

.status-verified {
  background: rgba(34, 197, 94, 0.2);
  color: var(--color-success);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-pending {
  background: rgba(245, 158, 11, 0.2);
  color: var(--color-warning);
  border: 1px solid rgba(245, 158, 11, 0.3);
  animation: pulse-warning 2s infinite;
}

.status-expired {
  background: rgba(239, 68, 68, 0.2);
  color: var(--color-error);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Countdown timer for verification */
.verification-countdown {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-top: 0.5rem;
  font-family: 'Courier New', monospace;
}

.verification-countdown.urgent {
  color: var(--color-error);
  animation: pulse 1s infinite;
}

/* Enhanced Messages */
.success-message,
.error-message,
.info-message,
.warning-message {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: slideInDown 0.3s ease-out;
}

.success-message::before,
.error-message::before,
.info-message::before,
.warning-message::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 0 2px 2px 0;
}

.success-message {
  background: rgba(34, 197, 94, 0.1);
  color: var(--color-success);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.success-message::before {
  background: var(--color-success);
}

.error-message {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-error);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.error-message::before {
  background: var(--color-error);
}

.info-message {
  background: rgba(59, 130, 246, 0.1);
  color: var(--color-info);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.info-message::before {
  background: var(--color-info);
}

.warning-message {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.warning-message::before {
  background: var(--color-warning);
}

.success-icon,
.error-icon,
.info-icon,
.warning-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  animation: iconPop 0.4s ease-out 0.1s both;
}

@keyframes iconPop {
  0% { transform: scale(0); }
  80% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Message dismiss button */
.message-dismiss {
  background: none;
  border: none;
  color: currentColor;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  margin-left: auto;
  opacity: 0.7;
  transition: opacity var(--transition-normal);
}

.message-dismiss:hover {
  opacity: 1;
}

/* Auto-dismiss animation */
.message-auto-dismiss {
  animation: fadeOut 0.3s ease-out 4.7s forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Email Update Form */
.email-update-form {
  margin-top: 1rem;
}

.edit-email-btn {
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-primary);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-bounce);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--touch-target-min);
}

.edit-email-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: var(--color-accent-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
  z-index: 0;
}

.edit-email-btn:hover:not(:disabled)::before {
  width: 200%;
  height: 200%;
}

.edit-email-btn:hover:not(:disabled) {
  color: var(--color-text-inverse);
  border-color: var(--color-accent-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

.edit-email-btn:hover:not(:disabled) * {
  position: relative;
  z-index: 1;
}

.edit-email-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.edit-email-btn.editing {
  background: var(--gradient-yellow);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-primary);
  box-shadow: var(--shadow-accent);
}

.edit-email-btn.editing:hover:not(:disabled) {
  background: var(--gradient-yellow-hover);
  transform: translateY(-1px);
}

/* Form Styles */
.email-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

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

.form-group label {
  color: var(--color-text-primary);
  font-weight: 500;
  font-size: 0.9rem;
}

.form-group input {
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: var(--color-text-primary);
  font-size: 1rem;
  transition: all var(--transition-normal);
}

.form-group input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.1);
  box-shadow: 0 0 0 3px var(--color-accent-primary-alpha, rgba(255, 193, 7, 0.1));
}

.form-group input.error {
  border-color: #dc3545;
  border-color: var(--color-error, #dc3545);
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
  box-shadow: 0 0 0 3px var(--color-error-alpha, rgba(220, 53, 69, 0.1));
}

.form-group input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.field-error {
  color: #dc3545;
  color: var(--color-error, #dc3545);
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.form-actions .btn {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
  border: 1px solid transparent;
}

.form-actions .btn-primary {
  background: var(--color-accent-primary);
  color: white;
  border-color: var(--color-accent-primary);
}

.form-actions .btn-primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  transform: translateY(-1px);
}

.form-actions .btn-secondary {
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-border-primary);
}

.form-actions .btn-secondary:hover:not(:disabled) {
  background: var(--color-surface-tertiary);
  border-color: var(--color-border-accent);
}

.form-actions .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Pending Actions */
.pending-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.pending-actions .btn {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
  border: 1px solid transparent;
}

.resend-btn {
  background: var(--color-accent-primary);
  color: white;
  border-color: var(--color-accent-primary);
}

.resend-btn:hover:not(:disabled) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  transform: translateY(-1px);
}

.resend-btn:disabled {
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
  border-color: var(--color-border-primary);
  cursor: not-allowed;
}

.cancel-btn {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border-primary);
}

.cancel-btn:hover:not(:disabled) {
  background: #f8d7da;
  background: var(--color-error-bg, #f8d7da);
  color: #dc3545;
  color: var(--color-error, #dc3545);
  border-color: #dc3545;
  border-color: var(--color-error, #dc3545);
}

/* Help Text */
.help-text {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-secondary);
}

.help-text p {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

.help-text strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* Enhanced Accessibility Styles */
.keyboard-navigation *:focus,
.focus-visible *:focus {
  outline: 3px solid var(--color-accent-primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(255, 214, 0, 0.3) !important;
}

.high-contrast .email-update-section {
  border: 3px solid var(--color-accent-primary);
  background: #000000;
  color: #ffffff;
}

.high-contrast .email-value,
.high-contrast .mobile-input {
  background: #ffffff;
  color: #000000;
  border: 2px solid var(--color-accent-primary);
}

.high-contrast .verified-badge {
  background: #00ff00;
  color: #000000;
  border: 2px solid #000000;
}

.high-contrast .pending-badge {
  background: #ffff00;
  color: #000000;
  border: 2px solid #000000;
}

.high-contrast .success-message {
  background: #00ff00;
  color: #000000;
  border: 3px solid #000000;
}

.high-contrast .error-message {
  background: #ff0000;
  color: #ffffff;
  border: 3px solid #ffffff;
}

.reduce-motion * {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

.screen-reader-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.aria-live-region {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Focus indicators for form elements */
.mobile-input:focus-visible {
  outline: 3px solid var(--color-accent-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 214, 0, 0.3);
}

.edit-email-btn:focus-visible {
  outline: 3px solid var(--color-accent-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 214, 0, 0.3);
}

/* Enhanced error message accessibility */
.field-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.field-error::before {
  content: '⚠️';
  font-size: 1rem;
  flex-shrink: 0;
}

.field-error[role="alert"] {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  padding: 0.5rem;
  margin-top: 0.5rem;
}

/* Status indicators with better accessibility */
.email-status-indicator[aria-live] {
  position: relative;
}

.email-status-indicator[aria-live]::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2s infinite;
}

/* Enhanced Mobile Responsive Design with Advanced Touch Optimizations */
@media (max-width: 768px) {
  .email-update-section {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    
    /* Enhanced mobile viewport handling with safe areas */
    min-height: 0;
    max-height: calc(100vh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    
    /* Enhanced touch interaction */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    
    /* Improved mobile performance */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Enhanced mobile keyboard input type optimizations with advanced mobile keyboard support */
  .mobile-input[type="email"] {
    /* Ensure email keyboard on mobile with enhanced attributes */
    -webkit-text-security: none;
    text-security: none;
    inputmode: email;
    autocomplete: email;
    autocapitalize: none;
    autocorrect: off;
    spellcheck: false;
    
    /* Enhanced iOS keyboard optimization with additional attributes */
    appearance: none;
    border-radius: 8px;
    -webkit-user-select: text;
    user-select: text;
    
    /* Advanced mobile keyboard hints */
    enterkeyhint: next;
    data-form-type: email;
    
    /* iOS specific optimizations */
    -webkit-touch-callout: none;
    -webkit-user-modify: read-write-plaintext-only;
    
    /* Android specific optimizations */
    autocorrect: off;
    data-keyboard-type: email;
    
    /* Enhanced accessibility for mobile screen readers */
    role: textbox;
    aria-label: "Email address input";
  }

  .mobile-input[type="password"] {
    /* Ensure secure password input with enhanced security */
    -webkit-text-security: disc;
    text-security: disc;
    inputmode: text;
    autocomplete: current-password;
    autocapitalize: none;
    autocorrect: off;
    spellcheck: false;
    
    /* Enhanced iOS keyboard optimization */
    appearance: none;
    border-radius: 8px;
    -webkit-user-select: text;
    user-select: text;
    
    /* Advanced mobile keyboard hints */
    enterkeyhint: done;
    data-form-type: password;
    
    /* iOS specific optimizations */
    -webkit-touch-callout: none;
    -webkit-user-modify: read-write-plaintext-only;
    
    /* Android specific optimizations */
    data-keyboard-type: password;
    
    /* Enhanced accessibility for mobile screen readers */
    role: textbox;
    aria-label: "Password input";
  }

  /* Enhanced mobile keyboard input type optimizations with advanced mobile keyboard support */
  .mobile-input[type="email"] {
    /* Ensure email keyboard on mobile with enhanced attributes */
    -webkit-text-security: none;
    text-security: none;
    inputmode: email;
    autocomplete: email;
    autocapitalize: none;
    autocorrect: off;
    spellcheck: false;
    
    /* Enhanced iOS keyboard optimization with additional attributes */
    appearance: none;
    border-radius: 8px;
    -webkit-user-select: text;
    user-select: text;
    
    /* Advanced mobile keyboard hints */
    enterkeyhint: next;
    data-form-type: email;
    
    /* iOS specific optimizations */
    -webkit-touch-callout: none;
    -webkit-user-modify: read-write-plaintext-only;
    
    /* Android specific optimizations */
    autocorrect: off;
    data-keyboard-type: email;
    
    /* Enhanced accessibility for mobile screen readers */
    role: textbox;
    aria-label: "Email address input";
  }

  .mobile-input[type="password"] {
    /* Ensure secure password input with enhanced security */
    -webkit-text-security: disc;
    text-security: disc;
    inputmode: text;
    autocomplete: current-password;
    autocapitalize: none;
    autocorrect: off;
    spellcheck: false;
    
    /* Enhanced iOS keyboard optimization */
    appearance: none;
    border-radius: 8px;
    -webkit-user-select: text;
    user-select: text;
    
    /* Advanced mobile keyboard hints */
    enterkeyhint: done;
    data-form-type: password;
    
    /* iOS specific optimizations */
    -webkit-touch-callout: none;
    -webkit-user-modify: read-write-plaintext-only;
    
    /* Android specific optimizations */
    data-keyboard-type: password;
    
    /* Enhanced accessibility for mobile screen readers */
    role: textbox;
    aria-label: "Password input";
  }

  /* Enhanced touch-friendly form controls with improved mobile keyboard support */
  .mobile-input {
    /* Prevent zoom on iOS by ensuring 16px font size */
    font-size: 16px !important;
    line-height: 1.5;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    min-height: 56px; /* Comfortable touch target */
    appearance: none;
    width: 100%;
    box-sizing: border-box;
    background: var(--color-surface-secondary);
    border: 2px solid var(--color-border-primary);
    color: var(--color-text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
    
    /* Enhanced mobile keyboard support */
    -webkit-user-select: text;
    user-select: text;
    
    /* Improved touch interaction */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    
    /* Better mobile keyboard handling */
    backface-visibility: hidden;
    transform: translateZ(0);
    
    /* Enhanced accessibility for mobile screen readers */
    outline: none;
    outline-offset: 0;
  }

  /* Mobile-specific input states */
  .mobile-input:focus {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.15);
    transform: translateY(-2px);
    background: var(--color-surface-primary);
    outline: none;
  }

  .mobile-input.active {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.15);
  }

  .mobile-input.error {
    border-color: var(--color-error);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
    animation: shake 0.3s ease-in-out;
  }

  .mobile-input.valid {
    border-color: var(--color-success);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
  }

  /* Enhanced mobile loading states with advanced feedback and animations */
  .mobile-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    z-index: 10;
    animation: fadeIn 0.2s ease-out;
    
    /* Enhanced mobile loading experience with better touch handling */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    
    /* Improved visual hierarchy with enhanced shadows */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.5);
    
    /* Enhanced mobile performance */
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  
  .mobile-loading-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 214, 0, 0.1) 0%, transparent 70%);
    animation: pulse 2s ease-in-out infinite;
    pointer-events: none;
  }

  /* Enhanced loading spinner with mobile optimizations */
  .mobile-loading-overlay .loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 214, 0, 0.3);
    border-top: 3px solid var(--color-accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
    position: relative;
  }

  .mobile-loading-overlay .loading-spinner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid rgba(255, 214, 0, 0.6);
    border-radius: 50%;
    animation: spin 0.8s linear infinite reverse;
  }

  /* Enhanced mobile loading progress with better visual feedback */
  .mobile-loading-progress {
    width: 85%;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 1.5rem;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  }

  .mobile-loading-progress-bar {
    height: 100%;
    background: var(--gradient-yellow);
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 0 8px rgba(255, 214, 0, 0.4);
  }

  .mobile-loading-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: shimmer 1.2s ease-in-out infinite;
  }
  
  /* Loading progress text with better mobile typography */
  .mobile-loading-overlay p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 0.3s ease-out 0.1s both;
  }

  /* Enhanced mobile viewport handling with improved keyboard support */
  .mobile-keyboard-active .email-update-section {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    transform: translateY(-15px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Better keyboard accommodation */
    max-height: calc(100vh - env(keyboard-inset-height, 0px) - 40px);
    max-height: calc(100dvh - env(keyboard-inset-height, 0px) - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-keyboard-active .mobile-input {
    transform: translateY(-12px);
    box-shadow: 0 12px 32px rgba(255, 214, 0, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Enhanced focus state for keyboard mode */
    border-width: 3px;
    border-color: var(--color-accent-primary);
  }

  .mobile-keyboard-active .form-actions {
    position: sticky;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 1.25rem;
    margin: 1.5rem -1rem -1rem -1rem;
    border-radius: 16px 16px 0 0;
    border-top: 2px solid rgba(255, 214, 0, 0.3);
    z-index: 5;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    
    /* Safe area support for devices with home indicators */
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  }

  /* Enhanced mobile-specific input focus states with better keyboard handling */
  .mobile-input.mobile-focused {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.2), 0 8px 24px rgba(255, 214, 0, 0.15);
    transform: translateY(-4px);
    background: var(--color-surface-primary);
    z-index: 2;
    position: relative;
  }

  /* Enhanced mobile keyboard visibility handling */
  .keyboard-visible .mobile-input {
    margin-bottom: 1.5rem;
  }

  .keyboard-visible .form-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 1.5rem;
    border-top: 2px solid rgba(255, 214, 0, 0.3);
    z-index: 1000;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
    
    /* Enhanced safe area support */
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    padding-left: calc(1.5rem + env(safe-area-inset-left));
    padding-right: calc(1.5rem + env(safe-area-inset-right));
  }

  .mobile-email-section {
    padding: 0.875rem;
    margin-bottom: 0.875rem;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .keyboard-active {
    margin-bottom: 0.5rem;
    padding-bottom: 0.75rem;
    transform: translateY(-10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }

  /* Mobile viewport optimizations */
  .mobile-email-section.viewport-small {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
  }

  .mobile-email-section.viewport-large {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .email-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .email-value {
    font-size: 0.9rem;
    padding: 0.75rem;
    width: 100%;
    word-break: break-all;
    text-align: center;
    border-radius: 12px;
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border-secondary);
  }

  .verified-badge,
  .pending-badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    align-self: center;
    border-radius: 16px;
  }

  /* Mobile-optimized form */
  .email-form.mobile-optimized {
    gap: 1.25rem;
  }

  .form-group {
    position: relative;
  }

  .mobile-optimized-label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .required-indicator {
    color: var(--color-error);
    font-size: 0.8rem;
  }

  .mobile-input {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 1rem 1.25rem;
    border-radius: 12px;
    min-height: var(--touch-target-comfortable);
    appearance: none;
    width: 100%;
    box-sizing: border-box;
    background: var(--color-surface-secondary);
    border: 2px solid var(--color-border-primary);
    color: var(--color-text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
  }

  .mobile-input:focus {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.15);
    transform: translateY(-2px);
    background: var(--color-surface-primary);
  }

  .mobile-input.active {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.15);
  }

  .mobile-input.error {
    border-color: var(--color-error);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
    animation: shake 0.3s ease-in-out;
  }

  .mobile-input.valid {
    border-color: var(--color-success);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
  }

  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
  }

  /* Mobile form actions */
  .form-actions.mobile-actions,
  .pending-actions.mobile-pending-actions {
    flex-direction: column;
    gap: 0.875rem;
    margin-top: 1.5rem;
    position: relative;
  }

  /* Enhanced swipe gesture indicators for mobile actions with improved UX */
  .form-actions.mobile-actions::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 5px;
    background: linear-gradient(90deg, transparent, rgba(255, 214, 0, 0.4), transparent);
    border-radius: 3px;
    opacity: 0;
    animation: swipeHint 4s ease-in-out 1.5s infinite;
    pointer-events: none;
  }
  
  /* Additional swipe gesture visual cues with better mobile UX */
  .form-actions.mobile-actions::after {
    content: '← Swipe to cancel editing →';
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: rgba(255, 214, 0, 0.6);
    white-space: nowrap;
    opacity: 0;
    animation: swipeTextHint 4s ease-in-out 2s infinite;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }

  /* Enhanced mobile loading states with advanced feedback and animations */
  .mobile-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    z-index: 10;
    animation: fadeIn 0.2s ease-out;
    
    /* Enhanced mobile loading experience with better touch handling */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    
    /* Improved visual hierarchy with enhanced shadows */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.5);
    
    /* Enhanced mobile performance */
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  
  .mobile-loading-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 214, 0, 0.1) 0%, transparent 70%);
    animation: pulse 2s ease-in-out infinite;
    pointer-events: none;
  }

  /* Enhanced loading spinner with mobile optimizations */
  .mobile-loading-overlay .loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 214, 0, 0.3);
    border-top: 3px solid var(--color-accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
    position: relative;
  }

  .mobile-loading-overlay .loading-spinner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid rgba(255, 214, 0, 0.6);
    border-radius: 50%;
    animation: spin 0.8s linear infinite reverse;
  }

  /* Enhanced mobile loading progress with better visual feedback */
  .mobile-loading-progress {
    width: 85%;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 1.5rem;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  }

  .mobile-loading-progress-bar {
    height: 100%;
    background: var(--gradient-yellow);
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 0 8px rgba(255, 214, 0, 0.4);
  }

  .mobile-loading-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: shimmer 1.2s ease-in-out infinite;
  }
  
  /* Loading progress text with better mobile typography */
  .mobile-loading-overlay p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 0.3s ease-out 0.1s both;
  }

  /* Enhanced swipe gesture animations */
  @keyframes swipeHint {
    0%, 100% { 
      opacity: 0; 
      transform: translateX(-50%) scaleX(1); 
    }
    25% { 
      opacity: 0.6; 
      transform: translateX(-50%) scaleX(1.2); 
    }
    50% { 
      opacity: 1; 
      transform: translateX(-50%) scaleX(1.4); 
    }
    75% { 
      opacity: 0.6; 
      transform: translateX(-50%) scaleX(1.2); 
    }
  }

  @keyframes swipeTextHint {
    0%, 100% { 
      opacity: 0; 
      transform: translateX(-50%) translateY(0); 
    }
    25% { 
      opacity: 0.4; 
      transform: translateX(-50%) translateY(-2px); 
    }
    50% { 
      opacity: 0.8; 
      transform: translateX(-50%) translateY(-4px); 
    }
    75% { 
      opacity: 0.4; 
      transform: translateX(-50%) translateY(-2px); 
    }
  }

  /* Mobile loading states with progress */
  .mobile-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    z-index: 10;
  }

  .mobile-loading-progress {
    width: 80%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 1rem;
  }

  .mobile-loading-progress-bar {
    height: 100%;
    background: var(--gradient-yellow);
    border-radius: 2px;
    transition: width 0.3s ease;
    position: relative;
  }

  .mobile-loading-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 1.5s ease-in-out infinite;
  }

  .mobile-submit-btn,
  .mobile-cancel-btn,
  .mobile-resend-btn,
  .mobile-cancel-change-btn {
    width: 100%;
    text-align: center;
    min-height: var(--touch-target-comfortable);
    font-size: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mobile-submit-btn {
    background: var(--gradient-yellow);
    color: var(--color-text-inverse);
    border: none;
    box-shadow: 0 4px 12px rgba(255, 214, 0, 0.3);
  }

  .mobile-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 214, 0, 0.4);
  }

  .mobile-submit-btn:disabled {
    opacity: 0.6;
    transform: none;
    box-shadow: none;
  }

  .mobile-cancel-btn,
  .mobile-cancel-change-btn {
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
    border: 2px solid var(--color-border-primary);
  }

  .mobile-cancel-btn:hover:not(:disabled),
  .mobile-cancel-change-btn:hover:not(:disabled) {
    background: var(--color-surface-tertiary);
    border-color: var(--color-border-accent);
    transform: translateY(-1px);
  }

  .mobile-resend-btn {
    background: var(--color-accent-secondary);
    color: var(--color-text-inverse);
    border: none;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }

  .mobile-resend-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
  }

  .mobile-resend-btn:disabled {
    background: var(--color-surface-secondary);
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border-primary);
    box-shadow: none;
  }

  /* Enhanced touch feedback for mobile buttons */
  .touch-active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
  }

  /* Loading spinner for mobile */
  .loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  /* Mobile feedback styles */
  .mobile-feedback {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
  }

  .mobile-feedback .field-error {
    font-size: 0.85rem;
    font-weight: 500;
  }

  .mobile-feedback .field-success {
    font-size: 0.85rem;
    font-weight: 500;
  }

  .mobile-feedback .field-warning {
    font-size: 0.85rem;
  }

  .mobile-feedback .field-suggestion {
    font-size: 0.8rem;
    opacity: 0.9;
  }

  /* Mobile help modal */
  .mobile-help-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fadeIn 0.3s ease-out;
  }

  .mobile-help-content {
    background: var(--color-surface-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 320px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease-out;
  }

  .mobile-help-content h4 {
    margin: 0 0 1rem 0;
    color: var(--color-text-primary);
    font-size: 1.125rem;
    font-weight: 600;
  }

  .mobile-help-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
  }

  .mobile-help-content li {
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

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

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .pending-change-indicator {
    padding: 1rem;
    border-radius: 12px;
    margin-top: 1rem;
  }

  .help-text {
    font-size: 0.85rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-top: 1rem;
  }

  /* Enhanced mobile keyboard optimizations */
  .keyboard-active .help-text {
    display: none;
  }

  .keyboard-active .mobile-help-modal {
    display: none;
  }

  /* Mobile keyboard active state optimizations */
  .mobile-keyboard-active .email-update-section {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
  }

  .mobile-keyboard-active .mobile-input {
    transform: translateY(-10px);
    box-shadow: 0 8px 24px rgba(255, 214, 0, 0.2);
  }

  .mobile-keyboard-active .form-actions {
    position: sticky;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1rem;
    margin: 1rem -1rem -1rem -1rem;
    border-radius: 12px 12px 0 0;
    border-top: 1px solid rgba(255, 214, 0, 0.2);
  }

  /* Enhanced input keyboard types for mobile */
  .mobile-input[type="email"] {
    /* Email-specific mobile optimizations */
    -webkit-text-security: none;
    text-security: none;
  }

  .mobile-input[type="password"] {
    /* Password-specific mobile optimizations */
    -webkit-text-security: disc;
    text-security: disc;
  }

  /* iOS specific optimizations */
  .ios-device .mobile-input {
    font-size: 16px !important; /* Prevent zoom */
    border-radius: 8px; /* iOS native feel */
  }

  .ios-device .mobile-input:focus {
    border-radius: 8px;
    box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.15);
  }

  /* Android specific optimizations */
  .android-device .mobile-input {
    font-size: 16px !important;
    border-radius: 4px; /* Material design feel */
  }

  .android-device .mobile-input:focus {
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(255, 214, 0, 0.3);
  }

  /* Validation feedback mobile optimization */
  .validation-feedback {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    min-height: 1.2rem;
  }

  .field-error,
  .field-success,
  .field-warning {
    font-size: 0.8rem;
    padding: 0.25rem 0;
    display: block;
  }

  /* Swipe gesture indicators */
  .email-form::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: rgba(255, 214, 0, 0.3);
    border-radius: 2px;
    opacity: 0;
    animation: swipeHint 3s ease-in-out 2s;
  }

  @keyframes swipeHint {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
  }
}

@media (max-width: 480px) {
  .email-update-section {
    padding: 0.75rem;
    border-radius: 12px;
    margin-bottom: 0.75rem;
  }

  .email-update-section h3 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
  }

  .email-info {
    gap: 0.75rem;
  }

  .email-value {
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
    padding: 0.75rem;
    border-radius: 6px;
  }

  .verified-badge,
  .pending-badge {
    align-self: center;
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
  }

  .form-group {
    gap: 0.5rem;
  }

  .form-group input {
    padding: 1rem;
    font-size: 16px;
    border-radius: 6px;
  }

  .edit-email-btn {
    width: 100%;
    justify-content: center;
    padding: 1rem;
    font-size: 0.9rem;
    border-radius: 6px;
  }

  .success-message,
  .error-message,
  .info-message,
  .warning-message {
    padding: 0.875rem 1rem;
    font-size: 0.9rem;
    border-radius: 6px;
  }

  .pending-change-indicator {
    padding: 0.75rem;
    border-radius: 6px;
  }

  .pending-details p {
    font-size: 0.85rem;
    margin: 0.25rem 0;
  }

  .help-text {
    padding: 0.5rem;
    font-size: 0.8rem;
    border-radius: 6px;
  }

  /* Improved touch targets for small screens */
  .form-actions .btn,
  .pending-actions .btn {
    min-height: 48px;
    font-size: 0.9rem;
    padding: 0.875rem 1rem;
  }

  /* Optimize for one-handed use */
  .form-group input:focus {
    position: relative;
    z-index: 1;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .edit-email-btn {
    min-height: var(--touch-target-comfortable);
  }

  .edit-email-btn:hover {
    transform: none;
  }

  .edit-email-btn:active {
    transform: scale(0.98);
    background: var(--color-accent-primary);
    color: var(--color-text-inverse);
  }

  .form-actions .btn,
  .pending-actions .btn {
    min-height: var(--touch-target-comfortable);
    padding: 1rem 1.5rem;
  }

  .form-actions .btn:hover,
  .pending-actions .btn:hover {
    transform: none;
  }

  .form-actions .btn:active,
  .pending-actions .btn:active {
    transform: scale(0.98);
  }

  .form-group input {
    min-height: var(--touch-target-comfortable);
  }

  /* Larger touch targets for mobile */
  .message-dismiss {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }
}

/* Enhanced Loading States */
.btn:disabled {
  position: relative;
}

.btn.loading {
  pointer-events: none;
  cursor: not-allowed;
}

.btn.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  opacity: 0.8;
}

.btn.loading .btn-text {
  opacity: 0;
}

/* Enhanced spinner for different button types */
.btn-primary.loading::after {
  border-top-color: var(--color-text-inverse);
}

.btn-secondary.loading::after {
  border-top-color: var(--color-accent-primary);
}

/* Pulsing effect for loading buttons */
.btn.loading {
  animation: pulse-loading 1.5s ease-in-out infinite;
}

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

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

/* Loading overlay for form sections */
.form-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  z-index: 10;
}

.form-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 214, 0, 0.3);
  border-top: 3px solid var(--color-accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Skeleton loading for email display */
.email-skeleton {
  background: var(--gradient-loading-dark);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
  height: 1.5rem;
  width: 200px;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Focus Management */
.email-form input:focus,
.edit-email-btn:focus,
.form-actions .btn:focus,
.pending-actions .btn:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .email-update-section {
    border-width: 2px;
  }
  
  .verified-badge {
    border: 1px solid currentColor;
  }
  
  .pending-change-indicator {
    border-width: 2px;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .email-update-section,
  .form-group input,
  .btn {
    transition: none;
  }
  
  .btn:hover {
    transform: none;
  }
  
  @keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(0deg); }
  }
}

/* Performance optimizations */
.email-update-section,
.edit-email-btn,
.form-group input,
.btn {
  will-change: transform, background-color, border-color;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Smooth scrolling for form validation errors */
.form-group.error {
  scroll-margin-top: 2rem;
}

/* Enhanced form validation styles */
.form-group input:invalid:not(:focus):not(:placeholder-shown) {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-group input:valid:not(:focus):not(:placeholder-shown) {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* Real-time validation feedback */
.validation-feedback {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.validation-feedback.show {
  opacity: 1;
  transform: translateY(0);
}

.validation-feedback.success {
  color: var(--color-success);
}

.validation-feedback.error {
  color: var(--color-error);
}

.validation-feedback.warning {
  color: var(--color-warning);
}

/* Email strength indicator */
.email-strength-indicator {
  height: 4px;
  background: var(--color-surface-secondary);
  border-radius: 2px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.email-strength-bar {
  height: 100%;
  transition: width 0.3s ease, background-color 0.3s ease;
  border-radius: 2px;
}

.email-strength-bar.weak {
  width: 33%;
  background: var(--color-error);
}

.email-strength-bar.medium {
  width: 66%;
  background: var(--color-warning);
}

.email-strength-bar.strong {
  width: 100%;
  background: var(--color-success);
}

/* Accessibility announcements */
.sr-announce {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Print styles */
@media print {
  .email-update-section {
    background: white !important;
    color: black !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
  
  .edit-email-btn,
  .form-actions,
  .pending-actions {
    display: none !important;
  }
  
  .success-message,
  .error-message,
  .info-message,
  .warning-message {
    background: white !important;
    color: black !important;
    border: 1px solid #ccc !important;
  }
}

/* Dark mode specific enhancements */
@media (prefers-color-scheme: dark) {
  .email-update-section {
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 214, 0, 0.1);
  }
  
  .form-group input {
    color-scheme: dark;
  }
}

/* Light mode fallback */
@media (prefers-color-scheme: light) {
  .email-update-section {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}/* Enh
anced Validation Styles */
.validation-feedback {
  margin-top: 0.5rem;
  min-height: 1.2rem;
}

.field-error {
  display: block;
  color: #dc3545;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.field-error.real-time {
  color: #e74c3c;
  font-weight: 500;
}

.field-warning {
  display: block;
  color: #f39c12;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.field-suggestion {
  display: block;
  color: #3498db;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  font-style: italic;
}

.field-success {
  display: block;
  color: #27ae60;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

/* Input validation states */
.form-group input.valid {
  border-color: #27ae60;
  box-shadow: 0 0 0 0.2rem rgba(39, 174, 96, 0.25);
}

.form-group input.error {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Loading and retry states */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn.retrying {
  background-color: #f39c12;
  border-color: #f39c12;
}

.btn.retrying:hover {
  background-color: #e67e22;
  border-color: #e67e22;
}

/* Enhanced error messages */
.error-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 6px;
  color: #721c24;
  margin-bottom: 1rem;
}

.error-message.network-error {
  background-color: #fff3cd;
  border-color: #ffeaa7;
  color: #856404;
}

.error-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.success-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 6px;
  color: #155724;
  margin-bottom: 1rem;
}

.success-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .form-group input {
    transition: none;
  }
}

@media (prefers-contrast: high) {
  .field-error {
    color: #b30000;
    font-weight: 600;
  }
  
  .field-success {
    color: #006600;
    font-weight: 600;
  }
  
  .field-warning {
    color: #cc6600;
    font-weight: 600;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .validation-feedback {
    font-size: 0.8rem;
  }
  
  .error-message,
  .success-message {
    padding: 0.75rem;
    font-size: 0.9rem;
  }
}
/* Lazy Emoji Image Component Styles */

.lazy-emoji-container {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  background-color: #f5f5f5;
  transition: all 0.2s ease;
}

.lazy-emoji-container.clickable {
  cursor: pointer;
}

.lazy-emoji-container.clickable:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.lazy-emoji-container.clickable:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.lazy-emoji-container.clickable:active {
  transform: scale(0.98);
}

/* Image styles */
.lazy-emoji-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease-in-out;
}

.lazy-emoji-image.hidden {
  opacity: 0;
}

.lazy-emoji-image.visible {
  opacity: 1;
}

/* Placeholder container */
.lazy-emoji-placeholder-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  z-index: 1;
}

/* Default placeholder */
.lazy-emoji-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  font-size: 0.875rem;
}

.lazy-emoji-placeholder .placeholder-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

/* Loading state */
.lazy-emoji-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #e9ecef;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Loading overlay */
.lazy-emoji-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.loading-progress {
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #007bff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Error state */
.lazy-emoji-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #dc3545;
  font-size: 0.75rem;
  text-align: center;
  padding: 0.5rem;
}

.lazy-emoji-error .error-icon {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.lazy-emoji-error .error-text {
  font-weight: 500;
}

/* Retry button */
.lazy-emoji-retry {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.75rem;
  cursor: pointer;
  z-index: 3;
  transition: background-color 0.2s ease;
}

.lazy-emoji-retry:hover {
  background-color: #0056b3;
}

.lazy-emoji-retry:focus {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

/* Fade-in animation */
.lazy-emoji-container.fade-in .lazy-emoji-image {
  transition: opacity 0.3s ease-in-out;
}

/* Container states */
.lazy-emoji-container.loading {
  background-color: #f8f9fa;
}

.lazy-emoji-container.loaded {
  background-color: transparent;
}

.lazy-emoji-container.error {
  background-color: #fff5f5;
  border: 1px solid #fed7d7;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .lazy-emoji-container.clickable:hover {
    transform: none; /* Disable hover effects on mobile */
  }
  
  .lazy-emoji-container.clickable:active {
    transform: scale(0.95);
    background-color: rgba(0, 123, 255, 0.1);
  }
  
  .loading-spinner {
    width: 20px;
    height: 20px;
  }
  
  .loading-progress {
    width: 24px;
    height: 24px;
    border-width: 2px;
  }
  
  .lazy-emoji-retry {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .lazy-emoji-container {
    border: 2px solid #000;
  }
  
  .lazy-emoji-placeholder {
    color: #000;
    background-color: #fff;
  }
  
  .lazy-emoji-error {
    color: #000;
    background-color: #ffcccc;
  }
  
  .loading-spinner {
    border-color: #000;
    border-top-color: #666;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lazy-emoji-container,
  .lazy-emoji-image,
  .loading-spinner,
  .loading-progress {
    animation: none;
    transition: none;
  }
  
  .lazy-emoji-container.clickable:hover {
    transform: none;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .lazy-emoji-container {
    background-color: #2d3748;
  }
  
  .lazy-emoji-placeholder-container {
    background-color: #4a5568;
  }
  
  .lazy-emoji-placeholder {
    color: #a0aec0;
  }
  
  .lazy-emoji-loading-overlay {
    background-color: rgba(45, 55, 72, 0.8);
  }
  
  .loading-spinner {
    border-color: #4a5568;
    border-top-color: #63b3ed;
  }
  
  .loading-progress {
    border-color: #4a5568;
    border-top-color: #63b3ed;
  }
}
/* Enhanced Emoji Selection Modal Styles */

/* Accessibility Styles */
.keyboard-navigation .emoji-modal__emoji-btn:focus,
.keyboard-navigation .emoji-modal__close:focus,
.keyboard-navigation .emoji-modal__random-btn:focus,
.keyboard-navigation .nav-btn:focus,
.keyboard-navigation .page-dot:focus {
  outline: 3px solid var(--color-accent-primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(255, 214, 0, 0.3) !important;
}

/* Enhanced high contrast mode with better visibility */
.high-contrast .emoji-modal {
  border: 4px solid #ffff00;
  background: #000000;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(255, 255, 0, 0.5);
}

.high-contrast .emoji-modal__title {
  color: #ffff00 !important;
  -webkit-text-fill-color: #ffff00 !important;
  text-shadow: 0 0 2px #000000;
}

.high-contrast .emoji-modal__emoji-btn {
  border: 3px solid #ffffff;
  background: #333333;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

.high-contrast .emoji-modal__emoji-btn:hover {
  border-color: #ffff00;
  background: #444444;
  box-shadow: 0 0 8px rgba(255, 255, 0, 0.5);
}

.high-contrast .emoji-modal__emoji-btn--selected {
  background: #ffff00;
  color: #000000;
  border: 4px solid #000000;
  box-shadow: 0 0 12px rgba(255, 255, 0, 0.8);
}

.high-contrast .emoji-modal__emoji-btn--current {
  background: #00ff00;
  color: #000000;
  border: 4px solid #000000;
  box-shadow: 0 0 12px rgba(0, 255, 0, 0.8);
}

.high-contrast .emoji-modal__random-btn {
  background: #0066ff;
  color: #ffffff;
  border: 3px solid #ffffff;
  box-shadow: 0 0 8px rgba(0, 102, 255, 0.5);
}

.high-contrast .emoji-modal__random-btn:hover {
  background: #0080ff;
  box-shadow: 0 0 12px rgba(0, 128, 255, 0.7);
}

.high-contrast .emoji-modal__close {
  background: #ff0000;
  color: #ffffff;
  border: 3px solid #ffffff;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}

.high-contrast .emoji-modal__close:hover {
  background: #ff3333;
  box-shadow: 0 0 12px rgba(255, 51, 51, 0.7);
}

.high-contrast .emoji-modal__error {
  background: #ff0000;
  color: #ffffff;
  border: 4px solid #ffffff;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}

/* Enhanced reduced motion support */
.reduce-motion .emoji-modal,
.reduce-motion .emoji-modal__emoji-btn,
.reduce-motion .mobile-grid,
.reduce-motion .emoji-modal__spinner,
.reduce-motion .mobile-modal {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

.reduce-motion .emoji-modal__emoji-btn:hover {
  transform: none !important;
}

/* Screen reader optimizations */
.screen-reader-active .emoji-modal__emoji-btn {
  position: relative;
}

.screen-reader-active .emoji-modal__emoji-btn::after {
  content: attr(aria-label);
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.screen-reader-optimized .emoji-modal__grid {
  /* Ensure proper reading order */
  display: grid;
  grid-auto-flow: row;
}

.screen-reader-optimized .emoji-modal__emoji-btn[aria-selected="true"] {
  /* Enhanced selection indication for screen readers */
  background: rgba(255, 214, 0, 0.3);
  border-width: 3px;
}

/* Enhanced focus management */
.emoji-modal[aria-modal="true"] {
  /* Ensure modal traps focus properly */
  isolation: isolate;
}

.emoji-modal__focus-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Color scheme preferences */
.prefers-dark .emoji-modal {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  border-color: rgba(255, 214, 0, 0.4);
}

.prefers-dark .emoji-modal__emoji-btn {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

.prefers-dark .emoji-modal__emoji-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Enhanced focus indicators for emoji grid */
.emoji-modal__emoji-btn:focus-visible {
  outline: 3px solid var(--color-accent-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 214, 0, 0.3);
  transform: scale(1.05);
}

/* Keyboard navigation grid styling */
.keyboard-navigation .emoji-modal__grid {
  gap: 8px;
}

.keyboard-navigation .emoji-modal__emoji-btn {
  border-radius: 8px;
  transition: all 0.2s ease;
}

/* Screen reader friendly status indicators */
.emoji-modal__current-indicator::before {
  content: 'Currently selected: ';
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.emoji-modal__updating-overlay::before {
  content: 'Updating profile picture, please wait';
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Enhanced error message accessibility */
.emoji-modal__error[role="alert"] {
  border: 2px solid #ef4444;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  background: rgba(239, 68, 68, 0.1);
}

.emoji-modal__error-icon {
  font-size: 1.5rem;
  margin-right: 0.5rem;
}

/* Loading state accessibility */
.emoji-modal__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
}

.emoji-modal__spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 214, 0, 0.3);
  border-top: 4px solid var(--color-accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.reduce-motion .emoji-modal__spinner {
  animation: none;
  border: 4px solid var(--color-accent-primary);
}

/* Enhanced mobile accessibility with better touch targets */
@media (max-width: 768px) {
  .keyboard-navigation .emoji-modal__emoji-btn {
    min-height: 44px;
    min-height: var(--touch-target-min);
    min-width: 44px;
    min-width: var(--touch-target-min);
  }
  
  .emoji-modal__emoji-btn:focus-visible {
    transform: scale(1.1);
    z-index: 10;
  }
  
  /* Enhanced touch target sizes based on viewport */
  .viewport-xs .emoji-modal__emoji-btn {
    min-height: 64px;
    min-height: var(--touch-target-large);
    min-width: 64px;
    min-width: var(--touch-target-large);
    font-size: 1.1rem;
  }
  
  .viewport-small .emoji-modal__emoji-btn {
    min-height: 56px;
    min-height: var(--touch-target-comfortable);
    min-width: 56px;
    min-width: var(--touch-target-comfortable);
  }
  
  .viewport-medium .emoji-modal__emoji-btn,
  .viewport-large .emoji-modal__emoji-btn {
    min-height: 44px;
    min-height: var(--touch-target-min);
    min-width: 44px;
    min-width: var(--touch-target-min);
  }
  
  /* Enhanced close button for mobile */
  .emoji-modal__close {
    min-height: 56px;
    min-height: var(--touch-target-comfortable);
    min-width: 56px;
    min-width: var(--touch-target-comfortable);
    font-size: 1.5rem;
  }
  
  /* Enhanced random button for mobile */
  .emoji-modal__random-btn {
    min-height: 56px;
    min-height: var(--touch-target-comfortable);
    padding: 12px 24px;
    font-size: 1rem;
  }
  
  .high-contrast .mobile-pagination-info {
    background: #000000;
    color: #ffffff;
    border: 2px solid #ffff00;
  }
  
  .high-contrast .page-dot {
    border: 2px solid #ffffff;
    background: #333333;
    min-width: 44px;
    min-width: var(--touch-target-min);
    min-height: 44px;
    min-height: var(--touch-target-min);
  }
  
  .high-contrast .page-dot.active {
    background: #ffff00;
    border-color: #000000;
  }
  
  /* Landscape orientation optimizations */
  .landscape .emoji-modal {
    max-height: 95vh;
    flex-direction: row;
  }
  
  .landscape .emoji-modal__header {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    width: 80px;
    border-right: 1px solid rgba(255, 214, 0, 0.2);
    border-bottom: none;
  }
  
  .landscape .emoji-modal__content {
    flex: 1 1;
    padding: 16px;
  }
  
  .landscape .mobile-grid {
    grid-template-columns: repeat(6, 1fr);
    max-height: none;
    height: 100%;
  }
  
  /* Keyboard open state adjustments */
  .keyboard-open .emoji-modal {
    max-height: calc(100vh - 0px - 2rem);
    max-height: calc(100vh - var(--keyboard-height, 0px) - 2rem);
    transform: translateY(-10px);
  }
  
  /* Safe area inset support */
  .emoji-modal {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

:root {
  /* Mobile touch target sizes */
  --touch-target-min: 44px;
  --touch-target-comfortable: 56px;
  --touch-target-large: 64px;
  
  /* Mobile-specific spacing */
  --mobile-padding-sm: 0.75rem;
  --mobile-padding-md: 1rem;
  --mobile-padding-lg: 1.5rem;
  
  /* Mobile animation durations */
  --mobile-animation-fast: 0.15s;
  --mobile-animation-normal: 0.25s;
  --mobile-animation-slow: 0.35s;
  
  /* Mobile viewport units */
  --mobile-vh: 1vh;
  --mobile-vw: 1vw;
  
  /* Enhanced mobile colors */
  --mobile-touch-feedback: rgba(255, 214, 0, 0.15);
  --mobile-active-feedback: rgba(255, 214, 0, 0.25);
  --mobile-error-feedback: rgba(239, 68, 68, 0.15);
  --mobile-success-feedback: rgba(34, 197, 94, 0.15);
}

/* Dynamic viewport height support */
@supports (height: 100dvh) {
  :root {
    --mobile-vh: 1dvh;
  }
}

.emoji-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
  padding: 1rem;
  animation: backdropFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  
  /* Enhanced mobile support */
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

.emoji-modal-backdrop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(255, 214, 0, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

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

.emoji-modal {
  background: linear-gradient(135deg, #000000 0%, #111111 100%);
  border: 1px solid rgba(255, 214, 0, 0.3);
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 214, 0, 0.1);
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: var(--z-modal);
  cursor: default;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Yellow accent line at top */
.emoji-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FFD600 0%, #E6C200 100%);
}

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

/* Header */
.emoji-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 214, 0, 0.2);
  flex-shrink: 0;
}

.emoji-modal__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  background: linear-gradient(135deg, #FFD600 0%, #FFED4E 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.emoji-modal__close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.emoji-modal__close:hover:not(:disabled) {
  color: #FFD600;
  background: rgba(255, 214, 0, 0.1);
}

.emoji-modal__close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Content */
.emoji-modal__content {
  padding: 24px;
  overflow-y: auto;
  flex: 1 1;
  min-height: 0;
}

/* Random Section */
.emoji-modal__random-section {
  margin-bottom: 24px;
  text-align: center;
}

.emoji-modal__random-btn {
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  color: #000000;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(255, 214, 0, 0.3);
}

.emoji-modal__random-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 214, 0, 0.4);
}

.emoji-modal__random-btn:active:not(:disabled) {
  transform: translateY(0);
}

.emoji-modal__random-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Error Message */
.emoji-modal__error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #FCA5A5;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  text-align: center;
}

/* Enhanced Loading State */
.emoji-modal__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.8);
  position: relative;
}

.emoji-modal__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 214, 0, 0.3);
  border-top: 3px solid #FFD600;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
  position: relative;
}

.emoji-modal__spinner::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid rgba(255, 214, 0, 0.6);
  border-radius: 50%;
  animation: spin 0.8s linear infinite reverse;
}

.emoji-modal__loading-text {
  font-size: 0.9rem;
  opacity: 0.8;
  animation: pulse 1.5s ease-in-out infinite;
}

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

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

/* Skeleton loading for emoji grid */
.emoji-modal__skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  padding: 4px;
}

.emoji-modal__skeleton-item {
  aspect-ratio: 1;
  background: var(--gradient-loading-dark);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 12px;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Progressive loading animation */
.emoji-modal__emoji-btn {
  animation: fadeInScale 0.3s ease-out both;
}

.emoji-modal__emoji-btn:nth-child(1) { animation-delay: 0.05s; }
.emoji-modal__emoji-btn:nth-child(2) { animation-delay: 0.1s; }
.emoji-modal__emoji-btn:nth-child(3) { animation-delay: 0.15s; }
.emoji-modal__emoji-btn:nth-child(4) { animation-delay: 0.2s; }
.emoji-modal__emoji-btn:nth-child(5) { animation-delay: 0.25s; }
.emoji-modal__emoji-btn:nth-child(6) { animation-delay: 0.3s; }

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Emoji Grid */
.emoji-modal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
}

/* Custom scrollbar for grid */
.emoji-modal__grid::-webkit-scrollbar {
  width: 8px;
}

.emoji-modal__grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.emoji-modal__grid::-webkit-scrollbar-thumb {
  background: rgba(255, 214, 0, 0.5);
  border-radius: 4px;
}

.emoji-modal__grid::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 214, 0, 0.7);
}

/* Enhanced Emoji Button */
.emoji-modal__emoji-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.emoji-modal__emoji-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-yellow);
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 10px;
}

.emoji-modal__emoji-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 214, 0, 0.5);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 214, 0, 0.2);
}

.emoji-modal__emoji-btn:hover:not(:disabled)::before {
  opacity: 0.1;
}

.emoji-modal__emoji-btn:active:not(:disabled) {
  transform: scale(0.95);
  box-shadow: 0 2px 6px rgba(255, 214, 0, 0.3);
}

.emoji-modal__emoji-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Enhanced selection states */
.emoji-modal__emoji-btn--selected {
  border-color: #FFD600;
  background: rgba(255, 214, 0, 0.15);
  box-shadow: 0 0 0 2px rgba(255, 214, 0, 0.3), 0 4px 12px rgba(255, 214, 0, 0.2);
  transform: scale(1.02);
}

.emoji-modal__emoji-btn--selected::before {
  opacity: 0.2;
}

.emoji-modal__emoji-btn--current {
  border-color: #22C55E;
  background: rgba(34, 197, 94, 0.1);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
}

.emoji-modal__emoji-btn--current.emoji-modal__emoji-btn--selected {
  border-color: #FFD600;
  background: linear-gradient(135deg, rgba(255, 214, 0, 0.15) 0%, rgba(34, 197, 94, 0.1) 100%);
  box-shadow: 0 0 0 2px rgba(255, 214, 0, 0.4), 0 4px 12px rgba(255, 214, 0, 0.3);
}

/* Ripple effect on click */
.emoji-modal__emoji-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 214, 0, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.emoji-modal__emoji-btn:active::after {
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: width 0.1s ease, height 0.1s ease, opacity 0.1s ease;
}

/* Selected state */
.emoji-modal__emoji-btn--selected {
  border-color: #FFD600;
  background: rgba(255, 214, 0, 0.1);
  box-shadow: 0 0 0 2px rgba(255, 214, 0, 0.3);
}

/* Current emoji indicator */
.emoji-modal__emoji-btn--current {
  border-color: #22C55E;
  background: rgba(34, 197, 94, 0.1);
}

.emoji-modal__emoji-btn--current.emoji-modal__emoji-btn--selected {
  border-color: #FFD600;
  background: linear-gradient(135deg, rgba(255, 214, 0, 0.1) 0%, rgba(34, 197, 94, 0.1) 100%);
}

/* Emoji Image */
.emoji-modal__emoji-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.emoji-modal__emoji-btn:hover:not(:disabled) .emoji-modal__emoji-img {
  transform: scale(1.1);
}

/* Current Indicator */
.emoji-modal__current-indicator {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  background: #22C55E;
  color: #000000;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}

/* Updating Overlay */
.emoji-modal__updating-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.emoji-modal__mini-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 214, 0, 0.3);
  border-top: 2px solid #FFD600;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Empty State */
.emoji-modal__empty {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.6);
}

.emoji-modal__empty p {
  margin-bottom: 20px;
  font-size: 1rem;
}

.emoji-modal__retry-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #FFD600;
  border: 1px solid rgba(255, 214, 0, 0.3);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.emoji-modal__retry-btn:hover {
  background: rgba(255, 214, 0, 0.1);
  border-color: #FFD600;
}

/* Enhanced Accessibility Styles */
.keyboard-navigation .emoji-modal__emoji-btn:focus,
.focus-visible .emoji-modal__emoji-btn:focus {
  outline: 3px solid var(--color-accent-primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(255, 214, 0, 0.3) !important;
  z-index: 10;
}

.keyboard-navigation .emoji-modal__close:focus,
.keyboard-navigation .emoji-modal__random-btn:focus {
  outline: 3px solid var(--color-accent-primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(255, 214, 0, 0.3) !important;
}

.high-contrast .emoji-modal {
  background: #000000;
  border: 3px solid var(--color-accent-primary);
}

.high-contrast .emoji-modal__title {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.high-contrast .emoji-modal__close {
  color: #ffffff;
  background: #000000;
  border: 2px solid #ffffff;
}

.high-contrast .emoji-modal__close:hover {
  background: #ffffff;
  color: #000000;
}

.high-contrast .emoji-modal__random-btn {
  background: #ffff00;
  color: #000000;
  border: 2px solid #000000;
}

.high-contrast .emoji-modal__emoji-btn {
  border: 2px solid #ffffff;
  background: #333333;
}

.high-contrast .emoji-modal__emoji-btn--selected {
  border: 3px solid #ffff00;
  background: #000000;
}

.high-contrast .emoji-modal__emoji-btn--current {
  border: 3px solid #00ff00;
  background: #000000;
}

.high-contrast .emoji-modal__error {
  background: #ff0000;
  color: #ffffff;
  border: 3px solid #ffffff;
}

.reduce-motion .emoji-modal,
.reduce-motion .emoji-modal__emoji-btn,
.reduce-motion .emoji-modal__spinner {
  animation: none !important;
  transition: none !important;
}

.screen-reader-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Emoji grid keyboard navigation indicators */
.emoji-modal__grid[role="grid"] {
  position: relative;
}

.emoji-modal__emoji-btn[aria-selected="true"] {
  background: rgba(255, 214, 0, 0.2);
  border-color: var(--color-accent-primary);
  transform: scale(1.05);
}

.emoji-modal__emoji-btn[aria-selected="true"]::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid var(--color-accent-primary);
  border-radius: inherit;
  pointer-events: none;
}

/* Screen reader announcements */
.emoji-modal__sr-instructions {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Focus management for modal */
.emoji-modal[aria-modal="true"] {
  position: relative;
}

.emoji-modal[aria-modal="true"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: -1;
  pointer-events: none;
}

/* Enhanced loading state accessibility */
.emoji-modal__loading[aria-live="polite"] {
  position: relative;
}

.emoji-modal__loading[aria-live="polite"]::after {
  content: 'Loading emoji options, please wait';
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Emoji button accessibility enhancements */
.emoji-modal__emoji-btn[aria-label] {
  position: relative;
}

.emoji-modal__emoji-btn[aria-pressed="true"] {
  background: rgba(255, 214, 0, 0.3);
  border-color: var(--color-accent-primary);
}

/* Current indicator accessibility */
.emoji-modal__current-indicator {
  background: var(--color-success);
  color: white;
  font-weight: 600;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 0.7rem;
  line-height: 1;
  position: absolute;
  bottom: 2px;
  right: 2px;
  z-index: 2;
}

.high-contrast .emoji-modal__current-indicator {
  background: #00ff00;
  color: #000000;
  border: 1px solid #000000;
}

/* Enhanced Mobile Optimizations */
@media (max-width: 768px) {
  .mobile-backdrop {
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  
  .mobile-modal {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    animation: mobileSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    
    /* Enhanced mobile viewport handling */
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem);
    max-height: calc(100dvh - 2rem); /* Dynamic viewport height support */
  }

  /* Proper viewport handling for mobile keyboards */
  .mobile-modal.keyboard-active {
    max-height: calc(100vh - env(keyboard-inset-height, 0px) - 2rem);
    max-height: calc(100dvh - env(keyboard-inset-height, 0px) - 2rem);
    transform: translateY(-10px);
  }

  /* Enhanced safe area support */
  .mobile-modal {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Enhanced mobile viewport adaptations with device-specific optimizations */
  .mobile-modal.viewport-xs {
    max-height: 95vh;
    border-radius: 8px;
    margin: 0.25rem;
  }

  .mobile-modal.viewport-small {
    max-height: 90vh;
    border-radius: 12px;
    margin: 0.5rem;
  }

  .mobile-modal.viewport-medium {
    max-height: 85vh;
    border-radius: 16px;
    margin: 0.75rem;
  }

  .mobile-modal.viewport-large {
    max-height: 80vh;
    border-radius: 20px;
    margin: 1rem;
  }

  /* Enhanced orientation handling */
  @media (orientation: landscape) and (max-height: 500px) {
    .mobile-modal {
      max-height: 95vh;
      flex-direction: row;
    }
    
    .emoji-modal__header {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      width: 80px;
      border-right: 1px solid rgba(255, 214, 0, 0.2);
      border-bottom: none;
    }
    
    .mobile-content {
      flex: 1 1;
      padding: 16px;
    }
    
    .mobile-grid {
      grid-template-columns: repeat(6, 1fr);
      max-height: none;
      height: 100%;
    }
  }

  /* Mobile viewport adaptations */
  .mobile-modal.viewport-small {
    max-height: 95vh;
    border-radius: 12px;
  }

  .mobile-modal.viewport-large {
    max-height: 85vh;
    border-radius: 20px;
  }

  /* Enhanced swipe feedback */
  .mobile-modal.swipe-feedback {
    transform: scale(0.98);
    transition: transform 0.1s ease-out;
  }

  .mobile-modal.closing {
    animation: mobileSlideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

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

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

  .mobile-modal.swipe-left {
    transform: translateX(-5px);
    transition: transform 0.2s ease-out;
  }

  .mobile-modal.swipe-right {
    transform: translateX(5px);
    transition: transform 0.2s ease-out;
  }
  
  .emoji-modal__header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 214, 0, 0.2);
  }
  
  .emoji-modal__title {
    font-size: 1.125rem;
    font-weight: 600;
  }

  .emoji-modal__close {
    min-width: 44px;
    min-width: var(--touch-target-min);
    min-height: 44px;
    min-height: var(--touch-target-min);
    font-size: 1.25rem;
    border-radius: 8px;
    transition: all 0.2s ease;
  }

  .emoji-modal__close.touch-pressed {
    transform: scale(0.95);
    background: rgba(255, 214, 0, 0.2);
  }

  /* Mobile progress bar */
  .mobile-progress-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative;
  }

  .mobile-progress-fill {
    height: 100%;
    background: var(--gradient-yellow);
    transition: width 0.3s ease;
    position: relative;
  }

  .mobile-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 1.5s ease-in-out infinite;
  }
  
  .mobile-content {
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-content.dragging {
    pointer-events: none;
  }

  /* Mobile random button */
  .mobile-random-btn {
    padding: 12px 24px;
    font-size: 0.9rem;
    min-height: 56px;
    min-height: var(--touch-target-comfortable);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mobile-random-btn.touch-pressed {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(255, 214, 0, 0.4);
  }

  /* Mobile pagination */
  .mobile-pagination-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
  }

  .page-indicator {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
  }

  .page-dots {
    display: flex;
    gap: 6px;
  }

  .page-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .page-dot.active {
    background: var(--color-accent-primary);
    transform: scale(1.2);
  }

  .page-dot:active {
    transform: scale(0.9);
  }

  /* Mobile emoji grid with enhanced swipe support */
  .mobile-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-height: 280px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    position: relative;
    touch-action: pan-x pan-y;
  }

  /* Enhanced swipe gesture support with improved mobile UX */
  .mobile-grid.touch-active {
    opacity: 0.9;
    transition: opacity 0.1s ease;
    transform: scale(0.99);
  }

  .mobile-grid.swipe-bounce {
    animation: swipeBounce 0.3s ease-out;
  }

  .mobile-grid.swipe-feedback {
    transform: scale(0.98);
    transition: transform 0.1s ease-out;
  }

  @keyframes swipeBounce {
    0% { transform: translateX(0) scale(1); }
    25% { transform: translateX(-10px) scale(0.99); }
    75% { transform: translateX(10px) scale(0.99); }
    100% { transform: translateX(0) scale(1); }
  }

  /* Enhanced swipe navigation with velocity-based page skipping */
  .mobile-grid.swipe-fast-left {
    animation: swipeFastLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mobile-grid.swipe-fast-right {
    animation: swipeFastRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  @keyframes swipeFastLeft {
    0% { transform: translateX(0) scale(1); }
    50% { transform: translateX(-30px) scale(0.95); opacity: 0.7; }
    100% { transform: translateX(0) scale(1); opacity: 1; }
  }

  @keyframes swipeFastRight {
    0% { transform: translateX(0) scale(1); }
    50% { transform: translateX(30px) scale(0.95); opacity: 0.7; }
    100% { transform: translateX(0) scale(1); opacity: 1; }
  }

  /* Enhanced swipe boundary feedback with better visual cues */
  .swipe-boundary-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 214, 0, 0.9);
    color: black;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 1000;
    pointer-events: none;
    animation: bounceInOut 1s ease-out;
    box-shadow: 0 4px 12px rgba(255, 214, 0, 0.3);
  }

  @keyframes bounceInOut {
    0% { 
      opacity: 0; 
      transform: translate(-50%, -50%) scale(0.5); 
    }
    20% { 
      opacity: 1; 
      transform: translate(-50%, -50%) scale(1.1); 
    }
    80% { 
      opacity: 1; 
      transform: translate(-50%, -50%) scale(1); 
    }
    100% { 
      opacity: 0; 
      transform: translate(-50%, -50%) scale(0.8); 
    }
  }

  /* Enhanced boundary indicator animation */
  @keyframes fadeInOut {
    0% { 
      opacity: 0; 
      transform: translate(-50%, -50%) scale(0.8); 
    }
    20% { 
      opacity: 1; 
      transform: translate(-50%, -50%) scale(1.1); 
    }
    80% { 
      opacity: 1; 
      transform: translate(-50%, -50%) scale(1); 
    }
    100% { 
      opacity: 0; 
      transform: translate(-50%, -50%) scale(0.9); 
    }
  }

  /* Enhanced swipe direction indicators */
  .mobile-grid.swipe-left {
    transform: translateX(-5px) scale(0.99);
    transition: transform 0.2s ease-out;
  }

  .mobile-grid.swipe-right {
    transform: translateX(5px) scale(0.99);
    transition: transform 0.2s ease-out;
  }

  /* Enhanced swipe navigation indicators with better mobile UX */
  .mobile-grid::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(255, 214, 0, 0.4), transparent);
    border-radius: 2px;
    opacity: 0;
    animation: swipeIndicator 3s ease-in-out 1s infinite;
    pointer-events: none;
  }

  /* Additional swipe hint text */
  .mobile-grid::after {
    content: '← Swipe to navigate →';
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: rgba(255, 214, 0, 0.6);
    white-space: nowrap;
    opacity: 0;
    animation: swipeTextIndicator 3s ease-in-out 1.5s infinite;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }

  @keyframes swipeIndicator {
    0%, 100% { 
      opacity: 0; 
      transform: translateX(-50%) scaleX(1); 
    }
    25% { 
      opacity: 0.6; 
      transform: translateX(-50%) scaleX(1.2); 
    }
    50% { 
      opacity: 1; 
      transform: translateX(-50%) scaleX(1.4); 
    }
    75% { 
      opacity: 0.6; 
      transform: translateX(-50%) scaleX(1.2); 
    }
  }

  @keyframes swipeTextIndicator {
    0%, 100% { 
      opacity: 0; 
      transform: translateX(-50%) translateY(0); 
    }
    25% { 
      opacity: 0.4; 
      transform: translateX(-50%) translateY(-2px); 
    }
    50% { 
      opacity: 0.8; 
      transform: translateX(-50%) translateY(-4px); 
    }
    75% { 
      opacity: 0.4; 
      transform: translateX(-50%) translateY(-2px); 
    }
  }

  /* Enhanced swipe feedback */
  .mobile-content.dragging .mobile-grid {
    opacity: 0.7;
    transition: opacity 0.1s ease;
  }

  .mobile-content.swipe-feedback {
    transform: scale(0.98);
    transition: transform 0.1s ease-out;
  }

  /* Mobile grid optimizations for different screen sizes */
  .mobile-grid.xs {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-height: 240px;
  }

  .mobile-grid.sm {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-height: 280px;
  }

  .mobile-grid.md {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    max-height: 320px;
  }

  /* Swipe navigation indicators */
  .mobile-grid::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: rgba(255, 214, 0, 0.3);
    border-radius: 2px;
    opacity: 0;
    animation: swipeIndicator 2s ease-in-out 1s;
  }

  @keyframes swipeIndicator {
    0%, 100% { opacity: 0; transform: translateX(-50%) scaleX(1); }
    50% { opacity: 1; transform: translateX(-50%) scaleX(1.2); }
  }

  .mobile-emoji-btn {
    min-height: 56px;
    min-height: var(--touch-target-comfortable);
    padding: 12px;
    border-radius: 12px;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInScale 0.3s ease-out both;
    
    /* Enhanced touch feedback */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    
    /* Improved accessibility */
    cursor: pointer;
    outline: none;
  }

  /* Enhanced touch states with haptic-like feedback */
  .mobile-emoji-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 214, 0, 0.7);
  }

  .mobile-emoji-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-yellow);
    opacity: 0;
    border-radius: inherit;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }

  .mobile-emoji-btn:active::before {
    opacity: 0.2;
  }

  /* Ripple effect for touch feedback */
  .mobile-emoji-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 214, 0, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
  }

  .mobile-emoji-btn:active::after {
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: width 0.1s ease, height 0.1s ease, opacity 0.1s ease;
  }

  .mobile-emoji-btn:active {
    transform: scale(0.95);
  }

  .mobile-emoji-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-yellow);
    opacity: 0;
    border-radius: inherit;
    transition: opacity 0.2s ease;
  }

  .mobile-emoji-btn:active::before {
    opacity: 0.2;
  }

  .emoji-modal__current-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: var(--color-success);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
  }

  /* Mobile navigation */
  .mobile-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
  }

  .nav-btn {
    background: rgba(255, 214, 0, 0.2);
    border: 1px solid rgba(255, 214, 0, 0.3);
    color: var(--color-accent-primary);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .nav-btn:not(:disabled):active {
    transform: scale(0.95);
    background: rgba(255, 214, 0, 0.3);
  }

  .swipe-hint {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    flex: 1 1;
    margin: 0 12px;
  }

  /* Loading spinner for mobile */
  .loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  /* Error placeholder */
  .error-placeholder::after {
    content: '❌';
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  /* Swipe gesture indicators */
  .mobile-grid::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: rgba(255, 214, 0, 0.3);
    border-radius: 2px;
    opacity: 0;
    animation: swipeHint 3s ease-in-out 2s;
  }

  @keyframes swipeHint {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .mobile-backdrop {
    padding: 0.25rem;
  }
  
  .mobile-modal {
    border-radius: 12px;
    max-height: 95vh;
  }
  
  .emoji-modal__header {
    padding: 12px 16px;
  }
  
  .emoji-modal__title {
    font-size: 1rem;
  }
  
  .mobile-content {
    padding: 16px;
  }
  
  .mobile-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-height: 240px;
  }
  
  .mobile-random-btn {
    padding: 10px 16px;
    font-size: 0.85rem;
  }
  
  .emoji-modal__current-indicator {
    font-size: 0.6rem;
    padding: 1px 3px;
  }

  .mobile-pagination-info {
    padding: 6px 10px;
    margin-bottom: 12px;
  }

  .page-indicator {
    font-size: 0.75rem;
  }

  .page-dot {
    width: 6px;
    height: 6px;
  }

  .mobile-navigation {
    padding: 10px;
    margin-top: 12px;
  }

  .nav-btn {
    width: 36px;
    height: 36px;
    font-size: 1.25rem;
  }

  .swipe-hint {
    font-size: 0.7rem;
    margin: 0 8px;
  }

  /* Optimize for one-handed use */
  .mobile-emoji-btn {
    min-height: 60px;
    padding: 8px;
  }

  .mobile-emoji-btn:active {
    transform: scale(0.9);
  }

  /* Larger touch targets for small screens */
  .emoji-modal__close {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.125rem;
  }

  .mobile-random-btn {
    min-height: 48px;
  }

  /* Reduce motion on very small screens */
  .mobile-modal {
    animation-duration: 0.2s;
  }

  .mobile-emoji-btn {
    animation-duration: 0.2s;
  }
}

/* Enhanced Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .mobile-emoji-btn {
    padding: 14px;
    min-height: 56px;
    min-height: var(--touch-target-comfortable);
    min-width: 56px;
    min-width: var(--touch-target-comfortable);
  }
  
  .mobile-emoji-btn:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.05);
  }
  
  .mobile-emoji-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 214, 0, 0.7);
  }
  
  .mobile-random-btn {
    min-height: 56px;
    min-height: var(--touch-target-comfortable);
  }
  
  .mobile-random-btn:hover {
    transform: none;
  }
  
  .mobile-random-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(255, 214, 0, 0.4);
  }

  .emoji-modal__close {
    min-width: 44px;
    min-width: var(--touch-target-min);
    min-height: 44px;
    min-height: var(--touch-target-min);
  }

  .emoji-modal__close:active {
    background: rgba(255, 214, 0, 0.2);
    transform: scale(0.95);
  }

  .emoji-modal__retry-btn:active {
    background: rgba(255, 214, 0, 0.2);
    transform: scale(0.98);
  }

  .nav-btn:active {
    transform: scale(0.95);
    background: rgba(255, 214, 0, 0.3);
  }

  .page-dot:active {
    transform: scale(0.8);
  }

  /* Improved touch feedback */
  .mobile-emoji-btn:active .emoji-modal__emoji-img {
    transform: scale(1.05);
  }

  /* Enhanced haptic feedback simulation */
  .mobile-emoji-btn:active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 214, 0, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ripple 0.3s ease-out;
  }

  @keyframes ripple {
    to {
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  }

  /* Touch-friendly scrolling */
  .mobile-grid {
    scroll-behavior: smooth;
    overscroll-behavior: contain;
  }

  /* Prevent text selection on touch */
  .mobile-modal * {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Optimize for thumb navigation */
  .mobile-navigation {
    position: sticky;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: 16px -20px -20px -20px;
    padding: 16px 20px;
    border-radius: 0 0 16px 16px;
  }

  /* Swipe gesture visual feedback */
  .mobile-content.dragging .mobile-grid {
    opacity: 0.7;
    transition: opacity 0.1s ease;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .emoji-modal {
    border: 2px solid #FFD600;
  }
  
  .emoji-modal__header {
    border-bottom: 2px solid #FFD600;
  }
  
  .emoji-modal__emoji-btn {
    border: 2px solid rgba(255, 255, 255, 0.3);
  }
  
  .emoji-modal__emoji-btn--selected {
    border: 3px solid #FFD600;
  }
  
  .emoji-modal__emoji-btn--current {
    border: 3px solid #22C55E;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .emoji-modal-backdrop {
    animation: none;
  }
  
  .emoji-modal {
    animation: none;
  }
  
  .emoji-modal__spinner,
  .emoji-modal__mini-spinner {
    animation: none;
  }
  
  .emoji-modal__emoji-btn,
  .emoji-modal__emoji-img,
  .emoji-modal__random-btn {
    transition: none;
  }
}

/* Enhanced Focus styles for accessibility */
.emoji-modal__emoji-btn:focus-visible {
  outline: 3px solid #FFD600;
  outline-offset: 2px;
  border-color: #FFD600;
  box-shadow: 0 0 0 2px rgba(255, 214, 0, 0.3);
}

.emoji-modal__random-btn:focus-visible {
  outline: 3px solid #000000;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
}

.emoji-modal__close:focus-visible {
  outline: 2px solid #FFD600;
  outline-offset: 2px;
  background: rgba(255, 214, 0, 0.1);
}

.emoji-modal__retry-btn:focus-visible {
  outline: 2px solid #FFD600;
  outline-offset: 2px;
  background: rgba(255, 214, 0, 0.1);
}

/* Keyboard navigation enhancements */
.emoji-modal__grid:focus-within {
  outline: 2px solid rgba(255, 214, 0, 0.5);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Screen reader support */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Announce selection changes */
.emoji-selection-announcement {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Performance optimizations */
.emoji-modal__emoji-img {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.emoji-modal__emoji-btn {
  will-change: transform, background-color, border-color;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Lazy loading placeholder */
.emoji-modal__emoji-img[data-loading="true"] {
  background: var(--gradient-loading-dark);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.emoji-modal__emoji-img[data-loading="true"]::after {
  content: '🎭';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  opacity: 0.5;
}/* Ad
vanced interaction states */
.emoji-modal__emoji-btn[data-emoji-name]::after {
  content: attr(data-emoji-name);
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1000;
}

.emoji-modal__emoji-btn:hover[data-emoji-name]::after {
  opacity: 1;
}

/* Emoji search functionality styles */
.emoji-modal__search {
  position: relative;
  margin-bottom: 20px;
}

.emoji-modal__search-input {
  width: 100%;
  padding: 12px 16px 12px 40px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 214, 0, 0.3);
  border-radius: 8px;
  color: white;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.emoji-modal__search-input:focus {
  outline: none;
  border-color: #FFD600;
  box-shadow: 0 0 0 3px rgba(255, 214, 0, 0.2);
  background: rgba(255, 255, 255, 0.15);
}

.emoji-modal__search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.emoji-modal__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 1rem;
}

/* No results state */
.emoji-modal__no-results {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.6);
}

.emoji-modal__no-results-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* Emoji categories */
.emoji-modal__categories {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.emoji-modal__categories::-webkit-scrollbar {
  display: none;
}

.emoji-modal__category-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.emoji-modal__category-btn:hover {
  background: rgba(255, 214, 0, 0.2);
  border-color: rgba(255, 214, 0, 0.5);
  color: #FFD600;
}

.emoji-modal__category-btn.active {
  background: var(--gradient-yellow);
  color: #000000;
  border-color: #FFD600;
}

/* Infinite scroll loading */
.emoji-modal__load-more {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.emoji-modal__load-more-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #FFD600;
  border: 1px solid rgba(255, 214, 0, 0.3);
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.emoji-modal__load-more-btn:hover {
  background: rgba(255, 214, 0, 0.1);
  border-color: #FFD600;
}

/* Virtualization support for large emoji lists */
.emoji-modal__virtual-grid {
  height: 300px;
  overflow-y: auto;
}

.emoji-modal__virtual-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

/* Gesture support indicators */
.emoji-modal__gesture-hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  text-align: center;
  opacity: 0;
  animation: fadeInOut 3s ease-in-out 2s;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Connection status indicator */
.emoji-modal__connection-status {
  position: absolute;
  top: 10px;
  right: 50px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  transition: background-color 0.3s ease;
}

.emoji-modal__connection-status.offline {
  background: var(--color-error);
  animation: pulse 1s infinite;
}

/* Print styles */
@media print {
  .emoji-modal-backdrop,
  .emoji-modal {
    display: none !important;
  }
}

/* Prefers reduced data */
@media (prefers-reduced-data: reduce) {
  .emoji-modal__emoji-img {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .emoji-modal__emoji-img::after {
    content: '🎭';
    font-size: 2rem;
  }
}

/* Battery optimization */
@media (-webkit-max-device-pixel-ratio: 1.5625), (max-resolution: 150dpi) {
  .emoji-modal__emoji-img {
    image-rendering: pixelated;
  }
}

/* Network-aware loading */
.emoji-modal[data-connection="slow"] .emoji-modal__emoji-img {
  background: var(--gradient-loading-dark);
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}

.emoji-modal[data-connection="slow"] .emoji-modal__emoji-img::after {
  content: '⏳';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
}/* En
hanced Error Handling Styles */
.emoji-modal__error {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
  color: #721c24;
}

.emoji-modal__error-content {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.emoji-modal__error-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.emoji-modal__error-text {
  flex: 1 1;
}

.emoji-modal__error-text p {
  margin: 0 0 0.5rem 0;
}

.emoji-modal__retry-info {
  font-size: 0.875rem;
  opacity: 0.8;
  font-style: italic;
}

.emoji-modal__retry-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background-color 0.2s ease;
}

.emoji-modal__retry-btn:hover:not(:disabled) {
  background-color: #0056b3;
}

.emoji-modal__retry-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Network error specific styling */
.emoji-modal__error.network-error {
  background-color: #fff3cd;
  border-color: #ffeaa7;
  color: #856404;
}

/* Loading state improvements */
.emoji-modal__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
}

.emoji-modal__spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

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

/* Enhanced emoji button states */
.emoji-modal__emoji-btn {
  position: relative;
  transition: all 0.2s ease;
}

.emoji-modal__emoji-btn:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.emoji-modal__emoji-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.emoji-modal__emoji-btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Updating overlay */
.emoji-modal__updating-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}

.emoji-modal__mini-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .emoji-modal__spinner,
  .emoji-modal__mini-spinner {
    animation: none;
  }
  
  .emoji-modal__emoji-btn {
    transition: none;
  }
  
  .emoji-modal__emoji-btn:hover {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .emoji-modal__error {
    border-width: 2px;
    font-weight: 600;
  }
  
  .emoji-modal__retry-btn {
    border: 2px solid #007bff;
    font-weight: 600;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .emoji-modal__error {
    padding: 0.75rem;
    font-size: 0.9rem;
  }
  
  .emoji-modal__error-content {
    gap: 0.5rem;
  }
  
  .emoji-modal__error-icon {
    font-size: 1.25rem;
  }
  
  .emoji-modal__retry-btn {
    width: 100%;
    padding: 0.75rem;
  }
}
/* Enhanced
 Error Handling and Recovery Styles */
.emoji-modal__error.enhanced-error {
  background: linear-gradient(135deg, #fee 0%, #fef5f5 100%);
  border: 1px solid #f5c6cb;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.1);
}

.emoji-modal__error-title {
  font-weight: 600;
  font-size: 0.95em;
  margin-bottom: 4px;
  color: #721c24;
}

.emoji-modal__error-description {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

.emoji-modal__retry-info {
  margin: 8px 0 0 0;
  font-size: 0.8em;
  opacity: 0.8;
  font-style: italic;
}

.emoji-modal__error-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}

.emoji-modal__error-action {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.emoji-modal__error-action.retry-action {
  background: #dc3545;
  color: white;
}

.emoji-modal__error-action.retry-action:hover:not(:disabled) {
  background: #c82333;
  transform: translateY(-1px);
}

.emoji-modal__error-action.refresh-action {
  background: #007bff;
  color: white;
}

.emoji-modal__error-action.refresh-action:hover:not(:disabled) {
  background: #0056b3;
  transform: translateY(-1px);
}

.emoji-modal__error-action.dismiss-action {
  background: #6c757d;
  color: white;
}

.emoji-modal__error-action.dismiss-action:hover:not(:disabled) {
  background: #545b62;
  transform: translateY(-1px);
}

.emoji-modal__error-action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.emoji-modal__error-action .loading-spinner.small {
  width: 12px;
  height: 12px;
  border-width: 2px;
}

/* Network status indicator */
.emoji-modal__network-status {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 16px;
  color: #856404;
  font-size: 0.9em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.emoji-modal__network-status.offline {
  background: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.emoji-modal__network-status .network-icon {
  font-size: 1.1em;
}

/* Mobile optimizations for enhanced error handling */
@media (max-width: 768px) {
  .emoji-modal__error-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  
  .emoji-modal__error-action {
    justify-content: center;
    padding: 8px 12px;
  }
  
  .emoji-modal__network-status {
    padding: 8px 10px;
    font-size: 0.85em;
  }
}
.email-change-history {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #ffffff;
  background: var(--card-background, #ffffff);
  border-radius: 12px;
  border: 1px solid #e1e5e9;
  border: 1px solid var(--border-color, #e1e5e9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e1e5e9;
  border-bottom: 1px solid var(--border-color, #e1e5e9);
}

.section-header h3 {
  margin: 0;
  color: #2c3e50;
  color: var(--text-primary, #2c3e50);
  font-size: 1.25rem;
  font-weight: 600;
}

.history-count {
  background: #3498db;
  background: var(--primary-color, #3498db);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Loading and Error States */
.email-history-loading,
.email-history-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
}

.email-history-loading p {
  margin-top: 1rem;
  color: #7f8c8d;
  color: var(--text-secondary, #7f8c8d);
}

.email-history-error .btn {
  margin-top: 1rem;
}

/* No History State */
.no-history {
  text-align: center;
  padding: 3rem 1rem;
  color: #7f8c8d;
  color: var(--text-secondary, #7f8c8d);
}

.no-history-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.6;
}

.no-history h4 {
  margin: 0 0 0.5rem 0;
  color: #2c3e50;
  color: var(--text-primary, #2c3e50);
  font-size: 1.125rem;
  font-weight: 600;
}

.no-history p {
  margin: 0;
  font-size: 0.9375rem;
}

/* History List */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.history-entry {
  padding: 1.25rem;
  background: #f8f9fa;
  background: var(--background-light, #f8f9fa);
  border-radius: 8px;
  border: 1px solid #e9ecef;
  border: 1px solid var(--border-light, #e9ecef);
  transition: all 0.2s ease;
}

.history-entry:hover {
  border-color: #3498db;
  border-color: var(--primary-color, #3498db);
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.1);
}

.history-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.email-change-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1;
}

.old-email,
.new-email {
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875rem;
  font-weight: 500;
}

.old-email {
  background: #fee;
  background: var(--error-light, #fee);
  color: #e74c3c;
  color: var(--error-color, #e74c3c);
  border: 1px solid #fcc;
  border: 1px solid var(--error-border, #fcc);
}

.new-email {
  background: #efe;
  background: var(--success-light, #efe);
  color: #27ae60;
  color: var(--success-color, #27ae60);
  border: 1px solid #cfc;
  border: 1px solid var(--success-border, #cfc);
}

.arrow {
  color: #7f8c8d;
  color: var(--text-secondary, #7f8c8d);
  font-weight: bold;
  font-size: 1.125rem;
}

.change-date {
  color: #7f8c8d;
  color: var(--text-secondary, #7f8c8d);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.history-entry-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.detail-label {
  color: #7f8c8d;
  color: var(--text-secondary, #7f8c8d);
  font-size: 0.875rem;
  font-weight: 500;
  min-width: 80px;
}

.detail-value {
  color: #2c3e50;
  color: var(--text-primary, #2c3e50);
  font-size: 0.875rem;
  font-weight: 400;
}

/* Load More Section */
.load-more-section {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e9ecef;
  border-top: 1px solid var(--border-light, #e9ecef);
}

.load-more-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #6c757d;
  background: var(--secondary-color, #6c757d);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.load-more-btn:hover:not(:disabled) {
  background: #5a6268;
  background: var(--secondary-dark, #5a6268);
  transform: translateY(-1px);
}

.load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.pagination-info {
  text-align: center;
  margin-top: 1rem;
  color: #7f8c8d;
  color: var(--text-secondary, #7f8c8d);
  font-size: 0.875rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .email-change-history {
    margin-top: 1.5rem;
    padding: 1rem;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .history-entry {
    padding: 1rem;
  }

  .history-entry-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .email-change-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
  }

  .old-email,
  .new-email {
    width: 100%;
    text-align: center;
  }

  .arrow {
    align-self: center;
    transform: rotate(90deg);
  }

  .history-entry-details {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .detail-label {
    min-width: auto;
    font-weight: 600;
  }
}

@media (max-width: 480px) {
  .email-change-history {
    padding: 0.75rem;
  }

  .section-header h3 {
    font-size: 1.125rem;
  }

  .history-count {
    font-size: 0.8125rem;
    padding: 0.1875rem 0.625rem;
  }

  .old-email,
  .new-email {
    font-size: 0.8125rem;
    padding: 0.3125rem 0.625rem;
  }

  .load-more-btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .email-change-history {
    --card-background: #2c3e50;
    --border-color: #34495e;
    --text-primary: #ecf0f1;
    --text-secondary: #bdc3c7;
    --background-light: #34495e;
    --border-light: #4a5f7a;
    --error-light: #4a2c2a;
    --error-color: #e74c3c;
    --error-border: #6b3a3a;
    --success-light: #2a4a2a;
    --success-color: #27ae60;
    --success-border: #3a6b3a;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .history-entry {
    border-width: 2px;
  }

  .old-email,
  .new-email {
    border-width: 2px;
    font-weight: 600;
  }

  .load-more-btn {
    border: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .history-entry,
  .load-more-btn {
    transition: none;
  }

  .load-more-btn:hover:not(:disabled) {
    transform: none;
  }
}
/* Modern Profile Page Styles with Animations */
.profile-container {
  min-height: 100vh;
  background: var(--color-background-primary) !important; /* Force consistent black background */
  position: relative;
  overflow-x: hidden;
  padding-top: 100px;
  transition: background-color var(--transition-normal);
}

.profile-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  background: var(--gradient-radial-accent);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.profile-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  position: relative;
  z-index: 1;
  animation: fadeIn 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-header {
  background: var(--color-surface-primary);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--color-border-primary);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  transition: all var(--transition-bounce);
  animation: slideDown 0.8s var(--transition-bounce) 0.2s both;
}

.profile-header:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl), var(--shadow-accent);
  border-color: var(--color-border-accent);
}

.profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid var(--color-accent-primary);
  margin: 0 auto 1.5rem;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-bounce);
  box-shadow: var(--shadow-accent);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.clickable-avatar {
  cursor: pointer;
}

.clickable-avatar:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-accent-hover);
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-normal);
  border-radius: 50%;
}

.clickable-avatar:hover .avatar-overlay {
  opacity: 1;
}

.avatar-edit-icon {
  font-size: 1.5rem;
  color: white;
}

.profile-avatar.loading {
  pointer-events: none;
}

.profile-avatar.loading .avatar-overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.8);
}

.avatar-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.profile-name {
  font-size: 2rem;
  font-weight: 800;
  background: var(--gradient-yellow);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.profile-email-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.profile-email {
  color: var(--color-text-secondary);
  font-size: 1rem;
}

.profile-hostel {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  opacity: 0.8;
}

/* Badge Styles */
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.email-verified {
  background: rgba(76, 175, 80, 0.2);
  color: #4CAF50;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.account-verified {
  background: rgba(33, 150, 243, 0.2);
  color: #2196F3;
  border: 1px solid rgba(33, 150, 243, 0.3);
}

.pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.email-pending {
  background: rgba(255, 152, 0, 0.2);
  color: #FF9800;
  border: 1px solid rgba(255, 152, 0, 0.3);
  animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 1.5rem;
}

.stat-item {
  text-align: center;
  padding: 1rem;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 12px;
  transition: all var(--transition-bounce);
  box-shadow: var(--shadow-sm);
}

.stat-item:hover {
  background: var(--color-surface-elevated);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-accent);
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-accent-primary);
  display: block;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}

.profile-tabs {
  background: var(--color-surface-primary);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--color-border-primary);
  border-radius: 16px;
  padding: 1rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md);
  animation: slideUp 0.8s var(--transition-bounce) 0.3s both;
}

.tabs-nav {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tabs-nav::-webkit-scrollbar {
  display: none;
}

.tab-button {
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--color-text-secondary);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  transition: all var(--transition-bounce);
  position: relative;
}

.tab-button:hover {
  background: rgba(255, 214, 0, 0.1);
  color: var(--color-accent-primary);
}

.tab-button.active {
  background: var(--gradient-yellow);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}

.tab-content {
  background: var(--color-surface-primary);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--color-border-primary);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 2rem;
  animation: fadeInScale 0.6s var(--transition-bounce) 0.4s both;
}

.form-section {
  margin-bottom: 2rem;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-title::before {
  content: '';
  width: 3px;
  height: 20px;
  background: var(--gradient-yellow);
  border-radius: 2px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

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

.form-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.form-input {
  padding: 0.75rem 1rem;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 12px;
  color: var(--color-text-primary);
  font-size: 0.9rem;
  transition: all var(--transition-bounce);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(255, 214, 0, 0.2);
  background: var(--color-surface-primary);
}

.form-input::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.7;
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-select {
  padding: 0.75rem 1rem;
  background: rgba(42, 42, 42, 0.8);
  border: 1px solid rgba(255, 214, 0, 0.3);
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 0.9rem;
  transition: all 0.2s ease-in-out;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  cursor: pointer;
}

.form-select:focus {
  outline: none;
  border-color: #FFD600;
  box-shadow: 0 0 0 3px rgba(255, 214, 0, 0.2);
}

.form-select option {
  background: #2A2A2A;
  color: #FFFFFF;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(42, 42, 42, 0.5);
  border-radius: 12px;
  transition: all 0.2s ease-in-out;
}

.checkbox-group:hover {
  background: rgba(42, 42, 42, 0.7);
}

.checkbox-input {
  width: 18px;
  height: 18px;
  accent-color: #FFD600;
}

.checkbox-label {
  color: #FFFFFF;
  font-size: 0.9rem;
  cursor: pointer;
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 214, 0, 0.2);
}

.btn {
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary {
  background: var(--gradient-yellow);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-accent);
}

.btn-primary:hover:not(:disabled) {
  background: var(--gradient-yellow-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent-hover);
}

.btn-secondary {
  background: transparent;
  color: var(--color-accent-primary);
  border: 2px solid var(--color-accent-primary);
}

.btn-secondary:hover {
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-accent);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(17, 17, 17, 0.3);
  border-top: 2px solid #111111;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.data-card {
  background: rgba(42, 42, 42, 0.5);
  border: 1px solid rgba(255, 214, 0, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.data-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #FFD600 0%, #FFED4E 50%, #FFD600 100%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.data-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(255, 214, 0, 0.2);
  border-color: rgba(255, 214, 0, 0.3);
}

.data-card:hover::before {
  opacity: 1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.card-title {
  font-weight: 600;
  color: #FFFFFF;
  font-size: 1rem;
}

.card-date {
  font-size: 0.8rem;
  color: #CCCCCC;
}

.card-content {
  color: #CCCCCC;
  line-height: 1.5;
}

.empty-state {
  text-align: center;
  padding: 3rem;
  color: #CCCCCC;
}

.empty-icon {
  font-size: 3rem;
  color: #FFD600;
  margin-bottom: 1rem;
  opacity: 0.7;
  animation: pulse 2s infinite;
}

.empty-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
}

.empty-description {
  font-size: 0.9rem;
  line-height: 1.5;
}

.success-message {
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: #4CAF50;
  padding: 1rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.error-message {
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.3);
  color: #F44336;
  padding: 1rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Auth Required Styles */
.auth-required {
  background: rgba(26, 26, 26, 0.8);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 214, 0, 0.2);
  border-radius: 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  padding: 4rem 2rem;
  text-align: center;
  animation: fadeInScale 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-required h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 1rem;
}

.auth-required p {
  color: #CCCCCC;
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.login-btn {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  color: #111111;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 24px rgba(255, 214, 0, 0.3);
}

.login-btn:hover {
  background: linear-gradient(135deg, #FFED4E 0%, #FFD600 100%);
  color: #111111;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 214, 0, 0.4);
}

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

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

/* Responsive Design */
@media (max-width: 768px) {
  .profile-container {
    padding-top: 80px;
  }
  
  .profile-content {
    padding: 1rem;
  }
  
  .profile-header {
    padding: 1.5rem;
  }
  
  .profile-name {
    font-size: 1.75rem;
  }
  
  .profile-email-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .verified-badge,
  .pending-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
  }
  
  .profile-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .tabs-nav {
    gap: 0.25rem;
  }
  
  .tab-button {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }
  
  .tab-content {
    padding: 1.5rem;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .form-actions {
    flex-direction: column-reverse;
  }
  
  .btn {
    width: 100%;
    justify-content: center;
  }
  
  .data-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .profile-header {
    padding: 1rem;
  }
  
  .profile-avatar {
    width: 100px;
    height: 100px;
  }
  
  .avatar-edit-icon {
    font-size: 1.2rem;
  }
  
  .avatar-loading-spinner {
    width: 20px;
    height: 20px;
  }
  
  .profile-name {
    font-size: 1.5rem;
  }
  
  .profile-email-container {
    text-align: center;
  }
  
  .verified-badge,
  .pending-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
  }
  
  .profile-stats {
    grid-template-columns: 1fr;
  }
  
  .tab-content {
    padding: 1rem;
  }
}

/* Custom scrollbar */
.profile-container::-webkit-scrollbar {
  width: 8px;
}

.profile-container::-webkit-scrollbar-track {
  background: rgba(42, 42, 42, 0.5);
  border-radius: 4px;
}

.profile-container::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  border-radius: 4px;
}

.profile-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #FFED4E 0%, #FFD600 100%);
}
/* Modern Orders Page Styles with Animations */
.orders-container {
  min-height: 100vh;
  background: var(--color-background-primary);
  position: relative;
  overflow-x: hidden;
  padding-top: 100px;
  transition: background-color var(--transition-normal);
}

.orders-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  background: var(--gradient-radial-accent);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.orders-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1rem;
  position: relative;
  z-index: 1;
  animation: fadeIn 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.orders-header {
  text-align: center;
  margin-bottom: 3rem;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.orders-title {
  font-size: 2.5rem;
  font-weight: 800;
  background: var(--gradient-yellow);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-text-primary);
  margin: 0 0 1rem 0;
  letter-spacing: -0.02em;
}

.orders-subtitle {
  color: var(--color-text-secondary);
  font-size: 1.1rem;
  font-weight: 400;
}

.orders-filters {
  background: var(--color-surface-primary);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  padding: 2rem;
  margin-bottom: 2rem;
  transition: all var(--transition-bounce);
  animation: slideUp 0.8s var(--transition-bounce) 0.3s both;
}

.orders-filters:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl), var(--shadow-accent);
  border-color: var(--color-border-accent);
}

.filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
}

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

.filter-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.filter-select {
  padding: 0.75rem 1rem;
  background: var(--background-paper);
  border: 1px solid var(--divider);
  border-radius: var(--border-radius-large);
  color: var(--text-primary);
  font-size: 0.9rem;
  min-width: 150px;
  transition: all 0.2s ease-in-out;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary-main);
  box-shadow: 0 0 0 3px rgba(var(--primary-main-rgb), 0.2);
}

.filter-select option {
  background: var(--background-paper);
  color: var(--text-primary);
}

.orders-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
  animation: staggerIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

.stat-card {
  background: var(--background-paper);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--divider);
  border-radius: var(--border-radius-xl);
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-light);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--secondary-main) 0%, var(--secondary-light) 100%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.stat-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-heavy);
  border-color: var(--secondary-light);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--secondary-main);
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  animation: fadeInScale 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
}

.order-card {
  background: var(--background-paper);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--divider);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-medium);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.order-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--secondary-main) 0%, var(--secondary-light) 100%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.order-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-heavy);
  border-color: var(--secondary-light);
}

.order-card:hover::before {
  opacity: 1;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.5rem;
  border-bottom: 1px solid var(--divider);
}

.order-info {
  flex: 1 1;
}

.order-id {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.order-date {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.order-total {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--success-main);
}

.order-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.status-badge {
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-xl);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: all 0.2s ease-in-out;
}

.status-badge:hover {
  transform: scale(1.05);
}

.status-pending {
  background: rgba(var(--warning-main-rgb), 0.2);
  color: var(--warning-main);
  border: 1px solid rgba(var(--warning-main-rgb), 0.3);
}

.status-confirmed {
  background: rgba(var(--info-main-rgb), 0.2);
  color: var(--info-main);
  border: 1px solid rgba(var(--info-main-rgb), 0.3);
}

.status-delivered {
  background: rgba(var(--success-main-rgb), 0.2);
  color: var(--success-main);
  border: 1px solid rgba(var(--success-main-rgb), 0.3);
}

.status-cancelled {
  background: rgba(var(--error-main-rgb), 0.2);
  color: var(--error-main);
  border: 1px solid rgba(var(--error-main-rgb), 0.3);
}

.order-actions {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--border-radius-medium);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.action-btn.primary {
  background: var(--secondary-main);
  color: var(--text-primary);
}

.action-btn.primary:hover {
  background: var(--secondary-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

.action-btn.secondary {
  background: var(--background-paper);
  color: var(--text-primary);
  border: 1px solid var(--divider);
}

.action-btn.secondary:hover {
  background: var(--background-default);
  border-color: var(--secondary-light);
  transform: translateY(-1px);
}

.order-body {
  padding: 1.5rem;
}

.order-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.order-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: var(--background-default);
  border-radius: var(--border-radius-large);
  transition: all 0.2s ease-in-out;
}

.order-item:hover {
  background: var(--background-paper);
  transform: translateX(4px);
}

.item-image {
  width: 60px;
  height: 60px;
  border-radius: var(--border-radius-medium);
  object-fit: cover;
  border: 1px solid var(--divider);
}

.item-details {
  flex: 1 1;
}

.item-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.item-price {
  font-weight: 700;
  color: var(--secondary-main);
  font-size: 0.9rem;
}

.item-quantity {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.empty-state {
  background: var(--background-paper);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--divider);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-heavy);
  padding: 4rem;
  text-align: center;
  animation: fadeInScale 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
}

.empty-icon {
  font-size: 4rem;
  color: var(--secondary-main);
  margin-bottom: 1.5rem;
  animation: pulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.empty-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.empty-text {
  color: var(--text-secondary);
  max-width: 400px;
  margin: 0 auto 1.5rem auto;
}

.empty-action {
  background: var(--primary-main);
  color: var(--button-text-primary);
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius-large);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.empty-action:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.loading-spinner {
  border: 4px solid rgba(var(--primary-main-rgb), 0.2);
  border-left-color: var(--primary-main);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin: 4rem auto;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.pagination-btn {
  background: var(--background-paper);
  color: var(--text-primary);
  border: 1px solid var(--divider);
  border-radius: var(--border-radius-medium);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--primary-main);
  color: var(--button-text-primary);
  border-color: var(--primary-main);
  transform: translateY(-2px);
  box-shadow: var(--shadow-light);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.error-message {
  color: var(--error-main);
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
  .orders-content {
    padding: 1rem;
  }
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Loading States */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 214, 0, 0.3);
  border-top: 3px solid #FFD600;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Error States */
.error-container {
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
  text-align: center;
}

.error-message {
  color: #F44336;
  font-weight: 500;
}

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes staggerIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

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

/* Responsive Design */
@media (max-width: 768px) {
  .orders-container {
    padding-top: 80px;
  }
  
  .orders-content {
    padding: 1rem;
  }
  
  .orders-title {
    font-size: 2rem;
  }
  
  .orders-filters {
    padding: 1.5rem;
  }
  
  .filters-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-select {
    min-width: auto;
  }
  
  .orders-stats {
    grid-template-columns: 1fr;
  }
  
  .order-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .order-status {
    align-items: flex-start;
  }
  
  .order-actions {
    justify-content: flex-start;
  }
  
  .order-item {
    flex-direction: column;
    text-align: center;
  }
  
  .item-image {
    align-self: center;
  }
}

@media (max-width: 480px) {
  .orders-title {
    font-size: 1.75rem;
  }
  
  .orders-filters {
    padding: 1rem;
  }
  
  .order-card {
    margin: 0 -0.5rem;
  }
  
  .order-header,
  .order-body {
    padding: 1rem;
  }
}

/* Custom scrollbar */
.orders-container::-webkit-scrollbar {
  width: 8px;
}

.orders-container::-webkit-scrollbar-track {
  background: rgba(42, 42, 42, 0.5);
  border-radius: 4px;
}

.orders-container::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  border-radius: 4px;
}

.orders-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #FFED4E 0%, #FFD600 100%);
}
/* Modern Wishlist Page - Enhanced Black & Yellow Theme */
.wishlist-container {
  min-height: 100vh;
  background: var(--color-background-primary);
  position: relative;
  overflow-x: hidden;
  transition: all var(--transition-normal);
}

.wishlist-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 600px;
  background: var(--gradient-radial-accent);
  pointer-events: none;
  z-index: 0;
  animation: gentle-pulse 4s ease-in-out infinite;
}

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

.wishlist-header {
  background: var(--color-glass-dark);
  -webkit-backdrop-filter: blur(30px);
          backdrop-filter: blur(30px);
  border-bottom: 1px solid var(--color-border-accent);
  box-shadow: var(--shadow-lg), var(--shadow-accent);
  padding: var(--space-16) 0;
  position: relative;
  z-index: 10;
  animation: slide-in-down 0.8s var(--transition-bounce);
}

.wishlist-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-yellow);
  opacity: 0.6;
}

.wishlist-header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-6);
  position: relative;
}

.wishlist-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--font-weight-extrabold);
  background: var(--gradient-yellow);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  letter-spacing: -0.02em;
  position: relative;
  animation: slide-in-up 0.8s var(--transition-bounce) 0.2s both;
  text-shadow: var(--shadow-accent);
}

.wishlist-title::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 0;
  width: 100px;
  height: 4px;
  background: var(--gradient-yellow);
  border-radius: var(--radius-sm);
  animation: slide-in-left 0.6s var(--transition-normal) 0.6s both;
  box-shadow: var(--shadow-accent);
}

.wishlist-subtitle {
  color: var(--color-text-secondary);
  margin-top: var(--space-5);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  animation: fade-in-up 0.6s var(--transition-normal) 0.4s both;
  opacity: 0.9;
}

.wishlist-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-16) var(--space-6);
  position: relative;
  z-index: 1;
  animation: fade-in-up 0.8s var(--ease-smooth) 0.6s both;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--background-paper);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-light);
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.stat-card-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  padding: 0.5rem;
  border-radius: 0.375rem;
  margin-right: 1rem;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.stat-label {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 0;
}

/* Enhanced Controls Section */
.controls-section {
  background: var(--gradient-dark-elevated);
  -webkit-backdrop-filter: blur(25px);
          backdrop-filter: blur(25px);
  border: 1px solid var(--border-dark-medium);
  border-radius: 20px;
  box-shadow: var(--shadow-dark-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  transition: all var(--timing-normal) var(--ease-bounce);
  position: relative;
  overflow: hidden;
}

.controls-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-yellow-primary);
  opacity: 0;
  transition: opacity var(--timing-normal) var(--ease-smooth);
}

.controls-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, 
    var(--yellow-subtle) 0%, 
    transparent 70%);
  opacity: 0;
  transition: opacity var(--timing-normal) var(--ease-smooth);
  pointer-events: none;
}

.controls-section:hover {
  transform: translateY(-6px);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-dark-xl), var(--shadow-glow-strong);
}

.controls-section:hover::before,
.controls-section:hover::after {
  opacity: 1;
}

.controls-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
}

.controls-left {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.controls-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.select-all-control {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  background: rgba(255, 215, 0, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.2);
  transition: all var(--transition-normal);
}

.select-all-control:hover {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.3);
}

.select-all-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--color-yellow-primary);
  cursor: pointer;
}

.select-all-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.bulk-action-btn {
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  background: transparent;
  color: var(--color-error);
  border: 2px solid var(--color-error);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-bounce);
  position: relative;
  overflow: hidden;
}

.bulk-action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--color-error);
  transition: left var(--transition-normal);
  z-index: -1;
}

.bulk-action-btn:hover:not(:disabled) {
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.bulk-action-btn:hover:not(:disabled)::before {
  left: 0;
}

.bulk-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.sort-control {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sort-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.sort-select {
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
  transition: all var(--transition-bounce);
  cursor: pointer;
  min-width: 180px;
}

.sort-select:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
  background: var(--color-surface-elevated);
}

.sort-select:hover {
  border-color: var(--color-border-accent);
  background: var(--color-surface-elevated);
}

.clear-all-btn {
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-sm);
  background: linear-gradient(135deg, var(--color-error) 0%, var(--color-error) 100%);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-bounce);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.clear-all-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left var(--transition-slow);
}

.clear-all-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-error) 0%, var(--color-error) 100%);
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
}

.clear-all-btn:hover:not(:disabled)::before {
  left: 100%;
}

.clear-all-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Enhanced Wishlist Grid */
.wishlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  grid-gap: var(--space-8);
  gap: var(--space-8);
  animation: fade-in-up 0.8s var(--ease-smooth) 0.8s both;
}

@media (max-width: 768px) {
  .wishlist-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.wishlist-item {
  background: var(--gradient-dark-surface);
  -webkit-backdrop-filter: blur(25px);
          backdrop-filter: blur(25px);
  border: 1px solid var(--border-dark-light);
  border-radius: 24px;
  box-shadow: var(--shadow-dark-lg);
  overflow: hidden;
  transition: all var(--timing-normal) var(--ease-bounce);
  position: relative;
  animation: fade-in-scale 0.6s var(--ease-bounce);
  animation-fill-mode: both;
}

.wishlist-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-yellow-bright);
  opacity: 0;
  transition: opacity var(--timing-normal) var(--ease-smooth);
  box-shadow: var(--shadow-glow);
}

.wishlist-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, 
    var(--yellow-subtle) 0%, 
    transparent 80%);
  opacity: 0;
  transition: opacity var(--timing-normal) var(--ease-smooth);
  pointer-events: none;
}

.wishlist-item:hover {
  transform: translateY(-16px) scale(1.04);
  box-shadow: var(--shadow-dark-xl), var(--shadow-glow-strong);
  border-color: var(--border-accent-bright);
}

.wishlist-item:hover::before,
.wishlist-item:hover::after {
  opacity: 1;
}

.item-image-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.item-checkbox {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 20;
  width: 20px;
  height: 20px;
  accent-color: var(--color-yellow-primary);
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
}

.item-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  cursor: pointer;
  transition: all var(--transition-bounce);
  filter: brightness(0.95) contrast(1.05);
}

.item-image:hover {
  transform: scale(1.08);
  filter: brightness(1.1) contrast(1.1);
}

.price-alert-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: linear-gradient(135deg, var(--color-warning), var(--color-warning));
  color: var(--color-white);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: animate-pulse;
}

.item-content {
  padding: 1.75rem;
  background: var(--gradient-dark-elevated);
  position: relative;
  z-index: 2;
}

.item-title {
  font-weight: var(--font-weight-semibold);
  color: var(--dark-text-primary);
  margin-bottom: 1rem;
  cursor: pointer;
  transition: all var(--timing-normal) var(--ease-smooth);
  font-size: 1.125rem;
  line-height: 1.4;
  position: relative;
}

.item-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-yellow-primary);
  transition: width var(--timing-normal) var(--ease-smooth);
}

.item-title:hover {
  color: var(--yellow-bright);
  transform: translateX(6px);
}

.item-title:hover::after {
  width: 100%;
}

.item-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.item-price {
  font-size: 1.375rem;
  font-weight: var(--font-weight-extrabold);
  background: var(--gradient-success);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(0, 230, 118, 0.3);
  position: relative;
}

.item-condition {
  font-size: 0.75rem;
  color: var(--dark-text-secondary);
  background: var(--yellow-subtle);
  border: 1px solid var(--yellow-medium);
  padding: 0.375rem 0.75rem;
  border-radius: 16px;
  font-weight: var(--font-weight-medium);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.item-added-date {
  font-size: 0.875rem;
  color: #999999;
  margin-bottom: 1rem;
  font-style: italic;
}

.item-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.buy-now-btn {
  width: 100%;
  background: var(--gradient-yellow-primary);
  color: var(--dark-bg-primary);
  padding: 0.875rem 1.25rem;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: var(--font-weight-semibold);
  transition: all var(--timing-normal) var(--ease-bounce);
  box-shadow: var(--shadow-dark-md), var(--shadow-glow);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.buy-now-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left var(--timing-slow) var(--ease-smooth);
}

.buy-now-btn:hover {
  background: var(--gradient-yellow-bright);
  transform: translateY(-3px);
  box-shadow: var(--shadow-dark-lg), var(--shadow-glow-strong);
}

.buy-now-btn:hover::before {
  left: 100%;
}

.secondary-actions {
  display: flex;
  gap: 0.5rem;
}

.price-alert-btn {
  flex: 1 1;
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.15) 0%, rgba(255, 152, 0, 0.05) 100%);
  color: #FF9800;
  padding: 0.625rem 1rem;
  border: 2px solid rgba(255, 152, 0, 0.4);
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  transition: all var(--timing-normal) var(--ease-bounce);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  position: relative;
  overflow: hidden;
}

.price-alert-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 152, 0, 0.1);
  transition: left var(--timing-normal) var(--ease-smooth);
}

.price-alert-btn:hover {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.25) 0%, rgba(255, 152, 0, 0.15) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 152, 0, 0.3);
  border-color: rgba(255, 152, 0, 0.6);
}

.price-alert-btn:hover::before {
  left: 100%;
}

.remove-btn {
  flex: 1 1;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
  color: var(--color-error);
  padding: 0.625rem 1rem;
  border: 2px solid rgba(239, 68, 68, 0.4);
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  transition: all var(--timing-normal) var(--ease-bounce);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  position: relative;
  overflow: hidden;
}

.remove-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(239, 68, 68, 0.1);
  transition: left var(--timing-normal) var(--ease-smooth);
}

.remove-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0.15) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.6);
}

.remove-btn:hover:not(:disabled)::before {
  left: 100%;
}

.remove-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.empty-state {
  background: var(--gradient-dark-elevated);
  -webkit-backdrop-filter: blur(30px);
          backdrop-filter: blur(30px);
  border: 1px solid var(--border-dark-medium);
  border-radius: 28px;
  box-shadow: var(--shadow-dark-xl), var(--shadow-glow);
  padding: 4.5rem 3rem;
  text-align: center;
  animation: fade-in-scale 0.8s var(--ease-bounce) 0.8s both;
  position: relative;
  overflow: hidden;
}

.empty-state::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-yellow-primary);
  opacity: 0.8;
}

.empty-state-icon {
  width: 6rem;
  height: 6rem;
  margin: 0 auto 2.5rem;
  color: var(--yellow-glow);
  opacity: 0.8;
  animation: gentle-pulse 3s ease-in-out infinite, float 4s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.4));
}

.empty-state-title {
  font-size: 1.75rem;
  font-weight: var(--font-weight-bold);
  color: var(--dark-text-primary);
  margin-bottom: 1.25rem;
  background: var(--gradient-yellow-bright);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.empty-state-description {
  color: var(--dark-text-secondary);
  margin-bottom: 2.5rem;
  font-size: 1.125rem;
  line-height: 1.7;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.browse-products-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 2.5rem;
  border: none;
  font-size: 1.125rem;
  font-weight: var(--font-weight-semibold);
  border-radius: 16px;
  color: var(--dark-bg-primary);
  background: var(--gradient-yellow-primary);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--timing-normal) var(--ease-bounce);
  box-shadow: var(--shadow-dark-lg), var(--shadow-glow);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.browse-products-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left var(--timing-slow) var(--ease-smooth);
}

.browse-products-btn:hover {
  background: var(--gradient-yellow-bright);
  transform: translateY(-4px) scale(1.05);
  box-shadow: var(--shadow-dark-xl), var(--shadow-glow-strong);
}

.browse-products-btn:hover::before {
  left: 100%;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.pagination-nav {
  display: flex;
  border-radius: 0.375rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.pagination-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid #d1d5db;
  background-color: white;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  border-left: none;
}

.pagination-btn:first-child {
  border-left: 1px solid #d1d5db;
}

.pagination-btn:hover:not(:disabled) {
  background-color: var(--color-surface-secondary);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-btn.active {
  background-color: var(--color-success);
  color: white;
  border-color: var(--color-success);
}

.error-message {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  padding: 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1.5rem;
}

/* Price Alert Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-content {
  background: white;
  border-radius: 0.5rem;
  max-width: 32rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.modal-header {
  padding: 1.5rem 1.5rem 1rem;
}

.modal-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: #111827;
  margin: 0;
}

.modal-body {
  padding: 0 1.5rem 1rem;
}

.modal-form-group {
  margin-bottom: 1rem;
}

.modal-checkbox-group {
  display: flex;
  align-items: center;
}

.modal-checkbox {
  margin-right: 0.75rem;
}

.modal-checkbox-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

.modal-input-group {
  margin-top: 1rem;
}

.modal-input-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
}

.modal-input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.modal-input:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.modal-input-help {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.modal-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.modal-btn.primary {
  background-color: var(--color-success);
  color: white;
}

.modal-btn.primary:hover:not(:disabled) {
  background-color: var(--color-success-light);
}

.modal-btn.secondary {
  background-color: white;
  color: #374151;
  border: 1px solid #d1d5db;
}

.modal-btn.secondary:hover {
  background-color: var(--color-surface-secondary);
}

.modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Enhanced Responsive Design */
@media (max-width: 1024px) {
  .wishlist-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
  }
}

@media (max-width: 768px) {
  .wishlist-container::before {
    height: 400px;
  }
  
  .wishlist-header {
    padding: var(--space-12) 0;
  }
  
  .wishlist-header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: 0 var(--space-4);
  }
  
  .wishlist-title {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }
  
  .wishlist-main {
    padding: var(--space-12) var(--space-4);
  }
  
  .controls-section {
    padding: var(--space-6);
    border-radius: 16px;
  }
  
  .controls-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }
  
  .controls-left,
  .controls-right {
    width: 100%;
    justify-content: space-between;
  }
  
  .sort-control {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  
  .sort-select {
    min-width: auto;
    width: 100%;
  }
  
  .wishlist-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  
  .wishlist-item {
    border-radius: 20px;
  }
  
  .item-content {
    padding: 1.5rem;
  }
  
  .item-title {
    font-size: 1rem;
  }
  
  .item-price {
    font-size: 1.25rem;
  }
  
  .secondary-actions {
    flex-direction: column;
    gap: var(--space-3);
  }
  
  .empty-state {
    padding: 3rem 2rem;
    border-radius: 20px;
  }
  
  .empty-state-icon {
    width: 4rem;
    height: 4rem;
    margin-bottom: 2rem;
  }
  
  .empty-state-title {
    font-size: 1.5rem;
  }
  
  .empty-state-description {
    font-size: 1rem;
  }
  
  .browse-products-btn {
    padding: 1rem 2rem;
    font-size: 1rem;
  }
  
  .modal-content {
    margin: var(--space-4);
    max-width: none;
    border-radius: 16px;
  }
  
  .modal-footer {
    flex-direction: column-reverse;
    gap: var(--space-3);
  }
  
  .modal-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .wishlist-header-content {
    padding: 0 var(--space-3);
  }
  
  .wishlist-main {
    padding: var(--space-8) var(--space-3);
  }
  
  .controls-section {
    padding: var(--space-4);
  }
  
  .item-content {
    padding: 1.25rem;
  }
  
  .empty-state {
    padding: 2.5rem 1.5rem;
  }
  
  .modal-content {
    margin: var(--space-2);
  }
}

/* Animation for item removal */
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.wishlist-item.removing {
  animation: fadeOut 0.3s ease-in-out forwards;
}

/* Loading states */
.loading-btn {
  position: relative;
}

.loading-btn:disabled {
  color: transparent;
}

.loading-btn:disabled::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1rem;
  height: 1rem;
  border: 2px solid #f3f4f6;
  border-top: 2px solid #6b7280;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes staggerIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Enhanced Stagger Animation for Grid Items */
.wishlist-item:nth-child(1) { animation-delay: 0.1s; }
.wishlist-item:nth-child(2) { animation-delay: 0.15s; }
.wishlist-item:nth-child(3) { animation-delay: 0.2s; }
.wishlist-item:nth-child(4) { animation-delay: 0.25s; }
.wishlist-item:nth-child(5) { animation-delay: 0.3s; }
.wishlist-item:nth-child(6) { animation-delay: 0.35s; }
.wishlist-item:nth-child(7) { animation-delay: 0.4s; }
.wishlist-item:nth-child(8) { animation-delay: 0.45s; }
.wishlist-item:nth-child(9) { animation-delay: 0.5s; }
.wishlist-item:nth-child(10) { animation-delay: 0.55s; }
.wishlist-item:nth-child(11) { animation-delay: 0.6s; }
.wishlist-item:nth-child(12) { animation-delay: 0.65s; }

/* Glassmorphism effects */
.glass-effect {
  background: rgba(26, 26, 26, 0.8);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 214, 0, 0.2);
}

/* Hover glow effects */
.glow-on-hover {
  position: relative;
  overflow: hidden;
}

.glow-on-hover::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #FFD600, #FFED4E, #FFD600);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: -1;
}

.glow-on-hover:hover::before {
  opacity: 0.7;
}

/* Custom scrollbar */
.wishlist-container::-webkit-scrollbar {
  width: 8px;
}

.wishlist-container::-webkit-scrollbar-track {
  background: rgba(42, 42, 42, 0.5);
  border-radius: 4px;
}

.wishlist-container::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #FFD600 0%, #E6C200 100%);
  border-radius: 4px;
}

.wishlist-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #FFED4E 0%, #FFD600 100%);
}

/* Enhanced Modal Styles */
.modal-overlay {
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
}

.modal-content {
  background: var(--gradient-dark-elevated);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 1px solid var(--border-dark-medium);
  border-radius: 20px;
  color: var(--dark-text-primary);
  box-shadow: var(--shadow-dark-xl), var(--shadow-glow);
  position: relative;
  overflow: hidden;
}

.modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-yellow-primary);
  opacity: 0.8;
}

.modal-title {
  color: var(--dark-text-primary);
  font-weight: var(--font-weight-semibold);
  font-size: 1.25rem;
}

.modal-input {
  background: var(--dark-bg-tertiary);
  border: 2px solid var(--border-dark-medium);
  border-radius: 12px;
  color: var(--dark-text-primary);
  transition: all var(--timing-normal) var(--ease-smooth);
}

.modal-input::placeholder {
  color: var(--dark-text-muted);
}

.modal-input:focus {
  border-color: var(--yellow-glow);
  background: var(--dark-bg-elevated);
  box-shadow: 0 0 0 4px var(--yellow-subtle), var(--shadow-glow);
}

.modal-checkbox-label {
  color: var(--dark-text-primary);
  font-weight: var(--font-weight-medium);
}

.modal-input-label {
  color: var(--dark-text-primary);
  font-weight: var(--font-weight-medium);
}

.modal-input-help {
  color: var(--dark-text-tertiary);
}

.modal-btn.primary {
  background: var(--gradient-yellow-primary);
  color: var(--dark-bg-primary);
  border-radius: 12px;
  font-weight: var(--font-weight-semibold);
  transition: all var(--timing-normal) var(--ease-bounce);
  position: relative;
  overflow: hidden;
}

.modal-btn.primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left var(--timing-slow) var(--ease-smooth);
}

.modal-btn.primary:hover:not(:disabled) {
  background: var(--gradient-yellow-bright);
  transform: translateY(-2px);
  box-shadow: var(--shadow-dark-md), var(--shadow-glow);
}

.modal-btn.primary:hover:not(:disabled)::before {
  left: 100%;
}

.modal-btn.secondary {
  background: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
  border: 2px solid var(--border-dark-medium);
  border-radius: 12px;
  transition: all var(--timing-normal) var(--ease-smooth);
}

.modal-btn.secondary:hover {
  background: var(--dark-bg-elevated);
  border-color: var(--border-accent);
  color: var(--yellow-glow);
  transform: translateY(-1px);
} 
.admin-login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: 'Roboto', sans-serif;
}

.admin-login-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  padding: 40px;
  width: 100%;
  max-width: 450px;
  animation: slideIn 0.6s ease-out;
}

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

.admin-login-header {
  text-align: center;
  margin-bottom: 32px;
}

.admin-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.logo-image {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.admin-logo h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #2E7D32;
  margin: 0;
}

.admin-login-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.admin-login-header p {
  color: #666;
  font-size: 0.875rem;
  margin: 0;
}

.admin-login-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 600;
  color: #333;
  font-size: 0.875rem;
}

.input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.input-container input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: #fafafa;
}

.input-container input:focus {
  outline: none;
  border-color: #2E7D32;
  background: white;
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
}

.input-icon {
  position: absolute;
  right: 16px;
  color: #999;
  font-size: 1.25rem;
}

.password-toggle {
  position: absolute;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.password-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
}

.login-button {
  background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%);
  color: white;
  border: none;
  padding: 16px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.login-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(46, 125, 50, 0.3);
}

.login-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  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); }
}

.admin-login-footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e0e0e0;
}

.security-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #e8f5e8;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.security-icon {
  font-size: 1.25rem;
}

.security-notice p {
  margin: 0;
  font-size: 0.875rem;
  color: #1B5E20;
  font-weight: 500;
}

.default-credentials-notice {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 16px;
}

.default-credentials-notice h4 {
  margin: 0 0 12px 0;
  font-size: 0.875rem;
  color: #856404;
  font-weight: 600;
}

.credentials-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.credential-item {
  font-size: 0.75rem;
  color: #856404;
  font-family: 'Courier New', monospace;
  background: rgba(255, 255, 255, 0.5);
  padding: 4px 8px;
  border-radius: 4px;
}

.warning-text {
  margin: 0;
  font-size: 0.75rem;
  color: #721c24;
  font-weight: 600;
  text-align: center;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .admin-login-page {
    padding: 16px;
  }

  .admin-login-container {
    padding: 24px;
    max-width: 100%;
  }

  .admin-logo h1 {
    font-size: 1.75rem;
  }

  .admin-login-header h2 {
    font-size: 1.25rem;
  }

  .credentials-list {
    gap: 4px;
  }

  .credential-item {
    font-size: 0.7rem;
    padding: 3px 6px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .admin-login-container {
    background: #1e1e1e;
    color: #e0e0e0;
  }

  .admin-login-header h2 {
    color: #e0e0e0;
  }

  .admin-login-header p {
    color: #b0b0b0;
  }

  .form-group label {
    color: #e0e0e0;
  }

  .input-container input {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
  }

  .input-container input:focus {
    border-color: #66BB6A;
    background: #333;
    box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.1);
  }

  .default-credentials-notice {
    background: #2a2a2a;
    border-color: #444;
  }

  .default-credentials-notice h4 {
    color: #ffd54f;
  }

  .credential-item {
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.1);
  }

  .warning-text {
    color: #ff8a80;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .admin-login-container {
    border: 2px solid #000;
  }

  .input-container input {
    border-color: #000;
  }

  .login-button {
    background: #000;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .admin-login-container {
    animation: none;
  }

  .login-button {
    transition: none;
  }

  .loading-spinner {
    animation: none;
  }
} 
.admin-layout {
  display: flex;
  min-height: 100vh;
  background: #f5f5f5;
}

/* Sidebar */
.admin-sidebar {
  width: 280px;
  background: #1e1e1e;
  color: white;
  transition: all 0.3s ease;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1000;
  overflow-y: auto;
}

.admin-sidebar.closed {
  width: 70px;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #333;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-image {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: #66BB6A;
}

.sidebar-nav {
  padding: 20px 0;
}

.nav-group {
  margin-bottom: 8px;
}

.nav-group-header {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #b0b0b0;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #e0e0e0;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}

.nav-link:hover {
  background: #333;
  color: #66BB6A;
}

.nav-link.active {
  background: #2E7D32;
  color: white;
}

.nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #66BB6A;
}

.nav-icon {
  font-size: 1.25rem;
  margin-right: 12px;
  width: 24px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.nav-text {
  font-weight: 500;
  white-space: nowrap;
}

.nav-submenu {
  margin-left: 20px;
  border-left: 2px solid #333;
}

.submenu-link {
  padding: 8px 20px;
  font-size: 0.875rem;
}

.submenu-link .nav-text {
  margin-left: 36px;
}

/* Main Content */
.admin-main {
  flex: 1 1;
  margin-left: 280px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.admin-sidebar.closed + .admin-main {
  margin-left: 70px;
}

/* Header */
.admin-header {
  background: white;
  padding: 16px 24px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sidebar-toggle {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s;
  color: #333;
}

.sidebar-toggle:hover {
  background: #f0f0f0;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.admin-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-role {
  background: #2E7D32;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.admin-dropdown {
  position: relative;
}

.admin-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s;
}

.admin-profile:hover {
  background: #f0f0f0;
}

.admin-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.admin-name {
  font-weight: 500;
  color: #333;
}

.dropdown-arrow {
  font-size: 0.75rem;
  color: #666;
  transition: transform 0.2s;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  z-index: 1000;
  margin-top: 8px;
}

.dropdown-header {
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
}

.dropdown-header strong {
  display: block;
  color: #333;
  font-size: 0.875rem;
}

.dropdown-header small {
  color: #666;
  font-size: 0.75rem;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-decoration: none;
  color: #333;
  font-size: 0.875rem;
  border: none;
  background: none;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.dropdown-item:hover {
  background: #f0f0f0;
}

.logout-item {
  color: #f44336;
  border-top: 1px solid #e0e0e0;
}

.logout-item:hover {
  background: #ffebee;
}

/* Content */
.admin-content {
  flex: 1 1;
  overflow-y: auto;
}

/* Sidebar Overlay for Mobile */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}

/* Loading State */
.admin-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #f5f5f5;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e0e0e0;
  border-top: 3px solid #2E7D32;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

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

/* Responsive Design */
@media (max-width: 1024px) {
  .admin-sidebar {
    transform: translateX(-100%);
  }

  .admin-sidebar.open {
    transform: translateX(0);
  }

  .admin-main {
    margin-left: 0;
  }

  .admin-sidebar.closed + .admin-main {
    margin-left: 0;
  }

  .sidebar-overlay {
    display: block;
  }
}

@media (max-width: 768px) {
  .admin-header {
    padding: 12px 16px;
  }

  .page-title {
    font-size: 1.25rem;
  }

  .admin-name {
    display: none;
  }

  .admin-role {
    font-size: 0.65rem;
    padding: 3px 8px;
  }

  .sidebar-header {
    padding: 16px;
  }

  .nav-link {
    padding: 10px 16px;
  }
}

@media (max-width: 480px) {
  .admin-header {
    padding: 8px 12px;
  }

  .page-title {
    font-size: 1.125rem;
  }

  .header-right {
    gap: 8px;
  }

  .admin-role {
    display: none;
  }
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
  .admin-layout {
    background: #121212;
  }

  .admin-header {
    background: #1e1e1e;
    border-bottom-color: #333;
  }

  .sidebar-toggle:hover {
    background: #333;
  }

  .page-title {
    color: #e0e0e0;
  }

  .admin-name {
    color: #e0e0e0;
  }

  .admin-profile:hover {
    background: #333;
  }

  .dropdown-menu {
    background: #1e1e1e;
    border-color: #333;
  }

  .dropdown-header strong {
    color: #e0e0e0;
  }

  .dropdown-header small {
    color: #b0b0b0;
  }

  .dropdown-item {
    color: #e0e0e0;
  }

  .dropdown-item:hover {
    background: #333;
  }

  .logout-item:hover {
    background: #2a1d1d;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .admin-sidebar {
    border-right: 2px solid #000;
  }

  .nav-link.active {
    background: #000;
    color: #fff;
  }

  .admin-header {
    border-bottom: 2px solid #000;
  }
} 
.admin-dashboard {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.dashboard-header {
  margin-bottom: 32px;
}

.dashboard-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 8px 0;
}

.dashboard-header p {
  color: #666;
  font-size: 1rem;
  margin: 0;
}

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 32px;
}

.metric-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.metric-icon {
  font-size: 2.5rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f7f0;
  border-radius: 12px;
  flex-shrink: 0;
}

.metric-content h3 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #2E7D32;
  margin: 0 0 4px 0;
}

.metric-content p {
  font-size: 0.875rem;
  color: #666;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.metric-change {
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 20px;
  font-weight: 600;
}

.metric-change.positive {
  background: #e8f5e8;
  color: #2E7D32;
}

.metric-percentage,
.metric-active,
.metric-orders,
.metric-avg,
.metric-products {
  font-size: 0.75rem;
  color: #999;
  font-weight: 500;
}

/* Charts Section */
.charts-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

.chart-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.chart-header {
  margin-bottom: 20px;
}

.chart-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.chart-wrapper {
  height: 300px;
  position: relative;
}

/* Quick Actions */
.quick-actions {
  margin-bottom: 32px;
}

.quick-actions h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px 0;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.action-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  background: #f8f9fa;
}

.action-icon {
  font-size: 2rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e3f2fd;
  border-radius: 10px;
  flex-shrink: 0;
}

.action-content h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px 0;
}

.action-content p {
  font-size: 0.875rem;
  color: #666;
  margin: 0;
}

/* Recent Activity */
.recent-activity {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.recent-activity h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px 0;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-indicator.online {
  background: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
}

.status-indicator.offline {
  background: #f44336;
  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.3);
}

.status-item span {
  font-size: 0.875rem;
  color: #333;
  font-weight: 500;
}

/* Loading and Error States */
.admin-loading,
.admin-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  text-align: center;
}

.admin-error h3 {
  color: #f44336;
  margin-bottom: 16px;
}

.retry-button {
  background: #2E7D32;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.retry-button:hover {
  background: #1B5E20;
  transform: translateY(-1px);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .charts-section {
    grid-template-columns: 1fr;
  }
  
  .chart-wrapper {
    height: 250px;
  }
}

@media (max-width: 768px) {
  .admin-dashboard {
    padding: 16px;
  }

  .dashboard-header h1 {
    font-size: 1.5rem;
  }

  .metrics-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .metric-card {
    padding: 20px;
  }

  .metric-icon {
    font-size: 2rem;
    width: 50px;
    height: 50px;
  }

  .metric-content h3 {
    font-size: 1.5rem;
  }

  .actions-grid {
    grid-template-columns: 1fr;
  }

  .action-card {
    padding: 16px;
  }

  .status-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .metric-card {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .action-card {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .chart-wrapper {
    height: 200px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .admin-dashboard {
    background: #121212;
  }

  .dashboard-header h1 {
    color: #e0e0e0;
  }

  .dashboard-header p {
    color: #b0b0b0;
  }

  .metric-card,
  .chart-container,
  .action-card,
  .recent-activity {
    background: #1e1e1e;
    color: #e0e0e0;
  }

  .metric-icon {
    background: #2a3d2a;
  }

  .metric-content h3 {
    color: #66BB6A;
  }

  .metric-content p {
    color: #b0b0b0;
  }

  .action-card:hover {
    background: #2a2a2a;
  }

  .action-icon {
    background: #2a3d2a;
  }

  .action-content h4 {
    color: #e0e0e0;
  }

  .action-content p {
    color: #b0b0b0;
  }

  .status-item {
    background: #2a2a2a;
  }

  .status-item span {
    color: #e0e0e0;
  }

  .chart-header h3 {
    color: #e0e0e0;
  }

  .quick-actions h3,
  .recent-activity h3 {
    color: #e0e0e0;
  }
} 
.user-management {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 32px;
}

.page-header h2 {
  font-size: 1.75rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.page-header p {
  color: #666;
  margin: 0;
}

/* Filters Section */
.filters-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.search-form {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.search-input {
  flex: 1 1;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.2s;
}

.search-input:focus {
  outline: none;
  border-color: #2E7D32;
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
}

.search-button {
  background: #2E7D32;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.search-button:hover {
  background: #1B5E20;
  transform: translateY(-1px);
}

.filter-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-select:focus {
  outline: none;
  border-color: #2E7D32;
}

/* Users Table */
.users-table-container {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
}

.users-table th {
  background: #f8f9fa;
  padding: 16px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #e0e0e0;
}

.users-table td {
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: middle;
}

.users-table tr:hover {
  background: #f8f9fa;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.user-details {
  flex: 1 1;
}

.user-name {
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}

.user-email {
  font-size: 0.875rem;
  color: #666;
}

.role-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.role-badge.buyer {
  background: #e3f2fd;
  color: #1976d2;
}

.role-badge.seller {
  background: #e8f5e8;
  color: #2e7d32;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

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

.status-badge.inactive {
  background: #fff3e0;
  color: #f57c00;
}

.status-badge.banned {
  background: #ffebee;
  color: #d32f2f;
}

.verification-badges {
  display: flex;
  gap: 4px;
}

.badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  background: #f0f0f0;
}

.badge.email {
  background: #e3f2fd;
}

.badge.phone {
  background: #e8f5e8;
}

.badge.student {
  background: #fff3e0;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.btn {
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.875rem;
}

.btn-primary {
  background: #2E7D32;
  color: white;
}

.btn-primary:hover {
  background: #1B5E20;
  transform: translateY(-1px);
}

.btn-danger {
  background: #d32f2f;
  color: white;
}

.btn-danger:hover {
  background: #b71c1c;
  transform: translateY(-1px);
}

.btn-success {
  background: #388e3c;
  color: white;
}

.btn-success:hover {
  background: #2e7d32;
  transform: translateY(-1px);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.pagination-btn {
  background: #2E7D32;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
  background: #1B5E20;
  transform: translateY(-1px);
}

.pagination-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

.pagination-info {
  font-size: 0.875rem;
  color: #666;
}

/* Loading */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.user-modal {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #e0e0e0;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.2s;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: #f0f0f0;
  color: #333;
}

.modal-content {
  padding: 24px;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e0e0e0;
}

.profile-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-info h4 {
  margin: 0 0 8px 0;
  font-size: 1.25rem;
  color: #333;
}

.profile-info p {
  margin: 4px 0;
  color: #666;
  font-size: 0.875rem;
}

.user-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e0e0e0;
}

.stat-item {
  text-align: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #2E7D32;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.875rem;
  color: #666;
  font-weight: 500;
}

.verification-controls {
  margin-bottom: 24px;
}

.verification-controls h5 {
  margin: 0 0 16px 0;
  font-size: 1rem;
  color: #333;
}

.verification-toggles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toggle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.toggle-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.user-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .user-management {
    padding: 16px;
  }

  .filter-controls {
    flex-direction: column;
  }

  .filter-select {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .users-table-container {
    overflow-x: auto;
  }

  .users-table {
    min-width: 800px;
  }

  .search-form {
    flex-direction: column;
  }

  .user-profile {
    flex-direction: column;
    text-align: center;
  }

  .user-stats {
    grid-template-columns: 1fr;
  }

  .verification-toggles {
    align-items: flex-start;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .user-management {
    background: #121212;
  }

  .page-header h2 {
    color: #e0e0e0;
  }

  .page-header p {
    color: #b0b0b0;
  }

  .filters-section,
  .users-table-container,
  .user-modal {
    background: #1e1e1e;
    color: #e0e0e0;
  }

  .search-input,
  .filter-select {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
  }

  .users-table th {
    background: #2a2a2a;
    color: #e0e0e0;
  }

  .users-table tr:hover {
    background: #2a2a2a;
  }

  .user-name {
    color: #e0e0e0;
  }

  .profile-info h4 {
    color: #e0e0e0;
  }

  .stat-item {
    background: #2a2a2a;
  }

  .verification-controls h5 {
    color: #e0e0e0;
  }

  .modal-header {
    border-bottom-color: #333;
  }

  .modal-header h3 {
    color: #e0e0e0;
  }

  .modal-close {
    color: #e0e0e0;
  }

  .modal-close:hover {
    background: #333;
  }
} 
.seller-management {
  padding: 24px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 32px;
}

.page-header h1 {
  color: #2c3e50;
  font-size: 2.5em;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.page-header p {
  color: #7f8c8d;
  font-size: 1.1em;
  margin: 0;
}

/* Controls Section */
.controls {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}

.search-filter {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.search-input {
  flex: 1 1;
  min-width: 300px;
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.filter-select {
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 180px;
}

.filter-select:focus {
  outline: none;
  border-color: #3498db;
}

/* Seller Stats */
.seller-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-number {
  font-size: 2.5em;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 8px;
}

.stat-label {
  color: #7f8c8d;
  font-size: 14px;
  font-weight: 500;
}

/* Table Container */
.seller-table-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 24px;
}

.seller-table {
  width: 100%;
  border-collapse: collapse;
}

.seller-table thead {
  background: #f8f9fa;
}

.seller-table th {
  padding: 16px;
  text-align: left;
  font-weight: 600;
  color: #2c3e50;
  border-bottom: 2px solid #e9ecef;
  font-size: 14px;
}

.seller-table td {
  padding: 16px;
  border-bottom: 1px solid #f1f3f4;
  vertical-align: middle;
}

.seller-table tbody tr {
  transition: background-color 0.2s ease;
}

.seller-table tbody tr:hover {
  background-color: #f8f9fa;
}

.business-info {
  display: flex;
  flex-direction: column;
}

.business-info strong {
  color: #2c3e50;
  font-weight: 600;
  margin-bottom: 4px;
}

.business-info small {
  color: #7f8c8d;
  font-size: 12px;
  text-transform: capitalize;
}

/* Status Badges */
.status-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-pending {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.status-approved {
  background: #d1edff;
  color: #0c5aa6;
  border: 1px solid #74b9ff;
}

.status-rejected {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.status-suspended {
  background: #e2e3e5;
  color: #383d41;
  border: 1px solid #c6c8ca;
}

.rating {
  color: #f39c12;
  font-weight: 600;
}

.no-rating {
  color: #95a5a6;
  font-style: italic;
  font-size: 12px;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.action-buttons button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-view {
  background: #e9ecef;
  color: #495057;
}

.btn-view:hover {
  background: #dee2e6;
}

.btn-approve {
  background: #27ae60;
  color: white;
}

.btn-approve:hover {
  background: #229954;
}

.btn-reject {
  background: #e74c3c;
  color: white;
}

.btn-reject:hover {
  background: #c0392b;
}

.btn-suspend {
  background: #f39c12;
  color: white;
}

.btn-suspend:hover {
  background: #e67e22;
}

/* Loading and No Data */
.loading {
  text-align: center;
  padding: 60px 20px;
  color: #7f8c8d;
  font-size: 16px;
}

.no-data {
  text-align: center;
  padding: 60px 20px;
  color: #7f8c8d;
  font-size: 16px;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.pagination-btn {
  padding: 10px 16px;
  border: 2px solid #e9ecef;
  background: white;
  color: #495057;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
  background: #3498db;
  color: white;
  border-color: #3498db;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-info {
  color: #7f8c8d;
  font-weight: 500;
}

/* Modal Styles */
.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;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.modal-content {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  animation: modalSlideIn 0.3s ease;
}

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

.modal-header {
  display: flex;
  justify-content: between;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 1px solid #e9ecef;
}

.modal-header h2 {
  color: #2c3e50;
  font-size: 1.8em;
  font-weight: 600;
  margin: 0;
  flex: 1 1;
}

.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: #95a5a6;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: #f8f9fa;
  color: #7f8c8d;
}

.modal-body {
  padding: 32px;
}

.seller-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-section h3 {
  color: #2c3e50;
  font-size: 1.3em;
  font-weight: 600;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e9ecef;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-item label {
  font-weight: 600;
  color: #7f8c8d;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-item span {
  color: #2c3e50;
  font-weight: 500;
}

.address p {
  margin: 4px 0;
  color: #2c3e50;
}

.status-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.status-date {
  color: #7f8c8d;
  font-size: 14px;
}

.modal-actions {
  padding: 24px 32px;
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.modal-actions button {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
  .seller-management {
    padding: 16px;
  }

  .page-header h1 {
    font-size: 2em;
  }

  .search-filter {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input {
    min-width: auto;
  }

  .seller-stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }

  .stat-card {
    padding: 16px;
  }

  .stat-number {
    font-size: 2em;
  }

  .seller-table-container {
    overflow-x: auto;
  }

  .seller-table {
    min-width: 800px;
  }

  .seller-table th,
  .seller-table td {
    padding: 12px 8px;
    font-size: 12px;
  }

  .action-buttons {
    flex-direction: column;
  }

  .action-buttons button {
    font-size: 11px;
    padding: 4px 8px;
  }

  .modal-content {
    width: 95%;
    margin: 20px;
  }

  .modal-header,
  .modal-body,
  .modal-actions {
    padding: 20px;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .modal-actions {
    flex-direction: column;
  }

  .pagination {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .seller-stats {
    grid-template-columns: 1fr;
  }
  
  .seller-table th,
  .seller-table td {
    padding: 8px 4px;
    font-size: 11px;
  }
} 
.content-management {
  padding: 24px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 32px;
}

.page-header h1 {
  color: #2c3e50;
  font-size: 2.5em;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.page-header p {
  color: #7f8c8d;
  font-size: 1.1em;
  margin: 0;
}

/* Tab Navigation */
.tab-navigation {
  display: flex;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  overflow: hidden;
}

.tab-btn {
  flex: 1 1;
  padding: 16px 24px;
  border: none;
  background: white;
  color: #7f8c8d;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}

.tab-btn:hover {
  background: #f8f9fa;
  color: #2c3e50;
}

.tab-btn.active {
  color: #3498db;
  border-bottom-color: #3498db;
  background: #f8f9fa;
}

/* Tab Content */
.tab-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 24px;
}

/* Section Header */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.section-header h2 {
  color: #2c3e50;
  font-size: 1.8em;
  font-weight: 600;
  margin: 0;
}

.controls {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.search-input {
  padding: 10px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  min-width: 250px;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.filter-select {
  padding: 10px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-select:focus {
  outline: none;
  border-color: #3498db;
}

/* Products Grid */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.item-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.item-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.item-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-image {
  color: #95a5a6;
  font-size: 14px;
  font-weight: 500;
}

.item-content {
  padding: 20px;
}

.item-content h3 {
  color: #2c3e50;
  font-size: 1.2em;
  font-weight: 600;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.item-price {
  color: #27ae60;
  font-size: 1.3em;
  font-weight: 700;
  margin: 8px 0;
}

.item-seller {
  color: #7f8c8d;
  font-size: 14px;
  margin: 8px 0;
}

.item-status {
  margin: 12px 0;
}

.item-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* Categories Table */
.categories-table {
  overflow-x: auto;
}

.categories-table table {
  width: 100%;
  border-collapse: collapse;
}

.categories-table thead {
  background: #f8f9fa;
}

.categories-table th {
  padding: 16px;
  text-align: left;
  font-weight: 600;
  color: #2c3e50;
  border-bottom: 2px solid #e9ecef;
}

.categories-table td {
  padding: 16px;
  border-bottom: 1px solid #f1f3f4;
  vertical-align: middle;
}

.categories-table tbody tr:hover {
  background-color: #f8f9fa;
}

/* Reports List */
.reports-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.report-card {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  background: #fdfdfd;
  transition: all 0.2s ease;
}

.report-card:hover {
  border-color: #3498db;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.1);
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.report-type {
  display: flex;
  align-items: center;
  gap: 12px;
}

.report-type strong {
  color: #2c3e50;
  font-size: 1.1em;
}

.report-date {
  color: #7f8c8d;
  font-size: 14px;
}

.report-content {
  margin-bottom: 16px;
}

.report-content p {
  margin: 8px 0;
  color: #2c3e50;
}

.report-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Status Badges */
.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-active {
  background: #d1edff;
  color: #0c5aa6;
}

.status-pending {
  background: #fff3cd;
  color: #856404;
}

.status-suspended {
  background: #f8d7da;
  color: #721c24;
}

.status-rejected {
  background: #e2e3e5;
  color: #383d41;
}

.status-resolved {
  background: #d4edda;
  color: #155724;
}

.status-review {
  background: #ffeaa7;
  color: #b7950b;
}

/* Buttons */
.btn-primary {
  background: #3498db;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: #2980b9;
}

.btn-secondary {
  background: #95a5a6;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: #7f8c8d;
}

.btn-view {
  background: #e9ecef;
  color: #495057;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-view:hover {
  background: #dee2e6;
}

.btn-approve {
  background: #27ae60;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-approve:hover {
  background: #229954;
}

.btn-reject {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-reject:hover {
  background: #c0392b;
}

.btn-suspend {
  background: #f39c12;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-suspend:hover {
  background: #e67e22;
}

.btn-warning {
  background: #f1c40f;
  color: #2c3e50;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-warning:hover {
  background: #f39c12;
  color: white;
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Loading */
.loading {
  text-align: center;
  padding: 60px 20px;
  color: #7f8c8d;
  font-size: 16px;
}

/* Modal Styles */
.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;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.modal-content {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  animation: modalSlideIn 0.3s ease;
}

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

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 1px solid #e9ecef;
}

.modal-header h2 {
  color: #2c3e50;
  font-size: 1.8em;
  font-weight: 600;
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #95a5a6;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: #f8f9fa;
  color: #7f8c8d;
}

.modal-body {
  padding: 32px;
}

.modal-actions {
  padding: 24px 32px;
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Product Details */
.product-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.product-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.product-images img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.product-info h3 {
  color: #2c3e50;
  font-size: 1.5em;
  margin: 0 0 16px 0;
}

.product-info .price {
  color: #27ae60;
  font-size: 1.4em;
  font-weight: 700;
  margin: 8px 0;
}

.product-info p {
  margin: 8px 0;
  color: #2c3e50;
}

.description {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #3498db;
  margin-top: 8px;
}

/* Report Details */
.report-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-item label {
  font-weight: 600;
  color: #7f8c8d;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-item span {
  color: #2c3e50;
  font-weight: 500;
}

.report-reason,
.report-description {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #e74c3c;
}

.report-reason h4,
.report-description h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
}

/* Form Elements */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #2c3e50;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-group input[type="checkbox"] {
  width: auto;
  margin-right: 8px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .content-management {
    padding: 16px;
  }

  .page-header h1 {
    font-size: 2em;
  }

  .tab-navigation {
    flex-direction: column;
  }

  .tab-btn {
    border-bottom: none;
    border-left: 3px solid transparent;
  }

  .tab-btn.active {
    border-bottom: none;
    border-left-color: #3498db;
  }

  .section-header {
    flex-direction: column;
    align-items: stretch;
  }

  .controls {
    flex-direction: column;
  }

  .search-input {
    min-width: auto;
  }

  .items-grid {
    grid-template-columns: 1fr;
  }

  .categories-table {
    font-size: 14px;
  }

  .categories-table th,
  .categories-table td {
    padding: 12px 8px;
  }

  .report-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .modal-content {
    width: 95%;
    margin: 20px;
  }

  .modal-header,
  .modal-body,
  .modal-actions {
    padding: 20px;
  }

  .product-images {
    grid-template-columns: 1fr;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .modal-actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .item-content {
    padding: 16px;
  }

  .categories-table th,
  .categories-table td {
    padding: 8px 4px;
    font-size: 12px;
  }

  .report-card {
    padding: 16px;
  }

  .action-buttons {
    flex-direction: column;
  }
} 
.analytics {
  padding: 24px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

/* Page Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 20px;
}

.header-content h1 {
  color: #2c3e50;
  font-size: 2.5em;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.header-content p {
  color: #7f8c8d;
  font-size: 1.1em;
  margin: 0;
}

.header-controls {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.date-range-select,
.export-format-select {
  padding: 10px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.date-range-select:focus,
.export-format-select:focus {
  outline: none;
  border-color: #3498db;
}

.export-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}

.export-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.export-btn:hover {
  background: #2980b9;
  transform: translateY(-1px);
}

/* Tab Navigation */
.tab-navigation {
  display: flex;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  overflow: hidden;
}

.tab-btn {
  flex: 1 1;
  padding: 16px 24px;
  border: none;
  background: white;
  color: #7f8c8d;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tab-btn:hover {
  background: #f8f9fa;
  color: #2c3e50;
}

.tab-btn.active {
  color: #3498db;
  border-bottom-color: #3498db;
  background: #f8f9fa;
}

/* Analytics Content */
.analytics-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 32px;
}

/* Loading */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: #7f8c8d;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e9ecef;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

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

/* Overview Section */
.overview-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.metric-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 24px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.2s ease;
}

.metric-card:hover {
  transform: translateY(-4px);
}

.metric-card:nth-child(2) {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.metric-card:nth-child(3) {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.metric-card:nth-child(4) {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.metric-card:nth-child(5) {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.metric-card:nth-child(6) {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  color: #2c3e50;
}

.metric-icon {
  font-size: 2.5em;
  opacity: 0.8;
}

.metric-content {
  flex: 1 1;
}

.metric-content h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-value {
  font-size: 2.2em;
  font-weight: 700;
  margin: 8px 0;
}

.metric-change {
  font-size: 12px;
  opacity: 0.8;
}

.metric-change.positive {
  color: #d4edda;
}

.metric-change.neutral {
  opacity: 0.7;
}

/* Charts Section */
.charts-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.chart-container {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #e9ecef;
}

.chart-header h3 {
  color: #2c3e50;
  font-size: 1.3em;
  margin: 0 0 4px 0;
}

.chart-description {
  color: #7f8c8d;
  font-size: 14px;
  margin-bottom: 20px;
}

.chart-placeholder {
  height: 200px;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}

.placeholder-content {
  text-align: center;
  color: #95a5a6;
}

.placeholder-icon {
  font-size: 3em;
  margin-bottom: 12px;
}

.placeholder-content p {
  margin: 8px 0;
  font-weight: 500;
}

.placeholder-content small {
  color: #bdc3c7;
}

/* Performers Section */
.performers-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.top-sellers,
.top-products,
.top-categories {
  background: #f8f9fa;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.top-sellers h3,
.top-products h3,
.top-categories h3 {
  color: #2c3e50;
  font-size: 1.2em;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e9ecef;
}

.performer-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.performer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.rank {
  font-weight: 700;
  color: #3498db;
  font-size: 14px;
  min-width: 30px;
}

.performer-info {
  flex: 1 1;
}

.performer-info .name {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.performer-info .value {
  color: #27ae60;
  font-weight: 600;
  font-size: 14px;
}

/* Analytics Header */
.analytics-header {
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e9ecef;
}

.analytics-header h2 {
  color: #2c3e50;
  font-size: 2em;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.analytics-header p {
  color: #7f8c8d;
  font-size: 1.1em;
  margin: 0;
}

/* User Analytics */
.user-stats-grid,
.product-stats-grid,
.sales-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  text-align: center;
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-card h4 {
  color: #7f8c8d;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 2.5em;
  font-weight: 700;
  color: #2c3e50;
  margin: 12px 0;
}

.stat-period {
  color: #95a5a6;
  font-size: 12px;
}

/* User Segments */
.user-segments {
  margin-top: 32px;
}

.user-segments h3 {
  color: #2c3e50;
  font-size: 1.5em;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e9ecef;
}

.segments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.segment-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 24px;
  border-radius: 12px;
  text-align: center;
}

.segment-card:nth-child(2) {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.segment-card:nth-child(3) {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.segment-card h4 {
  margin: 0 0 16px 0;
  font-size: 1em;
  opacity: 0.9;
}

.segment-percentage {
  font-size: 2.5em;
  font-weight: 700;
  margin: 12px 0;
}

.segment-count {
  font-size: 14px;
  opacity: 0.8;
}

/* Category Performance */
.category-performance {
  margin-top: 32px;
}

.category-performance h3 {
  color: #2c3e50;
  font-size: 1.5em;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e9ecef;
}

.category-table {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.category-table table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.category-table thead {
  background: #f8f9fa;
}

.category-table th {
  padding: 16px;
  text-align: left;
  font-weight: 600;
  color: #2c3e50;
  border-bottom: 2px solid #e9ecef;
}

.category-table td {
  padding: 16px;
  border-bottom: 1px solid #f1f3f4;
  color: #2c3e50;
}

.category-table tbody tr:hover {
  background-color: #f8f9fa;
}

/* Order Status Breakdown */
.order-status-breakdown {
  margin-top: 32px;
}

.order-status-breakdown h3 {
  color: #2c3e50;
  font-size: 1.5em;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e9ecef;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.status-item {
  background: white;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  text-align: center;
}

.status-label {
  color: #7f8c8d;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.status-count {
  font-size: 2em;
  font-weight: 700;
  color: #2c3e50;
  margin: 8px 0;
}

.status-percentage {
  color: #3498db;
  font-weight: 600;
  font-size: 14px;
}

/* Recent Transactions */
.recent-transactions {
  margin-top: 32px;
}

.recent-transactions h3 {
  color: #2c3e50;
  font-size: 1.5em;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e9ecef;
}

.transaction-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
}

.transaction-item:hover {
  border-color: #3498db;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.1);
}

.transaction-info {
  flex: 1 1;
}

.transaction-id {
  font-weight: 600;
  color: #3498db;
  font-size: 14px;
}

.transaction-product {
  color: #2c3e50;
  font-weight: 500;
  margin: 4px 0;
}

.transaction-date {
  color: #7f8c8d;
  font-size: 12px;
}

.transaction-amount {
  font-size: 1.2em;
  font-weight: 700;
  color: #27ae60;
}

/* No Data */
.no-data {
  text-align: center;
  padding: 40px 20px;
  color: #95a5a6;
  font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
  .analytics {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .header-controls {
    justify-content: stretch;
  }

  .export-controls {
    flex: 1 1;
  }

  .header-content h1 {
    font-size: 2em;
  }

  .tab-navigation {
    flex-direction: column;
  }

  .tab-btn {
    border-bottom: none;
    border-left: 3px solid transparent;
  }

  .tab-btn.active {
    border-bottom: none;
    border-left-color: #3498db;
  }

  .analytics-content {
    padding: 20px;
  }

  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .charts-section {
    grid-template-columns: 1fr;
  }

  .chart-container {
    padding: 16px;
  }

  .chart-placeholder {
    height: 150px;
  }

  .performers-section {
    grid-template-columns: 1fr;
  }

  .user-stats-grid,
  .product-stats-grid,
  .sales-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .segments-grid {
    grid-template-columns: 1fr;
  }

  .status-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .category-table {
    font-size: 14px;
  }

  .category-table th,
  .category-table td {
    padding: 12px 8px;
  }

  .transaction-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .transaction-amount {
    align-self: flex-end;
  }
}

@media (max-width: 480px) {
  .metric-card {
    flex-direction: column;
    text-align: center;
  }

  .metric-icon {
    font-size: 2em;
  }

  .metric-value {
    font-size: 1.8em;
  }

  .stat-value {
    font-size: 2em;
  }

  .segment-percentage {
    font-size: 2em;
  }

  .status-count {
    font-size: 1.5em;
  }

  .category-table th,
  .category-table td {
    padding: 8px 4px;
    font-size: 12px;
  }
}