@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap);

/* SearchSuggestions.css */
.search-suggestions {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  max-height: 400px;
  overflow-y: auto;
}

.suggestions-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.suggestion-item {
  padding: 12px 15px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.suggestion-item:hover,
.suggestion-item.focused {
  background-color: #f5f5f5;
}

.suggestion-icon {
  margin-right: 12px;
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.suggestion-text {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333;
  font-weight: 500;
}

.suggestion-type {
  font-size: 12px;
  color: #777;
  margin-left: 10px;
  white-space: nowrap;
}

.suggestions-footer {
  padding: 10px 15px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
}

.clear-recent-btn {
  background: none;
  border: none;
  color: #777;
  font-size: 12px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.clear-recent-btn:hover {
  background-color: #f0f0f0;
  color: #333;
}

.suggestions-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 10px;
}

.loading-text {
  color: #666;
  font-size: 14px;
}

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

/* Responsive styles */
@media (max-width: 768px) {
  .suggestion-item {
    padding: 10px 12px;
  }
  
  .suggestion-icon {
    margin-right: 10px;
    font-size: 16px;
  }
  
  .suggestion-text {
    font-size: 14px;
  }
  
  .suggestion-type {
    font-size: 11px;
  }
}

/* Enhanced suggestion content layout */
.suggestion-content {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-width: 0; /* Allow text to truncate */
  margin-right: 12px;
}

.suggestion-subtitle {
  font-size: 0.8rem;
  color: #666;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Update suggestion item layout */
.suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
}

.suggestion-item:hover,
.suggestion-item.focused {
  background-color: #f8f9fa;
}

.suggestion-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-right: 0;
}

.suggestion-text {
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.suggestion-type {
  font-size: 0.75rem;
  color: #888;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .suggestion-item {
    padding: 10px 12px;
    gap: 10px;
  }
  
  .suggestion-icon {
    font-size: 1rem;
  }
  
  .suggestion-text {
    font-size: 0.9rem;
  }
  
  .suggestion-subtitle {
    font-size: 0.75rem;
    margin-top: 3px;
  }
}
/* SearchBar.css */
.search-bar {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.search-form {
  width: 100%;
}

.search-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 100%;
  padding: 12px 80px 12px 15px;
  border: 1px solid #ddd;
  border-radius: 24px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.search-input:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.clear-search-btn {
  position: absolute;
  right: 50px;
  background: none;
  border: none;
  font-size: 20px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.clear-search-btn:hover {
  background-color: #f0f0f0;
}

.search-btn {
  position: absolute;
  right: 5px;
  background: #007bff;
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: background-color 0.3s;
}

.search-btn:hover {
  background-color: #0056b3;
}

/* Suggestions dropdown */
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-top: 5px;
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
}

.suggestions-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.suggestion-item {
  padding: 12px 15px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.suggestion-item:hover,
.suggestion-item.focused {
  background-color: #f5f5f5;
}

.suggestion-icon {
  margin-right: 10px;
  font-size: 18px;
}

.suggestion-text {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333;
}

.suggestion-type {
  font-size: 12px;
  color: #777;
  margin-left: 10px;
}

.suggestions-loading {
  display: flex;
  justify-content: center;
  padding: 10px;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Enhanced Mobile Responsive Styles */
@media (max-width: 768px) {
  .search-bar {
    max-width: none;
    margin: 0;
  }
  
  .search-input {
    padding: 12px 70px 12px 15px;
    font-size: 16px; /* Prevent zoom on iOS */
    border-radius: 20px;
    border-width: 2px;
    min-height: 44px; /* Touch-friendly height */
  }
  
  .search-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    transform: scale(1.02);
  }
  
  .search-btn {
    width: 40px;
    height: 40px;
    right: 2px;
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  .search-btn:active {
    transform: scale(0.95);
  }
  
  .clear-search-btn {
    right: 48px;
    width: 32px;
    height: 32px;
    font-size: 18px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  .clear-search-btn:active {
    transform: scale(0.9);
    background-color: #e0e0e0;
  }
  
  /* Mobile suggestions */
  .search-suggestions {
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    margin-top: 8px;
    max-height: 60vh;
    -webkit-overflow-scrolling: touch;
  }
  
  .suggestion-item {
    padding: 14px 16px;
    min-height: 50px;
    border-bottom: 1px solid #f0f0f0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  .suggestion-item:last-child {
    border-bottom: none;
  }
  
  .suggestion-item:active {
    background-color: #e8f4fd;
    transform: scale(0.98);
  }
  
  .suggestion-icon {
    margin-right: 12px;
    font-size: 20px;
    flex-shrink: 0;
  }
  
  .suggestion-text {
    font-size: 15px;
    line-height: 1.3;
  }
  
  .suggestion-type {
    font-size: 11px;
    margin-left: 8px;
    padding: 2px 6px;
    background: #f0f0f0;
    border-radius: 8px;
    flex-shrink: 0;
  }
  
  .suggestions-loading {
    padding: 16px;
  }
  
  .loading-spinner {
    width: 24px;
    height: 24px;
    border-width: 3px;
  }
}

@media (max-width: 480px) {
  .search-input {
    padding: 10px 65px 10px 12px;
    font-size: 16px;
    border-radius: 18px;
    min-height: 40px;
  }
  
  .search-btn {
    width: 36px;
    height: 36px;
    right: 2px;
    font-size: 14px;
  }
  
  .clear-search-btn {
    right: 42px;
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
  
  .search-suggestions {
    border-radius: 10px;
    margin-top: 6px;
    max-height: 50vh;
  }
  
  .suggestion-item {
    padding: 12px 14px;
    min-height: 44px;
  }
  
  .suggestion-icon {
    margin-right: 10px;
    font-size: 18px;
  }
  
  .suggestion-text {
    font-size: 14px;
  }
  
  .suggestion-type {
    font-size: 10px;
    margin-left: 6px;
    padding: 1px 4px;
  }
  
  .suggestions-loading {
    padding: 12px;
  }
  
  .loading-spinner {
    width: 20px;
    height: 20px;
    border-width: 2px;
  }
}

/* Touch interactions and animations */
@media (max-width: 768px) {
  .search-input {
    transition: all 0.3s ease;
  }
  
  .search-btn,
  .clear-search-btn {
    transition: all 0.2s ease;
  }
  
  .suggestion-item {
    transition: all 0.2s ease;
  }
  
  /* Better focus states for mobile */
  .search-input:focus {
    outline: none;
  }
  
  /* Smooth suggestion animations */
  .search-suggestions {
    animation: slideDown 0.3s ease;
  }
}

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

/* Landscape orientation optimizations */
@media (max-width: 768px) and (orientation: landscape) {
  .search-suggestions {
    max-height: 40vh;
  }
  
  .suggestion-item {
    padding: 10px 14px;
    min-height: 40px;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .search-input {
    border-width: 1px;
  }
  
  .search-btn,
  .clear-search-btn {
    border-width: 1px;
  }
}
/* Shopkeeper Profile Modal Styles */
.profile-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease-out;
}

.profile-modal {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  margin: 20px;
  animation: slideUp 0.3s ease-out;
}

/* Header */
.profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 16px 16px 0 0;
}

.profile-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

/* Content */
.profile-content {
  padding: 24px;
}

/* Messages */
.error-message,
.success-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
}

.error-message {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.success-message {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

/* Form Fields */
.profile-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-group label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrapper input {
  width: 100%;
  padding: 12px 16px;
  padding-right: 40px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 16px;
  transition: all 0.2s ease;
  background: white;
}

.input-wrapper input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.input-wrapper input.editable {
  border-color: #10b981;
  background: #f0fdf4;
}

.input-wrapper input.editable:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.input-wrapper input.readonly {
  background: #f9fafb;
  color: #6b7280;
  cursor: not-allowed;
}

.input-wrapper input.locked {
  background: #fef3c7;
  border-color: #fbbf24;
}

.field-icon {
  position: absolute;
  right: 12px;
  font-size: 16px;
  color: #9ca3af;
  pointer-events: none;
}

.lock-icon {
  position: absolute;
  right: 35px;
  font-size: 12px;
  color: #f59e0b;
  pointer-events: none;
}

.field-hint {
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
  margin-top: 4px;
}

/* Actions */
.profile-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.edit-btn,
.save-btn,
.cancel-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
  justify-content: center;
}

.edit-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.edit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.save-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.save-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

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

.cancel-btn {
  background: #f3f4f6;
  color: #374151;
  border: 2px solid #e5e7eb;
}

.cancel-btn:hover:not(:disabled) {
  background: #e5e7eb;
  transform: translateY(-1px);
}

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

.edit-actions {
  display: flex;
  gap: 12px;
}

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

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

/* Mobile Responsive */
@media (max-width: 640px) {
  .profile-modal {
    margin: 10px;
    max-width: calc(100vw - 20px);
  }
  
  .profile-header {
    padding: 20px 20px 16px;
  }
  
  .profile-header h2 {
    font-size: 18px;
  }
  
  .profile-content {
    padding: 20px;
  }
  
  .edit-actions {
    flex-direction: column;
  }
  
  .edit-btn,
  .save-btn,
  .cancel-btn {
    width: 100%;
    min-width: auto;
  }
}

/* Dark mode support (if needed later) */
@media (prefers-color-scheme: dark) {
  .profile-modal {
    background: #1f2937;
    color: #f9fafb;
  }
  
  .profile-header {
    border-bottom-color: #374151;
  }
  
  .input-wrapper input {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
  }
  
  .input-wrapper input.readonly {
    background: #2d3748;
    color: #9ca3af;
  }
  
  .field-group label {
    color: #e5e7eb;
  }
  
  .field-hint {
    color: #9ca3af;
  }
  
  .profile-actions {
    border-top-color: #374151;
  }
}
/* Enhanced Header Styles */
.header {
  background: var(--bg-primary);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  border-bottom: 1px solid var(--border-light);
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.header-content {
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  gap: var(--space-4);
}


/* Logo Styles */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--neutral-dark);
  font-family: var(--font-secondary);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  transition: color 0.3s ease;
}

.logo:hover {
  color: var(--primary-blue);
}

.logo-icon {
  font-size: var(--text-2xl);
}

.logo-text {
  white-space: nowrap;
}

/* Desktop Search */
.header-search {
  flex: 1 1;
  max-width: 500px;
  margin: 0 var(--space-6);
}

.header-search-bar {
  width: 100%;
}

/* Desktop Navigation */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Categories Dropdown */
.categories-dropdown {
  position: relative;
}

.categories-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  color: var(--neutral-dark);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all 0.3s ease;
}

.categories-btn:hover {
  background: var(--primary-blue);
  color: var(--neutral-white);
  border-color: var(--primary-blue);
}

.dropdown-arrow {
  font-size: var(--text-xs);
  transition: transform 0.3s ease;
}

.categories-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.categories-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: var(--z-dropdown);
  margin-top: var(--space-2);
}

.categories-dropdown:hover .categories-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.category-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--neutral-dark);
  text-decoration: none;
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--border-light);
}

.category-link:last-child {
  border-bottom: none;
}

.category-link:hover {
  background: var(--bg-secondary);
  color: var(--primary-blue);
  padding-left: var(--space-5);
}

/* Auth Links */
.auth-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--neutral-dark);
  text-decoration: none;
  font-weight: var(--font-medium);
  border-radius: var(--radius-base);
  transition: all 0.2s ease;
}

.nav-link:hover {
  background: var(--bg-secondary);
  color: var(--primary-blue);
}

.nav-icon {
  font-size: var(--text-base);
}

.login-link {
  color: var(--primary-blue);
  border: 1px solid var(--primary-blue);
}

.login-link:hover {
  background: var(--primary-blue);
  color: var(--neutral-white);
}

.signup-link {
  background: var(--primary-blue);
  color: var(--neutral-white);
  border: 1px solid var(--primary-blue);
}

.signup-link:hover {
  background: var(--primary-blue-dark);
  border-color: var(--primary-blue-dark);
}

/* User Menu */
.user-menu {
  position: relative;
}

.user-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.3s ease;
}

.user-btn:hover {
  border-color: var(--primary-blue);
}

.user-avatar {
  width: 32px;
  height: 32px;
  background: var(--primary-blue);
  color: var(--neutral-white);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}

.user-name {
  font-weight: var(--font-medium);
  color: var(--neutral-dark);
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 150px;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: var(--z-dropdown);
  margin-top: var(--space-2);
}

.user-menu:hover .user-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.logout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  color: var(--neutral-dark);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.logout-btn:hover {
  background: var(--error-light);
  color: var(--error);
}

/* Profile Button Styles */
.profile-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  color: var(--neutral-dark);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--border-light);
}

.profile-btn:hover {
  background: var(--bg-secondary);
  color: var(--primary-blue);
}

.profile-btn:last-child {
  border-bottom: none;
}

/* Mobile Controls */
.mobile-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Mobile Auth Buttons (Homepage only) */
.mobile-auth-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mobile-auth-btn {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-base);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: all 0.2s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.mobile-auth-btn.login-btn {
  color: var(--primary-blue);
  border: 1px solid var(--primary-blue);
  background: #02ff00;
}

.mobile-auth-btn.login-btn:hover,
.mobile-auth-btn.login-btn:active {
  background: var(--primary-blue);
  color: var(--neutral-white);
  transform: scale(0.98);
}

.mobile-auth-btn.signup-btn {
  background: red;
  color: var(--neutral-white);
  border: 1px solid var(--primary-blue);
}

.mobile-auth-btn.signup-btn:hover,
.mobile-auth-btn.signup-btn:active {
  background: var(--primary-blue-dark);
  border-color: var(--primary-blue-dark);
  transform: scale(0.98);
}

.mobile-search-btn {
  width: 44px;
  height: 44px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  cursor: pointer;
  transition: all 0.2s ease;
}

.mobile-search-btn:hover {
  background: var(--primary-blue);
  color: var(--neutral-white);
  border-color: var(--primary-blue);
}

/* Hamburger Menu Button */
.mobile-menu-btn {
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: var(--space-2);
}

.hamburger-line {
  width: 24px;
  height: 2px;
  background: var(--neutral-dark);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.mobile-menu-btn.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-btn.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Search */
.mobile-search {
  padding: var(--space-4);
  border-top: 1px solid var(--border-light);
  background: #f8f9fa;
  /* Ensure solid background without blur */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mobile-search-bar {
  width: 100%;
}

/* Mobile Menu */
.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  z-index: 1001; /* Higher than overlay to ensure menu is clickable */
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Ensure solid background without blur */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mobile-nav {
  padding: var(--space-4);
}

.mobile-section {
  margin-bottom: var(--space-6);
}

.mobile-section:last-child {
  margin-bottom: 0;
}

.mobile-section-title {
  font-family: var(--font-secondary);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--neutral-dark);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-light);
}

.mobile-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-gap: var(--space-2);
  gap: var(--space-2);
}

.mobile-category-link {
  padding: var(--space-3);
  background: #f8f9fa;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--neutral-dark);
  text-align: center;
  font-weight: var(--font-medium);
  transition: all 0.2s ease;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  /* Ensure solid background without blur */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* Ensure proper touch handling */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.mobile-category-link:hover,
.mobile-category-link:focus,
.mobile-category-link:active {
  background: var(--primary-blue);
  color: var(--neutral-white);
  border-color: var(--primary-blue);
  outline: none;
}

.mobile-category-link:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.mobile-user-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: #f8f9fa;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  /* Ensure solid background without blur */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mobile-user-avatar {
  width: 40px;
  height: 40px;
  background: var(--primary-blue);
  color: var(--neutral-white);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
}

.mobile-user-name {
  font-weight: var(--font-medium);
  color: var(--neutral-dark);
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: none;
  border: none;
  color: var(--neutral-dark);
  text-decoration: none;
  font-weight: var(--font-medium);
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
  width: 100%;
  text-align: left;
  margin-bottom: var(--space-2);
}

.mobile-nav-link:hover {
  background: #f8f9fa;
  color: var(--primary-blue);
  /* Ensure solid background without blur */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mobile-nav-link.signup-link {
  background: var(--primary-blue);
  color: var(--neutral-white);
}

.mobile-nav-link.signup-link:hover {
  background: var(--primary-blue-dark);
}

.mobile-nav-link.logout-btn:hover {
  background: var(--error-light);
  color: var(--error);
}

/* Mobile Profile Button */
.mobile-nav-link.profile-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
}

.mobile-nav-link.profile-btn:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  color: white;
  transform: translateY(-1px);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000; /* Lower than menu to allow menu clicks */
}

/* Enhanced Mobile Responsive Design */
@media (max-width: 768px) {
  .header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
  }
  
  .header-container {
    padding: 0 var(--space-3);
  }
  
  .header-content {
    height: 60px;
    gap: var(--space-3);
  }
  
  .logo {
    font-size: var(--text-lg);
  }
  
  .logo-icon {
    font-size: var(--text-xl);
  }
  
  .mobile-controls {
    gap: var(--space-2);
  }
  
  .mobile-auth-buttons {
    gap: var(--space-1);
  }
  
  .mobile-auth-btn {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .mobile-search-btn,
  .mobile-menu-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-base);
  }
  
  .mobile-search {
    padding: var(--space-3);
    background: var(--bg-primary);
    border-top: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
  }
  
  .mobile-menu {
    background: #ffffff;
    border-top: 1px solid var(--border-light);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 60px);
    z-index: 1001; /* Ensure menu is above overlay */
    /* Ensure crystal clear mobile menu */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
  }
  
  .mobile-nav {
    padding: var(--space-4);
  }
  
  .mobile-section {
    margin-bottom: var(--space-5);
  }
  
  .mobile-section-title {
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-1);
  }
  
  .mobile-categories {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--space-2);
  }
  
  .mobile-category-link {
    padding: var(--space-2);
    font-size: var(--text-sm);
    border-radius: var(--radius-base);
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  .mobile-category-link:active {
    transform: scale(0.95);
  }
  
  .mobile-user-info {
    padding: var(--space-3);
    border-radius: var(--radius-base);
    margin-bottom: var(--space-3);
  }
  
  .mobile-user-avatar {
    width: 32px;
    height: 32px;
    font-size: var(--text-sm);
  }
  
  .mobile-user-name {
    font-size: var(--text-sm);
  }
  
  .mobile-nav-link {
    padding: var(--space-3);
    font-size: var(--text-sm);
    border-radius: var(--radius-base);
    margin-bottom: var(--space-1);
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  .mobile-nav-link:active {
    transform: scale(0.98);
  }
  
  .mobile-menu-overlay {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 480px) {
  .header-content {
    height: 56px;
    padding: 0 var(--space-2);
  }
  
  .header-container {
    padding: 0 var(--space-2);
  }
  
  .logo {
    font-size: var(--text-base);
  }
  
  .logo-text {
    display: none;
  }
  
  .logo-icon {
    font-size: var(--text-lg);
  }
  
  .mobile-controls {
    gap: var(--space-1);
  }
  
  .mobile-auth-buttons {
    gap: 4px;
  }
  
  .mobile-auth-btn {
    padding: 8px 10px;
    font-size: 11px;
    border-radius: 4px;
    min-height: 28px;
    min-width: 50px;
  }
  
  .mobile-search-btn,
  .mobile-menu-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
  }
  
  .mobile-search {
    padding: var(--space-2);
  }
  
  .mobile-menu {
    max-height: calc(100vh - 56px);
  }
  
  .mobile-nav {
    padding: var(--space-3);
  }
  
  .mobile-section {
    margin-bottom: var(--space-4);
  }
  
  .mobile-section-title {
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
  }
  
  .mobile-categories {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  
  .mobile-category-link {
    padding: var(--space-2);
    font-size: var(--text-xs);
    min-height: 36px;
  }
  
  .mobile-user-info {
    padding: var(--space-2);
    margin-bottom: var(--space-2);
  }
  
  .mobile-user-avatar {
    width: 28px;
    height: 28px;
    font-size: var(--text-xs);
  }
  
  .mobile-user-name {
    font-size: var(--text-xs);
  }
  
  .mobile-nav-link {
    padding: var(--space-2);
    font-size: var(--text-xs);
    margin-bottom: var(--space-1);
    min-height: 40px;
  }
}

/* Touch interactions */
@media (max-width: 768px) {
  .mobile-search-btn,
  .mobile-menu-btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  .mobile-search-btn:active,
  .mobile-menu-btn:active {
    transform: scale(0.95);
  }
  
  /* Smooth menu animations */
  .mobile-menu {
    animation: slideDown 0.3s ease;
  }
  
  .mobile-search {
    animation: slideDown 0.2s ease;
  }
}

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

/* Focus States for Accessibility */
.categories-btn:focus,
.user-btn:focus,
.mobile-search-btn:focus,
.mobile-menu-btn:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.category-link:focus,
.nav-link:focus,
.mobile-category-link:focus,
.mobile-nav-link:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* Animation for smooth transitions */
@media (prefers-reduced-motion: no-preference) {
  .categories-menu,
  .user-dropdown,
  .mobile-menu {
    animation: slideDown 0.3s ease;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.footer {
  background-color: #333;
  color: white;
  margin-top: auto;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 30px;
  gap: 30px;
}

.footer-section h3,
.footer-section h4 {
  margin-bottom: 15px;
  color: #fff;
}

.footer-section p {
  color: #ccc;
  line-height: 1.6;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 8px;
}

.footer-section ul li a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-section ul li a:hover {
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid #555;
  padding: 20px;
  text-align: center;
  color: #ccc;
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
/* Notification Banner Styles */
.notification-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 15px 20px;
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.notification-banner.visible {
  transform: translateY(0);
}

.notification-banner.success {
  background: linear-gradient(135deg, #48bb78, #38a169);
  color: white;
}

.notification-banner.error {
  background: linear-gradient(135deg, #f56565, #e53e3e);
  color: white;
}

.notification-banner.info {
  background: linear-gradient(135deg, #4299e1, #3182ce);
  color: white;
}

.notification-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.notification-text h4 {
  margin: 0 0 5px 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.notification-text p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

.notification-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}

.notification-action-btn {
  background: rgba(255,255,255,0.2);
  color: white;
  padding: 8px 16px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: background-color 0.3s;
  border: 1px solid rgba(255,255,255,0.3);
}

.notification-action-btn:hover {
  background: rgba(255,255,255,0.3);
  color: white;
}

.notification-dismiss {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.notification-dismiss:hover {
  background: rgba(255,255,255,0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
  .notification-banner {
    padding: 12px 15px;
  }
  
  .notification-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .notification-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .notification-text h4 {
    font-size: 1rem;
  }
  
  .notification-text p {
    font-size: 0.85rem;
  }
  
  .notification-action-btn {
    font-size: 0.85rem;
    padding: 6px 12px;
  }
}

@media (max-width: 480px) {
  .notification-content {
    gap: 10px;
  }
  
  .notification-text h4 {
    font-size: 0.95rem;
  }
  
  .notification-text p {
    font-size: 0.8rem;
    line-height: 1.4;
  }
}
/* Design System - Color Palette */
:root {
  /* Primary Colors */
  --primary-blue: #3498db;
  --primary-blue-dark: #2980b9;
  --primary-blue-light: #5dade2;
  --primary-blue-lighter: #aed6f1;
  
  /* Secondary Colors */
  --secondary-green: #27ae60;
  --secondary-green-dark: #229954;
  --secondary-green-light: #58d68d;
  
  --secondary-orange: #f39c12;
  --secondary-orange-dark: #e67e22;
  --secondary-orange-light: #f8c471;
  
  --secondary-purple: #9b59b6;
  --secondary-purple-dark: #8e44ad;
  --secondary-purple-light: #bb8fce;
  
  /* Neutral Colors */
  --neutral-white: #ffffff;
  --neutral-light: #f8f9fa;
  --neutral-lighter: #e9ecef;
  --neutral-medium: #6c757d;
  --neutral-dark: #343a40;
  --neutral-darker: #212529;
  
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --bg-overlay: rgba(0, 0, 0, 0.5);
  
  /* Status Colors */
  --success: #28a745;
  --success-light: #d4edda;
  --warning: #ffc107;
  --warning-light: #fff3cd;
  --error: #dc3545;
  --error-light: #f8d7da;
  --info: #17a2b8;
  --info-light: #d1ecf1;
  
  /* Category Colors - Enhanced */
  --category-electronics: #3498db;
  --category-electronics-light: #85c1e9;
  --category-clothing: #e74c3c;
  --category-clothing-light: #f1948a;
  --category-food: #f39c12;
  --category-food-light: #f8c471;
  --category-services: #9b59b6;
  --category-services-light: #bb8fce;
  --category-kirana: #27ae60;
  --category-kirana-light: #7dcea0;
  --category-restaurant: #e67e22;
  --category-restaurant-light: #f0b27a;
  --category-bakery: #d35400;
  --category-bakery-light: #e59866;
  --category-jewelry: #f1c40f;
  --category-jewelry-light: #f7dc6f;
  --category-plumbing: #34495e;
  --category-plumbing-light: #85929e;
  --category-tiles: #95a5a6;
  --category-tiles-light: #bdc3c7;
  
  /* Gradient Colors */
  --gradient-primary: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--secondary-green) 0%, var(--secondary-green-dark) 100%);
  --gradient-hero: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-purple) 100%);
  
  /* Shadow Colors */
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.15);
  --shadow-dark: rgba(0, 0, 0, 0.25);
  
  /* Border Colors */
  --border-light: #e9ecef;
  --border-medium: #dee2e6;
  --border-dark: #adb5bd;
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #404040;
    --neutral-white: #ffffff;
    --neutral-light: #f8f9fa;
    --neutral-dark: #e9ecef;
    --neutral-darker: #ffffff;
    --border-light: #404040;
    --border-medium: #555555;
    --border-dark: #666666;
  }
}/* B
rand Colors - Professional Enhancement */
:root {
  /* Brand Primary Palette */
  --brand-primary: #2c3e50;
  --brand-primary-light: #34495e;
  --brand-primary-dark: #1a252f;
  
  --brand-secondary: #3498db;
  --brand-secondary-light: #5dade2;
  --brand-secondary-dark: #2980b9;
  
  --brand-accent: #e74c3c;
  --brand-accent-light: #ec7063;
  --brand-accent-dark: #c0392b;
  
  /* Professional Color Scheme */
  --professional-blue: #1e3a8a;
  --professional-blue-light: #3b82f6;
  --professional-blue-dark: #1e40af;
  
  --professional-green: #059669;
  --professional-green-light: #10b981;
  --professional-green-dark: #047857;
  
  --professional-orange: #ea580c;
  --professional-orange-light: #f97316;
  --professional-orange-dark: #c2410c;
  
  --professional-purple: #7c3aed;
  --professional-purple-light: #8b5cf6;
  --professional-purple-dark: #6d28d9;
  
  /* Semantic Colors - Enhanced */
  --success-primary: #22c55e;
  --success-secondary: #dcfce7;
  --success-border: #bbf7d0;
  
  --warning-primary: #f59e0b;
  --warning-secondary: #fef3c7;
  --warning-border: #fed7aa;
  
  --error-primary: #ef4444;
  --error-secondary: #fee2e2;
  --error-border: #fecaca;
  
  --info-primary: #3b82f6;
  --info-secondary: #dbeafe;
  --info-border: #bfdbfe;
  
  /* Interactive States */
  --interactive-hover: rgba(59, 130, 246, 0.1);
  --interactive-active: rgba(59, 130, 246, 0.2);
  --interactive-focus: rgba(59, 130, 246, 0.3);
  --interactive-disabled: rgba(107, 114, 128, 0.3);
  
  /* Surface Colors */
  --surface-primary: #ffffff;
  --surface-secondary: #f8fafc;
  --surface-tertiary: #f1f5f9;
  --surface-quaternary: #e2e8f0;
  
  /* Text Colors - Enhanced Hierarchy */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-quaternary: #94a3b8;
  --text-inverse: #ffffff;
  --text-link: #3b82f6;
  --text-link-hover: #2563eb;
  
  /* Border Colors - Enhanced */
  --border-primary: #e2e8f0;
  --border-secondary: #cbd5e1;
  --border-tertiary: #94a3b8;
  --border-focus: #3b82f6;
  --border-error: #ef4444;
  --border-success: #22c55e;
  
  /* Elevation Shadows - Professional */
  --elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --elevation-2: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --elevation-3: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --elevation-4: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --elevation-5: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --elevation-6: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Theme Variations */
.theme-professional {
  --primary-blue: var(--professional-blue);
  --primary-blue-light: var(--professional-blue-light);
  --primary-blue-dark: var(--professional-blue-dark);
}

.theme-vibrant {
  --primary-blue: #3b82f6;
  --secondary-green: #10b981;
  --secondary-orange: #f97316;
  --secondary-purple: #8b5cf6;
}

/* Color Utility Classes */
.text-brand-primary { color: #2c3e50; color: var(--brand-primary); }
.text-brand-secondary { color: #3498db; color: var(--brand-secondary); }
.text-brand-accent { color: #e74c3c; color: var(--brand-accent); }

.bg-brand-primary { background-color: #2c3e50; background-color: var(--brand-primary); }
.bg-brand-secondary { background-color: #3498db; background-color: var(--brand-secondary); }
.bg-brand-accent { background-color: #e74c3c; background-color: var(--brand-accent); }

.border-brand-primary { border-color: #2c3e50; border-color: var(--brand-primary); }
.border-brand-secondary { border-color: #3498db; border-color: var(--brand-secondary); }
.border-brand-accent { border-color: #e74c3c; border-color: var(--brand-accent); }

/* Status Color Classes */
.text-success { color: #22c55e; color: var(--success-primary); }
.text-warning { color: #f59e0b; color: var(--warning-primary); }
.text-error { color: #ef4444; color: var(--error-primary); }
.text-info { color: #3b82f6; color: var(--info-primary); }

.bg-success { background-color: #dcfce7; background-color: var(--success-secondary); }
.bg-warning { background-color: #fef3c7; background-color: var(--warning-secondary); }
.bg-error { background-color: #fee2e2; background-color: var(--error-secondary); }
.bg-info { background-color: #dbeafe; background-color: var(--info-secondary); }

.border-success { border-color: #bbf7d0; border-color: var(--success-border); }
.border-warning { border-color: #fed7aa; border-color: var(--warning-border); }
.border-error { border-color: #fecaca; border-color: var(--error-border); }
.border-info { border-color: #bfdbfe; border-color: var(--info-border); }
/* Design System - Typography */

:root {
  /* Font Families */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-secondary: 'Poppins', sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  
  /* Font Sizes - Mobile First */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */
  
  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
}

/* Responsive Typography */
@media (min-width: 768px) {
  :root {
    --text-lg: 1.25rem;     /* 20px */
    --text-xl: 1.5rem;      /* 24px */
    --text-2xl: 1.875rem;   /* 30px */
    --text-3xl: 2.25rem;    /* 36px */
    --text-4xl: 3rem;       /* 48px */
    --text-5xl: 3.75rem;    /* 60px */
    --text-6xl: 4.5rem;     /* 72px */
  }
}

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

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

.leading-tight { line-height: 1.25; line-height: var(--leading-tight); }
.leading-snug { line-height: 1.375; line-height: var(--leading-snug); }
.leading-normal { line-height: 1.5; line-height: var(--leading-normal); }
.leading-relaxed { line-height: 1.625; line-height: var(--leading-relaxed); }
.leading-loose { line-height: 2; line-height: var(--leading-loose); }

.tracking-tighter { letter-spacing: -0.05em; letter-spacing: var(--tracking-tighter); }
.tracking-tight { letter-spacing: -0.025em; letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: 0em; letter-spacing: var(--tracking-normal); }
.tracking-wide { letter-spacing: 0.025em; letter-spacing: var(--tracking-wide); }
.tracking-wider { letter-spacing: 0.05em; letter-spacing: var(--tracking-wider); }
.tracking-widest { letter-spacing: 0.1em; letter-spacing: var(--tracking-widest); }

/* Heading Styles */
.heading-1 {
  font-family: 'Poppins', sans-serif;
  font-family: var(--font-secondary);
  font-size: 2.25rem;
  font-size: var(--text-4xl);
  font-weight: 700;
  font-weight: var(--font-bold);
  line-height: 1.25;
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  letter-spacing: var(--tracking-tight);
}

.heading-2 {
  font-family: 'Poppins', sans-serif;
  font-family: var(--font-secondary);
  font-size: 1.875rem;
  font-size: var(--text-3xl);
  font-weight: 600;
  font-weight: var(--font-semibold);
  line-height: 1.25;
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  letter-spacing: var(--tracking-tight);
}

.heading-3 {
  font-family: 'Poppins', sans-serif;
  font-family: var(--font-secondary);
  font-size: 1.5rem;
  font-size: var(--text-2xl);
  font-weight: 600;
  font-weight: var(--font-semibold);
  line-height: 1.375;
  line-height: var(--leading-snug);
}

.heading-4 {
  font-family: 'Poppins', sans-serif;
  font-family: var(--font-secondary);
  font-size: 1.25rem;
  font-size: var(--text-xl);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.375;
  line-height: var(--leading-snug);
}

.heading-5 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-size: var(--text-lg);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.5;
  line-height: var(--leading-normal);
}

.heading-6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-size: var(--text-base);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.5;
  line-height: var(--leading-normal);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  letter-spacing: var(--tracking-wide);
}

/* Body Text Styles */
.body-large {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-size: var(--text-lg);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.625;
  line-height: var(--leading-relaxed);
}

.body-base {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-size: var(--text-base);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.5;
  line-height: var(--leading-normal);
}

.body-small {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-size: var(--text-sm);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.5;
  line-height: var(--leading-normal);
}

/* Caption and Label Styles */
.caption {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-size: var(--text-xs);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.5;
  line-height: var(--leading-normal);
  color: var(--neutral-medium);
}

.label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-size: var(--text-sm);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.5;
  line-height: var(--leading-normal);
  letter-spacing: 0.025em;
  letter-spacing: var(--tracking-wide);
}

/* Link Styles */
.link {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

.link:hover {
  color: var(--primary-blue-dark);
  text-decoration: underline;
}

.link:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}
/* Design System - Responsive Breakpoints and Utilities */

:root {
  /* Breakpoints */
  --breakpoint-xs: 320px;   /* Extra small devices */
  --breakpoint-sm: 576px;   /* Small devices */
  --breakpoint-md: 768px;   /* Medium devices */
  --breakpoint-lg: 992px;   /* Large devices */
  --breakpoint-xl: 1200px;  /* Extra large devices */
  --breakpoint-xxl: 1400px; /* Extra extra large devices */
  
  /* Container Max Widths */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1320px;
  
  /* Spacing Scale */
  --space-0: 0;
  --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 */
  --space-32: 8rem;     /* 128px */
  
  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.125rem;   /* 2px */
  --radius-base: 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-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* 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;
}

/* Container Classes */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-left: var(--space-4);
  padding-right: 1rem;
  padding-right: var(--space-4);
}

@media (min-width: 576px) {
  .container { max-width: 540px; max-width: var(--container-sm); }
}

@media (min-width: 768px) {
  .container { max-width: 720px; max-width: var(--container-md); }
}

@media (min-width: 992px) {
  .container { max-width: 960px; max-width: var(--container-lg); }
}

@media (min-width: 1200px) {
  .container { max-width: 1140px; max-width: var(--container-xl); }
}

@media (min-width: 1400px) {
  .container { max-width: 1320px; max-width: var(--container-xxl); }
}

/* Fluid Container */
.container-fluid {
  width: 100%;
  padding-left: 1rem;
  padding-left: var(--space-4);
  padding-right: 1rem;
  padding-right: var(--space-4);
}

/* Grid System */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(0.75rem * -1);
  margin-left: calc(var(--space-3) * -1);
  margin-right: calc(0.75rem * -1);
  margin-right: calc(var(--space-3) * -1);
}

.col {
  flex: 1 0;
  padding-left: 0.75rem;
  padding-left: var(--space-3);
  padding-right: 0.75rem;
  padding-right: var(--space-3);
}

/* Column Sizes */
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Responsive Column Classes */
@media (min-width: 576px) {
  .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 768px) {
  .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 992px) {
  .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Spacing Utilities */
.m-0 { margin: 0; margin: var(--space-0); }
.m-1 { margin: 0.25rem; margin: var(--space-1); }
.m-2 { margin: 0.5rem; margin: var(--space-2); }
.m-3 { margin: 0.75rem; margin: var(--space-3); }
.m-4 { margin: 1rem; margin: var(--space-4); }
.m-5 { margin: 1.25rem; margin: var(--space-5); }
.m-6 { margin: 1.5rem; margin: var(--space-6); }
.m-8 { margin: 2rem; margin: var(--space-8); }

.p-0 { padding: 0; padding: var(--space-0); }
.p-1 { padding: 0.25rem; padding: var(--space-1); }
.p-2 { padding: 0.5rem; padding: var(--space-2); }
.p-3 { padding: 0.75rem; padding: var(--space-3); }
.p-4 { padding: 1rem; padding: var(--space-4); }
.p-5 { padding: 1.25rem; padding: var(--space-5); }
.p-6 { padding: 1.5rem; padding: var(--space-6); }
.p-8 { padding: 2rem; padding: var(--space-8); }

/* Margin/Padding Directions */
.mt-0 { margin-top: 0; margin-top: var(--space-0); }
.mt-1 { margin-top: 0.25rem; margin-top: var(--space-1); }
.mt-2 { margin-top: 0.5rem; margin-top: var(--space-2); }
.mt-3 { margin-top: 0.75rem; margin-top: var(--space-3); }
.mt-4 { margin-top: 1rem; margin-top: var(--space-4); }
.mt-6 { margin-top: 1.5rem; margin-top: var(--space-6); }
.mt-8 { margin-top: 2rem; margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: 0.25rem; margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: 0.5rem; margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: 0.75rem; margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: 1rem; margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: 1.5rem; margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: 2rem; margin-bottom: var(--space-8); }

.pt-0 { padding-top: 0; padding-top: var(--space-0); }
.pt-1 { padding-top: 0.25rem; padding-top: var(--space-1); }
.pt-2 { padding-top: 0.5rem; padding-top: var(--space-2); }
.pt-3 { padding-top: 0.75rem; padding-top: var(--space-3); }
.pt-4 { padding-top: 1rem; padding-top: var(--space-4); }
.pt-6 { padding-top: 1.5rem; padding-top: var(--space-6); }
.pt-8 { padding-top: 2rem; padding-top: var(--space-8); }

.pb-0 { padding-bottom: 0; padding-bottom: var(--space-0); }
.pb-1 { padding-bottom: 0.25rem; padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: 0.5rem; padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: 0.75rem; padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: 1rem; padding-bottom: var(--space-4); }
.pb-6 { padding-bottom: 1.5rem; padding-bottom: var(--space-6); }
.pb-8 { padding-bottom: 2rem; padding-bottom: var(--space-8); }

/* Display Utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* Responsive Display */
@media (max-width: 767px) {
  .d-md-none { display: none; }
  .d-sm-block { display: block; }
  .d-sm-flex { display: flex; }
}

@media (min-width: 768px) {
  .d-md-block { display: block; }
  .d-md-flex { display: flex; }
  .d-sm-none { display: none; }
}

/* Flexbox Utilities */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

@media (max-width: 767px) {
  .text-sm-center { text-align: center; }
  .text-sm-left { text-align: left; }
}

/* Border Radius */
.rounded-none { border-radius: 0; border-radius: var(--radius-none); }
.rounded-sm { border-radius: 0.125rem; border-radius: var(--radius-sm); }
.rounded { border-radius: 0.25rem; border-radius: var(--radius-base); }
.rounded-md { border-radius: 0.375rem; border-radius: var(--radius-md); }
.rounded-lg { border-radius: 0.5rem; border-radius: var(--radius-lg); }
.rounded-xl { border-radius: 0.75rem; border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: 1rem; border-radius: var(--radius-2xl); }
.rounded-full { border-radius: 9999px; border-radius: var(--radius-full); }

/* Shadows */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); box-shadow: var(--shadow-sm); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); box-shadow: var(--shadow-base); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); box-shadow: var(--shadow-xl); }

/* Position */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }

/* Width and Height */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
/* Design System - Main Theme File */

/* Import theme components */

/* Global Reset and Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--neutral-dark);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  width: 100%;
  max-width: 100vw;
}

/* Focus Styles */
*:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

*:focus:not(:focus-visible) {
  outline: none;
}

/* Button Reset */
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Link Reset */
a {
  color: inherit;
  text-decoration: none;
}

/* List Reset */
ul, ol {
  list-style: none;
}

/* Image Reset */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Form Elements Reset */
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

/* Accessibility */
.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 */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--neutral-dark);
  color: var(--neutral-white);
  padding: 8px;
  text-decoration: none;
  border-radius: var(--radius-base);
  z-index: var(--z-tooltip);
  transition: top 0.3s;
}

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

/* Smooth Transitions - More Conservative */
a, button {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, 
              box-shadow 0.2s ease, opacity 0.2s ease;
}

/* Reduced Motion */
@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;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  :root {
    --primary-blue: #0066cc;
    --neutral-medium: #333333;
    --border-light: #666666;
  }
}

/* Layout Fixes */
.main-content,
.app,
#root {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* Container Fixes */
.container,
.container-fluid {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Prevent horizontal scrolling on all elements */
* {
  max-width: 100%;
}

/* Print Styles */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  img {
    page-break-inside: avoid;
  }
  
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  
  h2,
  h3 {
    page-break-after: avoid;
  }
}
/* Mobile-First Enhancements for Shopkeeper Experience */

/* Touch-friendly interactions */
@media (max-width: 768px) {
  /* Ensure minimum touch target size */
  button,
  .btn,
  .button,
  input[type="submit"],
  input[type="button"],
  a.button,
  .clickable {
    min-height: 20px;
    min-width: 20px;
    padding: 12px 16px;
    touch-action: manipulation;
  }

  /* Improve form inputs for mobile */
  input,
  select,
  textarea {
    font-size: 16px !important; /* Prevent zoom on iOS */
    padding: 12px;
    border-radius: 6px;
    border: 2px solid #e9ecef;
    transition: border-color 0.2s ease;
  }
  
  input:focus,
  select:focus,
  textarea:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
  }
  
  /* Better checkbox and radio buttons */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
    margin-right: 8px;
  }
  
  /* Improve file inputs */
  input[type="file"] {
    padding: 10px;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    cursor: pointer;
  }
  
  /* Better select dropdowns */
  /* select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23666' d='m2 0-2 2h4zm0 5 2-2h-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 40px;
    appearance: none;
    cursor: pointer;
  } */

  /* Better select dropdowns */
select {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 4 5%27%3E%3Cpath fill=%27%23666%27 d=%27M2 0 L0 2 H4 Z M2 5 L4 3 H0 Z%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 40px;
  appearance: none;
  cursor: pointer;
}

  
  /* Improve table responsiveness */
  table {
    width: 100%;
    overflow-x: auto;
    display: block;
    white-space: nowrap;
  }
  
  table tbody,
  table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  
  /* Better modal behavior on mobile */
  .modal,
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
  }
  
  .modal-content {
    max-height: 90vh;
    overflow-y: auto;
    margin: 5vh auto;
    padding: 20px;
    border-radius: 8px;
  }
  
  /* Improve loading states */
  .loading,
  .spinner {
    padding: 40px 20px;
    text-align: center;
  }
  
  /* Better error messages */
  .error-message,
  .success-message,
  .warning-message {
    padding: 12px 16px;
    border-radius: 6px;
    margin: 10px 0;
    font-size: 14px;
    line-height: 1.4;
  }
  
  /* Improve navigation */
  .breadcrumbs {
    font-size: 14px;
    padding: 10px 0;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  .breadcrumbs a {
    padding: 8px 12px;
    margin-right: 4px;
    border-radius: 4px;
    background: #f8f9fa;
    text-decoration: none;
    display: inline-block;
  }
  
  /* Better card layouts */
  .card,
  .product-card,
  .shop-card {
    margin-bottom: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  
  /* Improve grid layouts */
  .grid,
  .products-grid,
  .shop-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 16px;
    gap: 16px;
    padding: 0;
  }
  
  /* Better spacing */
  .container,
  .main-content {
    padding: 16px;
    margin: 0;
    max-width: 100%;
  }
  
  /* Improve typography */
  h1 { font-size: 24px; line-height: 1.2; margin-bottom: 16px; }
  h2 { font-size: 20px; line-height: 1.3; margin-bottom: 14px; }
  h3 { font-size: 18px; line-height: 1.3; margin-bottom: 12px; }
  h4 { font-size: 16px; line-height: 1.4; margin-bottom: 10px; }
  h5 { font-size: 15px; line-height: 1.4; margin-bottom: 8px; }
  h6 { font-size: 14px; line-height: 1.4; margin-bottom: 8px; }
  
  p { font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
  
  /* Better list styling */
  ul, ol {
    padding-left: 20px;
    margin-bottom: 16px;
  }
  
  li {
    margin-bottom: 4px;
    line-height: 1.4;
  }
  
  /* Improve link styling */
  a {
    color: #007bff;
    text-decoration: none;
    padding: 4px 0;
    display: inline-block;
  }
  
  a:hover,
  a:focus {
    color: #0056b3;
    text-decoration: underline;
  }
  
  /* Better image handling */
  img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
  }
  
  /* Improve scrollable areas */
  .scrollable {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }
  
  /* Better focus indicators */
  *:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    border-radius: 4px;
  }
  
  /* Improve disabled states */
  button:disabled,
  input:disabled,
  select:disabled,
  textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f8f9fa;
  }
  
  /* Better animation performance */
  * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  
  /* Improve sticky elements */
  .sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
}
}
/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
  /* Even more compact spacing */
  .container,
  .main-content {
    padding: 12px;
  }

  /* Smaller typography */
  h1 { font-size: 20px; }
  h2 { font-size: 18px; }
  h3 { font-size: 16px; }
  h4 { font-size: 15px; }
  h5, h6 { font-size: 14px; }

  p { font-size: 13px; }

  /* Smaller buttons */
  button,
  .btn,
  .button {
    padding: 10px 14px;
    font-size: 14px;
  }

  /* Smaller form inputs */
  input,
  select,
  textarea {
    padding: 10px;
    font-size: 16px; /* Still 16px to prevent zoom */
    border-radius: 6px;
    border: 2px solid #e9ecef;
    transition: border-color 0.2s ease;
  }

  /* More compact cards */
  .card,
  .product-card,
  .shop-card {
    margin-bottom: 12px;
    border-radius: 6px;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 12px !important;
  }

  /* Shop card specific fixes for text overlapping */
  .shop-card .shop-name {
    font-size: 1.1em !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
    text-align: center !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-height: none !important;
    -webkit-line-clamp: unset !important;
    line-clamp: initial !important;
    width: 100% !important;
  }

  .shop-card .shop-address {
    font-size: 0.9em !important;
    line-height: 1.3 !important;
    text-align: center !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    margin-bottom: 6px !important;
    max-height: none !important;
    -webkit-line-clamp: unset !important;
    line-clamp: initial !important;
    width: 100% !important;
  }

  .shop-card .shop-info {
    padding: 0 !important;
    text-align: left  !important;
    width: 100% !important;
  }

  .shop-card .shop-logo-container {
    margin-right: 0 !important;
    margin-bottom: 8px !important;
  }

  .shop-card .shop-logo {
    width: 70px !important;
    height: 70px !important;
  }

  /* Tighter grid spacing */
  .grid,
  .products-grid,
  .shop-grid {
    gap: 12px;
  }
}

/* Landscape orientation improvements */
@media (max-width: 768px) and (orientation: landscape) {
  /* Adjust modal heights for landscape */
  .modal-content {
    max-height: 80vh;
    margin: 10vh auto;
  }
  
  /* Better use of horizontal space */
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;
    gap: 16px;
  }
  
  /* Compact headers in landscape */
  .page-header {
    padding: 12px 0;
  }
  
  .page-header h1 {
    font-size: 20px;
    margin-bottom: 8px;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure crisp borders */
  input,
  select,
  textarea,
  button {
    border-width: 1px;
    margin:5px
  }
  
  /* Better image quality */
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Dark mode support (if needed) */
@media (prefers-color-scheme: dark) {
  /* This can be expanded if dark mode is implemented */
  .modal-content {
    background: #1a1a1a;
    color: #ffffff;
  }
}

/* Reduced motion preferences */
@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;
  }
}

/* Print styles for mobile */
@media print {
  .mobile-only,
  .mobile-nav,
  .mobile-menu {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
  }
  
  .container {
    padding: 0;
    margin: 0;
    max-width: none;
  }
}
/* ========================================
   COMPREHENSIVE TEXT VISIBILITY FIX
   HIGHEST PRIORITY OVERRIDES
   ======================================== */

/* CSS RESET - Remove problematic inheritance issues */
* {
  text-shadow: none !important;
}

/* FORCE BASE COLORS */
html {
  color: #0f172a !important;
  background-color: #ffffff !important;
}

/* Global text color improvements */
body {
  color: #0f172a !important;
  background-color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

/* Target specific problematic elements only */
nav, header, .header, .navbar {
  color: #0f172a !important;
}

/* Targeted text color overrides - only for problematic areas */
.header h1, .header h2, .header h3, .header h4, .header h5, .header h6,
.navbar h1, .navbar h2, .navbar h3, .navbar h4, .navbar h5, .navbar h6,
.admin-dashboard h1, .admin-dashboard h2, .admin-dashboard h3,
.shopkeeper-dashboard h1, .shopkeeper-dashboard h2, .shopkeeper-dashboard h3 {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* Specific overrides for common elements */
.text-primary, .primary-text {
  color: #0f172a !important;
}

.text-secondary, .secondary-text {
  color: #475569 !important;
}

.text-muted, .muted-text {
  color: #64748b !important;
}

/* Strong text elements */
strong, b {
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
  font-weight: 700;
}

/* Links - Force proper colors */
a, a:visited {
  color: black !important;
  text-decoration: none !important;
}

a:hover, a:focus {
  color: #2563eb !important;
  text-decoration: underline !important;
}

/* Form elements - Force visibility */
input, textarea, select, option {
  color: #0f172a !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

input::placeholder, textarea::placeholder {
  color: #64748b !important;
}

input:focus, textarea:focus, select:focus {
  color: #0f172a !important;
  background-color: #ffffff !important;
  border-color: #3b82f6 !important;
  outline: 2px solid rgba(59, 130, 246, 0.2) !important;
}

/* Button text visibility - COMPREHENSIVE */
button {
  font-weight: 600 !important;
  cursor: pointer !important;
}

/* Only fix buttons in header and admin areas */
.header button:not(.btn-transparent):not(.btn-outline):not(.logout-btn),
.navbar button:not(.btn-transparent):not(.btn-outline):not(.logout-btn),
.admin-dashboard button:not(.btn-transparent):not(.btn-outline):not(.logout-btn),
.shopkeeper-dashboard button:not(.btn-transparent):not(.btn-outline):not(.logout-btn) {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
  border: 1px solid #3b82f6 !important;
}

.header button:not(.btn-transparent):not(.btn-outline):not(.logout-btn):hover,
.navbar button:not(.btn-transparent):not(.btn-outline):not(.logout-btn):hover,
.admin-dashboard button:not(.btn-transparent):not(.btn-outline):not(.logout-btn):hover,
.shopkeeper-dashboard button:not(.btn-transparent):not(.btn-outline):not(.logout-btn):hover {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

.shopkeeper-dashboard button:not(.btn-transparent):not(.btn-outline):not(.logout-btn) {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #2563eb !important;
}

.shopkeeper-dashboard button:not(.btn-transparent):not(.btn-outline):not(.logout-btn):hover {
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
}

/* Transparent/outline buttons */
.btn-transparent, .btn-outline {
  background-color: transparent !important;
  color: #3b82f6 !important;
  border: 1px solid #3b82f6 !important;
}

.btn-transparent:hover, .btn-outline:hover {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* TARGETED FIXES - Only for admin and dashboard areas */

/* Admin dashboard cards only */
.admin-dashboard .analytics-card,
.admin-dashboard .stat-card,
.admin-dashboard .info-card,
.admin-dashboard .dashboard-card {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}

.admin-dashboard .analytics-card *,
.admin-dashboard .stat-card *,
.admin-dashboard .info-card *,
.admin-dashboard .dashboard-card * {
  color: #475569 !important;
}

.admin-dashboard .analytics-card h1, .admin-dashboard .analytics-card h2, .admin-dashboard .analytics-card h3,
.admin-dashboard .stat-card h1, .admin-dashboard .stat-card h2, .admin-dashboard .stat-card h3 {
  color: #0f172a !important;
}

/* Glass morphism containers - ensure text is visible */
.shop-header-enhanced,
.category-header,
.filter-bar,
.contact-actions,
.stats-container,
.products-header,
.no-results,
.related-categories,
.loading-container,
.error-container {
  background: rgba(255, 255, 255, 0.95) !important;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
}

/* Ensure text in glass morphism containers is dark */
.shop-header-enhanced *,
.category-header *,
.filter-bar *,
.contact-actions *,
.stats-container *,
.products-header *,
.no-results *,
.related-categories *,
.loading-container *,
.error-container * {
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
}

/* Navigation and header text */
.header, .admin-header, .dashboard-header {
  background-color: #ffffff !important;
  background-color: var(--surface-primary, #ffffff) !important;
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
}

.header *, .admin-header *, .dashboard-header * {
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
}

/* Shopkeeper Dashboard specific fixes */
.shopkeeper-dashboard {
  background-color: #f8fafc !important;
  background-color: var(--bg-secondary, #f8fafc) !important;
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
}

.shopkeeper-dashboard h1,
.shopkeeper-dashboard h2,
.shopkeeper-dashboard h3 {
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
}

.shop-section {
  background-color: #ffffff !important;
  background-color: var(--surface-primary, #ffffff) !important;
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
}

.shop-section * {
  color: #475569 !important;
  color: var(--text-secondary, #475569) !important;
}

.shop-section h2, .shop-section h3 {
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
}

/* Admin Dashboard specific fixes */
.admin-dashboard {
  background-color: #f8fafc !important;
  background-color: var(--bg-secondary, #f8fafc) !important;
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
}

.analytics-card {
  background-color: #ffffff !important;
  background-color: var(--surface-primary, #ffffff) !important;
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
}

.analytics-card h3 {
  color: #475569 !important;
  color: var(--text-secondary, #475569) !important;
}

.analytics-card .card-number {
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
  font-weight: 800;
}

/* Table text visibility */
table {
  background-color: #ffffff !important;
  background-color: var(--surface-primary, #ffffff) !important;
}

th {
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
  font-weight: 700;
}

td {
  color: #475569 !important;
  color: var(--text-secondary, #475569) !important;
}

/* Modal text visibility */
.modal-content {
  background-color: #ffffff !important;
  background-color: var(--surface-primary, #ffffff) !important;
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
}

.modal-content * {
  color: #475569 !important;
  color: var(--text-secondary, #475569) !important;
}

.modal-content h1, .modal-content h2, .modal-content h3 {
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
}

/* Status badges with proper contrast */
.status-badge {
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
}

.status-badge.live,
.status-badge.approved {
  background-color: #dcfce7 !important;
  background-color: var(--success-secondary, #dcfce7) !important;
  color: #22c55e !important;
  color: var(--success-primary, #22c55e) !important;
  border: 2px solid #22c55e;
  border: 2px solid var(--success-primary, #22c55e);
}

.status-badge.pending {
  background-color: #fef3c7 !important;
  background-color: var(--warning-secondary, #fef3c7) !important;
  color: #f59e0b !important;
  color: var(--warning-primary, #f59e0b) !important;
  border: 2px solid #f59e0b;
  border: 2px solid var(--warning-primary, #f59e0b);
}

.status-badge.rejected {
  background-color: #fee2e2 !important;
  background-color: var(--error-secondary, #fee2e2) !important;
  color: #ef4444 !important;
  color: var(--error-primary, #ef4444) !important;
  border: 2px solid #ef4444;
  border: 2px solid var(--error-primary, #ef4444);
}

/* Product and shop cards */
.product-name-enhanced,
.shop-name,
.shop-name-enhanced {
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
  font-weight: 700;
}

.product-price-enhanced,
.product-price {
  color: #22c55e !important;
  color: var(--success-primary, #22c55e) !important;
  font-weight: 800;
}

.product-description-enhanced,
.shop-description {
  color: #475569 !important;
  color: var(--text-secondary, #475569) !important;
}

/* Category page specific fixes */
.category-title {
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
  font-weight: 800;
}

.category-description {
  color: #475569 !important;
  color: var(--text-secondary, #475569) !important;
}

.shop-count {
  background: #3498db !important;
  background: var(--brand-secondary, #3498db) !important;
  color: white !important;
  font-weight: 600;
}

/* Form labels and inputs */
label {
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
  font-weight: 600;
}

.form-group label {
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
}

/* Error and success messages */
.error-message {
  background-color: #fee2e2 !important;
  background-color: var(--error-secondary, #fee2e2) !important;
  color: #ef4444 !important;
  color: var(--error-primary, #ef4444) !important;
  border-left: 4px solid #ef4444;
  border-left: 4px solid var(--error-primary, #ef4444);
}

.success-message {
  background-color: #dcfce7 !important;
  background-color: var(--success-secondary, #dcfce7) !important;
  color: #22c55e !important;
  color: var(--success-primary, #22c55e) !important;
  border-left: 4px solid #22c55e;
  border-left: 4px solid var(--success-primary, #22c55e);
}

/* Loading and empty states */
.loading-container p,
.no-results p,
.no-products-state p {
  color: #475569 !important;
  color: var(--text-secondary, #475569) !important;
}

.loading-container h3,
.no-results h3,
.no-products-state h3 {
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
}

/* Breadcrumbs and navigation */
.breadcrumb {
  color: #64748b !important;
  color: var(--text-tertiary, #64748b) !important;
}

.breadcrumb a {
  color: #3b82f6 !important;
  color: var(--text-link, #3b82f6) !important;
}

/* Footer text */
.footer {
  background-color: #212529 !important;
  background-color: var(--neutral-darker, #212529) !important;
  color: #f8f9fa !important;
  color: var(--neutral-light, #f8f9fa) !important;
}

.footer * {
  color: #f8f9fa !important;
  color: var(--neutral-light, #f8f9fa) !important;
}

/* Ensure gradient text is readable */
.gradient-text {
  background: linear-gradient(135deg, #0f172a, #3498db) !important;
  background: linear-gradient(135deg, var(--text-primary, #0f172a), var(--brand-secondary, #3498db)) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  * {
    color: #000000 !important;
    background-color: #ffffff !important;
  }
  
  button:not(.btn-transparent) {
    color: #ffffff !important;
    background-color: #000000 !important;
  }
  
  a {
    color: #0000ff !important;
  }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
  }
  
  .card, .shop-card, .product-card, .customer-product-card {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
  }
  
  .shop-header-enhanced,
  .category-header,
  .filter-bar,
  .contact-actions,
  .stats-container,
  .products-header {
    background: rgba(45, 45, 45, 0.95) !important;
    color: #ffffff !important;
  }
}

/* Print styles - ensure text is visible when printed */
@media print {
  * {
    color: #000000 !important;
    background: transparent !important;
  }
}
/* Header Background and Text Visibility Fixes */
.header {
  background: #ffffff !important;
  background: var(--bg-primary, #ffffff) !important;
  border-bottom: 1px solid #e9ecef !important;
  border-bottom: 1px solid var(--border-light, #e9ecef) !important;
}

.header-container,
.header-content {
  background: transparent !important;
}

.header .categories-btn {
  color: #343a40 !important;
  color: var(--neutral-dark, #343a40) !important;
  background: #f8f9fa !important;
  background: var(--bg-secondary, #f8f9fa) !important;
  border: 1px solid #e9ecef !important;
  border: 1px solid var(--border-light, #e9ecef) !important;
}

.header .categories-btn:hover {
  background: #3498db !important;
  background: var(--primary-blue, #3498db) !important;
  color: white !important;
}

.header .nav-link {
  color: #343a40 !important;
  color: var(--neutral-dark, #343a40) !important;
}

.header .nav-link:hover {
  background: #f8f9fa !important;
  background: var(--bg-secondary, #f8f9fa) !important;
  color: #3498db !important;
  color: var(--primary-blue, #3498db) !important;
}

.header .login-link {
  color: #3498db !important;
  color: var(--primary-blue, #3498db) !important;
  border: 1px solid #3498db !important;
  border: 1px solid var(--primary-blue, #3498db) !important;
  background: transparent !important;
}

.header .login-link:hover {
  background: #3498db !important;
  background: var(--primary-blue, #3498db) !important;
  color: white !important;
}

.header .signup-link {
  background: #3498db !important;
  background: var(--primary-blue, #3498db) !important;
  color: white !important;
  border: 1px solid #3498db !important;
  border: 1px solid var(--primary-blue, #3498db) !important;
}

.header .signup-link:hover {
  background: #2980b9 !important;
  background: var(--primary-blue-dark, #2980b9) !important;
  color: white !important;
  border-color: #2980b9 !important;
  border-color: var(--primary-blue-dark, #2980b9) !important;
}

/* User menu button */
.header .user-btn {
  background: #f8f9fa !important;
  background: var(--bg-secondary, #f8f9fa) !important;
  color: #343a40 !important;
  color: var(--neutral-dark, #343a40) !important;
}

.header .user-btn:hover {
  border-color: #3498db !important;
  border-color: var(--primary-blue, #3498db) !important;
}

.header .user-name {
  color: #343a40 !important;
  color: var(--neutral-dark, #343a40) !important;
}

.header .user-avatar {
  background: #3498db !important;
  background: var(--primary-blue, #3498db) !important;
  color: white !important;
}

/* Logout button */
.header .logout-btn {
  color: #343a40 !important;
  color: var(--neutral-dark, #343a40) !important;
  background: transparent !important;
}

.header .logout-btn:hover {
  background: #f8d7da !important;
  background: var(--error-light, #f8d7da) !important;
  color: #dc3545 !important;
  color: var(--error, #dc3545) !important;
}

/* Mobile controls */
.header .mobile-search-btn {
  background: #f8f9fa !important;
  background: var(--bg-secondary, #f8f9fa) !important;
  color: #343a40 !important;
  color: var(--neutral-dark, #343a40) !important;
}

.header .mobile-search-btn:hover {
  background: #3498db !important;
  background: var(--primary-blue, #3498db) !important;
  color: white !important;
}

.header .hamburger-line {
  background: #343a40 !important;
  background: var(--neutral-dark, #343a40) !important;
}

/* Mobile menu items */
.header .mobile-category-link {
  background: #f8f9fa !important;
  background: var(--bg-secondary, #f8f9fa) !important;
  color: #343a40 !important;
  color: var(--neutral-dark, #343a40) !important;
}

.header .mobile-category-link:hover {
  background: #3498db !important;
  background: var(--primary-blue, #3498db) !important;
  color: white !important;
}

.header .mobile-nav-link {
  color: #343a40 !important;
  color: var(--neutral-dark, #343a40) !important;
}

.header .mobile-nav-link:hover {
  background: #f8f9fa !important;
  background: var(--bg-secondary, #f8f9fa) !important;
  color: #3498db !important;
  color: var(--primary-blue, #3498db) !important;
}

.header .mobile-nav-link.signup-link {
  background: #3498db !important;
  background: var(--primary-blue, #3498db) !important;
  color: white !important;
}

.header .mobile-nav-link.signup-link:hover {
  background: #2980b9 !important;
  background: var(--primary-blue-dark, #2980b9) !important;
  color: white !important;
}

.header .mobile-nav-link.logout-btn:hover {
  background: #f8d7da !important;
  background: var(--error-light, #f8d7da) !important;
  color: #dc3545 !important;
  color: var(--error, #dc3545) !important;
}

/* Category dropdown menu */
.header .category-link {
  color: #343a40 !important;
  color: var(--neutral-dark, #343a40) !important;
}

.header .category-link:hover {
  background: #f8f9fa !important;
  background: var(--bg-secondary, #f8f9fa) !important;
  color: #3498db !important;
  color: var(--primary-blue, #3498db) !important;
}

/* User dropdown menu */
.header .user-dropdown {
  background: #ffffff !important;
  background: var(--bg-primary, #ffffff) !important;
}

.header .categories-menu {
  background: #ffffff !important;
  background: var(--bg-primary, #ffffff) !important;
}

/* Mobile user info */
.header .mobile-user-name {
  color: #343a40 !important;
  color: var(--neutral-dark, #343a40) !important;
}

.header .mobile-user-avatar {
  background: #3498db !important;
  background: var(--primary-blue, #3498db) !important;
  color: white !important;
}

/* Logo text */
.header .logo {
  color: #343a40 !important;
  color: var(--neutral-dark, #343a40) !important;
}

.header .logo:hover {
  color: #3498db !important;
  color: var(--primary-blue, #3498db) !important;
}

/* Ensure all header text is properly visible */
.header * {
  transition: all 0.3s ease;
}

/* Fix any remaining purple background issues */
.header button:not(.logout-btn):not(.mobile-nav-link) {
  background: #f8f9fa !important;
  background: var(--bg-secondary, #f8f9fa) !important;
  color: #343a40 !important;
  color: var(--neutral-dark, #343a40) !important;
  border: 1px solid #e9ecef !important;
  border: 1px solid var(--border-light, #e9ecef) !important;
}

.header button:not(.logout-btn):not(.mobile-nav-link):hover {
  background: #3498db !important;
  background: var(--primary-blue, #3498db) !important;
  color: white !important;
  border-color: #3498db !important;
  border-color: var(--primary-blue, #3498db) !important;
}

/* Override any gradient backgrounds on header buttons */
.header button,
.header .nav-link,
.header .categories-btn,
.header .user-btn,
.header .mobile-search-btn {
  background-image: none !important;
  background: #f8f9fa !important;
  background: var(--bg-secondary, #f8f9fa) !important;
  color: #343a40 !important;
  color: var(--neutral-dark, #343a40) !important;
}

/* Specific overrides for primary action buttons */
.header .signup-link,
.header .mobile-nav-link.signup-link {
  background: #3498db !important;
  background: var(--primary-blue, #3498db) !important;
  background-image: none !important;
  color: white !important;
}

/* Ensure no purple gradients are applied */
.header * {
  background-image: none !important;
}

.header .categories-btn,
.header .user-btn,
.header .mobile-search-btn,
.header .nav-link:not(.signup-link) {
  background: #f8f9fa !important;
  background: var(--bg-secondary, #f8f9fa) !important;
  color: #343a40 !important;
  color: var(--neutral-dark, #343a40) !important;
  border: 1px solid #e9ecef !important;
  border: 1px solid var(--border-light, #e9ecef) !important;
}

/* Special handling for primary buttons */
.header .signup-link,
.header .mobile-nav-link.signup-link {
  background: #3498db !important;
  background: var(--primary-blue, #3498db) !important;
  color: white !important;
}

.header .signup-link:hover,
.header .mobile-nav-link.signup-link:hover {
  background: #2980b9 !important;
  background: var(--primary-blue-dark, #2980b9) !important;
  color: white !important;
}
/* =
=======================================
   COMPREHENSIVE PAGE-SPECIFIC OVERRIDES
   ======================================== */

/* REMOVE OVERLY AGGRESSIVE PAGE OVERRIDES - Let designed styles work */

/* SHOPKEEPER DASHBOARD - Only fix headers and key elements */
.shopkeeper-dashboard .dashboard-header {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

.shopkeeper-dashboard .dashboard-header h1,
.shopkeeper-dashboard .dashboard-header h2,
.shopkeeper-dashboard .dashboard-header h3 {
  color: #0f172a !important;
  margin-left: 20px !important;
}

/* ADMIN DASHBOARD - Only fix headers and analytics */
.admin-dashboard .admin-header {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

.admin-dashboard .admin-header h1,
.admin-dashboard .admin-header h2,
.admin-dashboard .admin-header h3 {
  color: #0f172a !important;
}

/* LOGIN/SIGNUP PAGES */
.auth-page, .login-page, .signup-page {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

.auth-container, .login-container, .signup-container {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

.auth-container *, .login-container *, .signup-container * {
  color: #475569 !important;
}

.auth-title, .login-title, .signup-title {
  color: #0f172a !important;
}

/* SEARCH PAGES */
.search-page {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

.search-page * {
  color: #475569 !important;
}

.search-page h1, .search-page h2, .search-page h3, .search-page h4, .search-page h5, .search-page h6 {
  color: #0f172a !important;
}

/* ========================================
   HEADER COMPREHENSIVE OVERRIDES
   ======================================== */

/* FORCE header background and text */
.header, .navbar, .nav, .navigation {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

/* ALL header elements */
.header *, .navbar *, .nav *, .navigation * {
  color: black !important;
}

/* Header links and buttons */
.header a, .navbar a, .nav a, .navigation a {
  color: #000000 !important;
}

.header a:hover, .navbar a:hover, .nav a:hover, .navigation a:hover {
  color: #2563eb !important;
}

/* Header buttons */
.header button, .navbar button, .nav button, .navigation button {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}

.header button:hover, .navbar button:hover, .nav button:hover, .navigation button:hover {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* Primary buttons in header */
.header .btn-primary, .navbar .btn-primary, .nav .btn-primary, .navigation .btn-primary,
.header .signup-link, .navbar .signup-link, .nav .signup-link, .navigation .signup-link {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
  border: 1px solid #3b82f6 !important;
}

.header .btn-primary:hover, .navbar .btn-primary:hover, .nav .btn-primary:hover, .navigation .btn-primary:hover,
.header .signup-link:hover, .navbar .signup-link:hover, .nav .signup-link:hover, .navigation .signup-link:hover {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

/* ========================================
   MODAL AND OVERLAY OVERRIDES
   ======================================== */

.modal, .modal-content, .modal-dialog, .modal-body, .modal-header, .modal-footer {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

.modal *, .modal-content *, .modal-dialog *, .modal-body *, .modal-header *, .modal-footer * {
  color: #475569 !important;
}

.modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6,
.modal-content h1, .modal-content h2, .modal-content h3, .modal-content h4, .modal-content h5, .modal-content h6 {
  color: #0f172a !important;
}

/* ========================================
   TABLE OVERRIDES - Only for admin dashboard
   ======================================== */

.admin-dashboard table, .admin-dashboard .table {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

.admin-dashboard th, .admin-dashboard .table th {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

.admin-dashboard td, .admin-dashboard .table td {
  color: #475569 !important;
}

/* ========================================
   FORM OVERRIDES - Only for admin and auth pages
   ======================================== */

.admin-dashboard .form-label, .admin-dashboard .form-group label, .admin-dashboard label,
.auth-container .form-label, .auth-container .form-group label, .auth-container label,
.login-container .form-label, .login-container .form-group label, .login-container label {
  color: #0f172a !important;
  font-weight: 600 !important;
}

.admin-dashboard .form-control, .admin-dashboard .form-input, .admin-dashboard .form-select, .admin-dashboard .form-textarea,
.auth-container .form-control, .auth-container .form-input, .auth-container .form-select, .auth-container .form-textarea,
.login-container .form-control, .login-container .form-input, .login-container .form-select, .login-container .form-textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

/* ========================================
   NAVIGATION MENU OVERRIDES
   ======================================== */

.menu, .dropdown-menu, .nav-menu, .mobile-menu {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}

.menu *, .dropdown-menu *, .nav-menu *, .mobile-menu * {
  color: #475569 !important;
}

.menu a, .dropdown-menu a, .nav-menu a, .mobile-menu a {
  color: #3b82f6 !important;
}

.menu a:hover, .dropdown-menu a:hover, .nav-menu a:hover, .mobile-menu a:hover {
  background-color: #f1f5f9 !important;
  color: #2563eb !important;
}

/* ========================================
   SIDEBAR OVERRIDES
   ======================================== */

.sidebar, .side-nav, .side-menu {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-right: 1px solid #e2e8f0 !important;
}

.sidebar *, .side-nav *, .side-menu * {
  color: #475569 !important;
}

.sidebar h1, .sidebar h2, .sidebar h3, .sidebar h4, .sidebar h5, .sidebar h6,
.side-nav h1, .side-nav h2, .side-nav h3, .side-nav h4, .side-nav h5, .side-nav h6,
.side-menu h1, .side-menu h2, .side-menu h3, .side-menu h4, .side-menu h5, .side-menu h6 {
  color: #0f172a !important;
}

/* ========================================
   FOOTER OVERRIDES
   ======================================== */

.footer {
  background-color: #1f2937 !important;
  color: #f9fafb !important;
}

.footer * {
  color: #d1d5db !important;
}

.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
  color: #f9fafb !important;
}

.footer a {
  color: #93c5fd !important;
}

.footer a:hover {
  color: #dbeafe !important;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-white { color: #ffffff !important; }
.text-black { color: #000000 !important; }
.text-gray { color: #6b7280 !important; }
.text-blue { color: #3b82f6 !important; }
.text-red { color: #ef4444 !important; }
.text-green { color: #10b981 !important; }
.text-yellow { color: #f59e0b !important; }

.bg-white { background-color: #ffffff !important; }
.bg-gray { background-color: #f3f4f6 !important; }
.bg-blue { background-color: #3b82f6 !important; }
.bg-red { background-color: #ef4444 !important; }
.bg-green { background-color: #10b981 !important; }
.bg-yellow { background-color: #f59e0b !important; }

/* ========================================
   TARGETED FINAL OVERRIDES
   ======================================== */

/* Only override gradient text in problematic areas */
.header .gradient-text, .header .text-gradient,
.admin-dashboard .gradient-text, .admin-dashboard .text-gradient {
  background: none !important;
  color: #0f172a !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: border-box !important;
  background-clip: initial !important;
}

/* Ensure proper contrast for all interactive elements */
button, a, input, select, textarea {
  transition: all 0.2s ease !important;
}

/* High contrast mode - make everything black and white */
@media (prefers-contrast: high) {
  * {
    color: #000000 !important;
    background-color: #ffffff !important;
    border-color: #000000 !important;
  }
  
  button, .btn {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
  }
  
  a {
    color: #0000ff !important;
    text-decoration: underline !important;
  }
}/*
   PRESERVE DESIGNED LAYOUTS
   ======================================== */

/* Allow homepage and shop detail pages to use their designed styles */
.homepage, .home-page, .shop-detail-page, .category-page {
  /* Let these pages use their original styling */
}

/* Don't override product cards and shop cards on customer pages */
.homepage .shop-card,
.homepage .product-card,
.homepage .customer-product-card,
.shop-detail-page .shop-card,
.shop-detail-page .product-card,
.shop-detail-page .customer-product-card,
.category-page .shop-card,
.category-page .product-card,
.category-page .customer-product-card {
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll !important;
  background: initial !important;
  color: inherit !important;
}

/* Don't override hero sections and featured content */
.hero-section, .featured-section, .value-proposition-section {
  /* Preserve original styling */
}

/* Don't override product images and carousels */
.product-image-enhanced, .product-carousel, .shop-logo-enhanced {
  /* Preserve original styling */
}

/* Preserve gradient text in designed areas */
.category-title, .shop-name-enhanced, .product-name-enhanced, .products-title-enhanced {
  /* Let these keep their gradient text styling */
}
/* Hero Section Styles */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--gradient-hero);
  color: var(--neutral-white);
  overflow: hidden;
}

/* Background Image */
.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.hero-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(52, 152, 219, 0.8) 0%, 
    rgba(155, 89, 182, 0.8) 100%);
}

/* Container */
.hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* Content Layout */
.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--space-12);
  gap: var(--space-12);
  align-items: center;
  margin-bottom: var(--space-16);
}

.hero-text {
  max-width: 600px;
}

.hero-title {
  font-family: var(--font-secondary);
  font-size: var(--text-6xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-6);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Call to Action Buttons */
.hero-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-xl);
  font-family: var(--font-secondary);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.hero-cta-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 ease;
}

.hero-cta-btn:hover::before {
  left: 100%;
}

.hero-cta-btn.primary {
  background: var(--neutral-white);
  color: var(--primary-blue);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.hero-cta-btn.primary:hover {
  background: var(--neutral-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.hero-cta-btn.secondary {
  background: transparent;
  color: var(--neutral-white);
  border: 2px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.hero-cta-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.cta-arrow {
  font-size: var(--text-xl);
  transition: transform 0.3s ease;
}

.hero-cta-btn:hover .cta-arrow {
  transform: translateX(4px);
}

.cta-icon {
  font-size: var(--text-lg);
}

/* Hero Visual */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-illustration {
  position: relative;
  width: 400px;
  height: 400px;
}

.shop-icons {
  position: relative;
  width: 100%;
  height: 100%;
}

.shop-icon {
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  animation: float 3s ease-in-out infinite;
}

.shop-1 { top: 10%; left: 20%; animation-delay: 0s; }
.shop-2 { top: 20%; right: 10%; animation-delay: 0.5s; }
.shop-3 { top: 50%; left: 10%; animation-delay: 1s; }
.shop-4 { top: 60%; right: 20%; animation-delay: 1.5s; }
.shop-5 { bottom: 20%; left: 30%; animation-delay: 2s; }
.shop-6 { bottom: 10%; right: 30%; animation-delay: 2.5s; }

.connection-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.line {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  height: 2px;
  animation: pulse 2s ease-in-out infinite;
}

.line-1 {
  top: 30%;
  left: 25%;
  width: 50%;
  transform: rotate(15deg);
}

.line-2 {
  top: 50%;
  left: 20%;
  width: 60%;
  transform: rotate(-10deg);
  animation-delay: 0.7s;
}

.line-3 {
  bottom: 30%;
  left: 30%;
  width: 40%;
  transform: rotate(25deg);
  animation-delay: 1.4s;
}

/* Hero Stats */
.hero-stats-section {
  text-align: center;
  margin-top: var(--space-8);
}

.hero-stats-title {
  font-family: var(--font-secondary);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--neutral-white);
  margin-bottom: var(--space-6);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--space-8);
  gap: var(--space-8);
  padding: var(--space-8);
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-2xl);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

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

.stat-number {
  font-family: var(--font-secondary);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: #1a1a1a;
  margin-bottom: var(--space-2);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.stat-label {
  font-size: var(--text-sm);
  color: #2c2c2c;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--font-bold);
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.8);
  animation: bounce 2s infinite;
}

.scroll-arrow {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
}

.scroll-text {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

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

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: center;
  }
  
  .hero-visual {
    order: -1;
  }
  
  .hero-illustration {
    width: 300px;
    height: 300px;
  }
  
  .shop-icon {
    width: 50px;
    height: 50px;
    font-size: var(--text-xl);
  }
  
  .hero-stats-title {
    font-size: var(--text-xl);
  }
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 80vh;
    padding: var(--space-8) 0;
  }
  
  .hero-title {
    font-size: var(--text-4xl);
  }
  
  .hero-subtitle {
    font-size: var(--text-lg);
  }
  
  .hero-actions {
    justify-content: center;
  }
  
  .hero-cta-btn {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-base);
  }
  
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    padding: var(--space-6);
  }
  
  .stat-number {
    font-size: var(--text-2xl);
  }
  
  .hero-visual {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: var(--text-3xl);
  }
  
  .hero-subtitle {
    font-size: var(--text-base);
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-cta-btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
  
  .hero-stats {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
  }
  
  .hero-stats-title {
    font-size: 30px;
  }
  
  .scroll-indicator {
    bottom: var(--space-4);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .shop-icon,
  .line,
  .scroll-indicator {
    animation: none;
  }
  
  .hero-cta-btn::before {
    display: none;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .hero-section {
    background: linear-gradient(135deg, #000066 0%, #660066 100%);
  }
  
  .hero-title {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
  }
  
  .hero-cta-btn.primary {
    background: #ffffff;
    color: #000000;
    border: 2px solid #000000;
  }
}
/* Enhanced Shop Card Styles */
.enhanced-shop-card {
  background: white;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

.enhanced-shop-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #6366F1 0%, transparent 100%);
  background: linear-gradient(135deg, var(--category-color, #6366F1) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.enhanced-shop-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.enhanced-shop-card:hover::before {
  opacity: 0.03;
}

/* Enhanced Banner Image Section */
.enhanced-shop-banner-container {
  height: 200px;
  position: relative;
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  background: linear-gradient(135deg, var(--category-color, #6366F1) 0%, #8B5CF6 100%);
  overflow: hidden;
  flex-shrink: 0;
}

.enhanced-shop-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}

.enhanced-shop-banner-image.loaded {
  opacity: 1;
}

.enhanced-shop-card:hover .enhanced-shop-banner-image {
  transform: scale(1.1);
}

.enhanced-shop-banner-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  background: linear-gradient(135deg, var(--category-color, #6366F1) 0%, #8B5CF6 100%);
}

.enhanced-shop-initial {
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  color: white;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Enhanced Category Badge */
.enhanced-shop-category-badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  z-index: 2;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.enhanced-shop-card:hover .enhanced-shop-category-badge {
  transform: scale(1.05);
  background: white;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.enhanced-category-icon {
  font-size: var(--text-base);
}

.enhanced-category-text {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: #6366F1;
  color: var(--category-color, #6366F1);
}

/* Status Badge */
.enhanced-shop-status-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: rgba(34, 197, 94, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  z-index: 2;
  transition: all 0.3s ease;
}

.enhanced-shop-card:hover .enhanced-shop-status-badge {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.3);
}

.enhanced-status-icon {
  font-size: var(--text-sm);
  color: white;
}

.enhanced-status-text {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: white;
}



/* Enhanced Shop Header */
.enhanced-shop-header {
  padding: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.02) 0%, rgba(139, 92, 246, 0.02) 100%);
  position: relative;
  z-index: 1;
}

.enhanced-shop-logo-container {
  position: relative;
  flex-shrink: 0;
}

.enhanced-shop-logo {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  display: block;
  overflow: hidden;
}

.enhanced-shop-card:hover .enhanced-shop-logo {
  transform: scale(1.1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.enhanced-shop-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: white;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  animation: enhanced-pulse 2s infinite;
}

@keyframes enhanced-pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.enhanced-badge-icon {
  font-size: var(--text-xs);
}

.enhanced-shop-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.enhanced-shop-name {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--neutral-dark);
  margin-bottom: var(--space-2);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}



.enhanced-shop-description {
  font-size: var(--text-sm);
  color: var(--neutral-medium);
  line-height: var(--leading-relaxed);
  overflow: auto;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Enhanced Shop Details */
.enhanced-shop-details {
  padding: var(--space-5);
  background: rgba(248, 250, 252, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 1;
}

.enhanced-detail-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.enhanced-detail-item:last-child {
  margin-bottom: 0;
}

.enhanced-detail-icon {
  font-size: var(--text-lg);
  color: #6366F1;
  color: var(--category-color, #6366F1);
  flex-shrink: 0;
  margin-top: 2px;
}

.enhanced-detail-content {
  flex: 1 1;
  min-width: 0;
}

.enhanced-detail-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--neutral-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-1);
}

.enhanced-detail-text {
  display: block;
  font-size: var(--text-sm);
  color: var(--neutral-dark);
  font-weight: var(--font-medium);
  line-height: var(--leading-relaxed);
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}

/* Enhanced Featured Products */
.enhanced-featured-products {
  padding: var(--space-5);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.02) 0%, rgba(139, 92, 246, 0.02) 100%);
  flex-grow: 1;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 1;
}

.enhanced-featured-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.enhanced-featured-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--neutral-dark);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.enhanced-featured-icon {
  font-size: var(--text-base);
  color: #6366F1;
  color: var(--category-color, #6366F1);
}

.enhanced-product-count {
  font-size: var(--text-xs);
  color: var(--neutral-medium);
  background: rgba(99, 102, 241, 0.1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-weight: var(--font-medium);
}

.enhanced-product-previews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: var(--space-3);
  gap: var(--space-3);
}

.enhanced-product-preview {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.enhanced-product-preview:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.enhanced-product-image {
  height: 80px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--neutral-lighter);
  position: relative;
}

.enhanced-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.enhanced-product-preview:hover .enhanced-product-image img {
  transform: scale(1.1);
}

.enhanced-no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background: var(--neutral-lighter);
  color: var(--neutral-medium);
}

.enhanced-no-image-icon {
  font-size: var(--text-2xl);
}

.enhanced-product-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(37, 211, 102, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.enhanced-product-preview:hover .enhanced-product-overlay {
  opacity: 1;
}

.enhanced-whatsapp-icon {
  font-size: var(--text-xl);
  color: white;
}

.enhanced-product-info {
  padding: var(--space-2);
  text-align: center;
}

.enhanced-product-name {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--neutral-dark);
  margin-bottom: var(--space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}

.enhanced-product-price {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: #6366F1;
  color: var(--category-color, #6366F1);
  margin: 0;
}

/* Enhanced Shop Actions */
.enhanced-shop-actions {
  padding: 0;
  position: relative;
  z-index: 1;
}

.enhanced-view-shop-button {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  background: linear-gradient(135deg, var(--category-color, #6366F1) 0%, #8B5CF6 100%);
  color: white;
  padding: var(--space-4);
  text-align: center;
  text-decoration: none;
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  cursor: pointer;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.enhanced-view-shop-button::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;
}

.enhanced-view-shop-button:hover::before {
  left: 100%;
}

.enhanced-view-shop-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

.enhanced-button-icon {
  font-size: var(--text-lg);
}

.enhanced-button-text {
  flex: 1 1;
}

.enhanced-button-arrow {
  font-size: var(--text-lg);
  transition: transform 0.3s ease;
}

.enhanced-view-shop-button:hover .enhanced-button-arrow {
  transform: translateX(4px);
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
  .enhanced-shop-banner-container {
    height: 160px;
  }

  .enhanced-shop-initial {
    font-size: var(--text-3xl);
  }

  .enhanced-shop-category-badge,
  .enhanced-shop-status-badge {
    padding: var(--space-1) var(--space-2);
  }

  .enhanced-category-text,
  .enhanced-status-text {
    font-size: var(--text-xs);
  }

  .enhanced-shop-header {
    padding: var(--space-4);
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }

  .enhanced-shop-logo {
    width: 70px;
    height: 70px;
  }

  .enhanced-shop-name {
    font-size: var(--text-lg);
    text-align: center;
  }

  .enhanced-shop-description {
    text-align: center;
  }

  .enhanced-shop-details {
    padding: var(--space-4);
  }

  .enhanced-detail-item {
    margin-bottom: var(--space-2);
  }

  .enhanced-featured-products {
    padding: var(--space-4);
  }

  .enhanced-product-previews {
    gap: var(--space-2);
  }

  .enhanced-product-image {
    height: 60px;
  }
}

@media (max-width: 480px) {
  .enhanced-shop-banner-container {
    height: 140px;
  }

  .enhanced-shop-initial {
    font-size: var(--text-2xl);
  }

  .enhanced-shop-category-badge {
    top: var(--space-2);
    left: var(--space-2);
    padding: 4px var(--space-2);
  }

  .enhanced-shop-status-badge {
    top: var(--space-2);
    right: var(--space-2);
    padding: 4px var(--space-2);
  }

  .enhanced-category-text,
  .enhanced-status-text {
    display: none;
  }

  .enhanced-shop-header {
    padding: var(--space-3);
  }

  .enhanced-shop-logo {
    width: 60px;
    height: 60px;
  }

  .enhanced-shop-name {
    font-size: var(--text-base);
  }

  .enhanced-shop-details {
    padding: var(--space-3);
  }

  .enhanced-featured-products {
    padding: var(--space-3);
  }

  .enhanced-product-image {
    height: 50px;
  }

  .enhanced-product-info {
    padding: var(--space-1);
  }

  .enhanced-product-name {
    font-size: 10px;
    -webkit-line-clamp: 1;
  }

  .enhanced-product-price {
    font-size: 10px;
  }
}

/* Touch-friendly improvements */
@media (max-width: 768px) {

  .enhanced-shop-card,
  .enhanced-product-preview,
  .enhanced-view-shop-button {
    -webkit-tap-highlight-color: transparent;
  }

  .enhanced-shop-card:active {
    transform: translateY(-4px) scale(0.98);
  }

  .enhanced-product-preview:active {
    transform: translateY(-1px) scale(0.95);
  }

  .enhanced-view-shop-button {
    min-height: 44px;
  }
}

/* Accessibility */
.enhanced-shop-card:focus,
.enhanced-view-shop-button:focus,
.enhanced-product-preview:focus {
  outline: 2px solid #6366F1;
  outline: 2px solid var(--category-color, #6366F1);
  outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {

  .enhanced-shop-card,
  .enhanced-shop-banner-image,
  .enhanced-shop-logo,
  .enhanced-product-preview,
  .enhanced-view-shop-button {
    transition: none;
    animation: none;
  }

  .enhanced-shop-card:hover,
  .enhanced-product-preview:hover {
    transform: none;
  }
}
/* Enhanced Featured Shops Section Styles */
.enhanced-featured-shops-section {
  padding: var(--space-20) 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
  overflow: hidden;
}

.enhanced-featured-shops-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"dots\" width=\"20\" height=\"20\" patternUnits=\"userSpaceOnUse\"><circle cx=\"10\" cy=\"10\" r=\"1\" fill=\"rgba%2899,102,241,0.1%29\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url%28%23dots%29\"/></svg>");
  opacity: 0.5;
}

.enhanced-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  position: relative;
  z-index: 1;
}

/* Section Header */
.enhanced-section-header {
  text-align: center;
  margin-bottom: var(--space-16);
  position: relative;
}

.enhanced-header-content {
  margin-bottom: var(--space-6);
}

.enhanced-section-title {
  font-family: var(--font-secondary);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--neutral-dark);
  margin-bottom: var(--space-4);
  line-height: 1.2;
  background: linear-gradient(135deg, #1e293b 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.enhanced-section-subtitle {
  font-size: var(--text-xl);
  color: var(--neutral-medium);
  max-width: 600px;
  margin: 0 auto;
  line-height: var(--leading-relaxed);
}

.enhanced-view-all-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--primary-blue);
  text-decoration: none;
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: rgba(59, 130, 246, 0.1);
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.enhanced-view-all-link:hover {
  background: var(--primary-blue);
  color: white;
  transform: translateY(-2px);
}

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

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

/* Desktop Grid Layout */
.enhanced-shops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: var(--space-8);
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

/* Mobile Carousel Layout */
.enhanced-shops-carousel {
  position: relative;
  margin-bottom: var(--space-12);
}

.enhanced-carousel-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
}

.enhanced-carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.enhanced-carousel-slide {
  flex: 0 0 100%;
  padding: 0 var(--space-2);
}

/* Carousel Navigation */
.enhanced-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  border: 2px solid var(--primary-blue);
  color: var(--primary-blue);
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  font-size: var(--text-xl);
  font-weight: bold;
  cursor: pointer;
  z-index: 2;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.enhanced-carousel-btn:hover {
  background: var(--primary-blue);
  color: white;
  transform: translateY(-50%) scale(1.1);
}

.enhanced-carousel-prev {
  left: -25px;
}

.enhanced-carousel-next {
  right: -25px;
}

/* Carousel Dots */
.enhanced-carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.enhanced-carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  border: none;
  background: rgba(99, 102, 241, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.enhanced-carousel-dot.active {
  background: var(--primary-blue);
  transform: scale(1.3);
}

/* Enhanced Shop Card */
.enhanced-shop-card {
  background: white;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}

.enhanced-shop-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.enhanced-shop-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #6366F1 0%, transparent 100%);
  background: linear-gradient(135deg, var(--category-color, #6366F1) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.enhanced-shop-card:hover::before {
  opacity: 0.03;
}

/* Enhanced Shop Card Image */
.enhanced-shop-card-image {
  height: 220px;
  position: relative;
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  background: linear-gradient(135deg, var(--category-color, #6366F1) 0%, #8B5CF6 100%);
  overflow: hidden;
  flex-shrink: 0;
}

.enhanced-shop-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}

.enhanced-shop-image.loaded {
  opacity: 1;
}

.enhanced-shop-image-banner {
  object-position: center;
  object-fit: cover;
}

.enhanced-shop-image-logo {
  object-position: center;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.9);
  padding: var(--space-6);
}

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

.enhanced-shop-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  background: linear-gradient(135deg, var(--category-color, #6366F1) 0%, #8B5CF6 100%);
}

.enhanced-shop-initial {
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  color: white;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Category Badge */
.enhanced-category-badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: var(--radius-full);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all 0.3s ease;
}

.enhanced-shop-card:hover .enhanced-category-badge {
  transform: scale(1.1);
  background: white;
}

.enhanced-category-icon {
  font-size: var(--text-lg);
}

/* Status Badge */
.enhanced-status-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
}

.enhanced-status-indicator {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.enhanced-status-indicator.approved {
  background: rgba(34, 197, 94, 0.9);
  color: white;
}

.enhanced-status-indicator.pending {
  background: rgba(251, 191, 36, 0.9);
  color: white;
}



/* Enhanced Shop Card Content */
.enhanced-shop-card-content {
  padding: var(--space-6);
  flex: 1 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.enhanced-shop-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  gap: var(--space-2);
}

.enhanced-shop-name {
  font-family: var(--font-secondary);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--neutral-dark);
  line-height: var(--leading-tight);
  flex: 1 1;
  margin: 0;
}



.enhanced-shop-category {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-4);
  color: #6366F1;
  color: var(--category-color, #6366F1);
}

.enhanced-category-icon-small {
  font-size: var(--text-base);
}

.enhanced-shop-description {
  color: var(--neutral-medium);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
  flex: 1 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: visible;
  font-size: var(--text-base);
}

.enhanced-shop-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--neutral-lighter);
}

.enhanced-shop-meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--neutral-medium);
}

.enhanced-shop-location {
  font-weight: var(--font-medium);
}

.enhanced-shop-cta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #6366F1;
  color: var(--category-color, #6366F1);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}

.enhanced-shop-arrow {
  font-size: var(--text-lg);
  transition: transform 0.3s ease;
}

.enhanced-shop-card:hover .enhanced-shop-arrow {
  transform: translateX(4px);
}

/* Section Footer */
.enhanced-section-footer {
  text-align: center;
  margin-top: var(--space-16);
}

.enhanced-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-10);
  background: linear-gradient(135deg, var(--primary-blue) 0%, #8B5CF6 100%);
  color: white;
  text-decoration: none;
  border-radius: var(--radius-full);
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
  position: relative;
  overflow: hidden;
}

.enhanced-view-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 0.5s ease;
}

.enhanced-view-all-btn:hover::before {
  left: 100%;
}

.enhanced-view-all-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(59, 130, 246, 0.4);
}

.enhanced-btn-icon {
  font-size: var(--text-xl);
}

.enhanced-btn-arrow {
  font-size: var(--text-xl);
  transition: transform 0.3s ease;
}

.enhanced-view-all-btn:hover .enhanced-btn-arrow {
  transform: translateX(6px);
}

/* Loading and Error States */
.enhanced-shops-loading,
.enhanced-shops-error,
.enhanced-shops-empty {
  text-align: center;
  padding: var(--space-20);
  color: var(--neutral-medium);
}

.enhanced-loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(99, 102, 241, 0.2);
  border-top: 4px solid var(--primary-blue);
  border-radius: var(--radius-full);
  animation: enhanced-spin 1s linear infinite;
  margin: 0 auto var(--space-6);
}

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

.enhanced-error-icon,
.enhanced-empty-icon {
  font-size: var(--text-6xl);
  margin-bottom: var(--space-6);
}

.enhanced-retry-btn {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-8);
  background: var(--primary-blue);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);
}

.enhanced-retry-btn:hover {
  background: var(--primary-blue-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
  .enhanced-featured-shops-section {
    padding: var(--space-16) 0;
  }
  
  .enhanced-container {
    padding: 0 var(--space-4);
  }
  
  .enhanced-section-header {
    margin-bottom: var(--space-12);
  }
  
  .enhanced-section-title {
    font-size: var(--text-2xl);
  }
  
  .enhanced-section-subtitle {
    font-size: var(--text-base);
  }
  
  .enhanced-shops-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  
  .enhanced-shop-card-image {
    height: 180px;
  }
  
  .enhanced-shop-card-content {
    padding: var(--space-5);
  }
  
  .enhanced-shop-name {
    font-size: var(--text-lg);
  }
  
  .enhanced-carousel-btn {
    width: 44px;
    height: 44px;
    font-size: var(--text-lg);
  }
  
  .enhanced-carousel-prev {
    left: -22px;
  }
  
  .enhanced-carousel-next {
    right: -22px;
  }
  
  .enhanced-view-all-btn {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
  }
}

@media (max-width: 480px) {
  .enhanced-container {
    padding: 0 var(--space-3);
  }
  
  .enhanced-section-title {
    font-size: var(--text-xl);
  }
  
  .enhanced-section-subtitle {
    font-size: var(--text-sm);
  }
  
  .enhanced-shop-card-image {
    height: 160px;
  }
  
  .enhanced-shop-card-content {
    padding: var(--space-4);
  }
  
  .enhanced-shop-description {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  
  .enhanced-view-all-btn {
    width: 100%;
    max-width: 300px;
  }
  
  .enhanced-carousel-prev {
    left: -15px;
  }
  
  .enhanced-carousel-next {
    right: -15px;
  }
}

/* Touch-friendly improvements */
@media (max-width: 768px) {
  .enhanced-shop-card,
  .enhanced-carousel-btn,
  .enhanced-carousel-dot,
  .enhanced-view-all-btn {
    -webkit-tap-highlight-color: transparent;
  }
  
  .enhanced-shop-card:active {
    transform: translateY(-6px) scale(0.98);
  }
  
  .enhanced-carousel-btn {
    min-height: 44px;
    min-width: 44px;
  }
  
  .enhanced-carousel-dot {
    min-height: 20px;
    min-width: 20px;
  }
}

/* Accessibility */
.enhanced-shop-card:focus,
.enhanced-view-all-btn:focus,
.enhanced-carousel-btn:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .enhanced-shop-card,
  .enhanced-shop-image,
  .enhanced-carousel-track,
  .enhanced-shop-arrow,
  .enhanced-btn-arrow,
  .enhanced-loading-spinner {
    transition: none;
    animation: none;
  }
  
  .enhanced-shop-card:hover {
    transform: none;
  }
}
/* Visual Categories Section Styles */
.visual-categories-section {
  padding: var(--space-16) var(--space-4);
  background: var(--bg-secondary);
  position: relative;
}

.visual-categories-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Section Header */
.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.categories-title {
  font-family: var(--font-secondary);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--neutral-dark);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}

.categories-subtitle {
  font-size: var(--text-lg);
  color: var(--neutral-medium);
  max-width: 500px;
  margin: 0 auto;
  line-height: var(--leading-relaxed);
}

/* Categories Grid */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: var(--space-6);
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

/* Category Card */
.category-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  transition: all 0.3s ease;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #6366F1 0%, transparent 100%);
  background: linear-gradient(135deg, var(--category-color, #6366F1) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: #6366F1;
  border-color: var(--category-color, #6366F1);
}

.category-card:hover::before {
  opacity: 0.05;
}

.category-card:active {
  transform: translateY(-2px);
}

/* Category Icon */
.category-icon-wrapper {
  position: relative;
  z-index: 1;
  background: #6366F1;
  background: var(--category-color, #6366F1);
  width: 60px;
  height: 60px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.category-card:hover .category-icon-wrapper {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.category-icon {
  font-size: var(--text-2xl);
  filter: brightness(0) invert(1);
}

/* Category Info */
.category-info {
  flex: 1 1;
  position: relative;
  z-index: 1;
}

.category-name {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--neutral-dark);
  margin-bottom: var(--space-1);
  line-height: 1.3;
}

.category-description {
  font-size: var(--text-sm);
  color: var(--neutral-medium);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Category Arrow */
.category-arrow {
  position: relative;
  z-index: 1;
  color: #6366F1;
  color: var(--category-color, #6366F1);
  font-size: var(--text-xl);
  font-weight: bold;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.category-card:hover .category-arrow {
  transform: translateX(4px);
}

/* View All Button */
.view-all-categories {
  text-align: center;
  margin-top: var(--space-8);
}

.view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--primary-blue);
  color: white;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  text-decoration: none;
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);
}

.view-all-btn:hover {
  background: var(--primary-blue-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

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

.view-all-btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* Loading and Empty States */
.categories-loading,
.categories-empty {
  text-align: center;
  padding: var(--space-16);
  color: var(--neutral-medium);
}

.categories-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--neutral-lighter);
  border-top: 4px solid var(--primary-blue);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-4);
}

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

.empty-icon {
  font-size: var(--text-5xl);
  margin-bottom: var(--space-4);
}

.categories-empty h3 {
  font-size: var(--text-xl);
  color: var(--neutral-dark);
  margin-bottom: var(--space-2);
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
  .visual-categories-section {
    padding: var(--space-12) var(--space-4);
  }
  
  .section-header {
    margin-bottom: var(--space-8);
  }
  
  .categories-title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
  }
  
  .categories-subtitle {
    font-size: var(--text-base);
    padding: 0 var(--space-2);
  }
  
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }
  
  .category-card {
    padding: var(--space-4);
    gap: var(--space-3);
    flex-direction: column;
    text-align: center;
    min-height: 140px;
  }
  
  .category-icon-wrapper {
    width: 50px;
    height: 50px;
  }
  
  .category-icon {
    font-size: var(--text-xl);
  }
  
  .category-name {
    font-size: var(--text-base);
    margin-bottom: var(--space-1);
  }
  
  .category-description {
    font-size: var(--text-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .category-arrow {
    font-size: var(--text-lg);
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
  }
  
  .view-all-btn {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
  }
}

@media (max-width: 480px) {
  .visual-categories-section {
    padding: var(--space-10) var(--space-3);
  }
  
  .categories-title {
    font-size: var(--text-xl);
  }
  
  .categories-subtitle {
    font-size: var(--text-sm);
  }
  
  .categories-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  
  .category-card {
    flex-direction: row;
    text-align: left;
    min-height: auto;
    padding: var(--space-4);
  }
  
  .category-icon-wrapper {
    width: 45px;
    height: 45px;
  }
  
  .category-icon {
    font-size: var(--text-lg);
  }
  
  .category-name {
    font-size: var(--text-sm);
  }
  
  .category-description {
    font-size: 11px;
    -webkit-line-clamp: 1;
  }
  
  .category-arrow {
    position: static;
    font-size: var(--text-base);
  }
  
  .categories-loading,
  .categories-empty {
    padding: var(--space-12) var(--space-3);
  }
}

/* Touch-friendly improvements */
@media (max-width: 768px) {
  .category-card {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
  }
  
  .category-card:active {
    transform: translateY(-1px) scale(0.98);
  }
  
  .view-all-btn {
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Landscape orientation optimizations */
@media (max-width: 768px) and (orientation: landscape) {
  .visual-categories-section {
    padding: var(--space-8) var(--space-4);
  }
  
  .categories-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
  }
  
  .category-card {
    flex-direction: column;
    text-align: center;
    min-height: 120px;
    padding: var(--space-3);
  }
  
  .category-arrow {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    font-size: var(--text-sm);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .category-card {
    border: 2px solid var(--neutral-dark);
  }
  
  .category-card:hover {
    border-color: #6366F1;
    border-color: var(--category-color, #6366F1);
    background: var(--bg-primary);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .category-card,
  .category-icon-wrapper,
  .category-arrow,
  .view-all-btn {
    transition: none;
  }
  
  .category-card:hover {
    transform: none;
  }
  
  .category-card:hover .category-icon-wrapper {
    transform: none;
  }
}
/* Homepage Styles - Enhanced Design */
.homepage {
  padding: 0;
  min-height: 100vh;
}

/* Section Styling */
.how-it-works-section, 
.featured-shops-section, 
.value-proposition-section {
  padding: var(--space-16) var(--space-4);
}

.how-it-works-section {
  background: var(--bg-primary);
}

.featured-shops-section {
  background: var(--bg-secondary);
}

.value-proposition-section {
  background: var(--bg-primary);
}

.section-title {
  font-family: var(--font-secondary);
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: #2c3e50;
  text-align: center;
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--neutral-medium);
  text-align: center;
  margin-bottom: var(--space-8);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* How It Works Section */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: var(--space-6);
  gap: var(--space-6);
  max-width: 1200px;
  margin: 0 auto;
}

.step {
  background: var(--bg-primary);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.step h3 {
  font-family: var(--font-secondary);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--primary-blue);
  margin-bottom: var(--space-3);
}

.step p {
  color: var(--neutral-medium);
  line-height: var(--leading-relaxed);
}

/* Featured Shops Section - Removed conflicting styles, now handled by FeaturedShops.css */

/* Value Proposition Section */
.value-prop-content {
  max-width: 1200px;
  margin: 0 auto;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: var(--space-6);
  gap: var(--space-6);
}

.benefit-card {
  text-align: center;
  padding: var(--space-6);
}

.benefit-icon {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
}

.benefit-card h3 {
  font-family: var(--font-secondary);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--neutral-dark);
  margin-bottom: var(--space-3);
}

.benefit-card p {
  color: var(--neutral-medium);
  line-height: var(--leading-relaxed);
}

/* Loading States */
.shops-loading,
.shops-error,
.shops-empty {
  text-align: center;
  padding: var(--space-16);
  color: var(--neutral-medium);
}

.shops-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--neutral-lighter);
  border-top: 4px solid var(--primary-blue);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-4);
}

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

.shops-error {
  color: var(--error);
}

.shops-empty {
  color: var(--neutral-medium);
  font-style: italic;
}

/* Enhanced Mobile Responsive Design */
@media (max-width: 768px) {
  .homepage {
    padding: 0;
  }
  
  .welcome-section {
    padding: var(--space-12) var(--space-4);
    text-align: center;
  }
  
  .title {
    font-size: var(--text-3xl);
    line-height: 1.2;
    margin-bottom: var(--space-4);
  }
  
  .subtitle {
    font-size: var(--text-lg);
    line-height: 1.4;
    margin-bottom: var(--space-6);
  }
  
  .how-it-works-section, 
  .featured-shops-section, 
  .value-proposition-section {
    padding: var(--space-12) var(--space-4);
  }
  
  .section-title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
  }
  
  .section-subtitle {
    font-size: var(--text-base);
    margin-bottom: var(--space-6);
    padding: 0 var(--space-2);
  }
  
  .steps {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: 0 var(--space-2);
  }
  
  .step {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
  }
  
  .step h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
  }
  
  .step p {
    font-size: var(--text-sm);
    line-height: 1.5;
  }
  
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: 0 var(--space-2);
  }
  
  .benefit-card {
    padding: var(--space-5);
  }
  
  .benefit-icon {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-3);
  }
  
  .benefit-card h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
  }
  
  .benefit-card p {
    font-size: var(--text-sm);
    line-height: 1.4;
  }
  
  .shops-loading,
  .shops-error,
  .shops-empty {
    padding: var(--space-12) var(--space-4);
  }
  
  .shops-loading .loading-spinner {
    width: 32px;
    height: 32px;
    border-width: 3px;
  }
}

@media (max-width: 480px) {
  .homepage {
    padding: 0;
  }
  
  .welcome-section {
    padding: var(--space-10) var(--space-3);
  }
  
  .title {
    font-size: var(--text-2xl);
    line-height: 1.1;
    margin-bottom: var(--space-3);
  }
  
  .subtitle {
    font-size: var(--text-base);
    line-height: 1.3;
    margin-bottom: var(--space-5);
  }
  
  .how-it-works-section, 
  .featured-shops-section, 
  .value-proposition-section {
    padding: var(--space-10) var(--space-3);
  }
  
  .section-title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
  }
  
  .section-subtitle {
    font-size: var(--text-sm);
    margin-bottom: var(--space-5);
    padding: 0 var(--space-1);
  }
  
  .steps {
    gap: var(--space-3);
    padding: 0 var(--space-1);
  }
  
  .step {
    padding: var(--space-5);
    border-radius: var(--radius-base);
    margin-bottom: var(--space-3);
  }
  
  .step h3 {
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
  }
  
  .step p {
    font-size: var(--text-xs);
    line-height: 1.4;
  }
  
  .featured-shops-grid {
    gap: var(--space-3);
    padding: 0 var(--space-1);
  }
  
  .shop-card {
    border-radius: var(--radius-base);
    margin-bottom: var(--space-3);
  }
  
  .shop-card-image {
    height: 160px;
  }
  
  .shop-card-placeholder {
    width: 60px;
    height: 60px;
  }
  
  .shop-initial {
    font-size: var(--text-xl);
  }
  
  .shop-card-content {
    padding: var(--space-4);
  }
  
  .shop-name {
    font-size: var(--text-base);
    margin-bottom: var(--space-1);
  }
  
  .shop-category {
    font-size: 10px;
    margin-bottom: var(--space-2);
  }
  
  .shop-description {
    font-size: var(--text-xs);
    line-height: 1.3;
    -webkit-line-clamp: 2;
  }
  
  .benefits-grid {
    gap: var(--space-3);
    padding: 0 var(--space-1);
  }
  
  .benefit-card {
    padding: var(--space-4);
  }
  
  .benefit-icon {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
  }
  
  .benefit-card h3 {
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
  }
  
  .benefit-card p {
    font-size: var(--text-xs);
    line-height: 1.3;
  }
  
  .shops-loading,
  .shops-error,
  .shops-empty {
    padding: var(--space-10) var(--space-3);
    font-size: var(--text-sm);
  }
  
  .shops-loading .loading-spinner {
    width: 28px;
    height: 28px;
    border-width: 2px;
  }
}

/* Touch-friendly improvements */
@media (max-width: 768px) {
  .shop-card {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .shop-card:active {
    transform: translateY(-2px) scale(0.98);
  }
  
  .step {
    cursor: default;
    -webkit-tap-highlight-color: transparent;
  }
  
  .benefit-card {
    cursor: default;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Landscape orientation optimizations */
@media (max-width: 768px) and (orientation: landscape) {
  .welcome-section {
    padding: var(--space-8) var(--space-4);
  }
  
  .how-it-works-section, 
  .featured-shops-section, 
  .value-proposition-section {
    padding: var(--space-8) var(--space-4);
  }
  
  .steps {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-3);
  }
  
  .benefits-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
  }
}
/* Loading Spinner Styles */
.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.spinner-circle {
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
}

/* Sizes */
.spinner-small .spinner-circle {
  width: 20px;
  height: 20px;
  border: 2px solid var(--neutral-lighter);
  border-top: 2px solid currentColor;
}

.spinner-medium .spinner-circle {
  width: 40px;
  height: 40px;
  border: 3px solid var(--neutral-lighter);
  border-top: 3px solid currentColor;
}

.spinner-large .spinner-circle {
  width: 60px;
  height: 60px;
  border: 4px solid var(--neutral-lighter);
  border-top: 4px solid currentColor;
}

/* Colors */
.spinner-primary {
  color: var(--primary-blue);
}

.spinner-secondary {
  color: var(--secondary-green);
}

.spinner-white {
  color: var(--neutral-white);
}

.spinner-text {
  font-size: var(--text-sm);
  color: var(--neutral-medium);
  text-align: center;
  margin: 0;
}

/* Full Screen Overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

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

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .spinner-circle {
    animation: none;
    border: 3px solid var(--neutral-lighter);
    border-left: 3px solid currentColor;
  }
}
/* Touch-Friendly Components */

/* Base Touch-Friendly Component */
.touch-friendly {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.touch-friendly.pressed {
  transform: scale(0.98);
  opacity: 0.8;
}

.touch-friendly:active {
  transform: scale(0.98);
}

/* Swipeable Container */
.swipeable-container {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.swipeable-container::-webkit-scrollbar {
  display: none;
}

.swipeable-container.show-scrollbar {
  scrollbar-width: thin;
  -ms-overflow-style: auto;
}

.swipeable-container.show-scrollbar::-webkit-scrollbar {
  display: block;
  height: 6px;
}

.swipeable-container.show-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.swipeable-container.show-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.swipeable-container.show-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.swipeable-container.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.swipeable-container.dragging * {
  pointer-events: none;
}

/* Touch Target Improvements */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.touch-target::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.2s ease;
}

.touch-target:hover::before,
.touch-target:focus::before {
  background: rgba(0, 0, 0, 0.05);
}

.touch-target:active::before {
  background: rgba(0, 0, 0, 0.1);
}

/* Responsive Touch Improvements */
@media (max-width: 768px) {
  .touch-friendly {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Increase touch targets on mobile */
  button,
  .btn,
  a,
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height: 44px;
    padding: 12px 16px;
  }
  
  /* Improve form inputs on mobile */
  input,
  textarea,
  select {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* Hover states only for non-touch devices */
@media (hover: hover) and (pointer: fine) {
  .touch-friendly:hover {
    transform: translateY(-2px);
  }
}

/* Focus improvements for keyboard navigation */
.touch-friendly:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .touch-friendly {
    transition: none;
  }
  
  .touch-friendly.pressed,
  .touch-friendly:active,
  .touch-friendly:hover {
    transform: none;
  }
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
  .touch-friendly:focus-visible {
    outline: 3px solid;
    outline-offset: 3px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .touch-target:hover::before,
  .touch-target:focus::before {
    background: rgba(255, 255, 255, 0.05);
  }
  
  .touch-target:active::before {
    background: rgba(255, 255, 255, 0.1);
  }
}
/* Mobile Search Component */
.mobile-search {
  position: relative;
  width: 100%;
  transition: all 0.3s ease;
}

/* Desktop Search */
.mobile-search.desktop {
  max-width: 400px;
}

.mobile-search.desktop .search-input-container {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  transition: all 0.2s ease;
}

.mobile-search.desktop .search-input-container:focus-within {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* Mobile Search Trigger */
.search-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.search-trigger:hover {
  background: white;
  border-color: #007bff;
}

.search-trigger .search-icon {
  font-size: 18px;
  color: #6c757d;
}

.search-hint {
  color: #6c757d;
  font-size: 16px;
  flex: 1 1;
  margin-left:20px;
}

/* Expanded Search Input */
.search-input-container {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.search-input-container.expanded {
  position: fixed;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 1050;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  border-color: #007bff;
}

.search-input {
  flex: 1 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 16px;
  font-size: 16px;
  color: #333;
}

.search-input::placeholder {
  color: #6c757d;
}

/* Search Icon */
.search-icon {
  position: absolute;
  left: 12px;
  color: #6c757d;
  font-size: 18px;
  pointer-events: none;
}

.mobile-search.desktop .search-input {
  padding-left: 40px;
}

/* Search Actions */
.search-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 8px;
}

.clear-button,
.collapse-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 50%;
  font-size: 18px;
  font-weight: bold;
  color: #6c757d;
  cursor: pointer;
  transition: all 0.2s ease;
}

.clear-button:hover,
.collapse-button:hover {
  background: #e9ecef;
  color: #333;
}

.clear-button:active,
.collapse-button:active {
  transform: scale(0.9);
}

/* Voice Search */
.voice-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
}

.voice-search:hover {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.voice-search.listening {
  background: #dc3545;
  color: white;
  border-color: #dc3545;
  animation: pulse 1.5s infinite;
}

.voice-icon {
  font-size: 18px;
}

.voice-text {
  font-size: 14px;
  font-weight: 500;
}

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

/* Mobile Specific Styles */
@media (max-width: 768px) {
  .mobile-search {
    position: relative;
  }
  
  .search-input-container.expanded {
    top: 12px;
    left: 12px;
    right: 12px;
  }
  
  .search-input {
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  .voice-search {
    min-width: 100px;
  }
  
  .voice-text {
    display: none;
  }
}

@media (max-width: 480px) {
  .search-trigger {
    padding: 12px;
  }
  
  .search-input-container.expanded {
    top: 8px;
    left: 8px;
    right: 8px;
  }
  
  .search-input {
    padding: 12px;
  }
}

/* Focus States */
.search-trigger:focus,
.clear-button:focus,
.collapse-button:focus,
.voice-search:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .mobile-search,
  .search-input-container,
  .search-trigger,
  .clear-button,
  .collapse-button,
  .voice-search {
    transition: none;
    animation: none;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .search-trigger,
  .search-input-container,
  .voice-search {
    border: 2px solid;
  }
  
  .search-input-container:focus-within {
    border-width: 3px;
  }
}
/* Professional Design System Variables */
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);
  
  --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  --glass-border: 1px solid rgba(255, 255, 255, 0.2);
  --glass-blur: blur(20px);
}

/* Professional Full-Page Category Design */
.category-page {
  padding: 8px;
  padding: var(--space-sm);
  max-width: 100%;
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow-x: hidden;
}

.category-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
  pointer-events: none;
}

/* Category Header */
/* Professional Compact Category Header */
.category-header {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  padding: 20px 24px;
  padding: var(--space-xl) var(--space-2xl);
  border-radius: 12px;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  box-shadow: var(--shadow-md);
  margin: 8px 8px 16px;
  margin: var(--space-sm) var(--space-sm) var(--space-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border: var(--glass-border);
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  gap: var(--space-md);
  width: calc(100% - 12px * 2);
  width: calc(100% - var(--space-md) * 2);
}

@media (min-width: 1024px) {
  .category-header {
    padding: 20px 24px;
    padding: var(--space-xl) var(--space-2xl);
    margin: 0 auto 20px;
    margin: 0 auto var(--space-xl);
  }
}

.category-header::after {
  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;
}

.category-header:hover::after {
  left: 100%;
}

.category-title-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  gap: var(--space-sm);
  margin-bottom: 8px;
  margin-bottom: var(--space-sm);
}

.category-title {
  font-size: 2.5em;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  text-transform: capitalize;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
}

.description-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  gap: var(--space-md);
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  border-radius: var(--radius-md);
}

.description-label {
  font-size: 0.9em;
  font-weight: 600;
  color: #3498db;
  background: rgba(52, 152, 219, 0.1);
  padding: 4px 12px;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

.category-description {
  color: #666;
  font-size: 1em;
  margin: 0;
  line-height: 1.5;
  opacity: 0.9;
  text-align: left;
  flex: 1 1;
  min-width: 70%;
  white-space: pre-wrap;
}

.category-stats {
  font-size: 0.8em;
  color: #777;
  font-weight: 500;
  margin: 0;
}

.shop-count {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  padding: 4px 12px;
  padding: var(--space-xs) var(--space-md);
  border-radius: 20px;
  border-radius: var(--radius-xl);
  font-size: 0.9em;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
  display: inline-block;
  transition: all 0.3s ease;
}

.shop-count:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  box-shadow: var(--shadow-md);
}

/* Professional micro-interactions */
.category-header:hover .category-title {
  transform: scale(1.02);
}

.category-header:hover .shop-count {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}

/* Category Header Skeleton */
.category-header > div[style*="background: linear-gradient"] {
  margin: 0 auto 8px !important;
  margin: 0 auto var(--space-sm) !important;
}

.category-title-section > div[style*="background: linear-gradient"] {
  margin: 0 auto 4px !important;
  margin: 0 auto var(--space-xs) !important;
}

.description-container > div[style*="background: linear-gradient"] {
  margin: 0 auto 4px !important;
  margin: 0 auto var(--space-xs) !important;
}

.category-header > div:last-child > div:last-child {
  margin-bottom: 0 !important;
}

/* Professional Compact Search Bar */
.search-filter-compact {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  padding: 12px 16px;
  padding: var(--space-md) var(--space-lg);
  border-radius: 12px;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  box-shadow: var(--shadow-md);
  margin: 0 8px 16px;
  margin: 0 var(--space-sm) var(--space-lg);
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border: var(--glass-border);
  position: relative;
  z-index: 1;
  width: calc(100% - 12px * 2);
  width: calc(100% - var(--space-md) * 2);
}

.search-container-compact {
  flex: 1 1;
  position: relative;
  max-width: 100%;
}

.category-search {
  width: 100%;
}

/* Professional compact search input styling */
.search-container input {
  width: 100%;
  padding: 8px 16px;
  padding: var(--space-sm) var(--space-lg);
  border: 2px solid rgba(52, 152, 219, 0.2);
  border-radius: 8px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
  outline: none;
  font-weight: 500;
  color: #2c3e50;
}

.search-container input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
  background: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}

.search-container input::placeholder {
  color: #999;
  font-weight: 400;
}

/* Professional City Filter Design */
.filter-container-compact {
  margin-left: 12px;
  margin-left: var(--space-md);
  position: relative;
  min-width: 180px;
}

.city-filter {
  width: 100%;
  padding: 8px 20px 8px 12px;
  padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-md);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  border: 2px solid rgba(52, 152, 219, 0.2);
  border-radius: 8px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: #2c3e50;
  cursor: pointer;
  outline: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 1;
}

/* Custom dropdown arrow */
.filter-container-compact::after {
  content: '▼';
  position: absolute;
  right: 12px;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  color: #3498db;
  font-size: 0.8rem;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 2;
}

/* Filter hover and focus states */
.city-filter:hover {
  border-color: #3498db;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.city-filter:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1), 0 8px 32px rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1), var(--shadow-md);
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.filter-container-compact:hover::after {
  color: #2980b9;
  transform: translateY(-50%) scale(1.1);
}

/* Professional option styling */
.city-filter option {
  background: white;
  color: #2c3e50;
  padding: 8px;
  padding: var(--space-sm);
  font-weight: 500;
}

.city-filter option:hover,
.city-filter option:checked {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
}

/* Filter placeholder styling */
.city-filter option[value=""] {
  color: #999;
  font-style: italic;
}

/* Professional loading state for filter */
.city-filter.loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  color: transparent;
  cursor: wait;
}

/* Enhanced focus states for accessibility */
.city-filter:focus {
  outline: 2px solid rgba(52, 152, 219, 0.8);
  outline-offset: 2px;
}

/* Professional disabled state */
.city-filter:disabled {
  background: rgba(200, 200, 200, 0.3);
  color: #999;
  cursor: not-allowed;
  border-color: rgba(52, 152, 219, 0.1);
}

.filter-container-compact:has(.city-filter:disabled)::after {
  color: #999;
}

/* Enhanced interaction feedback */
.city-filter:active {
  transform: translateY(-1px) scale(0.99);
}

/* Professional tooltip-like label */
.filter-container-compact::before {
  content: '🌍 Location';
  position: absolute;
  top: -25px;
  left: 0;
  font-size: 0.75rem;
  color: #666;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.filter-container-compact:hover::before {
  opacity: 1;
}



/* Shop List */
.shop-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  grid-gap: 20px;
  grid-gap: var(--space-xl);
  gap: var(--space-xl);
  justify-content: center;
  margin: 0 8px 20px;
  margin: 0 var(--space-sm) var(--space-xl);
  position: relative;
  z-index: 1;
  width: calc(100% - 12px * 2);
  width: calc(100% - var(--space-md) * 2);
}

/* No Results */
.no-results {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  padding: 50px 30px;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}

.no-shops-message {
  font-size: 1.2em;
  color: #666;
  margin-bottom: 20px;
}

.refresh-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);
}

.refresh-button:hover {
  background: linear-gradient(135deg, #2980b9, #1f5f8b);
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(52, 152, 219, 0.4);
}

.refresh-button:active {
  transform: translateY(-1px) scale(0.98);
}

/* Related Categories */
.related-categories {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  padding: 30px;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  margin-top: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}

.related-categories h3 {
  font-size: 1.3em;
  color: #333;
  margin-bottom: 15px;
}

.related-links-container {
  overflow-x: auto;
  padding: 10px 0;
  -webkit-overflow-scrolling: touch;
}

.related-links {
  display: flex;
  gap: 10px;
  min-width: max-content;
  padding: 0 5px;
}

.related-category-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(155, 89, 182, 0.1));
  color: #2c3e50;
  text-decoration: none;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  white-space: nowrap;
  min-height: 44px;
  min-width: 120px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border: 2px solid transparent;
}

.related-category-link:hover {
  background: linear-gradient(135deg, #3498db, #9b59b6);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.related-category-link:active {
  transform: translateY(-1px) scale(0.98);
}

/* Loading States */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 6px solid transparent;
  border-top: 6px solid #3498db;
  border-right: 6px solid #e74c3c;
  border-bottom: 6px solid #f39c12;
  border-left: 6px solid #9b59b6;
  border-radius: 50%;
  animation: spin 1.5s linear infinite, colorShift 3s ease-in-out infinite;
  margin-bottom: 20px;
}

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

@keyframes colorShift {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(180deg); }
}

.loading-container p {
  font-size: 1.2em;
  color: #667eea;
  font-weight: 600;
  margin: 0;
  animation: pulse 2s ease-in-out infinite;
}

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

/* Error States */
.error-container {
  background: white;
  padding: 40px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.error-container h2 {
  color: #dc3545;
  margin-bottom: 15px;
}

.error-message {
  color: #666;
  margin-bottom: 20px;
}

.retry-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}

.retry-button:hover {
  background-color: #0056b3;
}

/* Professional Full-Page Responsive Design */
@media (max-width: 768px) {
  .category-page {
    padding: 8px;
    padding: var(--space-sm);
  }
  
  .category-header {
    padding: 12px 16px;
    padding: var(--space-md) var(--space-lg);
    margin: 4px 0 12px;
    margin: var(--space-xs) 0 var(--space-md);
  }
  
  .category-title {
    font-size: 1.7em;
    margin-bottom: 4px;
    margin-bottom: var(--space-xs);
  }
  
  .search-filter-compact {
    padding: 12px;
    padding: var(--space-md);
    flex-direction: column;
    gap: 12px;
    gap: var(--space-md);
  }
  
  .search-container-compact {
    width: 100%;
  }
  
  .filter-container-compact {
    margin-left: 0;
    width: 100%;
    min-width: auto;
  }
  
  .city-filter {
    font-size: 1rem;
    padding: 12px 20px 12px 12px;
    padding: var(--space-md) var(--space-xl) var(--space-md) var(--space-md);
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
  }
  
  .filter-container-compact::after {
    font-size: 0.9rem;
    right: 16px;
    right: var(--space-lg);
  }
  
  .shop-list {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    gap: var(--space-md);
  }
  

}

@media (max-width: 480px) {
  .category-page {
    padding: 4px;
    padding: var(--space-xs);
  }
  
  .category-header {
    padding: 12px 16px;
    padding: var(--space-md) var(--space-lg);
    margin: 4px 0 8px;
    margin: var(--space-xs) 0 var(--space-sm);
  }
  
  .category-title {
    font-size: 1.5em;
    margin-bottom: 4px;
    margin-bottom: var(--space-xs);
  }
  
  .search-filter-compact {
    padding: 8px;
    padding: var(--space-sm);
    gap: 8px;
    gap: var(--space-sm);
  }
  
  .city-filter {
    padding: 8px 20px 8px 8px;
    padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-sm);
    font-size: 0.95rem;
    min-height: 44px;
  }
  
  .filter-container-compact::after {
    right: 12px;
    right: var(--space-md);
    font-size: 0.85rem;
  }
  
  .shop-list {
    grid-template-columns: 1fr;
    gap: 8px;
    gap: var(--space-sm);
  }
  
  .related-links {
    gap: 4px;
    gap: var(--space-xs);
  }
  
  .related-category-link {
    min-width: 70px;
    padding: 8px 12px;
    padding: var(--space-sm) var(--space-md);
  }
}

/* Touch device specific improvements */
@media (hover: none) and (pointer: coarse) {
  .related-category-link:hover {
    transform: none;
  }
  
  .related-category-link:active {
    background-color: #007bff;
    color: white;
  }
  

}

/* Focus improvements for keyboard navigation */
.related-category-link:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .related-category-link {
    transition: none;
  }
  
  .related-category-link:hover,
  .related-category-link:active {
    transform: none;
  }
}

/* Skeleton Loading */
.skeleton-shop-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 30px;
  gap: 30px;
  justify-content: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.skeleton-shop-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  height: 400px;
  position: relative;
}

.skeleton-shop-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shimmer 2s infinite;
}

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

.skeleton-header {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.skeleton-logo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0e0e0, #f0f0f0);
  margin-bottom: 15px;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-name {
  width: 150px;
  height: 24px;
  background: linear-gradient(135deg, #e0e0e0, #f0f0f0);
  border-radius: 12px;
  margin-bottom: 8px;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-description {
  width: 200px;
  height: 16px;
  background: linear-gradient(135deg, #e0e0e0, #f0f0f0);
  border-radius: 8px;
  margin-bottom: 15px;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-details {
  width: 120px;
  height: 14px;
  background: linear-gradient(135deg, #e0e0e0, #f0f0f0);
  border-radius: 7px;
  margin-bottom: 5px;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-button {
  height: 48px;
  background: linear-gradient(135deg, #e0e0e0, #f0f0f0);
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

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

/* Enhanced animations for interactive elements */
.shop-card,
.related-category-link,
.refresh-button {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Staggered animation for shop cards */
.shop-list .shop-card {
  animation: slideInUp 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(30px);
}

.shop-list .shop-card:nth-child(1) { animation-delay: 0.1s; }
.shop-list .shop-card:nth-child(2) { animation-delay: 0.2s; }
.shop-list .shop-card:nth-child(3) { animation-delay: 0.3s; }
.shop-list .shop-card:nth-child(4) { animation-delay: 0.4s; }
.shop-list .shop-card:nth-child(5) { animation-delay: 0.5s; }
.shop-list .shop-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced focus states for accessibility */
.related-category-link:focus,
.refresh-button:focus {
  outline: 3px solid #3b82f6;
  outline: 3px solid var(--border-focus, #3b82f6);
  outline-offset: 2px;
}

/* Improved visual feedback */
.related-category-link:active,
.refresh-button:active {
  transform: scale(0.98);
}

/* Enhanced Mobile Responsive Design */
@media (max-width: 768px) {
  .category-page {
    padding: 15px;
    max-width: none;
    margin: 0;
  }
  
  /* Category Header Mobile */
  .category-header {
    padding: 16px 18px;
    border-radius: 14px;
    margin: 12px 15px 16px;
    text-align: center;
  }
  
  .category-title {
    font-size: 1.7rem;
    margin-bottom: 6px;
    line-height: 1.2;
  }
  
  .category-description {
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 10px;
    padding: 0 5px;
  }
  
  .category-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }
  
  .stat-item {
    text-align: center;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
  }
  
  .stat-number {
    font-size: 1.2rem;
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
  }
  
  .stat-label {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  /* Filters Mobile */
  .category-filters {
    margin: 15px 0 20px 0;
    padding: 15px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }
  
  .filters-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  .filter-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
  }
  
  .filter-select,
  .filter-input {
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
    min-height: 40px;
  }
  
  .filter-select:focus,
  .filter-input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
  }
  
  .clear-filters-btn {
    padding: 8px 16px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    align-self: flex-start;
    min-height: 36px;
  }
  
  .clear-filters-btn:hover {
    background: #5a6268;
  }
  
  /* Loading States Mobile */
  .category-loading,
  .category-error,
  .category-empty {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 15px 0;
  }
  
  .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid transparent;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
  }
  
  .category-loading p,
  .category-error p,
  .category-empty p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
  }
  
  .category-error {
    color: #e74c3c;
  }
  
  .retry-btn {
    margin-top: 15px;
    padding: 10px 20px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    min-height: 40px;
  }
  
  /* Shops Grid Mobile */
  .shops-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 16px;
    gap: 16px;
    margin-top: 20px;
  }
  
  .shop-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  
  .shop-card:hover,
  .shop-card:active {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  }
  
  .shop-card:active {
    transform: translateY(-2px) scale(0.98);
  }
  
  .shop-image-container {
    height: 180px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea, #764ba2);
  }
  
  .shop-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .shop-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
  }
  
  .shop-initial {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
  }
  
  .shop-status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
  }
  
  .shop-status-badge.live {
    background: rgba(39, 174, 96, 0.9);
  }
  
  .shop-status-badge.pending {
    background: rgba(243, 156, 18, 0.9);
  }
  
  .shop-card-content {
    padding: 16px;
  }
  
  .shop-card-header {
    margin-bottom: 12px;
  }
  
  .shop-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
    line-height: 1.3;
  }
  
  .shop-category {
    font-size: 0.75rem;
    color: #3498db;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .shop-description {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .shop-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #999;
  }
  
  .shop-location {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .shop-products-count {
    font-weight: 500;
    color: #3498db;
  }
  
  /* Pagination Mobile */
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }
  
  .pagination-btn {
    padding: 8px 12px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    min-height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .pagination-btn:hover {
    background: #f8f9fa;
    border-color: #3498db;
  }
  
  .pagination-btn.active {
    background: #3498db;
    color: white;
    border-color: #3498db;
  }
  
  .pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .pagination-info {
    font-size: 0.8rem;
    color: #666;
    margin: 0 10px;
  }
}

@media (max-width: 480px) {
  .category-page {
    padding: 10px;
  }
  
  /* Extra small mobile optimizations */
  .category-header {
    padding: 14px 12px;
    border-radius: 12px;
    margin: 10px 12px 14px;
  }
  
  .category-title {
    font-size: 1.5rem;
    margin-bottom: 5px;
  }
  
  .category-description {
    font-size: 0.8rem;
    padding: 0 3px;
    margin-bottom: 8px;
  }
  
  .category-stats {
    gap: 15px;
  }
  
  .stat-item {
    padding: 6px 12px;
  }
  
  .stat-number {
    font-size: 1.1rem;
  }
  
  .stat-label {
    font-size: 0.7rem;
  }
  
  .category-filters {
    margin: 10px 0 15px 0;
    padding: 12px;
    border-radius: 10px;
  }
  
  .filters-row {
    gap: 10px;
  }
  
  .filter-group {
    gap: 4px;
  }
  
  .filter-label {
    font-size: 0.8rem;
  }
  
  .filter-select,
  .filter-input {
    padding: 8px 10px;
    font-size: 0.85rem;
    min-height: 36px;
  }
  
  .clear-filters-btn {
    padding: 6px 12px;
    font-size: 0.75rem;
    min-height: 32px;
  }
  
  .category-loading,
  .category-error,
  .category-empty {
    padding: 30px 15px;
    border-radius: 12px;
    margin: 10px 0;
  }
  
  .loading-spinner {
    width: 32px;
    height: 32px;
    border-width: 3px;
  }
  
  .category-loading p,
  .category-error p,
  .category-empty p {
    font-size: 0.85rem;
  }
  
  .retry-btn {
    padding: 8px 16px;
    font-size: 0.85rem;
    min-height: 36px;
  }
  
  .shops-grid {
    gap: 12px;
    margin-top: 15px;
  }
  
  .shop-card {
    border-radius: 12px;
  }
  
  .shop-image-container {
    height: 160px;
  }
  
  .shop-initial {
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
  }
  
  .shop-status-badge {
    top: 8px;
    right: 8px;
    padding: 3px 6px;
    font-size: 0.65rem;
  }
  
  .shop-card-content {
    padding: 12px;
  }
  
  .shop-card-header {
    margin-bottom: 10px;
  }
  
  .shop-name {
    font-size: 1rem;
    margin-bottom: 3px;
  }
  
  .shop-category {
    font-size: 0.7rem;
  }
  
  .shop-description {
    font-size: 0.8rem;
    margin-bottom: 10px;
    -webkit-line-clamp: 2;
  }
  
  .shop-meta {
    font-size: 0.7rem;
  }
  
  .pagination {
    gap: 6px;
    margin-top: 20px;
    padding: 15px;
    border-radius: 10px;
  }
  
  .pagination-btn {
    padding: 6px 10px;
    font-size: 0.75rem;
    min-height: 32px;
    min-width: 32px;
  }
  
  .pagination-info {
    font-size: 0.75rem;
    margin: 0 8px;
  }
}

/* Landscape orientation optimizations */
@media (max-width: 768px) and (orientation: landscape) {
  .category-header {
    padding: 12px 16px;
    margin: 8px 12px 12px;
  }
  
  .category-title {
    font-size: 1.6rem;
    margin-bottom: 4px;
  }
  
  .category-stats {
    gap: 25px;
  }
  
  .shops-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .shop-image-container {
    height: 140px;
  }
  
  .shop-card-content {
    padding: 12px;
  }
}

/* Touch interactions and animations */
@media (max-width: 768px) {
  .shop-card {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  .description-container {
    flex-direction: column;
    align-items: flex-start;
    padding: 4px 12px;
    padding: var(--space-xs) var(--space-md);
    gap: 4px;
    gap: var(--space-xs);
    width: 100%;
    margin: 0;
  }
  
  .description-label {
    margin-bottom: 4px;
    margin-bottom: var(--space-xs);
    font-size: 0.85em;
  }
  
  .category-description {
    width: 100%;
    font-size: 0.95em;
    line-height: 1.4;
    text-align: left;
    padding-left: 0;
  }
  
  .category-header {
    padding: 16px 16px;
    padding: var(--space-lg) var(--space-lg);
    margin: 8px 8px 16px;
    margin: var(--space-sm) var(--space-sm) var(--space-lg);
    width: calc(100% - 24px);
    width: calc(100% - var(--space-2xl));
  }
  
  .pagination-btn,
  .retry-btn,
  .clear-filters-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  .pagination-btn:active,
  .retry-btn:active,
  .clear-filters-btn:active {
    transform: scale(0.95);
  }
  
  /* Smooth scrolling for filters */
  .category-filters {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Better focus states for mobile */
  .filter-select:focus,
  .filter-input:focus {
    transform: scale(1.02);
  }
}

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

/* Skeleton loading for shop cards */
.shop-card.skeleton {
  pointer-events: none;
}

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

.shop-card.skeleton .shop-card-content > * {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  color: transparent;
  border-radius: 4px;
}

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

/* Professional Desktop Layout */
@media (min-width: 1024px) {
  .category-page {
    padding: 20px;
    padding: var(--space-xl);
    max-width: 100%;
    margin: 0;
  }
  
  .category-header {
    padding: 20px 24px;
    padding: var(--space-xl) var(--space-2xl);
    margin: 0 auto 20px;
    margin: 0 auto var(--space-xl);
    width: 100%;
    max-width: calc(100% - 24px * 2);
    max-width: calc(100% - var(--space-2xl) * 2);
  }
  
  .search-filter-compact {
    padding: 16px 20px;
    padding: var(--space-lg) var(--space-xl);
    margin: 0 auto 20px;
    margin: 0 auto var(--space-xl);
    width: 100%;
    max-width: calc(100% - 24px * 2);
    max-width: calc(100% - var(--space-2xl) * 2);
  }
  
  .shop-list {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    gap: var(--space-2xl);
    margin: 0 auto;
    width: 100%;
    max-width: calc(100% - 24px * 2);
    max-width: calc(100% - var(--space-2xl) * 2);
  }
  
  /* Professional hover effects for desktop */
  .category-header,
  .search-filter-compact,
  .shop-card {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .category-header:hover,
  .search-filter-compact:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    box-shadow: var(--shadow-lg);
  }
}

/* Ultra-wide screen optimization */
@media (min-width: 1440px) {
  .category-page {
    padding: 24px;
    padding: var(--space-2xl);
  }
  
  .shop-list {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
  }
}

/* Professional animations and transitions */
.category-header,
.search-filter-compact,
.shop-list,
.related-categories {
  animation: slideInUp 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(20px);
}

.category-header { animation-delay: 0.1s; }
.search-filter-compact { animation-delay: 0.2s; }
.shop-list { animation-delay: 0.3s; }
.related-categories { animation-delay: 0.4s; }

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced glass morphism effects */
.category-header::before,
.search-filter-compact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}

/* Professional focus states */
.related-category-link:focus {
  outline: 2px solid rgba(52, 152, 219, 0.5);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
}

/* Professional loading shimmer effect */
.category-header.loading {
  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; }
}

/* Pagination Container */
.pagination-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  margin-top: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Items per page selector */
.pagination-per-page {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #64748b;
}

.pagination-per-page label {
  font-weight: 500;
  white-space: nowrap;
}

.per-page-select {
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  color: #374151;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.per-page-select:hover {
  border-color: #3b82f6;
}

.per-page-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Pagination info */
.pagination-info {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
}

/* Pagination controls */
.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Pagination buttons */
.pagination-btn {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  background: white;
  color: #374151;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  -webkit-user-select: none;
          user-select: none;
}

.pagination-btn:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #3b82f6;
  color: #3b82f6;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pagination-btn:disabled {
  background: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}

.pagination-btn.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.pagination-btn.active:hover {
  background: #2563eb;
  border-color: #2563eb;
  transform: none;
}

/* Previous/Next buttons */
.prev-btn,
.next-btn {
  font-weight: 600;
  padding: 8px 16px;
}

.page-btn {
  min-width: 36px;
}

/* Pagination dots */
.pagination-dots {
  padding: 8px 4px;
  color: #9ca3af;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
          user-select: none;
}

/* Quick jump */
.pagination-jump {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #64748b;
}

.pagination-jump label {
  font-weight: 500;
  white-space: nowrap;
}

.jump-input {
  width: 60px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  color: #374151;
  font-size: 14px;
  text-align: center;
  transition: all 0.2s ease;
}

.jump-input:hover {
  border-color: #3b82f6;
}

.jump-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.total-pages {
  font-weight: 500;
  white-space: nowrap;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .pagination-container {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 15px;
  }

  .pagination-controls {
    justify-content: center;
    flex-wrap: wrap;
  }

  .pagination-per-page,
  .pagination-info,
  .pagination-jump {
    justify-content: center;
    text-align: center;
  }

  .pagination-btn {
    padding: 6px 10px;
    font-size: 13px;
    min-width: 32px;
    height: 32px;
  }

  .prev-btn,
  .next-btn {
    padding: 6px 12px;
  }

  .pagination-pages {
    gap: 2px;
  }
}

@media (max-width: 480px) {
  .pagination-container {
    padding: 12px;
  }

  .pagination-btn {
    padding: 5px 8px;
    font-size: 12px;
    min-width: 28px;
    height: 28px;
  }

  .prev-btn,
  .next-btn {
    padding: 5px 10px;
  }

  .per-page-select,
  .jump-input {
    font-size: 13px;
    padding: 5px 8px;
  }

  .pagination-info,
  .pagination-per-page label,
  .pagination-jump label {
    font-size: 13px;
  }
}

/* Admin dashboard specific styling */
.admin-dashboard .pagination-container {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.admin-dashboard .pagination-btn {
  border-color: #e5e7eb;
}

.admin-dashboard .pagination-btn:hover:not(:disabled) {
  border-color: #3b82f6;
  background: #f8fafc;
}

.admin-dashboard .pagination-btn.active {
  background: #3b82f6;
  border-color: #3b82f6;
}

/* Loading state */
.pagination-container.loading {
  opacity: 0.6;
  pointer-events: none;
}

.pagination-container.loading .pagination-btn {
  cursor: not-allowed;
}

/* Empty state */
.pagination-container.empty .pagination-info {
  color: #9ca3af;
  font-style: italic;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .pagination-btn {
    border-width: 2px;
  }
  
  .pagination-btn:hover:not(:disabled) {
    border-width: 2px;
  }
  
  .pagination-btn.active {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .pagination-btn {
    transition: none;
  }
  
  .pagination-btn:hover:not(:disabled) {
    transform: none;
  }
}
/* AllShopsPage Styles */
.all-shops-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-attachment: fixed;
}

.all-shops-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.all-shops-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.all-shops-description {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 20px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.all-shops-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.shop-count {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 1rem;
}

.category-count {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 1rem;
}

/* Professional Filter Bar */
.shop-filters {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.shop-filters .filter-input,
.shop-filters .filter-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.95);
  color: #1f2937; /* slate-800 */
  font-size: 0.95rem;
  outline: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.08s ease;
}

.shop-filters .filter-input::placeholder {
  color: #64748b; /* slate-500 */
}

.shop-filters .filter-input:focus,
.shop-filters .filter-select:focus {
  border-color: #667eea; /* theme primary */
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.25);
}

.shop-filters .filter-select {
  background-image: linear-gradient(45deg, transparent 50%, #667eea 50%),
    linear-gradient(135deg, #667eea 50%, transparent 50%),
    linear-gradient(to right, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06));
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px), 0 0;
  background-size: 5px 5px, 5px 5px, 100% 100%;
  background-repeat: no-repeat;
}

.shop-filters .filter-reset {
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #ff6b6b, #f06595);
  box-shadow: 0 6px 16px rgba(240, 101, 149, 0.35);
  transition: transform 0.08s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.shop-filters .filter-reset:hover {
  box-shadow: 0 8px 20px rgba(240, 101, 149, 0.45);
  filter: brightness(1.03);
}

.shop-filters .filter-reset:active {
  transform: translateY(1px);
}

@media (max-width: 992px) {
  .shop-filters {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .shop-filters {
    grid-template-columns: 1fr;
    padding: 12px;
  }
}

/* Category Sections */
.category-section {
  margin-bottom: 50px;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding: 15px 25px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 15px;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border-left: 5px solid #ff6b6b;
}

.category-section-title {
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  text-transform: capitalize;
}

.category-shop-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 15px;
  font-weight: 500;
  font-size: 0.9rem;
}

/* Shop List Grid */
.shop-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 25px;
  gap: 25px;
  margin-bottom: 30px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .all-shops-page {
    padding: 15px;
  }
  
  .all-shops-header {
    padding: 30px 15px;
    margin-bottom: 30px;
  }
  
  .all-shops-title {
    font-size: 2rem;
  }
  
  .all-shops-description {
    font-size: 1.1rem;
  }
  
  .category-section-title {
    font-size: 1.5rem;
    padding: 12px 20px;
  }
  
  .shop-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .all-shops-page {
    padding: 10px;
  }
  
  .all-shops-header {
    padding: 20px 10px;
    margin-bottom: 20px;
  }
  
  .all-shops-title {
    font-size: 1.8rem;
  }
  
  .all-shops-description {
    font-size: 1rem;
  }
  
  .category-section-title {
    font-size: 1.3rem;
    padding: 10px 15px;
  }
}

/* Skeleton Loading Styles */
.skeleton-shop-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.skeleton-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0e0e0, #f0f0f0);
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-name {
  height: 24px;
  width: 200px;
  background: linear-gradient(135deg, #e0e0e0, #f0f0f0);
  border-radius: 12px;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-description {
  height: 16px;
  width: 100%;
  background: linear-gradient(135deg, #e0e0e0, #f0f0f0);
  border-radius: 8px;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-details {
  height: 12px;
  width: 150px;
  background: linear-gradient(135deg, #e0e0e0, #f0f0f0);
  border-radius: 6px;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-button {
  height: 40px;
  width: 120px;
  background: linear-gradient(135deg, #e0e0e0, #f0f0f0);
  border-radius: 20px;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

@keyframes skeletonPulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

/* Error State */
.error-container {
  text-align: center;
  padding: 60px 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.error-container h2 {
  color: #ffffff;
  font-size: 1.8rem;
  margin-bottom: 15px;
}

.error-message {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.1rem;
  margin-bottom: 25px;
}

.retry-button,
.refresh-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.retry-button:hover,
.refresh-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.no-results {
  text-align: center;
  padding: 60px 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.no-shops-message {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.2rem;
  margin-bottom: 25px;
}

.skeleton-shop-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 25px;
  gap: 25px;
}

@media (max-width: 768px) {
  .skeleton-shop-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .category-header {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  
  .category-section-title {
    font-size: 1.5rem;
  }
}

/* Customer Shops Pagination Styles */
.category-pagination-wrapper {
  margin: 2rem 0;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}

.category-pagination-wrapper .pagination-container {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 1.5rem;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.category-pagination-wrapper .pagination-container.customer-shops {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
}

.category-pagination-wrapper .pagination-info {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  margin-bottom: 1rem;
  text-align: center;
}

.category-pagination-wrapper .pagination-controls {
  gap: 0.5rem;
  justify-content: center;
}

.category-pagination-wrapper .pagination-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  transition: all 0.3s ease;
  font-weight: 500;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.category-pagination-wrapper .pagination-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

.category-pagination-wrapper .pagination-btn.active {
  background: linear-gradient(135deg, #ff6b6b, #f06595);
  border-color: #ff6b6b;
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}

.category-pagination-wrapper .pagination-btn:disabled {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
}

.category-pagination-wrapper .pagination-per-page {
  margin-bottom: 1rem;
  text-align: center;
}

.category-pagination-wrapper .pagination-per-page label {
  color: rgba(255, 255, 255, 0.8);
  margin-right: 0.5rem;
  font-weight: 500;
}

.category-pagination-wrapper .per-page-select {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  color: #ffffff;
  font-weight: 500;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.category-pagination-wrapper .per-page-select option {
  background: #333;
  color: #fff;
}

/* Responsive pagination adjustments */
@media (max-width: 768px) {
  .category-pagination-wrapper {
    margin: 1.5rem 0;
    padding: 1rem 0;
  }
  
  .category-pagination-wrapper .pagination-container {
    padding: 1rem;
    margin: 0 1rem;
  }
  
  .category-pagination-wrapper .pagination-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
  
  .category-pagination-wrapper .pagination-info {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .category-pagination-wrapper .pagination-container {
    margin: 0 0.5rem;
    padding: 0.75rem;
  }
  
  .category-pagination-wrapper .pagination-btn {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
  }
}

/* Product Image Carousel Styles */
.product-image-carousel {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

.carousel-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.main-image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
}

.product-image.main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.product-image.main-image:hover {
  transform: scale(1.05);
}

/* Navigation Arrows */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 2;
  opacity: 0;
}

.main-image-container:hover .carousel-btn {
  opacity: 1;
}

.carousel-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
  transform: translateY(-50%) scale(1.1);
}

.prev-btn {
  left: 8px;
}

.next-btn {
  right: 8px;
}



/* Thumbnail Navigation */
.thumbnail-container {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  max-height: 60px;
  overflow-y: auto;
}

.thumbnail {
  width: 40px;
  height: 40px;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  padding: 0;
  transition: all 0.2s ease;
  opacity: 0.7;
}

.thumbnail:hover {
  opacity: 1;
  transform: scale(1.05);
}

.thumbnail.active {
  border-color: #3b82f6;
  opacity: 1;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Single Image Styles */
.product-image-container.single-image {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
}

.product-image-container.single-image .product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.product-image-container.single-image .product-image:hover {
  transform: scale(1.05);
}

/* Placeholder for No Image */
.product-image-placeholder {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  border-radius: 8px;
  background-color: #f1f5f9;
  border: 2px dashed #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.no-image-text {
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
  .product-image-carousel {
    max-width: 250px;
  }
  
  .carousel-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
  
  .thumbnail {
    width: 35px;
    height: 35px;
  }
  

}

@media (max-width: 480px) {
  .product-image-carousel {
    max-width: 200px;
  }
  
  .thumbnail {
    width: 30px;
    height: 30px;
  }
  
  .carousel-btn {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }
}

/* Admin Dashboard Specific Styles */
.admin-dashboard .product-image-carousel {
  max-width: 200px;
}

.admin-dashboard .thumbnail-container {
  max-height: 50px;
}

.admin-dashboard .thumbnail {
  width: 35px;
  height: 35px;
}

* Admin Product Carousel Styles */
.admin-product-carousel {
  max-width: 250px;
}

.admin-product-carousel .main-image-container {
  aspect-ratio: 1;
  border-radius: 8px;
}

.admin-product-carousel .carousel-btn {
  width: 28px;
  height: 28px;
  font-size: 16px;
}

.admin-product-carousel .thumbnail {
  width: 32px;
  height: 32px;
}

/* Shopkeeper Dashboard Carousel Styles */
.shopkeeper-product-carousel {
  max-width: 200px;
}

.shopkeeper-product-carousel .main-image-container {
  aspect-ratio: 1;
  border-radius: 6px;
}

.shopkeeper-product-carousel .carousel-btn {
  width: 26px;
  height: 26px;
  font-size: 14px;
}

.shopkeeper-product-carousel .thumbnail {
  width: 30px;
  height: 30px;
}

/* Dashboard Product Carousel Styles */
.dashboard-product-carousel {
  max-width: 180px;
}

.dashboard-product-carousel .main-image-container {
  aspect-ratio: 1;
  border-radius: 6px;
}

.dashboard-product-carousel .carousel-btn {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.dashboard-product-carousel .thumbnail {
  width: 28px;
  height: 28px;
}

/* Ensure carousels work well in product cards */
.product-card .product-image-carousel {
  width: 100%;
  margin: 0;
}

.product-card .product-image-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

/* Enhanced hover effects for admin/shopkeeper views */
.admin-product-carousel .main-image-container:hover .carousel-btn,
.shopkeeper-product-carousel .main-image-container:hover .carousel-btn,
.dashboard-product-carousel .main-image-container:hover .carousel-btn {
  opacity: 1;
}

/* Customer Product Carousel Styles - For Shop Detail Page Product Cards */
.customer-product-carousel {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.customer-product-carousel.product-image-placeholder {
  height: 280px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  border: 2px dashed #cbd5e1;
}

.customer-product-carousel.product-image-container.single-image {
  height: 280px;
  border-radius: 20px 20px 0 0;
  border: none;
}

.customer-product-carousel .main-image-container {
  aspect-ratio: 1;
  border-radius: 20px 20px 0 0;
  border: none;
  background-color: #f8fafc;
}

.customer-product-carousel .product-image.main-image {
  border-radius: 20px 20px 0 0;
  transition: transform 0.4s ease;
}

.customer-product-carousel .product-image.main-image:hover {
  transform: scale(1.05);
}

.customer-product-carousel .carousel-btn {
  width: 40px;
  height: 40px;
  font-size: 20px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  opacity: 0;
  transition: all 0.3s ease;
}

.customer-product-carousel .main-image-container:hover .carousel-btn {
  opacity: 1;
}

.customer-product-carousel .carousel-btn:hover {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.9), rgba(41, 128, 185, 0.9));
  transform: translateY(-50%) scale(1.1);
}

.customer-product-carousel .prev-btn {
  left: 10px;
}

.customer-product-carousel .next-btn {
  right: 10px;
}

.customer-product-carousel .thumbnail-container {
  gap: 6px;
  max-height: 50px;
  padding: 8px 0;
}

.customer-product-carousel .thumbnail {
  width: 45px;
  height: 45px;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.customer-product-carousel .thumbnail:hover {
  transform: scale(1.05);
  border-color: rgba(52, 152, 219, 0.5);
}

.customer-product-carousel .thumbnail.active {
  border-color: #3498db;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

/* Modal Product Carousel Styles - For Product Detail Modal */
.modal-product-carousel {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.modal-product-carousel.product-image-placeholder {
  height: 400px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  border: 2px dashed #cbd5e1;
}

.modal-product-carousel.product-image-container.single-image {
  height: 400px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-product-carousel .main-image-container {
  aspect-ratio: auto;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-product-carousel .product-image.main-image {
  border-radius: 12px;
  cursor: pointer;
}

.modal-product-carousel .carousel-btn {
  width: 45px;
  height: 45px;
  font-size: 22px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9));
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
}

.modal-product-carousel .carousel-btn:hover {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.9), rgba(41, 128, 185, 0.9));
}

.modal-product-carousel .thumbnail-container {
  gap: 8px;
  max-height: 80px;
  padding: 12px 0;
}

.modal-product-carousel .thumbnail {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}

.modal-product-carousel .thumbnail.active {
  border-color: #3498db;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

/* Image Counter */
.image-counter {
  position: absolute;
  top: 15px;
  right: 15px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  z-index: 2;
}

/* Accessibility and Focus Styles */
.product-image-carousel:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

.carousel-btn:focus,
.thumbnail:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* Smooth transitions for better UX */
.product-image-carousel {
  transition: all 0.2s ease;
}

.carousel-container {
  transition: all 0.3s ease;
}

/* Mobile responsiveness for different contexts */
@media (max-width: 768px) {
  .admin-product-carousel {
    max-width: 180px;
  }
  
  .shopkeeper-product-carousel {
    max-width: 160px;
  }
  
  .dashboard-product-carousel {
    max-width: 140px;
  }
  
  .admin-product-carousel .carousel-btn,
  .shopkeeper-product-carousel .carousel-btn,
  .dashboard-product-carousel .carousel-btn {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }
  
  .admin-product-carousel .thumbnail,
  .shopkeeper-product-carousel .thumbnail,
  .dashboard-product-carousel .thumbnail {
    width: 25px;
    height: 25px;
  }

  /* Customer carousel mobile styles */
  .customer-product-carousel .carousel-btn {
    width: 35px;
    height: 35px;
    font-size: 18px;
    opacity: 1; /* Always visible on mobile */
  }
  
  .customer-product-carousel .thumbnail {
    width: 40px;
    height: 40px;
  }
  
  .customer-product-carousel .thumbnail-container {
    max-height: 45px;
  }

  /* Modal carousel mobile styles */
  .modal-product-carousel {
    max-width: 100%;
  }
  
  .modal-product-carousel .carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .modal-product-carousel .thumbnail {
    width: 50px;
    height: 50px;
  }
  
  .modal-product-carousel .thumbnail-container {
    max-height: 60px;
  }
}

@media (max-width: 480px) {
  .customer-product-carousel .carousel-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  
  .customer-product-carousel .thumbnail {
    width: 35px;
    height: 35px;
  }

  .modal-product-carousel .carousel-btn {
    width: 35px;
    height: 35px;
    font-size: 18px;
  }
  
  .modal-product-carousel .thumbnail {
    width: 45px;
    height: 45px;
  }
}
/* Enhanced Shop Detail Page */
.shop-detail-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
}

/* Shop Banner Styles */
.shop-banner-container {
  width: 100%;
  max-height: 300px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}

.shop-banner {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .shop-banner-container {
    max-height: 200px;
  }
  
  .shop-banner {
    width: 100%;
    height: 200px;
  }
  
  .shop-banner-placeholder {
    height: 200px;
  }
  
  .banner-shop-initial {
    width: 60px;
    height: 60px;
    font-size: 2rem;
  }
  
  .banner-shop-name {
    font-size: 1.4rem;
  }
}

@media (max-width: 480px) {
  .shop-banner-container {
    max-height: 150px;
    margin-bottom: 15px;
  }
  
  .shop-banner {
    width: 100%;
    height: 150px;
    border-radius: 0 0 15px 15px;
  }
  
  .shop-banner-placeholder {
    height: 150px;
    border-radius: 0 0 15px 15px;
  }
  
  .banner-shop-initial {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }
  
  .banner-shop-name {
    font-size: 1.2rem;
  }
}

.shop-detail-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
  pointer-events: none;
}

/* Loading States */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin: 20px;
  position: relative;
  z-index: 1;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 6px solid transparent;
  border-top: 6px solid #3498db;
  border-right: 6px solid #e74c3c;
  border-bottom: 6px solid #f39c12;
  border-left: 6px solid #9b59b6;
  border-radius: 50%;
  animation: spin 1.5s linear infinite, colorShift 3s ease-in-out infinite;
  margin-bottom: 20px;
}

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

@keyframes colorShift {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(180deg); }
}

.loading-container p {
  font-size: 1.2em;
  color: #667eea;
  font-weight: 600;
  margin: 0;
  animation: pulse 2s ease-in-out infinite;
}

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

/* Error States */
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 50px 30px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin: 20px;
  position: relative;
  z-index: 1;
}

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

.error-container h2 {
  color: #333;
  margin-bottom: 15px;
}

.error-message {
  color: #666;
  margin-bottom: 30px;
  max-width: 500px;
}

.error-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.retry-btn,
.back-btn {
  padding: 16px 32px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.retry-btn {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);
}

.retry-btn:hover {
  background: linear-gradient(135deg, #2980b9, #1f5f8b);
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(52, 152, 219, 0.4);
}

.back-btn {
  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
  color: white;
  box-shadow: 0 8px 20px rgba(149, 165, 166, 0.3);
}

.back-btn:hover {
  background: linear-gradient(135deg, #7f8c8d, #6c7b7d);
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(149, 165, 166, 0.4);
}

.shop-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
}

.shop-logo-large {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  margin-right: 20px;
}

.shop-info {
  flex: 1 1;
}

.shop-name-large {
  font-size: 2.5em;
  margin-bottom: 10px;
}

.shop-category {
  font-size: 1.2em;
  color: #555;
  margin-bottom: 10px;
}

.shop-address-large,
.shop-phone-large,
.shop-description {
  font-size: 1em;
  color: #666;
  margin-bottom: 10px;
}

.shop-actions {
  margin-top: 20px;
}

.whatsapp-button,
.call-button {
  background-color: #25d366;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  margin-right: 10px;
  transition: background-color 0.3s ease;
}

.call-button {
  background-color: #007bff;
}

.whatsapp-button:hover {
  background-color: #128c7e;
}

.call-button:hover {
  background-color: #0056b3;
}

.products-section {
  margin-top: 40px;
}

.products-title {
  font-size: 2em;
  margin-bottom: 20px;
  text-align: center;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.shop-not-found {
  text-align: center;
  font-size: 1.5em;
  margin-top: 50px;
}

@media (max-width: 768px) {
  .shop-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .shop-logo-large {
    margin-right: 0;
    margin-bottom: 20px;
  }
}

/* Enhanced Shop Header */
.shop-header-enhanced {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  padding: 40px;
  margin: 20px auto;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  max-width: 1200px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}

.shop-hero {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
}

.shop-logo-container {
  position: relative;
  display: inline-block;
}

.shop-logo-enhanced {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 20px;
  border: 4px solid #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.shop-logo-enhanced:hover {
  transform: scale(1.05);
}

.shop-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: linear-gradient(45deg, #e74c3c, #c0392b);
  color: white;
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 6px 15px rgba(231, 76, 60, 0.4);
  animation: pulse 2s infinite;
}

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

.shop-info-enhanced {
  text-align: center;
}

.shop-title-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.shop-name-enhanced {
  font-size: 3rem;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.shop-category-badge {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  padding: 8px 18px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.shop-description-enhanced {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 25px;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.shop-details-grid {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: #555;
}

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

.detail-text {
  font-weight: 500;
}

/* Contact Actions */
.contact-actions-section {
  max-width: 1200px;
  margin: 0 auto 30px auto;
  padding: 0 20px;
}

.contact-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 24px;
  border: none;
  border-radius: 15px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.action-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 ease;
}

.action-btn:hover::before {
  left: 100%;
}

.action-btn.primary {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);
}

.action-btn.primary:hover {
  background: linear-gradient(135deg, #2980b9, #1f5f8b);
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(52, 152, 219, 0.4);
}

.action-btn.secondary {
  background: linear-gradient(135deg, #27ae60, #229954);
  color: white;
  box-shadow: 0 8px 20px rgba(39, 174, 96, 0.3);
}

.action-btn.secondary:hover {
  background: linear-gradient(135deg, #229954, #1e8449);
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(39, 174, 96, 0.4);
}

.action-btn.tertiary {
  background: linear-gradient(135deg, #25d366, #20b358);
  color: white;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}

.action-btn.tertiary:hover {
  background: linear-gradient(135deg, #20b358, #1a9b4a);
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(37, 211, 102, 0.4);
}

.action-btn.quaternary {
  background: linear-gradient(135deg, #9b59b6, #8e44ad);
  color: white;
  box-shadow: 0 8px 20px rgba(155, 89, 182, 0.3);
}

.action-btn.quaternary:hover {
  background: linear-gradient(135deg, #8e44ad, #7d3c98);
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(155, 89, 182, 0.4);
}

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

/* Shop Stats */
.shop-stats-section {
  max-width: 1200px;
  margin: 0 auto 40px auto;
  padding: 0 30px;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 25px;
  gap: 25px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  padding: 35px;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
}

.stat-item {
  text-align: center;
  padding: 25px 15px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(155, 89, 182, 0.1));
  border: 2px solid rgba(52, 152, 219, 0.1);
  transition: all 0.3s ease;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stat-item:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.15), rgba(155, 89, 182, 0.15));
  border-color: rgba(52, 152, 219, 0.2);
}

.stat-number {
  display: block;
  font-size: 2.2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #3498db, #2980b9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  line-height: 1;
}

.stat-text {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  background: linear-gradient(135deg, #27ae60, #229954);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  line-height: 1.2;
  word-break: break-word;
}

.stat-label {
  font-size: 0.85rem;
  color: #667eea;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  line-height: 1;
}

/* Enhanced Products Section */
.products-section-enhanced {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 50px 20px;
}

.products-header {
  text-align: center;
  margin-bottom: 40px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  padding: 35px;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}

.products-title-enhanced {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 15px;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.products-count {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
  display: inline-block;
}

.products-grid-enhanced {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 30px;
  gap: 30px;
  position: relative;
  z-index: 1;
}

/* Customer Product Cards */
.customer-product-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}

.customer-product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3498db, #e74c3c, #f39c12, #9b59b6);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.customer-product-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.customer-product-card:hover::before {
  opacity: 1;
}

.product-image-container {
  position: relative;
  height: 280px;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}

.product-carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.product-image-enhanced {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  cursor: pointer;
}

.product-carousel:hover .product-image-enhanced {
  transform: scale(1.05);
}

.image-count-badge {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.no-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #f8f9fa;
  color: #6c757d;
  font-size: 14px;
}

.no-image-placeholder span:first-child {
  font-size: 2rem;
  margin-bottom: 8px;
}

.product-info-enhanced {
  padding: 25px;
}

.product-name-enhanced {
  font-size: 1.4rem;
  font-weight: 700;
  background: linear-gradient(135deg, #2c3e50, #3498db);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
  line-height: 1.3;
}

.product-price-enhanced {
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #27ae60, #229954);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 15px;
}

.product-description-enhanced {
  color: #666;
  line-height: 1.5;
  margin-bottom: 15px;
  font-size: 0.95rem;
}

.customer-actions {
  margin-top: 15px;
}

.inquire-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 15px rgba(52, 152, 219, 0.3);
}

.inquire-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 ease;
}

.inquire-btn:hover {
  background: linear-gradient(135deg, #2980b9, #1f5f8b);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(52, 152, 219, 0.4);
}

.inquire-btn:hover::before {
  left: 100%;
}

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

/* No Products State */
.no-products-state {
  text-align: center;
  padding: 80px 30px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}

.no-products-icon {
  font-size: 4rem;
  margin-bottom: 20px;
}

.no-products-state h3 {
  color: #333;
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.no-products-state p {
  color: #666;
  margin-bottom: 25px;
  font-size: 1.1rem;
}

.contact-shop-btn {
  padding: 16px 32px;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);
}

.contact-shop-btn:hover {
  background: linear-gradient(135deg, #2980b9, #1f5f8b);
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(52, 152, 219, 0.4);
}

/* Image Modal */
.image-modal-overlay {
  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: 20px;
}

.image-modal {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.modal-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.close-modal-btn {
  position: absolute;
  top: -40px;
  right: 0;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Share Modal */
.share-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;
}

.share-modal {
  background: white;
  padding: 30px;
  border-radius: 12px;
  max-width: 500px;
  width: 100%;
}

.share-modal h3 {
  margin-bottom: 15px;
  color: #333;
}

.share-modal p {
  margin-bottom: 20px;
  color: #666;
}

.share-link-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.share-link-input {
  flex: 1 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.copy-link-btn {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.close-share-btn {
  width: 100%;
  padding: 10px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* Responsive Design */
@media (max-width: 768px) {
  .shop-header-enhanced {
    padding: 20px;
    margin: 10px;
  }
  
  .shop-name-enhanced {
    font-size: 2rem;
  }
  
  .shop-title-section {
    flex-direction: column;
    gap: 8px;
  }
  
  .shop-details-grid {
    flex-direction: column;
    gap: 15px;
  }
  
  .contact-actions {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  
  .action-btn {
    padding: 12px 15px;
    font-size: 14px;
  }
  
  .products-grid-enhanced {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .stats-container {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .stat-item {
    padding: 10px;
  }
  
  .stat-number,
  .stat-text {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .shop-header-enhanced,
  .contact-actions-section,
  .shop-stats-section,
  .products-section-enhanced {
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .contact-actions {
    grid-template-columns: 1fr;
  }
  
  .action-btn {
    padding: 15px;
  }
  
  .stats-container {
    grid-template-columns: 1fr;
  }
  
  .products-grid-enhanced {
    grid-template-columns: 1fr;
  }
  
  .customer-product-card {
    margin-bottom: 15px;
  }
}/* Stagg
ered animations for product cards */
.products-grid-enhanced .customer-product-card {
  animation: slideInUp 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(30px);
}

.products-grid-enhanced .customer-product-card:nth-child(1) { animation-delay: 0.1s; }
.products-grid-enhanced .customer-product-card:nth-child(2) { animation-delay: 0.2s; }
.products-grid-enhanced .customer-product-card:nth-child(3) { animation-delay: 0.3s; }
.products-grid-enhanced .customer-product-card:nth-child(4) { animation-delay: 0.4s; }
.products-grid-enhanced .customer-product-card:nth-child(5) { animation-delay: 0.5s; }
.products-grid-enhanced .customer-product-card:nth-child(6) { animation-delay: 0.6s; }
.products-grid-enhanced .customer-product-card:nth-child(7) { animation-delay: 0.7s; }
.products-grid-enhanced .customer-product-card:nth-child(8) { animation-delay: 0.8s; }

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced modal styles */
.image-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

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

.image-modal {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.close-modal-btn {
  position: absolute;
  top: -50px;
  right: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #333;
  font-weight: bold;
}

.close-modal-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.9));
  transform: scale(1.1);
}

/* Enhanced share modal */
.share-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

.share-modal {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  padding: 40px;
  border-radius: 20px;
  max-width: 500px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  animation: slideInDown 0.3s ease;
}

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

.share-modal h3 {
  margin-bottom: 20px;
  color: #333;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}

.share-modal p {
  margin-bottom: 25px;
  color: #666;
  text-align: center;
}

.share-link-container {
  display: flex;
  gap: 12px;
  margin-bottom: 25px;
}

.share-link-input {
  flex: 1 1;
  padding: 12px 16px;
  border: 2px solid rgba(52, 152, 219, 0.2);
  border-radius: 10px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.share-link-input:focus {
  outline: none;
  border-color: #3498db;
  background: rgba(255, 255, 255, 1);
}

.copy-link-btn {
  padding: 12px 20px;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.copy-link-btn:hover {
  background: linear-gradient(135deg, #2980b9, #1f5f8b);
  transform: translateY(-1px);
}

.close-share-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.close-share-btn:hover {
  background: linear-gradient(135deg, #7f8c8d, #6c7b7d);
  transform: translateY(-1px);
}

/* Improved responsive design */
@media (max-width: 768px) {
  .shop-detail-page::before {
    background: 
      radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.2) 0%, transparent 40%),
      radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.2) 0%, transparent 40%);
  }
  
  .shop-header-enhanced {
    padding: 25px;
    margin: 15px;
  }
  
  .shop-name-enhanced {
    font-size: 2.2rem;
  }
  
  .contact-actions {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 25px;
  }
  
  .action-btn {
    padding: 15px 18px;
    font-size: 14px;
  }
  
  .products-grid-enhanced {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .stats-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 25px 20px;
    max-width: 100%;
  }
  
  .stat-item {
    padding: 20px 10px;
    min-height: 100px;
  }
  
  .stat-number {
    font-size: 1.8rem;
  }
  
  .stat-text {
    font-size: 1rem;
  }
  
  .stat-label {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .shop-header-enhanced,
  .contact-actions-section,
  .shop-stats-section,
  .products-section-enhanced {
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .shop-header-enhanced {
    padding: 20px;
  }
  
  .shop-name-enhanced {
    font-size: 1.8rem;
  }
  
  .contact-actions {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  
  .action-btn {
    padding: 16px;
  }
  
  .stats-container {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 25px 20px;
    max-width: 100%;
  }
  
  .stat-item {
    padding: 25px 20px;
    min-height: 80px;
  }
  
  .products-grid-enhanced {
    grid-template-columns: 1fr;
  }
  
  .customer-product-card {
    margin-bottom: 20px;
  }
  
  .product-image-container {
    height: 250px;
  }
  
  .share-modal {
    padding: 30px 20px;
    margin: 20px;
  }
}

/* Accessibility improvements */
.action-btn:focus,
.inquire-btn:focus,
.contact-shop-btn:focus,
.retry-btn:focus,
.back-btn:focus {
  outline: 3px solid rgba(52, 152, 219, 0.5);
  outline-offset: 2px;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .customer-product-card,
  .action-btn,
  .inquire-btn,
  .contact-shop-btn,
  .retry-btn,
  .back-btn,
  .loading-spinner {
    animation: none;
    transition: none;
  }
  
  .customer-product-card:hover,
  .action-btn:hover,
  .inquire-btn:hover,
  .contact-shop-btn:hover {
    transform: none;
  }
  
  .products-grid-enhanced .customer-product-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
}/* Produ
ct Carousel Styles */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  opacity: 0;
  z-index: 2;
}

.product-carousel:hover .carousel-btn {
  opacity: 1;
}

.carousel-btn:hover {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.9), rgba(41, 128, 185, 0.9));
  transform: translateY(-50%) scale(1.1);
}

.carousel-btn-prev {
  left: 10px;
}

.carousel-btn-next {
  right: 10px;
}

.carousel-dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-dot.active {
  background: white;
  transform: scale(1.2);
}

.carousel-dot:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.1);
}

.image-counter {
  position: absolute;
  top: 15px;
  right: 15px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  z-index: 2;
}

/* Touch/Swipe Support for Mobile */
@media (max-width: 768px) {
  .carousel-btn {
    opacity: 1;
    width: 35px;
    height: 35px;
    font-size: 18px;
  }
  
  .carousel-btn-prev {
    left: 8px;
  }
  
  .carousel-btn-next {
    right: 8px;
  }
  
  .carousel-dots {
    bottom: 10px;
    gap: 4px;
  }
  
  .carousel-dot {
    width: 5px;
    height: 5px;
  }
  
  .image-counter {
    top: 12px;
    right: 12px;
    padding: 4px 8px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .product-image-container {
    height: 250px;
  }
  
  .carousel-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  
  .carousel-btn-prev {
    left: 6px;
  }
  
  .carousel-btn-next {
    right: 6px;
  }
  
  .carousel-dots {
    bottom: 8px;
    gap: 3px;
  }
  
  .carousel-dot {
    width: 4px;
    height: 4px;
  }
  
  .image-counter {
    top: 10px;
    right: 10px;
    padding: 3px 6px;
    font-size: 10px;
  }
}

/* Accessibility improvements for carousel */
.carousel-btn:focus,
.carousel-dot:focus {
  outline: 2px solid rgba(52, 152, 219, 0.8);
  outline-offset: 2px;
}

/* Smooth transitions for image changes */
.product-image-enhanced {
  transition: opacity 0.3s ease, transform 0.4s ease;
}

/* Hover effects for better UX */
.product-carousel:hover .image-counter {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.8), rgba(41, 128, 185, 0.8));
}

.product-carousel:hover .carousel-dots .carousel-dot {
  background: rgba(255, 255, 255, 0.7);
}

.product-carousel:hover .carousel-dots .carousel-dot.active {
  background: white;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* Animation for carousel transitions */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.product-image-enhanced {
  animation: fadeIn 0.3s ease;
}

/* Prevent text selection on carousel controls */
.carousel-btn,
.carousel-dot,
.image-counter {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}/* Product 
Stock Information Styles */
.product-stock-info {
  margin: 12px 0;
}

.stock-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stock-status.in-stock {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: #166534;
  border: 1px solid #22c55e;
}

.stock-status.out-of-stock {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #991b1b;
  border: 1px solid #ef4444;
}

.stock-icon {
  font-size: 1rem;
}

/* Mobile responsive stock info */
@media (max-width: 768px) {
  .product-stock-info {
    margin: 10px 0;
  }
  
  .stock-status {
    font-size: 0.85rem;
    padding: 6px 10px;
  }
}

/* Enhanced product info layout */
.product-info-enhanced {
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-name-enhanced {
  margin-bottom: 8px;
}

.product-price-enhanced {
  margin-bottom: 8px;
}

.product-description-enhanced {
  margin-top: 12px;
  margin-bottom: 15px;
}/* Pro
ducts header actions */
.products-header-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
}

.refresh-products-btn {
  padding: var(--space-2) var(--space-3);
  background: var(--primary-blue);
  color: var(--neutral-white);
  border: none;
  border-radius: var(--radius-base);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.refresh-products-btn:hover {
  background: var(--primary-blue-dark);
  transform: translateY(-1px);
}

.refresh-products-btn:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .products-header-actions {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }
  
  .refresh-products-btn {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
  }
}/* Debug
 actions */
.debug-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.test-api-btn {
  padding: var(--space-2) var(--space-3);
  background: var(--secondary-orange);
  color: var(--neutral-white);
  border: none;
  border-radius: var(--radius-base);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.test-api-btn:hover {
  background: var(--secondary-orange-dark);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .debug-actions {
    flex-direction: column;
    gap: var(--space-1);
  }
  
  .test-api-btn {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
  }
}/* Expandable Description */
.expandable-description {
  margin: 15px 0;
}

.product-description-enhanced {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--neutral-dark);
  margin: 0 0 15px 0;
  white-space: pre-wrap; /* Preserve whitespace and line breaks */
  word-break: break-word; /* Break long words if needed */
  text-align: justify; /* Justify text for better readability */
}

.expand-btn {
  background: transparent;
  border: none;
  color: var(--primary-blue);
  font-weight: var(--font-semibold);
  cursor: pointer;
  padding: 5px 10px;
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
  text-decoration: underline;
}

.expand-btn:hover {
  background: var(--bg-secondary);
  color: var(--primary-blue-dark);
  text-decoration: none;
}
/*
 Customer Actions Improvements */
.customer-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.view-details-btn {
  flex: 1 1;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  color: var(--neutral-dark);
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.view-details-btn:hover {
  background: var(--primary-blue);
  color: var(--neutral-white);
  border-color: var(--primary-blue);
  transform: translateY(-2px);
}

.inquire-btn {
  flex: 1 1;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, var(--secondary-green), var(--secondary-green-dark));
  color: var(--neutral-white);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.inquire-btn:hover {
  background: linear-gradient(135deg, var(--secondary-green-dark), var(--secondary-green));
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Product Detail Modal */
.product-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-4);
}

.product-modal {
  background: var(--bg-primary);
  border-radius: var(--radius-2xl);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-2xl);
  animation: modalSlideIn 0.3s ease;
}

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

.product-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-6);
  border-bottom: 1px solid var(--border-light);
}

.product-modal-header h2 {
  font-family: var(--font-secondary);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--neutral-dark);
  margin: 0;
}

.close-modal-btn {
  width: 40px;
  height: 40px;
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--text-xl);
  color: var(--neutral-medium);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-modal-btn:hover {
  background: var(--error);
  color: var(--neutral-white);
}

.product-modal-content {
  padding: var(--space-6);
}

.product-modal-images {
  margin-bottom: var(--space-6);
  text-align: center;
}

.product-modal-images img {
  max-width: 100%;
  height: auto;
  max-height: 300px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.product-modal-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.product-modal-price {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--secondary-green);
  font-family: var(--font-secondary);
}

.product-modal-stock {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
}

.product-modal-stock.in-stock {
  background: var(--success-light);
  color: var(--success);
}

.product-modal-stock.out-of-stock {
  background: var(--error-light);
  color: var(--error);
}

.product-modal-description {
  background: var(--bg-secondary);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

.product-modal-description h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--neutral-dark);
  margin-bottom: var(--space-3);
}

.product-modal-description p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--neutral-dark);
  margin: 0;
  white-space: pre-wrap; /* Preserve whitespace and line breaks */
  word-break: break-word; /* Break long words if needed */
  text-align: justify; /* Justify text for better readability */
}

.product-modal-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.inquire-btn-modal,
.call-btn-modal {
  flex: 1 1;
  padding: var(--space-4) var(--space-5);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.inquire-btn-modal {
  background: linear-gradient(135deg, var(--secondary-green), var(--secondary-green-dark));
  color: var(--neutral-white);
}

.inquire-btn-modal:hover {
  background: linear-gradient(135deg, var(--secondary-green-dark), var(--secondary-green));
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.call-btn-modal {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
  color: var(--neutral-white);
}

.call-btn-modal:hover {
  background: linear-gradient(135deg, var(--primary-blue-dark), var(--primary-blue));
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .customer-actions {
    flex-direction: column;
  }
  
  .product-modal {
    margin: var(--space-2);
    max-height: 95vh;
  }
  
  .product-modal-header,
  .product-modal-content {
    padding: var(--space-4);
  }
  
  .product-modal-actions {
    flex-direction: column;
  }
  
  .product-modal-header h2 {
    font-size: var(--text-xl);
  }
  
  .product-modal-price {
    font-size: var(--text-2xl);
  }
}/* Enhan
ced Mobile Responsive Design */
@media (max-width: 768px) {
  .shop-detail-page {
    padding: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  /* Loading and Error States Mobile */
  .loading-container,
  .error-container {
    margin: 15px;
    padding: 30px 20px;
    border-radius: 16px;
    min-height: 50vh;
  }
  
  .loading-spinner {
    width: 40px;
    height: 40px;
    border-width: 4px;
  }
  
  .loading-container p {
    font-size: 1rem;
  }
  
  .error-icon {
    font-size: 3rem;
    margin-bottom: 15px;
  }
  
  .error-container h2 {
    font-size: 1.5rem;
    margin-bottom: 12px;
  }
  
  .error-message {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }
  
  .error-actions {
    flex-direction: column;
    gap: 12px;
  }
  
  .retry-btn,
  .back-btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 1rem;
    border-radius: 8px;
    min-height: 44px;
  }
  
  /* Shop Header Mobile */
  .shop-header-enhanced {
    margin: 15px;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  
  .shop-hero {
    margin-bottom: 20px;
  }
  
  .shop-logo-container {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
  }
  
  .shop-logo-enhanced {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .shop-badge {
    position: static;
    margin-top: 8px;
    padding: 4px 12px;
    font-size: 0.75rem;
    border-radius: 12px;
    display: inline-block;
  }
  
  .shop-info-enhanced {
    text-align: center;
  }
  
  .shop-title-section {
    margin-bottom: 15px;
  }
  
  .shop-name-enhanced {
    font-size: 1.75rem;
    margin-bottom: 8px;
    line-height: 1.2;
  }
  
  .shop-category-badge {
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 12px;
  }
  
  .shop-description-enhanced {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 15px;
    padding: 0 10px;
  }
  
  .shop-details-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
  
  .detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
  }
  
  .detail-icon {
    font-size: 1rem;
  }
  
  .detail-text {
    word-break: break-word;
  }
  
  /* Contact Actions Mobile */
  .contact-actions-section {
    margin: 15px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }
  
  .contact-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 12px;
    gap: 12px;
  }
  
  .action-btn {
    padding: 12px 16px;
    font-size: 0.85rem;
    border-radius: 10px;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
  }
  
  .btn-icon {
    font-size: 1.2rem;
  }
  
  /* Shop Stats Mobile */
  .shop-stats-section {
    margin: 15px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }
  
  .stats-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
    gap: 15px;
  }
  
  .stat-item {
    text-align: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
  }
  
  .stat-number,
  .stat-text {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
  }
  
  .stat-label {
    font-size: 0.75rem;
    color: #666;
  }
  
  /* Products Section Mobile */
  .products-section-enhanced {
    margin: 15px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }
  
  .products-header {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .products-title-enhanced {
    font-size: 1.5rem;
    margin-bottom: 8px;
  }
  
  .products-count {
    font-size: 0.85rem;
    color: #666;
  }
  
  .refresh-products-btn {
    margin-top: 10px;
    padding: 8px 16px;
    font-size: 0.8rem;
    border-radius: 8px;
    min-height: 36px;
  }
  
  .products-grid-enhanced {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 16px;
    gap: 16px;
  }
  
  /* Product Cards Mobile */
  .customer-product-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .product-image-container {
    height: 200px;
    position: relative;
    overflow: hidden;
  }
  
  .product-carousel {
    height: 100%;
    position: relative;
  }
  
  .product-image-enhanced {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
  }
  
  .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  
  .carousel-btn-prev {
    left: 8px;
  }
  
  .carousel-btn-next {
    right: 8px;
  }
  
  .carousel-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
  }
  
  .carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
  }
  
  .carousel-dot.active {
    background: white;
  }
  
  .image-counter {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    z-index: 2;
  }
  
  .no-image-placeholder {
    height: 100%;
    background: #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 0.9rem;
  }
  
  .no-image-placeholder span:first-child {
    font-size: 2rem;
    margin-bottom: 8px;
  }
  
  .product-info-enhanced {
    padding: 16px;
  }
  
  .product-name-enhanced {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.3;
  }
  
  .product-price-enhanced {
    font-size: 1.3rem;
    font-weight: 700;
    color: #27ae60;
    margin-bottom: 10px;
  }
  
  .product-stock-info {
    margin-bottom: 12px;
  }
  
  .stock-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
  }
  
  .stock-status.in-stock {
    background: #d4edda;
    color: #155724;
  }
  
  .stock-status.out-of-stock {
    background: #f8d7da;
    color: #721c24;
  }
  
  .stock-icon {
    font-size: 0.9rem;
  }
  
  .product-description-enhanced {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #666;
    margin-bottom: 15px;
  }
  
  .customer-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .view-details-btn,
  .inquire-btn {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .view-details-btn {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
  }
  
  .view-details-btn:hover {
    background: #3498db;
    color: white;
    border-color: #3498db;
  }
  
  .inquire-btn {
    background: linear-gradient(135deg, #27ae60, #229954);
    color: white;
    border: none;
  }
  
  .inquire-btn:hover {
    background: linear-gradient(135deg, #229954, #1e8449);
  }
  
  /* No Products State Mobile */
  .no-products-state {
    text-align: center;
    padding: 40px 20px;
    color: #666;
  }
  
  .no-products-icon {
    font-size: 3rem;
    margin-bottom: 15px;
  }
  
  .no-products-state h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }
  
  .no-products-state p {
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.4;
  }
  
  .contact-shop-btn {
    padding: 12px 24px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    min-height: 44px;
  }
  
  /* Modal Mobile Styles */
  .image-modal-overlay {
    padding: 20px;
  }
  
  .image-modal {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 12px;
  }
  
  .close-modal-btn {
    width: 36px;
    height: 36px;
    font-size: 1.5rem;
    top: 10px;
    right: 10px;
  }
  
  .modal-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
  }
  
  .share-modal-overlay {
    padding: 20px;
  }
  
  .share-modal {
    max-width: 90vw;
    padding: 20px;
    border-radius: 12px;
  }
  
  .share-modal h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
  }
  
  .share-modal p {
    font-size: 0.9rem;
    margin-bottom: 15px;
  }
  
  .share-link-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
  }
  
  .share-link-input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.85rem;
    word-break: break-all;
  }
  
  .copy-link-btn,
  .close-share-btn {
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    min-height: 40px;
  }
  
  .copy-link-btn {
    background: #3498db;
    color: white;
    border: none;
  }
  
  .close-share-btn {
    background: #6c757d;
    color: white;
    border: none;
  }
}

@media (max-width: 480px) {
  .shop-detail-page {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  /* Extra small mobile optimizations */
  .loading-container,
  .error-container {
    margin: 10px;
    padding: 20px 15px;
    border-radius: 12px;
  }
  
  .shop-header-enhanced,
  .contact-actions-section,
  .shop-stats-section,
  .products-section-enhanced {
    margin: 10px;
    padding: 15px;
    border-radius: 12px;
  }
  
  .shop-logo-enhanced {
    width: 80px;
    height: 80px;
  }
  
  .shop-name-enhanced {
    font-size: 1.5rem;
  }
  
  .shop-description-enhanced {
    font-size: 0.85rem;
    padding: 0 5px;
  }
  
  .contact-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  
  .action-btn {
    padding: 10px 12px;
    font-size: 0.75rem;
    min-height: 40px;
  }
  
  .btn-icon {
    font-size: 1rem;
  }
  
  .stats-container {
    gap: 10px;
  }
  
  .stat-item {
    padding: 10px;
  }
  
  .stat-number,
  .stat-text {
    font-size: 1rem;
  }
  
  .stat-label {
    font-size: 0.7rem;
  }
  
  .products-title-enhanced {
    font-size: 1.3rem;
  }
  
  .products-count {
    font-size: 0.8rem;
  }
  
  .refresh-products-btn {
    padding: 6px 12px;
    font-size: 0.75rem;
    min-height: 32px;
  }
  
  .products-grid-enhanced {
    gap: 12px;
  }
  
  .product-image-container {
    height: 180px;
  }
  
  .carousel-btn {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
  
  .carousel-btn-prev {
    left: 6px;
  }
  
  .carousel-btn-next {
    right: 6px;
  }
  
  .carousel-dots {
    bottom: 6px;
    gap: 3px;
  }
  
  .carousel-dot {
    width: 3px;
    height: 3px;
  }
  
  .image-counter {
    top: 6px;
    right: 6px;
    padding: 3px 6px;
    font-size: 0.65rem;
  }
  
  .product-info-enhanced {
    padding: 12px;
  }
  
  .product-name-enhanced {
    font-size: 1rem;
  }
  
  .product-price-enhanced {
    font-size: 1.2rem;
  }
  
  .stock-status {
    padding: 4px 8px;
    font-size: 0.75rem;
  }
  
  .product-description-enhanced {
    font-size: 0.8rem;
  }
  
  .customer-actions {
    gap: 6px;
  }
  
  .view-details-btn,
  .inquire-btn {
    padding: 10px 14px;
    font-size: 0.85rem;
    min-height: 40px;
  }
  
  .no-products-state {
    padding: 30px 15px;
  }
  
  .no-products-icon {
    font-size: 2.5rem;
  }
  
  .no-products-state h3 {
    font-size: 1.1rem;
  }
  
  .no-products-state p {
    font-size: 0.85rem;
  }
  
  .contact-shop-btn {
    padding: 10px 20px;
    font-size: 0.85rem;
    min-height: 40px;
  }
}

/* Landscape orientation optimizations */
@media (max-width: 768px) and (orientation: landscape) {
  .shop-header-enhanced {
    padding: 15px;
  }
  
  .shop-logo-enhanced {
    width: 70px;
    height: 70px;
  }
  
  .shop-name-enhanced {
    font-size: 1.4rem;
  }
  
  .contact-actions {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  
  .action-btn {
    padding: 8px 10px;
    font-size: 0.7rem;
  }
  
  .products-grid-enhanced {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .product-image-container {
    height: 150px;
  }
}

/* Touch interactions */
@media (max-width: 768px) {
  .customer-product-card {
    -webkit-tap-highlight-color: transparent;
  }
  
  .action-btn,
  .view-details-btn,
  .inquire-btn,
  .contact-shop-btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  .action-btn:active,
  .view-details-btn:active,
  .inquire-btn:active {
    transform: scale(0.98);
  }
  
  .carousel-btn:active {
    transform: translateY(-50%) scale(0.95);
  }
  
  .product-image-enhanced {
    -webkit-tap-highlight-color: transparent;
  }
}
/*
 Compact Professional Shop Header */
.shop-header-compact {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin: 20px;
  padding: 24px;
  position: relative;
  z-index: 2;
}

.shop-main-info {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.shop-logo-section {
  position: relative;
  flex-shrink: 0;
}

.shop-logo-compact {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.shop-badge-compact {
  position: absolute;
  top: -5px;
  right: -5px;
  background: linear-gradient(45deg, #e74c3c, #c0392b);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}

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

.shop-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.shop-name-compact {
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, #2c3e50, #3498db);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  line-height: 1.2;
}

.shop-category-compact {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.shop-description-compact {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 8px 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-contact-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #555;
}

.contact-icon {
  font-size: 1rem;
  color: #3498db;
  flex-shrink: 0;
}

.contact-text {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-stats-compact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  min-width: 80px;
}

.stat-compact {
  text-align: center;
  padding: 8px 12px;
  background: rgba(52, 152, 219, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(52, 152, 219, 0.2);
}

.stat-number-compact {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #3498db;
  line-height: 1;
}

.stat-status-compact {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #27ae60;
  line-height: 1;
  text-transform: uppercase;
}

.stat-label-compact {
  display: block;
  font-size: 0.7rem;
  color: #666;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.shop-actions-compact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.action-btn-compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: none;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-height: 60px;
}

.action-btn-compact.primary {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.action-btn-compact.secondary {
  background: linear-gradient(135deg, #27ae60, #229954);
  color: white;
  box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}

.action-btn-compact.tertiary {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: white;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.action-btn-compact.quaternary {
  background: linear-gradient(135deg, #9b59b6, #8e44ad);
  color: white;
  box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
}

.action-btn-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

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

.action-btn-compact .btn-icon {
  font-size: 1.2rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .shop-header-compact {
    margin: 15px;
    padding: 20px;
  }
  
  .shop-main-info {
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
  }
  
  .shop-logo-section {
    align-self: center;
  }
  
  .shop-logo-compact {
    width: 70px;
    height: 70px;
  }
  
  .shop-title-row {
    justify-content: center;
    text-align: center;
  }
  
  .shop-name-compact {
    font-size: 1.5rem;
  }
  
  .shop-description-compact {
    text-align: center;
  }
  
  .shop-contact-info {
    align-items: center;
  }
  
  .contact-item {
    justify-content: center;
  }
  
  .shop-stats-compact {
    flex-direction: row;
    justify-content: center;
    gap: 15px;
  }
  
  .shop-actions-compact {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .shop-header-compact {
    margin: 10px;
    padding: 15px;
  }
  
  .shop-name-compact {
    font-size: 1.3rem;
  }
  
  .shop-actions-compact {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .action-btn-compact {
    flex-direction: row;
    justify-content: center;
    min-height: 50px;
    padding: 12px 16px;
  }
  
  .action-btn-compact .btn-icon {
    font-size: 1rem;
  }
}/* Co
mpact Products Section */
.products-section-compact {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin: 20px;
  padding: 20px;
  position: relative;
  z-index: 2;
}

.products-header-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(52, 152, 219, 0.1);
}

.products-title-compact {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #2c3e50, #3498db);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.products-info-compact {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.products-count-compact {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.products-page-info {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 0.75rem;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.refresh-btn-compact {
  background: rgba(52, 152, 219, 0.1);
  border: 1px solid rgba(52, 152, 219, 0.2);
  color: #3498db;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.refresh-btn-compact:hover {
  background: rgba(52, 152, 219, 0.2);
  transform: translateY(-1px);
}

.products-grid-compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-top: 0;
}

/* Update existing product cards to be more compact */
.customer-product-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  height: fit-content;
}

.customer-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* Compact product image container */
.product-image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: #f8f9fa;
}

.product-image-enhanced {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.customer-product-card:hover .product-image-enhanced {
  transform: scale(1.05);
}

/* Compact product info */
.product-info-enhanced {
  padding: 16px;
}

.product-name-enhanced {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 8px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-price-enhanced {
  font-size: 1.2rem;
  font-weight: 700;
  color: #27ae60;
  margin: 0 0 8px 0;
}

.product-description-enhanced {
  color: #666;
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compact product actions */
.product-actions-enhanced {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.product-action-btn {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.product-action-btn.whatsapp {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: white;
}

.product-action-btn.details {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
}

.product-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Mobile responsive for products */
@media (max-width: 768px) {
  .products-section-compact {
    margin: 15px;
    padding: 16px;
  }
  
  .products-header-compact {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
  }
  
  .products-title-compact {
    font-size: 1.3rem;
  }
  
  .products-info-compact {
    align-self: stretch;
    justify-content: space-between;
  }
  
  .products-grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
  }
  
  .product-image-container {
    height: 180px;
  }
  
  .product-info-enhanced {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .products-section-compact {
    margin: 10px;
    padding: 12px;
  }
  
  .products-grid-compact {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .product-image-container {
    height: 160px;
  }
  
  .product-actions-enhanced {
    flex-direction: column;
    gap: 6px;
  }
  
  .product-action-btn {
    padding: 12px;
    font-size: 0.9rem;
  }
}/* Reduce
 carousel dot scale transforms for mobile */
@media (max-width: 768px) {
  .carousel-dot.active {
    transform: scale(1.1);
  }
  
  .carousel-dot:hover {
    transform: scale(1.05);
  }
}

@media (max-width: 480px) {
  .carousel-dot.active {
    transform: scale(1.0);
  }
  
  .carousel-dot:hover {
    transform: scale(1.0);
  }
}

/* Customer Products Pagination Styles */
.shop-products-pagination-wrapper {
  margin: 2.5rem 0 1.5rem 0;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop-products-pagination-wrapper .pagination-container {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

.shop-products-pagination-wrapper .pagination-container.customer-products {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
}

.shop-products-pagination-wrapper .pagination-info {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  margin-bottom: 1rem;
  text-align: center;
  font-size: 0.95rem;
}

.shop-products-pagination-wrapper .pagination-controls {
  gap: 0.5rem;
  justify-content: center;
}

.shop-products-pagination-wrapper .pagination-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  font-weight: 500;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.shop-products-pagination-wrapper .pagination-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25);
}

.shop-products-pagination-wrapper .pagination-btn.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: #667eea;
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.shop-products-pagination-wrapper .pagination-btn:disabled {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
  cursor: not-allowed;
}

.shop-products-pagination-wrapper .pagination-per-page {
  margin-bottom: 1rem;
  text-align: center;
}

.shop-products-pagination-wrapper .pagination-per-page label {
  color: rgba(255, 255, 255, 0.8);
  margin-right: 0.5rem;
  font-weight: 500;
}

.shop-products-pagination-wrapper .per-page-select {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  color: #ffffff;
  font-weight: 500;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.shop-products-pagination-wrapper .per-page-select option {
  background: #333;
  color: #fff;
}

/* Responsive pagination adjustments for shop products */
@media (max-width: 768px) {
  .shop-products-pagination-wrapper {
    margin: 2rem 0 1rem 0;
    padding: 1rem 0;
  }
  
  .shop-products-pagination-wrapper .pagination-container {
    padding: 1rem;
    margin: 0 1rem;
  }
  
  .shop-products-pagination-wrapper .pagination-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
  
  .shop-products-pagination-wrapper .pagination-info {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .shop-products-pagination-wrapper .pagination-container {
    margin: 0 0.5rem;
    padding: 0.75rem;
  }
  
  .shop-products-pagination-wrapper .pagination-btn {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
  }
  
  .shop-products-pagination-wrapper .pagination-info {
    font-size: 0.85rem;
  }
}
/* View Count Styles - Blue Violet Color */
/* This file contains isolated styles for product view counts to avoid affecting other sections */

/* Product view count in ProductCard component */
.product-views {
  color: #8A2BE2 !important; /* Blue Violet */
  font-weight: 600 !important;
}

/* Product view count in ShopDetailPage */
.product-views-count {
  color: #8A2BE2 !important; /* Blue Violet */
  font-weight: 600 !important;
}

/* Ensure the eye icon and text are both colored */
.product-views-count,
.product-views {
  display: flex;
  align-items: center;
  gap: 4px;
}
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  background-color: #f4f4f4;
}

.auth-card {
  background: white;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.auth-card.enhanced {
  max-width: 480px;
  padding: 32px;
}

.auth-card h2 {
  margin-bottom: 20px;
  color: #333;
}

.form-group {
  margin-bottom: 15px;
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #555;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.auth-button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white !important;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.3s ease;
}

.auth-button:hover {
  background-color: #0056b3;
}

.error-message {
  color: red;
  margin-bottom: 15px;
}

.auth-link {
  margin-top: 20px;
}

.auth-link a {
  color: #007bff;
  text-decoration: none;
}

.auth-link a:hover {
  text-decoration: underline;
}
/* Enhanced Registration Styles */

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e9ecef;
}

.back-button {
  background: none;
  border: none;
  color: #007bff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 0;
  transition: color 0.2s ease;
}

.back-button:hover {
  color: #0056b3;
  text-decoration: underline;
}

.step-indicator {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Mobile Responsive Enhancements */
@media (max-width: 768px) {
  .auth-container {
    padding: 16px;
    min-height: 100vh;
    align-items: flex-start;
    padding-top: 40px;
  }
  
  .auth-card.enhanced {
    max-width: 100%;
    padding: 24px;
    margin: 0;
  }
  
  .step-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
  }
  
  .back-button {
    font-size: 13px;
    padding: 6px 0;
  }
  
  .step-indicator {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .auth-container {
    padding: 12px;
    padding-top: 20px;
  }
  
  .auth-card.enhanced {
    padding: 20px;
    border-radius: 8px;
  }
  
  .auth-card h2 {
    font-size: 20px;
    margin-bottom: 16px;
  }
  
  .step-header {
    margin-bottom: 16px;
    padding-bottom: 10px;
  }
  
  .back-button {
    font-size: 12px;
  }
  
  .step-indicator {
    font-size: 10px;
  }
}

/* Touch interactions */
@media (max-width: 768px) {
  .back-button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  
  .back-button:active {
    transform: scale(0.98);
  }
}

/* Focus states for accessibility */
.back-button:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Animation for smooth transitions */
@media (prefers-reduced-motion: no-preference) {
  .auth-card.enhanced {
    animation: slideUp 0.3s ease;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .auth-card.enhanced {
    animation: none;
  }
}/* Enhan
ced Login Styles */

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 12px;
  font-size: 16px;
  z-index: 1;
  pointer-events: none;
}

.credential-input {
  width: 100%;
  padding: 10px 10px 10px 40px !important;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: all 0.2s ease;
}

.credential-input:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
  outline: none;
}

.input-type-indicator {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}

.type-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.type-badge.email {
  background: #e3f2fd;
  color: #1976d2;
}

.type-badge.phone {
  background: #e8f5e8;
  color: #388e3c;
}

.login-help {
  margin: 16px 0;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #007bff;
}

.help-text {
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

/* Mobile Responsive for Login */
@media (max-width: 768px) {
  .input-icon {
    left: 14px;
    font-size: 14px;
  }
  
  .credential-input {
    padding: 12px 12px 12px 42px !important;
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  .type-badge {
    font-size: 10px;
    padding: 2px 6px;
  }
  
  .login-help {
    margin: 14px 0;
    padding: 10px;
  }
  
  .help-text {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .input-icon {
    left: 12px;
    font-size: 13px;
  }
  
  .credential-input {
    padding: 10px 10px 10px 38px !important;
  }
  
  .type-badge {
    font-size: 9px;
    padding: 1px 5px;
  }
  
  .login-help {
    margin: 12px 0;
    padding: 8px;
  }
  
  .help-text {
    font-size: 11px;
  }
}

/* Animation for type indicator */
@media (prefers-reduced-motion: no-preference) {
  .type-badge {
    animation: fadeIn 0.3s ease;
  }
  
  .input-type-indicator {
    transition: all 0.2s ease;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .type-badge {
    animation: none;
  }
  
  .input-type-indicator {
    transition: none;
  }
}

/* Focus states for enhanced login */
.credential-input:focus + .input-type-indicator .type-badge {
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}/* Phone R
egistration Start */
.phone-registration-start {
  margin-top: 20px;
  text-align: center;
}

.phone-info {
  background: #e8f4fd;
  border: 1px solid #bee5eb;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #0c5460;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .phone-info {
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 14px;
  }
}

@media (max-width: 480px) {
  .phone-info {
    padding: 8px 10px;
    font-size: 12px;
    margin-bottom: 12px;
  }
}/* R
egistration Method Selector Styles - Inline */

.registration-method-selector {
  margin-bottom: 24px;
}

.method-selector-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  text-align: center;
}

.method-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.method-option {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  width: 100%;
}

.method-option:hover {
  border-color: #007bff;
  background: #f8f9ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
}

.method-option.active {
  border-color: #007bff;
  background: #f8f9ff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.method-option.active .method-name {
  color: #007bff;
  font-weight: 600;
}

.method-icon {
  font-size: 24px;
  margin-right: 16px;
  min-width: 32px;
  text-align: center;
}

.method-content {
  flex: 1 1;
}

.method-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.method-description {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}/* Sim
ple SMS Status */
.sms-status-simple {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #e8f5e8;
  border: 1px solid #c3e6c3;
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #2d5a2d;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: #28a745;
  border-radius: 50%;
}
/* Pas
sword Toggle Styles for Login */

.password-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input {
  width: 100%;
  padding: 10px 45px 10px 10px !important;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: all 0.2s ease;
}

.password-input:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
  outline: none;
}

.password-toggle {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  color: #666;
}

.password-toggle:hover {
  background: #f8f9fa;
  color: #333;
  transform: scale(1.05);
}

.password-toggle:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
  background: #f8f9fa;
}

.password-toggle:active {
  transform: scale(0.95);
}

/* Mobile responsive for password toggle */
@media (max-width: 768px) {
  .password-input {
    padding: 12px 50px 12px 12px !important;
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  .password-toggle {
    right: 14px;
    font-size: 20px;
    padding: 8px;
    min-width: 36px;
    min-height: 36px;
  }
}

@media (max-width: 480px) {
  .password-input {
    padding: 10px 45px 10px 10px !important;
  }
  
  .password-toggle {
    right: 12px;
    font-size: 18px;
    padding: 6px;
    min-width: 32px;
    min-height: 32px;
  }
}

/* Touch interactions */
@media (max-width: 768px) {
  .password-toggle {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}

/* Animation for smooth transitions */
@media (prefers-reduced-motion: no-preference) {
  .password-toggle {
    transition: all 0.2s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .password-toggle {
    transition: none;
  }
}/* Term
s and Conditions Styles */
.terms-group {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 5px;
  background: #fafafa;
}

.terms-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #555;
}

.terms-checkbox {
  display: none;
}

.checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 4px;
  position: relative;
  flex-shrink: 0;
  transition: all 0.3s ease;
  background: white;
  display: inline-block;
  margin-top: 2px;
}

.terms-checkbox:checked + .checkmark {
  background: #3498db;
  border-color: #3498db;
}

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

.terms-text {
  flex: 1 1;
}

.terms-link {
  background: none;
  border: none;
  color: #3498db;
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  margin: 0;
  font-family: inherit;
}

.terms-link:hover {
  color: #2980b9;
  text-decoration: none;
}

.terms-link:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Disabled button when terms not accepted */
.auth-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #ccc;
}

.auth-button:disabled:hover {
  background: #ccc;
  transform: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .terms-checkbox-label {
    font-size: 0.85rem;
    gap: 10px;
  }
  
  .checkmark {
    width: 18px;
    height: 18px;
  }
  
  .terms-checkbox:checked + .checkmark::after {
    font-size: 12px;
  }
}/* Ma
ster Admin Login Styles */
.master-admin-section {
  margin: 20px 0;
  padding: 15px;
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
}

.master-admin-toggle {
  margin-bottom: 15px;
}

.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #856404;
  font-weight: 500;
}

.checkbox-container input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.2);
}

.master-otp-input {
  width: 100%;
  padding: 12px;
  border: 2px solid #ffc107;
  border-radius: 6px;
  font-size: 16px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: bold;
  background-color: #fffbf0;
}

.master-otp-input:focus {
  outline: none;
  border-color: #ff9800;
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2);
}

.master-admin-section .help-text {
  color: #856404;
  font-size: 12px;
  margin-top: 5px;
  text-align: center;
}

/* Master admin button styling */
.auth-button:has-text("Master Login") {
  background: linear-gradient(135deg, #ff9800, #f57c00);
  border-color: #ff9800;
}

.auth-button:has-text("Master Login"):hover {
  background: linear-gradient(135deg, #f57c00, #ef6c00);
}
/* Terms and Conditions Modal */
.terms-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.terms-modal-content {
  background: white;
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.terms-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e1e8ed;
  flex-shrink: 0;
}

.terms-modal-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.5rem;
  font-weight: 600;
}

.terms-modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.terms-modal-close:hover {
  background: #f1f3f4;
  color: #333;
}

.terms-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1 1;
}

.terms-section {
  margin-bottom: 24px;
}

.terms-section:last-child {
  margin-bottom: 0;
}

.terms-section h3 {
  color: #2c3e50;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 12px 0;
  border-bottom: 2px solid #3498db;
  padding-bottom: 4px;
}

.terms-section p {
  color: #555;
  line-height: 1.6;
  margin: 0 0 8px 0;
}

.terms-section ul {
  margin: 8px 0;
  padding-left: 20px;
}

.terms-section li {
  color: #555;
  line-height: 1.6;
  margin-bottom: 4px;
}

.terms-modal-footer {
  padding: 20px 24px;
  border-top: 1px solid #e1e8ed;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.terms-accept-btn {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.terms-accept-btn:hover {
  background: linear-gradient(135deg, #2980b9, #1f5f8b);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .terms-modal-overlay {
    padding: 10px;
  }
  
  .terms-modal-content {
    max-height: 90vh;
  }
  
  .terms-modal-header {
    padding: 16px 20px;
  }
  
  .terms-modal-header h2 {
    font-size: 1.3rem;
  }
  
  .terms-modal-body {
    padding: 20px;
  }
  
  .terms-section h3 {
    font-size: 1rem;
  }
  
  .terms-modal-footer {
    padding: 16px 20px;
  }
  
  .terms-accept-btn {
    padding: 10px 24px;
    font-size: 0.9rem;
  }
}

/* Scrollbar styling for modal body */
.terms-modal-body::-webkit-scrollbar {
  width: 6px;
}

.terms-modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.terms-modal-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.terms-modal-body::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
/* Phone Number Input Styles */

.phone-number-input {
  position: relative;
}

.phone-input-container {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
}

.phone-input-container:focus-within {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.phone-input-container.error {
  border-color: #dc3545;
}

/* Country Selector */
.country-selector {
  position: relative;
}

.country-selector-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: #f8f9fa;
  border: none;
  border-right: 1px solid #ddd;
  cursor: pointer;
  transition: background-color 0.2s ease;
  min-width: 80px;
  justify-content: center;
}

.country-selector-btn:hover {
  background: #e9ecef;
}

.country-flag {
  font-size: 16px;
}

.country-code {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.dropdown-arrow {
  font-size: 10px;
  color: #666;
  transition: transform 0.2s ease;
}

.country-selector-btn:hover .dropdown-arrow {
  transform: rotate(180deg);
}

/* Country Dropdown */
.country-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 300px;
  overflow: hidden;
}

.country-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #ddd;
  font-weight: 600;
  color: #333;
}

.close-dropdown {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-dropdown:hover {
  color: #333;
}

.country-list {
  max-height: 250px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.country-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.country-option:hover {
  background: #f8f9fa;
}

.country-option.selected {
  background: #e3f2fd;
  color: #007bff;
}

.country-info {
  display: flex;
  flex-direction: column;
  flex: 1 1;
}

.country-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.country-option.selected .country-name {
  color: #007bff;
}

.country-option .country-code {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

.country-option.selected .country-code {
  color: #007bff;
}

/* Phone Input */
.phone-input {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  outline: none;
  font-size: 16px;
  background: transparent;
}

.phone-input::placeholder {
  color: #999;
}

.phone-input.error {
  background: #fff5f5;
}

/* Formatted Phone Display */
.formatted-phone {
  font-size: 12px;
  color: #007bff;
  margin-top: 4px;
  padding-left: 2px;
  font-weight: 500;
}

/* Error Styles */
.error-text {
  color: #dc3545;
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

.error-message {
  color: #dc3545;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 15px;
  font-size: 14px;
}

/* Dropdown Overlay */
.dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: transparent;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
  .country-selector-btn {
    padding: 12px 10px;
    min-width: 70px;
  }
  
  .country-flag {
    font-size: 14px;
  }
  
  .country-code {
    font-size: 13px;
  }
  
  .phone-input {
    padding: 12px;
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  .country-dropdown {
    max-height: 250px;
  }
  
  .country-list {
    max-height: 200px;
  }
  
  .country-option {
    padding: 14px 16px;
    min-height: 50px; /* Touch-friendly size */
  }
  
  .country-name {
    font-size: 15px;
  }
  
  .country-option .country-code {
    font-size: 13px;
  }
  
  .formatted-phone {
    font-size: 13px;
    margin-top: 6px;
  }
}

@media (max-width: 480px) {
  .country-selector-btn {
    padding: 10px 8px;
    min-width: 65px;
  }
  
  .country-flag {
    font-size: 12px;
  }
  
  .country-code {
    font-size: 12px;
  }
  
  .phone-input {
    padding: 10px;
  }
  
  .country-dropdown-header {
    padding: 10px 12px;
    font-size: 14px;
  }
  
  .country-option {
    padding: 12px 14px;
    min-height: 48px;
  }
  
  .country-name {
    font-size: 14px;
  }
  
  .country-option .country-code {
    font-size: 12px;
  }
}

/* Touch interactions */
@media (max-width: 768px) {
  .country-selector-btn,
  .country-option,
  .close-dropdown {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  .country-option:active {
    transform: scale(0.98);
  }
}

/* Focus states for accessibility */
.country-selector-btn:focus,
.phone-input:focus,
.country-option:focus,
.close-dropdown:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Animation for smooth transitions */
@media (prefers-reduced-motion: no-preference) {
  .country-dropdown {
    animation: slideDown 0.2s ease;
  }
  
  .dropdown-arrow {
    transition: transform 0.2s ease;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .country-dropdown {
    animation: none;
  }
  
  .dropdown-arrow {
    transition: none;
  }
}/* 
Terms and Conditions Styles for Phone Input */
.terms-group {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 5px;
  background: #fafafa;
}

.terms-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #555;
}

.terms-checkbox {
  display: none;
}

.checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 4px;
  position: relative;
  flex-shrink: 0;
  transition: all 0.3s ease;
  background: white;
  display: inline-block;
  margin-top: 2px;
  margin-right: 5px;
}

.terms-checkbox:checked + .checkmark {
  background: #3498db;
  border-color: #3498db;
}

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

.terms-text {
  flex: 1 1;
}

.terms-link {
  background: none;
  border: none;
  color: #3498db;
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  margin: 0;
  font-family: inherit;
}

.terms-link:hover {
  color: #2980b9;
  text-decoration: none;
}

.terms-link:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
  border-radius: 2px;
}
/* OTP Verification Styles */

.otp-verification {
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
}

.otp-header {
  margin-bottom: 32px;
}

.otp-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.otp-header h3 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.otp-description {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
  margin: 0;
}

.otp-description strong {
  color: #333;
  font-weight: 600;
}

/* OTP Form */
.otp-form {
  margin-bottom: 24px;
}

.otp-inputs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.otp-input {
  width: 48px;
  height: 56px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: #333;
  background: #fff;
  transition: all 0.2s ease;
}

.otp-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
  transform: scale(1.05);
}

.otp-input.error {
  border-color: #dc3545;
  background: #fff5f5;
}

.otp-input:disabled {
  background: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
}

/* Timer */
.otp-timer {
  margin-bottom: 24px;
}

.timer-text {
  font-size: 14px;
  color: #666;
}

.timer-text strong {
  color: #007bff;
  font-weight: 600;
}

.timer-expired {
  font-size: 14px;
  color: #dc3545;
  font-weight: 500;
}

/* Actions */
.otp-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.verify-button {
  width: 100%;
  padding: 12px 24px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.verify-button:hover:not(:disabled) {
  background: #0056b3;
  transform: translateY(-1px);
}

.verify-button:disabled {
  background: #6c757d;
  cursor: not-allowed;
  transform: none;
}

.resend-button {
  width: 100%;
  padding: 10px 24px;
  background: transparent;
  color: #007bff;
  border: 2px solid #007bff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.resend-button:hover:not(:disabled) {
  background: #007bff;
  color: white;
}

.resend-button:disabled {
  color: #6c757d;
  border-color: #6c757d;
  cursor: not-allowed;
}

/* Error Message */
.error-message {
  color: #dc3545;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 16px;
  font-size: 14px;
}

/* Help Section */
.otp-help {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  text-align: left;
}

.otp-help p {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.otp-help ul {
  margin: 0;
  padding-left: 20px;
}

.otp-help li {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
  line-height: 1.4;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
  .otp-verification {
    padding: 0 16px;
  }
  
  .otp-header {
    margin-bottom: 24px;
  }
  
  .otp-icon {
    font-size: 40px;
    margin-bottom: 12px;
  }
  
  .otp-header h3 {
    font-size: 20px;
    margin-bottom: 6px;
  }
  
  .otp-description {
    font-size: 15px;
  }
  
  .otp-inputs {
    gap: 8px;
    margin-bottom: 16px;
  }
  
  .otp-input {
    width: 42px;
    height: 50px;
    font-size: 20px;
    border-radius: 6px;
  }
  
  .verify-button {
    padding: 14px 24px;
    font-size: 16px;
    min-height: 48px; /* Touch-friendly size */
  }
  
  .resend-button {
    padding: 12px 24px;
    font-size: 14px;
    min-height: 44px; /* Touch-friendly size */
  }
  
  .otp-help {
    padding: 12px;
    margin-top: 16px;
  }
}

@media (max-width: 480px) {
  .otp-verification {
    padding: 0 12px;
  }
  
  .otp-header {
    margin-bottom: 20px;
  }
  
  .otp-icon {
    font-size: 36px;
    margin-bottom: 10px;
  }
  
  .otp-header h3 {
    font-size: 18px;
  }
  
  .otp-description {
    font-size: 14px;
  }
  
  .otp-inputs {
    gap: 6px;
    margin-bottom: 14px;
  }
  
  .otp-input {
    width: 38px;
    height: 46px;
    font-size: 18px;
    border-radius: 4px;
  }
  
  .verify-button {
    padding: 12px 20px;
    font-size: 15px;
  }
  
  .resend-button {
    padding: 10px 20px;
    font-size: 13px;
  }
  
  .timer-text,
  .timer-expired {
    font-size: 13px;
  }
  
  .otp-help {
    padding: 10px;
  }
  
  .otp-help p {
    font-size: 13px;
  }
  
  .otp-help li {
    font-size: 12px;
  }
}

/* Touch interactions */
@media (max-width: 768px) {
  .otp-input,
  .verify-button,
  .resend-button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  .verify-button:active:not(:disabled) {
    transform: scale(0.98);
  }
  
  .resend-button:active:not(:disabled) {
    transform: scale(0.98);
  }
}

/* Focus states for accessibility */
.verify-button:focus,
.resend-button:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Animation for smooth transitions */
@media (prefers-reduced-motion: no-preference) {
  .otp-input {
    transition: all 0.2s ease;
  }
  
  .verify-button,
  .resend-button {
    transition: all 0.2s ease;
  }
  
  .otp-verification {
    animation: slideUp 0.3s ease;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .otp-input,
  .verify-button,
  .resend-button {
    transition: none;
  }
  
  .otp-verification {
    animation: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .otp-input {
    border-width: 3px;
  }
  
  .otp-input:focus {
    border-width: 3px;
  }
}
/* Password Creation Styles */

.password-creation {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

.password-header {
  margin-bottom: 32px;
}

.password-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.password-header h3 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.password-description {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
  margin: 0;
}

.password-description strong {
  color: #333;
  font-weight: 600;
}

/* Form Styles */
.password-form {
  text-align: left;
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

.password-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-container input {
  width: 100%;
  padding: 12px 45px 12px 12px;
  border: 2px solid #e9ecef;
  border-radius: 6px;
  font-size: 16px;
  transition: all 0.2s ease;
  background: #fff;
}

.password-input-container input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.password-input-container input.error {
  border-color: #dc3545;
  background: #fff5f5;
}

.password-toggle {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.password-toggle:hover {
  background: #f8f9fa;
}

.password-toggle:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Password Strength Indicator */
.password-strength {
  margin-top: 8px;
}

.strength-bar {
  width: 100%;
  height: 4px;
  background: #e9ecef;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}

.strength-fill {
  height: 100%;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.strength-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.strength-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.strength-feedback {
  flex: 1 1;
  text-align: right;
}

.strength-feedback span {
  font-size: 11px;
  color: #666;
  font-weight: 500;
}

.strength-feedback ul {
  margin: 2px 0 0 0;
  padding: 0;
  list-style: none;
}

.strength-feedback li {
  font-size: 10px;
  color: #666;
  margin-bottom: 1px;
}

/* Password Match Indicator */
.password-match {
  margin-top: 6px;
}

.match-indicator {
  font-size: 12px;
  color: #28a745;
  font-weight: 500;
}

/* Error Styles */
.error-text {
  color: #dc3545;
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

.error-message {
  color: #dc3545;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 16px;
  font-size: 14px;
  text-align: center;
}

/* Submit Button */
.auth-button {
  width: 100%;
  padding: 14px 24px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 48px;
}

.auth-button:hover:not(:disabled) {
  background: #0056b3;
  transform: translateY(-1px);
}

.auth-button:disabled {
  background: #6c757d;
  cursor: not-allowed;
  transform: none;
}

/* Password Requirements */
.password-requirements {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  text-align: left;
}

.password-requirements h4 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.password-requirements ul {
  margin: 0;
  padding-left: 20px;
}

.password-requirements li {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.password-requirements li.met {
  color: #28a745;
  font-weight: 500;
}

.password-requirements li.met::before {
  content: '✓ ';
  color: #28a745;
  font-weight: bold;
  margin-right: 4px;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
  .password-creation {
    padding: 0 16px;
  }
  
  .password-header {
    margin-bottom: 24px;
  }
  
  .password-icon {
    font-size: 40px;
    margin-bottom: 12px;
  }
  
  .password-header h3 {
    font-size: 20px;
    margin-bottom: 6px;
  }
  
  .password-description {
    font-size: 15px;
  }
  
  .password-form {
    margin-bottom: 20px;
  }
  
  .form-group {
    margin-bottom: 18px;
  }
  
  .password-input-container input {
    padding: 14px 45px 14px 14px;
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  .password-toggle {
    right: 14px;
    font-size: 18px;
    padding: 6px;
  }
  
  .strength-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  
  .strength-feedback {
    text-align: left;
  }
  
  .auth-button {
    padding: 16px 24px;
    min-height: 52px;
  }
  
  .password-requirements {
    padding: 14px;
  }
  
  .password-requirements h4 {
    font-size: 13px;
    margin-bottom: 10px;
  }
  
  .password-requirements li {
    font-size: 12px;
    margin-bottom: 5px;
  }
}

@media (max-width: 480px) {
  .password-creation {
    padding: 0 12px;
  }
  
  .password-header {
    margin-bottom: 20px;
  }
  
  .password-icon {
    font-size: 36px;
    margin-bottom: 10px;
  }
  
  .password-header h3 {
    font-size: 18px;
  }
  
  .password-description {
    font-size: 14px;
  }
  
  .form-group {
    margin-bottom: 16px;
  }
  
  .form-group label {
    font-size: 13px;
    margin-bottom: 5px;
  }
  
  .password-input-container input {
    padding: 12px 40px 12px 12px;
  }
  
  .password-toggle {
    right: 12px;
    font-size: 16px;
    padding: 4px;
  }
  
  .strength-label {
    font-size: 11px;
  }
  
  .strength-feedback span {
    font-size: 10px;
  }
  
  .strength-feedback li {
    font-size: 9px;
  }
  
  .match-indicator {
    font-size: 11px;
  }
  
  .error-text {
    font-size: 11px;
  }
  
  .auth-button {
    padding: 14px 20px;
    font-size: 15px;
    min-height: 48px;
  }
  
  .password-requirements {
    padding: 12px;
  }
  
  .password-requirements h4 {
    font-size: 12px;
    margin-bottom: 8px;
  }
  
  .password-requirements li {
    font-size: 11px;
    margin-bottom: 4px;
  }
}

/* Touch interactions */
@media (max-width: 768px) {
  .password-toggle,
  .auth-button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  .auth-button:active:not(:disabled) {
    transform: scale(0.98);
  }
}

/* Focus states for accessibility */
.password-input-container input:focus,
.auth-button:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Animation for smooth transitions */
@media (prefers-reduced-motion: no-preference) {
  .password-creation {
    animation: slideUp 0.3s ease;
  }
  
  .strength-fill {
    transition: all 0.3s ease;
  }
  
  .password-requirements li {
    transition: color 0.2s ease;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .password-creation {
    animation: none;
  }
  
  .strength-fill {
    transition: none;
  }
  
  .password-requirements li {
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .password-input-container input {
    border-width: 3px;
  }
  
  .password-input-container input:focus {
    border-width: 3px;
  }
  
  .strength-bar {
    border: 1px solid #333;
  }
}
/* Terms and Conditions Page Styles */
.terms-page {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 2rem 0;
}

.terms-container {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.terms-header {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  padding: 3rem 2rem;
  text-align: center;
}

.terms-header h1 {
  margin: 0 0 1rem 0;
  font-size: 2.5rem;
  font-weight: 700;
}

.last-updated {
  margin: 0;
  opacity: 0.9;
  font-size: 1rem;
}

.terms-content {
  padding: 2rem;
}

.terms-section {
  margin-bottom: 2.5rem;
}

.terms-section:last-child {
  margin-bottom: 0;
}

.terms-section h2 {
  color: #2c3e50;
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #3498db;
}

.terms-section p {
  color: #555;
  line-height: 1.7;
  margin: 0 0 1rem 0;
  font-size: 1rem;
}

.terms-section ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.terms-section li {
  color: #555;
  line-height: 1.7;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.terms-section li::marker {
  color: #3498db;
}

/* Highlight important sections */
.terms-section:nth-child(2),
.terms-section:nth-child(3),
.terms-section:nth-child(9) {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid #e74c3c;
}

.terms-section:nth-child(14) {
  background: #e8f4fd;
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid #3498db;
}

.terms-section:nth-child(14) p strong {
  color: #2980b9;
  font-size: 1.1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .terms-page {
    padding: 1rem;
  }
  
  .terms-container {
    margin: 0;
    border-radius: 0;
  }
  
  .terms-header {
    padding: 2rem 1.5rem;
  }
  
  .terms-header h1 {
    font-size: 2rem;
  }
  
  .terms-content {
    padding: 1.5rem;
  }
  
  .terms-section h2 {
    font-size: 1.2rem;
  }
  
  .terms-section p,
  .terms-section li {
    font-size: 0.9rem;
  }
  
  .terms-section:nth-child(2),
  .terms-section:nth-child(3),
  .terms-section:nth-child(9),
  .terms-section:nth-child(14) {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .terms-header {
    padding: 1.5rem 1rem;
  }
  
  .terms-header h1 {
    font-size: 1.8rem;
  }
  
  .terms-content {
    padding: 1rem;
  }
  
  .terms-section {
    margin-bottom: 2rem;
  }
  
  .terms-section ul {
    padding-left: 1rem;
  }
}

/* Print styles */
@media print {
  .terms-page {
    background: white;
    padding: 0;
  }
  
  .terms-container {
    box-shadow: none;
    border-radius: 0;
  }
  
  .terms-header {
    background: white;
    color: black;
    border-bottom: 2px solid #333;
  }
}
/* About Us Page Styles - Professional Design */
.about-us-page {
  padding: 0;
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  padding: 0 var(--space-4, 1rem);
}

/* Hero Section */
.about-hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 5rem 1rem;
  padding: var(--space-20, 5rem) var(--space-4, 1rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.about-hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

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

.hero-about-title {
  font-family: 'Poppins', sans-serif;
  font-family: var(--font-secondary, 'Poppins', sans-serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  margin-bottom: var(--space-6, 1.5rem);
  color: white !important;
}

.hero-about-subtitle {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Section Common Styles */
.section-about-title {
  font-family: 'Poppins', sans-serif;
  font-family: var(--font-secondary, 'Poppins', sans-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  color: #2c3e50 !important;
  text-align: center;
  margin-bottom: 3rem;
  margin-bottom: var(--space-12, 3rem);
}

/* Our Story Section */
.our-story-section {
  padding: 5rem 1rem;
  padding: var(--space-20, 5rem) var(--space-4, 1rem);
  background: #ffffff;
}

.story-content {
  max-width: 800px;
  margin: 0 auto;
}

.story-text {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #4a5568 !important;
  margin-bottom: 1.5rem;
  margin-bottom: var(--space-6, 1.5rem);
  text-align: justify;
}

.story-text strong {
  color: #2c3e50 !important;
  font-weight: 600;
}

/* Founders Section */
.founders-section {
  padding: 5rem 1rem;
  padding: var(--space-20, 5rem) var(--space-4, 1rem);
  background: #f8fafc;
}

.founders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  grid-gap: 2rem;
  grid-gap: var(--space-8, 2rem);
  gap: var(--space-8, 2rem);
  max-width: 1000px;
  margin: 0 auto;
}

.founder-card {
  background: white;
  border-radius: 1rem;
  border-radius: var(--radius-xl, 1rem);
  padding: 2rem;
  padding: var(--space-8, 2rem);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  gap: var(--space-6, 1.5rem);
  margin-bottom: 20px
}

.founder-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.founder-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.founder-initial {
  font-size: 1.5rem;
  font-weight: 700;
  color: white !important;
}

.founder-info {
  flex: 1 1;
}

.founder-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50 !important;
  margin-bottom: 0.5rem;
  margin-bottom: var(--space-2, 0.5rem);
}

.founder-title {
  font-size: 1rem;
  color: #667eea !important;
  font-weight: 500;
  margin-bottom: 0.75rem;
  margin-bottom: var(--space-3, 0.75rem);
}

.founder-description {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #4a5568 !important;
}

/* Vision & Mission Section */
.vision-mission-section {
  padding: 5rem 1rem;
  padding: var(--space-20, 5rem) var(--space-4, 1rem);
  background: white;
}

.vision-mission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  grid-gap: 2rem;
  grid-gap: var(--space-8, 2rem);
  gap: var(--space-8, 2rem);
  max-width: 900px;
  margin: 0 auto;
}

.vision-card,
.mission-card {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  padding: 2rem;
  padding: var(--space-8, 2rem);
  border-radius: 1rem;
  border-radius: var(--radius-xl, 1rem);
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.mission-card {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.vision-card:hover,
.mission-card:hover {
  transform: translateY(-5px);
}

.card-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  margin-bottom: var(--space-4, 1rem);
}

.card-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  margin-bottom: var(--space-4, 1rem);
  color: white !important;
}

.card-description {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Problems Section */
.problems-section {
  padding: 5rem 1rem;
  padding: var(--space-20, 5rem) var(--space-4, 1rem);
  background: #f8fafc;
}

.problems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  grid-gap: 1.5rem;
  grid-gap: var(--space-6, 1.5rem);
  gap: var(--space-6, 1.5rem);
}

.problem-card {
  background: white;
  padding: 1.5rem;
  padding: var(--space-6, 1.5rem);
  border-radius: 0.75rem;
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.problem-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.problem-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  margin-bottom: var(--space-4, 1rem);
}

.problem-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2c3e50 !important;
  margin-bottom: 0.75rem;
  margin-bottom: var(--space-3, 0.75rem);
}

.problem-description {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #4a5568 !important;
  margin-bottom: 1rem;
  margin-bottom: var(--space-4, 1rem);
}

.solution-badge {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white !important;
  padding: 0.5rem 0.75rem;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-radius: 9999px;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-block;
}

/* Impact Section */
.impact-about-section {
  padding: 5rem 1rem;
  padding: var(--space-20, 5rem) var(--space-4, 1rem);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.impact-section .section-title {
  color: white !important;
}

.impact-about-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  grid-gap: 1.5rem;
  grid-gap: var(--space-6, 1.5rem);
  gap: var(--space-6, 1.5rem);
  max-width: 1000px;
  margin: 0 auto;
}

.stat-about-card {
  text-align: center;
  padding: 1.5rem;
  padding: var(--space-6, 1.5rem);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  border-radius: var(--radius-lg, 0.75rem);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-number {
  font-size: 3rem;
  font-weight: 700;
  color: white !important;
  margin-bottom: 0.5rem;
  margin-bottom: var(--space-2, 0.5rem);
}

.stat-about-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 500;
}

/* Values Section */
.values-section {
  padding: 5rem 1rem;
  padding: var(--space-20, 5rem) var(--space-4, 1rem);
  background: white;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  grid-gap: 1.5rem;
  grid-gap: var(--space-6, 1.5rem);
  gap: var(--space-6, 1.5rem);
}

.value-item {
  text-align: center;
  padding: 1.5rem;
  padding: var(--space-6, 1.5rem);
}

.value-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  margin-bottom: var(--space-4, 1rem);
}

.value-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2c3e50 !important;
  margin-bottom: 0.75rem;
  margin-bottom: var(--space-3, 0.75rem);
}

.value-description {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #4a5568 !important;
}

/* Join Us Section */
.join-us-section {
  padding: 5rem 1rem;
  padding: var(--space-20, 5rem) var(--space-4, 1rem);
  background: #f8fafc;
  text-align: center;
}

.join-us-content {
  max-width: 700px;
  margin: 0 auto;
}

.join-us-description {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #4a5568 !important;
  margin-bottom: 2rem;
  margin-bottom: var(--space-8, 2rem);
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  gap: var(--space-4, 1rem);
  justify-content: center;
  flex-wrap: wrap;
}

.cta-button {
  padding: 1rem 1.5rem;
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  border-radius: 0.75rem;
  border-radius: var(--radius-lg, 0.75rem);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: inline-block;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.cta-button.primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white !important;
}

.cta-button.secondary {
  background: white;
  color: #667eea !important;
  border: 2px solid #667eea;
}

.cta-button.secondary:hover {
  background: #667eea;
  color: white !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .about-hero-section {
    padding: 4rem 1rem;
    padding: var(--space-16, 4rem) var(--space-4, 1rem);
  }
  
  .our-story-section,
  .founders-section,
  .vision-mission-section,
  .problems-section,
  .impact-section,
  .values-section,
  .join-us-section {
    padding: 4rem 1rem;
    padding: var(--space-16, 4rem) var(--space-4, 1rem);
  }
  
  .founders-grid {
    grid-template-columns: 1fr;
  }
  
  .founder-card {
    flex-direction: column;
    text-align: center;
  }
  
  .founder-avatar {
    margin-bottom: 1rem;
    margin-bottom: var(--space-4, 1rem);
  }
  
  .vision-mission-grid {
    grid-template-columns: 1fr;
  }
  
  .impact-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .cta-button {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .problems-grid {
    grid-template-columns: 1fr;
  }
  
  .values-grid {
    grid-template-columns: 1fr;
  }
  
  .impact-stats {
    grid-template-columns: 1fr;
  }
}
/* Image Modal Styles */
.image-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

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

.image-modal-container {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
  from { 
    transform: scale(0.8); 
    opacity: 0; 
  }
  to { 
    transform: scale(1); 
    opacity: 1; 
  }
}

/* Close Button */
.image-modal-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #333;
  font-weight: bold;
  z-index: 1001;
}

.image-modal-close:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.9));
  transform: scale(1.1);
}

/* Main Image Container */
.image-modal-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1;
  margin-bottom: 20px;
}

.image-modal-image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
}

/* Navigation Arrows */
.image-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 1001;
}

.image-modal-prev {
  left: -70px;
}

.image-modal-next {
  right: -70px;
}

.image-modal-nav:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.9));
  transform: translateY(-50%) scale(1.1);
}

/* Image Info */
.image-modal-info {
  text-align: center;
  margin-bottom: 15px;
}

.image-modal-title {
  color: white;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.image-modal-counter {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  margin: 0;
}

/* Thumbnails */
.image-modal-thumbnails {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 100%;
  overflow-x: auto;
  padding: 10px 0;
}

.image-modal-thumbnail {
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.image-modal-thumbnail img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  display: block;
}

.image-modal-thumbnail:hover {
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

.image-modal-thumbnail.active {
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .image-modal-overlay {
    padding: 10px;
  }
  
  .image-modal-container {
    max-width: 100vw;
    max-height: 100vh;
  }
  
  .image-modal-close {
    top: -40px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .image-modal-image {
    max-height: 60vh;
    border-radius: 8px;
  }
  
  .image-modal-nav {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  
  .image-modal-prev {
    left: -55px;
  }
  
  .image-modal-next {
    right: -55px;
  }
  
  .image-modal-title {
    font-size: 1.2rem;
  }
  
  .image-modal-counter {
    font-size: 0.9rem;
  }
  
  .image-modal-thumbnail img {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 480px) {
  .image-modal-overlay {
    padding: 5px;
  }
  
  .image-modal-close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    font-size: 18px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
  }
  
  .image-modal-image {
    max-height: 55vh;
    border-radius: 6px;
  }
  
  .image-modal-nav {
    width: 40px;
    height: 40px;
    font-size: 18px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
  }
  
  .image-modal-prev {
    left: 10px;
  }
  
  .image-modal-next {
    right: 10px;
  }
  
  .image-modal-info {
    margin-bottom: 10px;
  }
  
  .image-modal-title {
    font-size: 1.1rem;
  }
  
  .image-modal-thumbnails {
    gap: 8px;
    padding: 8px 0;
  }
  
  .image-modal-thumbnail img {
    width: 45px;
    height: 45px;
  }
}

/* Accessibility */
.image-modal-close:focus,
.image-modal-nav:focus,
.image-modal-thumbnail:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .image-modal-overlay,
  .image-modal-container,
  .image-modal-close,
  .image-modal-nav,
  .image-modal-thumbnail {
    animation: none;
    transition: none;
  }
  
  .image-modal-close:hover,
  .image-modal-nav:hover,
  .image-modal-thumbnail:hover {
    transform: none;
  }
}
.product-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.product-images {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: #f8f9fa;
}

.product-images.simple-layout {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.product-image-enhanced {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-images:hover .product-image,
.product-images:hover .product-image-enhanced {
  transform: scale(1.05);
}

.no-image-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #6c757d;
  font-size: 14px;
}

.no-image-placeholder span:first-child {
  font-size: 24px;
  margin-bottom: 8px;
}

.product-info {
  padding: 16px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.product-name {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #333;
  line-height: 1.3;
}

.product-price {
  font-size: 20px;
  font-weight: 700;
  color: #28a745;
  margin: 0 0 8px 0;
}

.product-views {
  font-size: 14px;
  color: #6c757d;
  margin: 0 0 8px 0;
  padding: 4px 8px;
  background-color: #f8f9fa;
  border-radius: 12px;
  display: inline-block;
  align-self: flex-start;
}

.product-stock {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 12px 0;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

.product-stock.in-stock {
  background-color: #d4edda;
  color: #155724;
}

.product-stock.low-stock {
  background-color: #fff3cd;
  color: #856404;
}

.product-stock.out-of-stock {
  background-color: #f8d7da;
  color: #721c24;
}

.expandable-description-card {
  margin-bottom: 16px;
  flex-grow: 1;
}

.product-description {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  margin: 0 0 8px 0;
}

.expand-btn-card {
  background: none;
  border: none;
  color: #007bff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  text-decoration: underline;
}

.expand-btn-card:hover {
  color: #0056b3;
}

.product-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.btn-edit, .btn-delete {
  flex: 1 1;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-edit {
  background-color: #007bff;
  color: white;
}

.btn-edit:hover {
  background-color: #0069d9;
}

.btn-delete {
  background-color: #dc3545;
  color: white;
}

.btn-delete:hover {
  background-color: #c82333;
}

/* Carousel Styles */
.image-gallery {
  position: relative;
  width: 100%;
  height: 100%;
}

.product-carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background-color 0.2s ease;
}

.carousel-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

.carousel-btn-prev {
  left: 10px;
}

.carousel-btn-next {
  right: 10px;
}

.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.carousel-dot.active {
  background: white;
}

.image-counter {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  z-index: 2;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  max-width: 90%;
  max-height: 90%;
  overflow: hidden;
  position: relative;
}

.modal-image {
  max-width: 100%;
  max-height: 80vh;
  display: block;
}

.close-modal {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.close-modal:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* Responsive Styles */
@media (max-width: 768px) {
  .product-card {
    border-radius: 8px;
  }
  
  .product-name {
    font-size: 16px;
  }
  
  .product-price {
    font-size: 18px;
  }
  
  .product-description {
    font-size: 13px;
  }
  
  .btn-edit, .btn-delete {
    padding: 6px 10px;
    font-size: 13px;
  }
}
.shopkeeper-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8fafc;
  background-color: var(--bg-secondary, #f8fafc);
  color: #0f172a;
  color: var(--text-primary, #0f172a);
  min-height: 100vh;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.dashboard-header h1 {
  margin: 0;
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
  font-weight: 700;
}

.logout-button {
  background-color: #f44336;
  color: white;
  margin-right: 20px;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.logout-button:hover {
  background-color: #d32f2f;
}

.error-message {
  background-color: #ffebee;
  color: #c62828;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  border-left: 4px solid #c62828;
}

.create-shop-section {
  background-color: #f5f5f5;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
}

.create-shop-button {
  display: inline-block;
  background-color: #4caf50;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  margin-top: 15px;
}

.create-shop-button:hover {
  background-color: #388e3c;
}

.shop-section {
  background-color: #ffffff;
  background-color: var(--surface-primary, #ffffff);
  color: #0f172a;
  color: var(--text-primary, #0f172a);
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  box-shadow: var(--elevation-2, 0 1px 3px 0 rgba(0, 0, 0, 0.1));
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border-primary, #e2e8f0);
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
}

.shop-info {
  display: flex;
  align-items: center;
}

.shop-info h2 {
  margin: 0;
  margin-right: 15px;
}

.status-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.status-badge.live {
  background-color: #e8f5e9;
  color: #1b5e20;
  border: 2px solid #4caf50;
  font-weight: bold;
}

.status-badge.approved {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.status-badge.pending {
  background-color: #fff8e1;
  color: #f57f17;
}

.status-badge.rejected {
  background-color: #ffebee;
  color: #c62828;
}

.status-badge.draft {
  background-color: #e3f2fd;
  color: #1565c0;
}

/* Subscription card */
.subscription-card {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 16px;
	background: #fff;
	margin: 16px 20px;
}
.subscription-header {
	display: table-row;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}
.subscription-purchase-btn {
	background: #2563eb;
	color: #fff;
	padding: 8px 12px;
	border-radius: 8px;
	text-decoration: none;
}
.subscription-body .sub-row {
	display: grid;
	grid-template-columns: 160px 1fr;
	padding: 6px 0;
}
.subscription-body .label { color: #6b7280; }
.subscription-body .value { color: #111827; }
.subscription-empty { color: #6b7280; margin-top: 8px; }
.subscription-card.loading { display: flex; align-items: center; }
.subscription-card .spinner { width: 18px; height: 18px; border: 3px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

.edit-shop-button {
  background-color: #2196f3 !important;
  color: #ffffff !important;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
}

.edit-shop-button:hover {
  background-color: #1976d2;
}

.shop-logo {
  padding: 5px;
  text-align: center;
}

.shop-logo img {
  max-width: 200px;
  max-height: 200px;
  border-radius: 8px;
}

.shop-details {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 15px;
  gap: 15px;
}

.detail-item {
  margin-bottom: 10px;
}

.detail-item.description {
  grid-column: 1 / -1;
}

.label {
  font-weight: 500;
  color: #666;
  margin-right: 8px;
}

.rejection-reason {
  padding: 20px;
  background-color: #ffebee;
  border-top: 1px solid #ffcdd2;
}

.rejection-reason h3 {
  color: #c62828;
  margin-top: 0;
}

.submit-section {
  padding: 20px;
  background-color: #e8f5e9;
  border-top: 1px solid #c8e6c9;
  text-align: center;
}

.submit-button {
  display: inline-block;
  background-color: #4caf50 !important;
  color: white !important;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
}

.submit-button:hover {
  background-color: #388e3c;
}

.products-section {
  padding: 20px;
  border-top: 1px solid #eee;
}

.products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.products-header h3 {
  margin: 0;
}

.products-actions {
  display: flex;
  gap: 10px;
}

.manage-products-button {
  background-color: #2196f3 !important;
  color: white !important;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
}

.manage-products-button:hover {
  background-color: #1976d2;
}

.add-product-button {
  background-color: #ff9800 !important;
  color: white !important;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
}

.add-product-button:hover {
  background-color: #f57c00;
}

.view-all-products {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.view-all-button {
  background-color: #6c757d !important;
  color: white !important;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
}

.view-all-button:hover {
  background-color: #5a6268;
}

.no-products {
  text-align: center;
  padding: 30px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

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

.product-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.product-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.no-image {
  width: 100%;
  height: 180px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.product-info {
  padding: 15px;
}

.product-info h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
}

.price {
  font-weight: 600;
  color: #e91e63;
  margin: 5px 0;
}

.stock {
  font-size: 14px;
  color: #666;
  margin: 5px 0 15px 0;
}

.product-actions {
  display: flex;
  gap: 10px;
}

.edit-button, .delete-button {
  flex: 1 1;
  text-align: center;
  padding: 6px 0;
  border-radius: 4px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.edit-button {
  background-color: #2196f3 !important;
  color: white !important;
  text-decoration: none;
}

.edit-button:hover {
  background-color: #1976d2;
}

.delete-button {
  background-color: #f44336 !important;
  color: white !important;
}

.delete-button:hover {
  background-color: #d32f2f;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top: 4px solid #2196f3;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

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

/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
  .shopkeeper-dashboard {
    padding: 15px;
  }
  
  .dashboard-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .dashboard-header h1 {
    font-size: 24px;
    margin: 0;
  }
  
  .logout-button {
    width: 100%;
    max-width: 200px;
    padding: 12px 20px;
    font-size: 16px;
    margin:10px;
  }
  
  .shop-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .shop-info {
    flex-direction: column;
    gap: 10px;
  }
  
  .shop-info h2 {
    margin: 0;
    font-size: 20px;
  }
  
  .edit-shop-button {
    width: 100%;
    max-width: 200px;
    padding: 12px 20px;
    text-align: center;
  }
  
  .shop-details {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .detail-item {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
  }
  
  .label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #495057;
  }
  
  .value {
    display: block;
    color: #212529;
    word-break: break-word;
  }
  
  .products-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .products-header {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    text-align: center;
  }
  
  .products-header h3 {
    font-size: 18px;
  }
  
  .products-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .manage-products-button,
  .add-product-button {
    width: 100%;
    padding: 12px 20px;
    font-size: 16px;
    text-align: center;
  }
  
  .product-card {
    margin-bottom: 15px;
  }
  
  .product-info h4 {
    font-size: 16px;
  }
  
  .product-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .edit-button,
  .delete-button {
    padding: 10px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .shopkeeper-dashboard {
    padding: 10px;
  }
  
  .dashboard-header h1 {
    font-size: 20px;
    margin:10px;
  }
  
  .shop-section {
    border-radius: 6px;
  }
  
  .shop-header,
  .shop-details,
  .products-section {
    padding: 15px;
  }
  
  .shop-info h2 {
    font-size: 18px;
  }
  
  .status-badge {
    padding: 4px 8px;
    font-size: 12px;
  }
  
  .product-image {
    height: 150px;
  }
  
  .no-image {
    height: 150px;
    font-size: 12px;
  }
  
  .product-info {
    padding: 12px;
  }
  
  .product-info h4 {
    font-size: 14px;
    margin-bottom: 8px;
  }
  
  .price {
    font-size: 16px;
  }
  
  .stock {
    font-size: 12px;
  }
}

/* Status Sections */
.rejection-section, .approved-section, .pending-section, .live-section {
  margin: 20px 0;
}

.rejection-alert, .approved-alert, .pending-alert, .live-alert {
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid;
}

.rejection-alert {
  background: #fff5f5;
  border-left-color: #e53e3e;
  color: #742a2a;
}

.approved-alert {
  background: #f0fff4;
  border-left-color: #38a169;
  color: #276749;
}

.pending-alert {
  background: #fffbf0;
  border-left-color: #d69e2e;
  color: #744210;
}

.live-alert {
  background: #f0fff4;
  border-left-color: #4caf50;
  color: #1b5e20;
}

.rejection-alert h3, .approved-alert h3, .pending-alert h3 {
  margin: 0 0 15px 0;
  font-size: 1.2rem;
}

.rejection-reason {
  margin: 15px 0;
  padding: 15px;
  background: rgba(229, 62, 62, 0.1);
  border-radius: 5px;
  border: 1px solid rgba(229, 62, 62, 0.2);
}

.rejection-reason strong {
  display: block;
  margin-bottom: 8px;
  color: #742a2a;
}

.rejection-reason p {
  margin: 0;
  line-height: 1.5;
}

.rejection-actions, .approved-actions, .live-actions {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.edit-resubmit-button, .payment-button, .view-live-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.edit-resubmit-button {
  background: #e53e3e !important;
  color: white !important;
}

.edit-resubmit-button:hover {
  background: #c53030;
  transform: translateY(-1px);
}

.resubmit-now-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #28a745 !important;
  color: white !important;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: 14px;
  margin-left: 10px;
}

.resubmit-now-button:hover {
  background: #218838 !important;
  transform: translateY(-1px);
}

.resubmit-now-button:disabled {
  background: #6c757d !important;
  cursor: not-allowed;
  transform: none;
}

.payment-button {
  background: linear-gradient(135deg, #ff9800, #f57c00) !important;
  color: white !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
  animation: pulse-payment 2s infinite;
  border: none;
  text-decoration: none;
}

.payment-button:hover {
  background: linear-gradient(135deg, #f57c00, #ef6c00) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
}

@keyframes pulse-payment {
  0% {
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
  }
  50% {
    box-shadow: 0 4px 20px rgba(255, 152, 0, 0.5);
  }
  100% {
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
  }
}

.view-live-button {
  background: #3182ce !important;
  color: white !important;
}

.view-live-button:hover {
  background: #2c5282;
  transform: translateY(-1px);
}

.help-text {
  margin: 10px 0 0 0;
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
}

.pending-info {
  margin-top: 15px;
  padding: 15px;
  background: rgba(214, 158, 46, 0.1);
  border-radius: 5px;
  border: 1px solid rgba(214, 158, 46, 0.2);
}

.pending-info p {
  margin: 5px 0;
  font-size: 0.9rem;
}

.pending-info strong {
  color: #744210;
}

.live-info {
  margin-top: 15px;
  padding: 15px;
  background: rgba(76, 175, 80, 0.1);
  border-radius: 5px;
  border: 1px solid rgba(76, 175, 80, 0.2);
}

.live-info p {
  margin: 5px 0;
  font-size: 0.9rem;
}

.live-info strong {
  color: #1b5e20;
}

.live-info code {
  background: rgba(76, 175, 80, 0.2);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
  color: #1b5e20;
}

/* Enhanced Mobile Responsiveness for Status Sections */
@media (max-width: 768px) {
  .rejection-section, .approved-section, .pending-section, .live-section {
    margin: 15px 0;
  }
  
  .rejection-alert, .approved-alert, .pending-alert, .live-alert {
    padding: 15px;
    border-radius: 6px;
  }
  
  .rejection-alert h3, .approved-alert h3, .pending-alert h3, .live-alert h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .rejection-actions, .approved-actions, .live-actions {
    margin-top: 15px;
    gap: 10px;
  }
  
  .edit-resubmit-button, .payment-button, .view-live-button, .manage-products-button, .resubmit-now-button {
    width: 100%;
    text-align: center;
    margin-left: 0;
    margin-top: 10px;
    padding: 14px 20px;
    font-size: 16px;
    border-radius: 8px;
  }
  
  .rejection-reason, .pending-info, .live-info {
    margin-top: 10px;
    padding: 12px;
    border-radius: 6px;
  }
  
  .help-text {
    font-size: 14px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .rejection-alert, .approved-alert, .pending-alert, .live-alert {
    padding: 12px;
  }
  
  .rejection-alert h3, .approved-alert h3, .pending-alert h3, .live-alert h3 {
    font-size: 16px;
  }
  
  .edit-resubmit-button, .payment-button, .view-live-button, .manage-products-button, .resubmit-now-button {
    padding: 12px 16px;
    font-size: 14px;
  }
  
  .live-info code {
    display: block;
    margin-top: 5px;
    word-break: break-all;
    font-size: 12px;
  }
}/* St
ock status styling */
.stock.in-stock {
  color: #28a745;
  color: var(--success, #28a745);
  font-weight: 500;
}

.stock.out-of-stock {
  color: #dc3545;
  color: var(--error, #dc3545);
  font-weight: 500;
}/* P
roduct Limit Section */
.product-limit-section {
  margin-bottom: 2rem;
}

.limit-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border: 1px solid #e9ecef;
}

.limit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.limit-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.3rem;
}

.buy-slots-btn {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.buy-slots-btn:hover {
  background: linear-gradient(135deg, #2980b9, #1f5f8b);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
  color: white;
}

.buy-slots-btn-small {
  background: #3498db;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 0.5rem;
  text-decoration: none;
  display: inline-block;
}

.buy-slots-btn-small:hover {
  background: #2980b9;
  transform: translateY(-1px);
  color: white;
}

.limit-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.limit-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.limit-label {
  color: #666;
  font-weight: 500;
  font-size: 0.9rem;
}

.limit-value {
  font-weight: 600;
  color: #2c3e50;
  font-size: 1rem;
}

.limit-value.low {
  color: #e74c3c;
}

.limit-value.good {
  color: #27ae60;
}

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

.progress-bar {
  flex: 1 1;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #3498db;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.progress-text {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
  min-width: 60px;
}

.limit-warning {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  color: #856404;
  font-size: 0.9rem;
}

.warning-icon {
  font-size: 1rem;
}

.add-product-disabled {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.disabled-text {
  color: #666;
  font-size: 0.9rem;
  font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
  .limit-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .limit-info {
    grid-template-columns: 1fr;
  }
  
  .limit-progress {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  
  .progress-text {
    text-align: center;
    min-width: auto;
  }
  
  .add-product-disabled {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
}
.shop-form-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 20px;
}

.shop-form-container h1 {
  margin-bottom: 30px;
  color: #333;
  text-align: center;
}

.error-message {
  background-color: #ffebee;
  color: #c62828;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  border-left: 4px solid #c62828;
}

.success-message {
  background-color: #e8f5e9;
  color: #2e7d32;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  border-left: 4px solid #2e7d32;
}

.shop-form {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #2196f3;
  outline: none;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.form-group input[type="file"] {
  padding: 10px;
  border: 1px dashed #ddd;
  background-color: #f9f9f9;
  cursor: pointer;
}

.form-group input[type="file"]:hover {
  background-color: #f0f0f0;
  border-color: #2196f3;
}

.form-group input[type="file"]::-webkit-file-upload-button {
  background-color: #2196f3;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.form-group input[type="file"]::-webkit-file-upload-button:hover {
  background-color: #1976d2;
}

.help-text {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.logo-preview {
  margin-top: 15px;
  text-align: center;
}

.logo-preview img {
  /* max-width: 150px; */
  max-height: 150px;
  border-radius: 4px;
  border: 1px solid #eee;
  padding: 5px;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.cancel-button {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s;
}

.cancel-button:hover {
  background-color: #e0e0e0;
}

.submit-button {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s;
}

.submit-button:hover {
  background-color: #388e3c;
}

.submit-button:disabled {
  background-color: #a5d6a7;
  cursor: not-allowed;
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
  .shop-form-container {
    padding: 20px 15px;
    max-width: none;
    margin: 0;
  }
  
  .shop-form-container h1 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .shop-form {
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  }
  
  .form-group {
    margin-bottom: 18px;
  }
  
  .form-group label {
    font-size: 15px;
    margin-bottom: 6px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 12px;
    font-size: 16px; /* Prevent zoom on iOS */
    border-radius: 6px;
  }
  
  .form-group input[type="file"] {
    padding: 12px;
    font-size: 16px;
    border-radius: 6px;
  }
  
  .form-group input[type="file"]::-webkit-file-upload-button {
    padding: 10px 16px;
    font-size: 16px;
    border-radius: 6px;
  }
  
  .form-group textarea {
    min-height: 80px;
    resize: vertical;
  }
  
  .help-text {
    font-size: 13px;
    margin-top: 4px;
  }
  
  .logo-preview {
    margin-top: 12px;
  }
  
  .logo-preview img {
    max-width: 120px;
    max-height: 120px;
    border-radius: 6px;
  }
  
  .form-actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
  }
  
  .cancel-button,
  .submit-button {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
    border-radius: 8px;
  }
  
  .error-message,
  .success-message {
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .shop-form-container {
    padding: 15px 10px;
  }
  
  .shop-form-container h1 {
    font-size: 20px;
    margin-bottom: 15px;
  }
  
  .shop-form {
    padding: 15px;
    border-radius: 4px;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  .form-group label {
    font-size: 14px;
    margin-bottom: 5px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 10px;
    font-size: 16px;
    border-radius: 4px;
  }
  
  .form-group input[type="file"] {
    padding: 10px;
    font-size: 16px;
    border-radius: 4px;
  }
  
  .form-group input[type="file"]::-webkit-file-upload-button {
    padding: 8px 12px;
    font-size: 15px;
    border-radius: 4px;
  }
  
  .form-group textarea {
    min-height: 70px;
  }
  
  .help-text {
    font-size: 12px;
  }
  
  .logo-preview img {
    max-width: 100px;
    max-height: 100px;
  }
  
  .form-actions {
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
  }
  
  .cancel-button,
  .submit-button {
    padding: 12px 16px;
    font-size: 15px;
    border-radius: 6px;
  }
  
  .error-message,
  .success-message {
    padding: 10px;
    font-size: 13px;
    margin-bottom: 12px;
  }
}

/* Image upload options */
.image-upload-options {
  margin-bottom: 10px;
}

.upload-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  min-width: 150px;
}

.upload-btn:hover {
  background-color: #e0e0e0;
}

.upload-btn:disabled {
  background-color: #f5f5f5;
  border-color: #ddd;
  color: #aaa;
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
}

.file-upload-btn {
  background-color: #f5f5f5;
  color: #333;
  position: relative;
}

.file-upload-btn:hover {
  background-color: #e0e0e0;
}

.hidden-file-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.camera-btn {
  background: none;
  border: 2px solid #2196f3;
  color: #2196f3;
}

.camera-btn:hover {
  background-color: #2196f3;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

/* Camera Modal Styles */
.camera-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.camera-container {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  width: 100%;
}

.camera-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.camera-header h3 {
  margin: 0;
  color: #1f2937;
  font-size: 1.25rem;
  font-weight: 600;
}

.close-camera-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6b7280;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-camera-btn:hover {
  background-color: #f3f4f6;
  color: #374151;
}

.camera-preview {
  position: relative;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

#camera-video {
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  height: auto;
  border-radius: 0;
}

.camera-controls {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background-color: #f8fafc;
  justify-content: center;
}

.capture-btn {
  background: linear-gradient(135deg, #2196f3, #1976d2);
  color: #ffffff;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.capture-btn:hover {
  background: linear-gradient(135deg, #1976d2, #0d47a1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.cancel-camera-btn {
  background-color: #6b7280;
  color: #ffffff;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-camera-btn:hover {
  background-color: #4b5563;
  transform: translateY(-2px);
}

/* Enhanced Mobile Responsive Camera Styles */
@media (max-width: 768px) {
  .image-upload-options {
    margin-bottom: 1rem;
  }
  
  .upload-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .upload-btn {
    flex: 1 1;
    min-width: auto;
    padding: 10px 15px;
    font-size: 0.9rem;
  }

  .camera-modal {
    padding: 0.5rem;
    align-items: flex-start;
    padding-top: 2rem;
  }
  
  .camera-container {
    max-width: 95vw;
    max-height: 90vh;
    width: 100%;
  }
  
  .camera-header {
    padding: 0.75rem;
  }
  
  .camera-header h3 {
    font-size: 1.1rem;
  }
  
  .camera-preview {
    min-height: 250px;
    max-height: 50vh;
  }
  
  #camera-video {
    width: 100%;
    max-height: 50vh;
    object-fit: contain;
  }
  
  .camera-controls {
    flex-direction: column;
    padding: 1rem;
    gap: 0.75rem;
  }
  
  .capture-btn,
  .cancel-camera-btn {
    width: 100%;
    padding: 12px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .upload-buttons {
    flex-direction: column;
  }
  
  .upload-btn {
    width: 100%;
  }
}

/* Banne
r Preview Styles */
.banner-preview {
  margin-top: 15px;
  border: 2px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  max-width: 100%;
}

.banner-preview img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .banner-preview img {
    height: 80px;
  }
  
  .logo-preview img {
    width: 80px;
    height: 80px;
  }
}
.submit-shop-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 20px;
}

.submit-shop-container h1 {
  margin-bottom: 30px;
  color: #333;
  text-align: center;
}

.error-message {
  background-color: #ffebee;
  color: #c62828;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  border-left: 4px solid #c62828;
}

.success-message {
  background-color: #e8f5e9;
  color: #2e7d32;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  border-left: 4px solid #2e7d32;
}

.submit-shop-content {
  display: grid;
  grid-template-columns: 1fr 350px;
  grid-gap: 30px;
  gap: 30px;
}

.shop-preview {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.shop-preview h2 {
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.shop-header h3 {
  margin: 0;
  font-size: 24px;
}

.shop-logo {
  width: 100px;
  height: 100px;
}

.shop-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.shop-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
  gap: 15px;
  margin-bottom: 30px;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.info-item.full-width {
  grid-column: 1 / -1;
}

.label {
  font-weight: 500;
  color: #666;
  margin-bottom: 5px;
}

.value {
  color: #333;
}

.products-preview {
  margin-top: 20px;
}

.products-preview h3 {
  margin-top: 0;
  margin-bottom: 15px;
}

.no-products-message {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  color: #666;
}

.products-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 15px;
  gap: 15px;
}

.product-item {
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.no-image {
  width: 100%;
  height: 100px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}

.product-details {
  padding: 10px;
}

.product-details h4 {
  margin: 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.price {
  margin: 5px 0 0 0;
  font-weight: 500;
  color: #e91e63;
  font-size: 14px;
}

.submission-section {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  align-self: start;
}

.submission-section h2 {
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.warning-message {
  background-color: #fff8e1;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.warning-message h3 {
  margin-top: 0;
  color: #f57f17;
  font-size: 18px;
}

.warning-message ul {
  margin-bottom: 20px;
  padding-left: 20px;
}

.edit-button {
  background-color: #ff9800;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  width: 100%;
}

.edit-button:hover {
  background-color: #f57c00;
}

.submission-info {
  margin-bottom: 20px;
}

.submission-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 30px;
}

.cancel-button {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.cancel-button:hover {
  background-color: #e0e0e0;
}

.submit-button {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.submit-button:hover {
  background-color: #388e3c;
}

.submit-button:disabled {
  background-color: #a5d6a7;
  cursor: not-allowed;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top: 4px solid #2196f3;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

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

/* Enhanced Mobile Responsiveness */
@media (max-width: 900px) {
  .submit-shop-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .shop-info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .submission-section {
    order: -1; /* Move submission section to top on mobile */
  }
}

@media (max-width: 768px) {
  .submit-shop-container {
    padding: 20px 15px;
    max-width: none;
    margin: 0;
  }
  
  .submit-shop-container h1 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .submit-shop-content {
    gap: 15px;
  }
  
  .shop-preview,
  .submission-section {
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  }
  
  .shop-preview h2,
  .submission-section h2 {
    font-size: 18px;
    margin-bottom: 15px;
  }
  
  .shop-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
    margin-bottom: 15px;
  }
  
  .shop-header h3 {
    font-size: 20px;
  }
  
  .shop-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto;
  }
  
  .shop-info-grid {
    gap: 10px;
  }
  
  .info-item {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
  }
  
  .label {
    font-size: 13px;
    margin-bottom: 4px;
    font-weight: 600;
  }
  
  .value {
    font-size: 14px;
    word-break: break-word;
  }
  
  .products-preview {
    margin-top: 15px;
  }
  
  .products-preview h3 {
    font-size: 16px;
    margin-bottom: 12px;
  }
  
  .products-list {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
  }
  
  .product-item {
    border-radius: 6px;
  }
  
  .product-image,
  .no-image {
    height: 80px;
  }
  
  .no-image {
    font-size: 12px;
  }
  
  .product-details {
    padding: 8px;
  }
  
  .product-details h4 {
    font-size: 13px;
  }
  
  .price {
    font-size: 13px;
  }
  
  .warning-message {
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 15px;
  }
  
  .warning-message h3 {
    font-size: 16px;
  }
  
  .warning-message ul {
    font-size: 14px;
    margin-bottom: 15px;
    padding-left: 18px;
  }
  
  .edit-button,
  .cancel-button,
  .submit-button {
    padding: 12px 20px;
    font-size: 15px;
    border-radius: 8px;
  }
  
  .submission-actions {
    gap: 8px;
    margin-top: 20px;
  }
  
  .error-message,
  .success-message {
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 14px;
  }
  
  .no-products-message {
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .submit-shop-container {
    padding: 15px 10px;
  }
  
  .submit-shop-container h1 {
    font-size: 20px;
    margin-bottom: 15px;
  }
  
  .shop-preview,
  .submission-section {
    padding: 12px;
    border-radius: 4px;
  }
  
  .shop-preview h2,
  .submission-section h2 {
    font-size: 16px;
    margin-bottom: 12px;
  }
  
  .shop-header h3 {
    font-size: 18px;
  }
  
  .shop-logo {
    width: 70px;
    height: 70px;
  }
  
  .info-item {
    padding: 8px;
  }
  
  .label {
    font-size: 12px;
  }
  
  .value {
    font-size: 13px;
  }
  
  .products-list {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
  }
  
  .product-image,
  .no-image {
    height: 70px;
  }
  
  .no-image {
    font-size: 11px;
  }
  
  .product-details {
    padding: 6px;
  }
  
  .product-details h4 {
    font-size: 12px;
  }
  
  .price {
    font-size: 12px;
  }
  
  .warning-message {
    padding: 10px;
  }
  
  .warning-message h3 {
    font-size: 15px;
  }
  
  .warning-message ul {
    font-size: 13px;
    padding-left: 16px;
  }
  
  .edit-button,
  .cancel-button,
  .submit-button {
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 6px;
  }
  
  .submission-actions {
    gap: 6px;
    margin-top: 15px;
  }
  
  .error-message,
  .success-message {
    padding: 10px;
    font-size: 13px;
    margin-bottom: 12px;
  }
  
  .no-products-message {
    padding: 10px;
    font-size: 13px;
  }
}/* ===
=====================================
   Enhanced Products Section Styles
   ======================================== */

.products-preview.enhanced {
  background: #f8fafc;
  border-radius: 12px;
  padding: 25px;
  margin: 25px 0;
}

.products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e2e8f0;
}

.products-header h3 {
  color: #1e40af;
  margin: 0;
  font-size: 1.3rem;
}

.products-stats {
  display: flex;
  gap: 12px;
  align-items: center;
}

.product-count {
  background: #dbeafe;
  color: #1e40af;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
}

.warning-badge {
  background: #fef3c7;
  color: #f59e0b;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Enhanced Products Grid */
.products-grid.enhanced {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 25px;
}

.product-card.enhanced {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card.enhanced:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.product-image-section {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.submit-product-carousel {
  width: 100%;
  height: 100%;
}

.product-info {
  padding: 18px;
}

.product-name {
  margin: 0 0 8px 0;
  color: #1f2937;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
}

.product-price {
  color: #059669;
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0 0 8px 0;
}

.product-category {
  color: #6b7280;
  font-size: 0.9rem;
  margin: 0 0 12px 0;
  background: #f3f4f6;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

.product-description {
  color: #4b5563;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0 0 12px 0;
}

.product-status {
  margin: 12px 0;
}

.stock-badge {
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
}

.stock-badge.in-stock {
  background: #d1fae5;
  color: #065f46;
}

.stock-badge.out-of-stock {
  background: #fee2e2;
  color: #991b1b;
}

.image-count-info {
  color: #6b7280;
  font-size: 0.8rem;
  margin-top: 8px;
  font-weight: 500;
}

/* Enhanced No Products Section */
.no-products.enhanced {
  text-align: center;
  padding: 50px 30px;
  background: white;
  border-radius: 12px;
  border: 2px dashed #d1d5db;
}

.no-products-icon {
  font-size: 4rem;
  margin-bottom: 20px;
  opacity: 0.6;
}

.no-products.enhanced h4 {
  color: #374151;
  margin: 0 0 12px 0;
  font-size: 1.2rem;
}

.no-products.enhanced p {
  color: #6b7280;
  margin: 0 0 20px 0;
  font-size: 1rem;
}

.recommendation-note {
  background: #fef3c7;
  padding: 20px;
  border-radius: 10px;
  border-left: 4px solid #f59e0b;
  margin: 20px 0;
}

.recommendation-note p {
  margin: 0;
  color: #92400e;
  font-size: 0.95rem;
  text-align: left;
}

.add-product-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 1rem;
}

.add-product-btn:hover {
  background: #2563eb;
}

/* Products Summary */
.products-summary {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  gap: 20px;
  text-align: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #1e40af;
}

.stat-label {
  font-size: 0.9rem;
  color: #6b7280;
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
  .products-grid.enhanced {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .products-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .products-stats {
    width: 100%;
    justify-content: space-between;
  }
  
  .summary-stats {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .no-products.enhanced {
    padding: 30px 20px;
  }
  
  .recommendation-note {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .products-preview.enhanced {
    padding: 15px;
    margin: 15px 0;
  }
  
  .product-info {
    padding: 15px;
  }
  
  .product-name {
    font-size: 1rem;
  }
  
  .product-price {
    font-size: 1.2rem;
  }
}
/* Edit Shop Page Styles */
.edit-shop-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
}

.edit-shop-container {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

.edit-shop-container h1 {
  color: #333;
  margin-bottom: 10px;
  font-size: 28px;
}

.edit-shop-container p {
  color: #666;
  margin-bottom: 30px;
}
/* Loading and Error States */
.loading {
  text-align: center;
  padding: 40px;
  font-size: 18px;
  color: #666;
}

.error-message {
  text-align: center;
  padding: 20px;
  background-color: #fee;
  border: 1px solid #fcc;
  border-radius: 4px;
  margin-bottom: 20px;
}

.error-message p {
  color: #c33;
  margin-bottom: 15px;
}

/* Form Styles */
.edit-shop-form {
  margin-top: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

/* Error States */
.error-input {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25) !important;
}

.error-text {
  display: block;
  color: #dc3545;
  font-size: 14px;
  margin-top: 5px;
}

/* Logo Preview */
.logo-preview {
  margin-top: 10px;
}

.preview-container {
  display: inline-block;
  text-align: center;
}

.logo-image {
  max-width: 150px;
  max-height: 150px;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: block;
}

.preview-label {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.btn-primary,
.btn-secondary {
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #0056b3;
}

.btn-primary:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #545b62;
}

/* Responsive Design */
@media (max-width: 768px) {
  .edit-shop-page {
    padding: 10px;
  }
  
  .edit-shop-container {
    padding: 20px;
  }
  
  .edit-shop-container h1 {
    font-size: 24px;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .btn-primary,
  .btn-secondary {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .edit-shop-container {
    padding: 15px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px; /* Prevent zoom on iOS */
  }
}/* File Upl
oad Styles */
.file-upload-container {
  margin-top: 8px;
}

.file-input {
  display: none;
}

.file-upload-label {
  display: block;
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fafafa;
}

.file-upload-label:hover {
  border-color: #007bff;
  background: #f0f8ff;
}

.banner-upload {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.banner-placeholder {
  width: 100%;
}

.upload-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.upload-placeholder span:not(.upload-icon) {
  font-weight: 500;
  color: #333;
}

.upload-placeholder small {
  color: #666;
  font-size: 0.85rem;
}

/* Image Preview Styles */
.image-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.logo-preview {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #ddd;
}

.banner-preview {
  width: 100%;
  max-width: 400px;
}

.banner-preview-img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #ddd;
}

.change-image {
  font-size: 0.85rem;
  color: #007bff;
  text-decoration: underline;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .file-upload-label {
    padding: 15px;
  }
  
  .banner-upload {
    min-height: 100px;
  }
  
  .logo-preview {
    width: 60px;
    height: 60px;
  }
  
  .banner-preview-img {
    height: 80px;
  }
  
  .upload-icon {
    font-size: 1.5rem;
  }
} 
/* Create Shop Page Styles */

.create-shop-container {
    min-height: 100vh;
    background-color: #f8f9fa;
}

/* Header */
.create-shop-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem 0;
    text-align: center;
    position: relative;
}

.back-btn {
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.2);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.back-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-50%) translateY(-1px);
}

.create-shop-header h1 {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 600;
}

.create-shop-header p {
    margin: 0.5rem 0 0 0;
    opacity: 0.9;
    font-size: 1.2rem;
}

/* Content */
.create-shop-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 3rem;
    gap: 3rem;
    align-items: start;
}

/* Form */
.create-shop-form {
    background: white;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Form Groups */
.form-group {
    margin-bottom: 2rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
    font-size: 1rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-group small {
    display: block;
    margin-top: 0.5rem;
    color: #666;
    font-size: 0.9rem;
}

/* Error and Success Messages */
.error-message,
.success-message {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.error-message {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.success-message {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error-icon,
.success-icon {
    font-size: 1.2rem;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
}

.cancel-btn,
.submit-btn {
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cancel-btn {
    background: #6c757d;
    color: white;
}

.cancel-btn:hover:not(:disabled) {
    background: #5a6268;
    transform: translateY(-1px);
}

.submit-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.submit-btn:disabled,
.cancel-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Loading Spinner */
.loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Info Panel */
.info-panel {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    height: fit-content;
    position: sticky;
    top: 2rem;
}

.info-panel h3 {
    margin: 0 0 1.5rem 0;
    color: #333;
    font-size: 1.3rem;
}

.info-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.step-number {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.step-content h4 {
    margin: 0 0 0.25rem 0;
    color: #333;
    font-size: 1rem;
}

.step-content p {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .create-shop-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .info-panel {
        position: static;
    }
}

@media (max-width: 768px) {
    .create-shop-content {
        padding: 2rem 1rem;
    }
    
    .create-shop-form {
        padding: 1.5rem;
    }
    
    .back-btn {
        position: static;
        transform: none;
        margin-bottom: 1rem;
        align-self: flex-start;
    }
    
    .create-shop-header {
        padding: 1.5rem 1rem;
    }
    
    .create-shop-header h1 {
        font-size: 2rem;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .cancel-btn,
    .submit-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .create-shop-header h1 {
        font-size: 1.5rem;
    }
    
    .create-shop-header p {
        font-size: 1rem;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.75rem;
    }
}/* File 
Upload Styles */
.file-upload-container {
  margin-top: 8px;
}

.file-input {
  display: none;
}

.file-upload-label {
  display: block;
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fafafa;
}

.file-upload-label:hover {
  border-color: #007bff;
  background: #f0f8ff;
}

.banner-upload {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.banner-placeholder {
  width: 100%;
}

.upload-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.upload-placeholder span:not(.upload-icon) {
  font-weight: 500;
  color: #333;
}

.upload-placeholder small {
  color: #666;
  font-size: 0.85rem;
}

/* Image Preview Styles */
.image-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.logo-preview {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #ddd;
}

.banner-preview {
  width: 100%;
  max-width: 400px;
}

.banner-preview-img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #ddd;
}

.change-image {
  font-size: 0.85rem;
  color: #007bff;
  text-decoration: underline;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .file-upload-label {
    padding: 15px;
  }
  
  .banner-upload {
    min-height: 100px;
  }
  
  .logo-preview {
    width: 60px;
    height: 60px;
  }
  
  .banner-preview-img {
    height: 80px;
  }
  
  .upload-icon {
    font-size: 1.5rem;
  }
}
/* Breadcrumbs.css */
.breadcrumbs {
  margin-bottom: 20px;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-link {
  color: #007bff;
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb-link:hover {
  color: #0056b3;
  text-decoration: underline;
}

.breadcrumb-text {
  color: #666;
}

.breadcrumb-separator {
  margin: 0 8px;
  color: #999;
}

.breadcrumb-item.active .breadcrumb-text {
  font-weight: 500;
  color: #333;
}

/* Enhanced Mobile Responsive Styles */
@media (max-width: 768px) {
  .breadcrumbs {
    margin-bottom: 15px;
    padding: 10px 0;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 8px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .breadcrumb-list {
    font-size: 13px;
    white-space: nowrap;
    min-width: max-content;
  }
  
  .breadcrumb-item {
    flex-shrink: 0;
  }
  
  .breadcrumb-link {
    padding: 6px 8px;
    border-radius: 4px;
    background: #ffffff;
    border: 1px solid #e9ecef;
    margin-right: 4px;
    display: inline-block;
    min-height: 32px;
    display: flex;
    align-items: center;
  }
  
  .breadcrumb-link:hover {
    background: #e9ecef;
    border-color: #007bff;
  }
  
  .breadcrumb-text {
    padding: 6px 8px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-weight: 500;
    min-height: 32px;
    display: flex;
    align-items: center;
  }
  
  .breadcrumb-separator {
    margin: 0 4px;
    color: #6c757d;
    font-weight: bold;
  }
  
  .breadcrumb-item.active .breadcrumb-text {
    background: #007bff;
    color: #ffffff;
    border-color: #007bff;
  }
}

@media (max-width: 480px) {
  .breadcrumbs {
    margin-bottom: 12px;
    padding: 6px 10px;
  }
  
  .breadcrumb-list {
    font-size: 12px;
  }
  
  .breadcrumb-link,
  .breadcrumb-text {
    padding: 4px 6px;
    font-size: 12px;
    min-height: 28px;
  }
  
  .breadcrumb-separator {
    margin: 0 3px;
    font-size: 12px;
  }
}
/* Product Management Styles */

/* Base Layout */
.product-management-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

/* Page Header */
.page-header {
  margin-bottom: 30px;
  text-align: center;
}

.page-header h1 {
  color: #333;
  margin-bottom: 10px;
  font-size: 28px;
}

.page-header p {
  color: #666;
  font-size: 16px;
}

/* Loading and Error States */
.loading {
  text-align: center;
  padding: 40px;
  font-size: 18px;
  color: #666;
}

.error-message {
  text-align: center;
  padding: 20px;
  background-color: #fee;
  border: 1px solid #fcc;
  border-radius: 4px;
  margin-bottom: 20px;
}

.error-message p {
  color: #c33;
  margin-bottom: 15px;
}

/* Product Stats */
.product-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #e9ecef;
}

.stat-card h3 {
  margin: 0 0 10px 0;
  color: #495057;
  font-size: 16px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #007bff;
  margin: 0;
}

.stat-text {
  font-size: 18px;
  font-weight: 600;
  color: #28a745;
  margin: 0;
}

.stat-label {
  font-size: 12px;
  color: #6c757d;
  margin: 5px 0 0 0;
}

/* Page Actions */
.page-actions {
  margin-bottom: 30px;
  text-align: center;
}



.add-product-btn {
  padding: 12px 24px;
  font-size: 16px;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.empty-state h3 {
  margin-bottom: 15px;
  color: #333;
}

.empty-state p {
  margin-bottom: 25px;
  font-size: 16px;
}

/* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 25px;
  gap: 25px;
  margin-top: 20px;
}

/* Product Card */
.product-card {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  min-height: 300px;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}



.product-images {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.image-gallery {
  position: relative;
  height: 100%;
}

.main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-count {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #f8f9fa;
  color: #6c757d;
  font-size: 14px;
}

.product-info {
  padding: 15px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.product-name {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #333;
  font-weight: 600;
}

.product-price {
  margin: 0 0 10px 0;
  font-size: 20px;
  font-weight: bold;
  color: #28a745;
}

.product-description {
  margin: 0 0 15px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.4;
  max-height: 60px;
  overflow: hidden;
}

/* Product Actions */
.product-actions {
  display: flex;
  gap: 8px;
  margin-top: 15px;
  width: 100%;
}

.product-actions button {
  flex: 1 1;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-width: 80px;
}

/* Edit Button */
.btn-edit {
  background: #007bff;
  color: white;
}

.btn-edit:hover {
  background: #0056b3;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Delete Button */
.btn-delete {
  background: #dc3545;
  color: white;
}

.btn-delete:hover {
  background: #c82333;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

/* Form Styles */
.product-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-help {
  font-size: 12px;
  color: #6c757d;
  margin-top: 5px;
}

/* Error States */
.error-input {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25) !important;
}

.error-text {
  display: block;
  color: #dc3545;
  font-size: 14px;
  margin-top: 5px;
}

/* Image Previews */
.image-previews,
.existing-images {
  margin-top: 15px;
}

.image-previews h4,
.existing-images h4 {
  margin-bottom: 10px;
  color: #333;
  font-size: 16px;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-gap: 15px;
  gap: 15px;
}

.preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e9ecef;
}

.preview-item.existing {
  border-color: #28a745;
}

.preview-item.new {
  border-color: #007bff;
}

.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.remove-image-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(220, 53, 69, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.remove-image-btn:hover {
  background: #dc3545;
}

.new-images {
  margin-top: 15px;
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.btn-primary,
.btn-secondary {
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  flex: 1 1;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #0056b3;
}

.btn-primary:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #545b62;
}

/* Enhanced Mobile Responsive Design */
@media (max-width: 768px) {
  .product-management-page {
    padding: 10px;
    background-color: #f8f9fa;
  }
  
  .container {
    padding: 15px;
    border-radius: 6px;
    margin: 0;
  }
  
  .page-header {
    margin-bottom: 20px;
    padding: 10px 0;
  }
  
  .page-header h1 {
    font-size: 22px;
    margin-bottom: 8px;
  }
  
  .page-header p {
    font-size: 14px;
  }
  
  .product-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .product-stats {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 20px;
  }
  
  .stat-card {
    padding: 15px;
    text-align: center;
  }
  
  .stat-card h3 {
    font-size: 14px;
  }
  
  .stat-number {
    font-size: 20px;
  }
  
  .stat-text {
    font-size: 16px;
  }
  
  .page-actions {
    margin-bottom: 20px;
  }
  
  .add-product-btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
    border-radius: 8px;
  }
  
  .product-card {
    border-radius: 6px;
    min-height: auto;
  }
  
  .product-images {
    height: 180px;
  }
  
  .product-info {
    padding: 12px;
  }
  
  .product-name {
    font-size: 16px;
    margin-bottom: 6px;
  }
  
  .product-price {
    font-size: 18px;
    margin-bottom: 8px;
  }
  
  .product-description {
    font-size: 13px;
    max-height: 50px;
    margin-bottom: 12px;
  }
  
  .product-actions {
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
  }
  
  .btn-edit,
  .btn-delete {
    flex: none;
    padding: 10px;
    font-size: 14px;
    border-radius: 6px;
  }
  
  /* Form Improvements */
  .product-form {
    max-width: none;
    margin: 0;
  }
  
  .form-group {
    margin-bottom: 18px;
  }
  
  .form-group label {
    font-size: 15px;
    margin-bottom: 6px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 12px;
    font-size: 16px; /* Prevent zoom on iOS */
    border-radius: 6px;
  }
  
  .form-group textarea {
    min-height: 80px;
  }
  
  .form-help {
    font-size: 12px;
    margin-top: 4px;
  }
  
  .form-actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 25px;
    padding-top: 15px;
  }
  
  .btn-primary,
  .btn-secondary {
    padding: 14px 20px;
    font-size: 16px;
    border-radius: 8px;
  }
  
  .preview-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .image-previews,
  .existing-images {
    margin-top: 12px;
  }
  
  .image-previews h4,
  .existing-images h4 {
    font-size: 15px;
    margin-bottom: 8px;
  }
  
  .empty-state {
    padding: 40px 15px;
  }
  
  .empty-state h3 {
    font-size: 18px;
  }
  
  .empty-state p {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .product-management-page {
    padding: 5px;
  }
  
  .container {
    padding: 12px;
    border-radius: 4px;
  }
  
  .page-header h1 {
    font-size: 20px;
  }
  
  .page-header p {
    font-size: 13px;
  }
  
  .product-card {
    margin-bottom: 12px;
    border-radius: 4px;
  }
  
  .product-images {
    height: 160px;
  }
  
  .no-image {
    height: 160px;
    font-size: 12px;
  }
  
  .product-info {
    padding: 10px;
  }
  
  .product-name {
    font-size: 15px;
    margin-bottom: 5px;
  }
  
  .product-price {
    font-size: 16px;
    margin-bottom: 6px;
  }
  
  .product-description {
    font-size: 12px;
    max-height: 40px;
    margin-bottom: 10px;
  }
  
  .product-actions {
    gap: 6px;
    margin-top: 10px;
  }
  
  .btn-edit,
  .btn-delete {
    padding: 8px;
    font-size: 13px;
    border-radius: 4px;
  }
  
  /* Form Mobile Optimizations */
  .form-group {
    margin-bottom: 15px;
  }
  
  .form-group label {
    font-size: 14px;
    margin-bottom: 5px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 10px;
    font-size: 16px;
    border-radius: 4px;
  }
  
  .form-group textarea {
    min-height: 70px;
  }
  
  .form-help {
    font-size: 11px;
  }
  
  .form-actions {
    gap: 10px;
    margin-top: 20px;
    padding-top: 12px;
  }
  
  .btn-primary,
  .btn-secondary {
    padding: 12px 16px;
    font-size: 15px;
    border-radius: 6px;
  }
  
  .preview-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  
  .preview-item {
    border-radius: 4px;
  }
  
  .remove-image-btn {
    width: 20px;
    height: 20px;
    font-size: 12px;
    top: 3px;
    right: 3px;
  }
  
  .error-state {
    padding: 30px 15px;
  }
  
  .error-state h1 {
    font-size: 18px;
  }
  
  .error-state p {
    font-size: 13px;
  }
  
  .error-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .error-actions .btn-primary,
  .error-actions .btn-secondary {
    width: 100%;
    max-width: none;
    padding: 12px;
    font-size: 14px;
  }
}/* Addit
ional styles for improved product add page */
.error-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.error-state h1 {
  color: #e53e3e;
  margin-bottom: 15px;
}

.error-state p {
  color: #666;
  margin-bottom: 25px;
  font-size: 1.1rem;
}

.error-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.error-actions .btn-primary,
.error-actions .btn-secondary {
  flex: none;
  min-width: 150px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 25px;
}

.checkbox-label input[type="checkbox"] {
  width: auto;
  margin: 10px;
}

.form-group select {
  background: white;
  cursor: pointer;
}

.form-group select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

/* Enhanced Form Row Mobile Responsiveness */
@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 18px;
  }
  
  .checkbox-label {
    margin-top: 15px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
  }
  
  .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }
  
  .error-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  
  .error-actions .btn-primary,
  .error-actions .btn-secondary {
    width: 100%;
    max-width: 300px;
    padding: 14px 20px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .form-row {
    gap: 12px;
    margin-bottom: 15px;
  }
  
  .checkbox-label {
    margin-top: 12px;
    padding: 10px;
    font-size: 14px;
  }
  
  .checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
  }
  
  .error-actions .btn-primary,
  .error-actions .btn-secondary {
    max-width: none;
    padding: 12px 16px;
    font-size: 15px;
  }
}/* En
hanced image upload styles */
.form-group input[type="file"]:disabled {
  background-color: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

.form-group input[type="file"]:disabled + .form-help {
  color: #6c757d;
  font-style: italic;
}

.preview-item {
  position: relative;
  transition: transform 0.2s ease;
}

.preview-item:hover {
  transform: scale(1.02);
}

.preview-item:hover .remove-image-btn {
  opacity: 1;
}

.remove-image-btn {
  opacity: 0.8;
  transition: opacity 0.2s ease;
  font-weight: bold;
  line-height: 1;
}

.image-previews h4 {
  color: #495057;
  font-size: 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.image-previews .form-help {
  margin-top: 10px;
  font-weight: 500;
  color: #495057;
}

/* Animation for adding/removing images */
.preview-item {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}/* 
Camera and Upload Enhancement Styles */
.image-upload-options {
  margin-bottom: 1rem;
}

.upload-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid #3b82f6;
  border-radius: 8px;
  background-color: #ffffff;
  color: #3b82f6;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  min-width: 160px;
  margin:10px 0 ;
}

.upload-btn:hover:not(:disabled) {
  background-color: #3b82f6;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

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

.file-upload-btn {
  position: relative;
  overflow: hidden;
}

.hidden-file-input {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.camera-btn {
  background: none;
  border: 2px solid #10b981;
  color: #10b981;
}

.camera-btn:hover:not(:disabled) {
  background-color: #10b981;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Camera Modal Styles */
.camera-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.camera-container {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.camera-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.camera-header h3 {
  margin: 0;
  color: #1f2937;
  font-size: 1.25rem;
  font-weight: 600;
}

.close-camera-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6b7280;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-camera-btn:hover {
  background-color: #f3f4f6;
  color: #374151;
}

.camera-preview {
  position: relative;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

#camera-video {
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  height: auto;
  border-radius: 0;
}

.camera-controls {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background-color: #f8fafc;
  justify-content: center;
}

.capture-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.capture-btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.cancel-camera-btn {
  background-color: #6b7280;
  color: #ffffff;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-camera-btn:hover {
  background-color: #4b5563;
  transform: translateY(-2px);
}

/* Enhanced Mobile Responsive Camera Styles */
@media (max-width: 768px) {
  .image-upload-options {
    margin-bottom: 1.5rem;
  }
  
  .upload-buttons {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .upload-btn {
    width: 100%;
    min-width: auto;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    justify-content: center;
  }
  
  .camera-modal {
    padding: 0.5rem;
    align-items: flex-start;
    padding-top: 2rem;
  }
  
  .camera-container {
    max-width: 95vw;
    max-height: 90vh;
    width: 100%;
  }
  
  .camera-header {
    padding: 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  
  .camera-header h3 {
    font-size: 1.1rem;
  }
  
  .camera-preview {
    min-height: 250px;
    max-height: 60vh;
  }
  
  #camera-video {
    max-height: 60vh;
    width: 100%;
    object-fit: cover;
  }
  
  .camera-controls {
    flex-direction: column;
    padding: 1rem;
    gap: 0.75rem;
    position: sticky;
    bottom: 0;
    background: #f8fafc;
  }
  
  .capture-btn,
  .cancel-camera-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    border-radius: 8px;
  }
}

@media (max-width: 480px) {
  .upload-btn {
    padding: 0.875rem 1.25rem;
    font-size: 0.9rem;
  }
  
  .camera-modal {
    padding: 0.25rem;
    padding-top: 1rem;
  }
  
  .camera-container {
    max-width: 98vw;
    max-height: 95vh;
    border-radius: 8px;
  }
  
  .camera-header {
    padding: 0.75rem;
  }
  
  .camera-header h3 {
    font-size: 1rem;
  }
  
  .close-camera-btn {
    font-size: 1.25rem;
    padding: 0.5rem;
  }
  
  .camera-preview {
    min-height: 200px;
    max-height: 50vh;
  }
  
  #camera-video {
    max-height: 50vh;
  }
  
  .camera-controls {
    padding: 0.75rem;
    gap: 0.5rem;
  }
  
  .capture-btn,
  .cancel-camera-btn {
    padding: 0.875rem;
    font-size: 0.9rem;
    border-radius: 6px;
  }
  
  /* Enhanced Image Previews for Mobile */
  .image-previews {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 6px;
  }
  
  .image-previews h4 {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
  }
  
  .preview-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  
  .preview-item {
    border-radius: 6px;
    border-width: 1px;
  }
  
  .remove-image-btn {
    width: 20px;
    height: 20px;
    font-size: 12px;
    top: 3px;
    right: 3px;
  }
}

/* Enhanced Image Previews */
.image-previews {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.image-previews h4 {
  margin: 0 0 1rem 0;
  color: #374151;
  font-size: 1rem;
  font-weight: 600;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1rem;
}

.preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e2e8f0;
  background-color: #ffffff;
}

.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.remove-image-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: rgba(239, 68, 68, 0.9);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.remove-image-btn:hover {
  background-color: rgba(220, 38, 38, 1);
  transform: scale(1.1);
}

/* Loading and Error States for Camera */
.camera-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #6b7280;
}

.camera-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #ef4444;
  text-align: center;
}

/* Accessibility improvements */
.upload-btn:focus,
.capture-btn:focus,
.cancel-camera-btn:focus,
.close-camera-btn:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Animation for camera modal */
.camera-modal {
  animation: fadeIn 0.3s ease;
}

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

.camera-container {
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}/* Pr
oduct Limit Notice */
.product-limit-notice {
  background: #e3f2fd;
  border: 1px solid #2196f3;
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
  margin-bottom: 20px;
}

.notice-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.notice-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.notice-text {
  flex: 1 1;
  color: #1565c0;
  line-height: 1.5;
}

.notice-text strong {
  color: #0d47a1;
}

@media (max-width: 768px) {
  .product-limit-notice {
    padding: 12px;
    margin-top: 10px;
  }
  
  .notice-content {
    gap: 8px;
  }
  
  .notice-icon {
    font-size: 16px;
  }
  
  .notice-text {
    font-size: 14px;
  }
}/* Prod
uct Limit Status */
.product-limit-status {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.limit-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.limit-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.limit-info {
  flex: 1 1;
}

.limit-text {
  font-size: 1rem;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.limit-progress {
  width: 100%;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.limit-progress .progress-bar {
  height: 100%;
  background: #3498db;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.limit-remaining {
  font-size: 0.9rem;
  color: #666;
}

.buy-more-btn {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.buy-more-btn:hover {
  background: linear-gradient(135deg, #2980b9, #1f5f8b);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .limit-content {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  
  .limit-info {
    text-align: center;
  }
  
  .buy-more-btn {
    align-self: center;
    width: fit-content;
  }
}

/* Enhanced Product Limit Notice for pending shops */
.product-limit-notice {
  background: #e8f4fd;
  border: 1px solid #bee5eb;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.notice-content {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.notice-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.notice-text {
  color: #0c5460;
  line-height: 1.5;
}/* L
imit Reached Message */
.limit-reached-message {
  background: linear-gradient(135deg, #fee 0%, #fdd 100%);
  border: 2px solid #f5c6cb;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  margin: 2rem 0;
  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.1);
}

.limit-reached-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.limit-reached-content .limit-icon {
  font-size: 3rem;
}

.limit-reached-content .limit-text h3 {
  color: #721c24;
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

.limit-reached-content .limit-text p {
  color: #856404;
  margin: 0.5rem 0;
  font-size: 1rem;
  line-height: 1.5;
}

.buy-slots-btn-large {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2);
}

.buy-slots-btn-large:hover {
  background: linear-gradient(135deg, #20c997, #17a2b8);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .limit-reached-message {
    padding: 1.5rem;
  }
  
  .limit-reached-content .limit-text h3 {
    font-size: 1.3rem;
  }
  
  .buy-slots-btn-large {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }
}

/* Product Management Pagination Styles */
.pagination-wrapper {
  margin: 3rem 0 2rem 0;
  padding: 1.5rem 0;
  border-top: 1px solid #e9ecef;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination-wrapper .pagination-container {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid #e9ecef;
}

.pagination-wrapper .pagination-container.product-management {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.pagination-wrapper .pagination-info {
  color: #495057;
  font-weight: 500;
  margin-bottom: 1rem;
}

.pagination-wrapper .pagination-controls {
  gap: 0.5rem;
}

.pagination-wrapper .pagination-btn {
  background: #ffffff;
  border: 1px solid #dee2e6;
  color: #495057;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.pagination-wrapper .pagination-btn:hover:not(:disabled) {
  background: #007bff;
  color: white;
  border-color: #007bff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

.pagination-wrapper .pagination-btn.active {
  background: #007bff;
  border-color: #007bff;
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.pagination-wrapper .pagination-per-page {
  margin-bottom: 1rem;
}

.pagination-wrapper .per-page-select {
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  color: #495057;
  font-weight: 500;
}

/* Responsive pagination adjustments */
@media (max-width: 768px) {
  .pagination-wrapper {
    margin: 2rem 0 1rem 0;
    padding: 1rem 0;
  }
  
  .pagination-wrapper .pagination-container {
    padding: 1rem;
    margin: 0 1rem;
  }
  
  .pagination-wrapper .pagination-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
  
  .pagination-wrapper .pagination-info {
    font-size: 0.9rem;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .pagination-wrapper .pagination-container {
    margin: 0 0.5rem;
    padding: 0.75rem;
  }
  
  .pagination-wrapper .pagination-btn {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
  }
}
/* Admin Dashboard Styles */

/* Ensure proper spacing from sticky header */
.admin-dashboard {
  padding: 20px 20px 20px 20px; /* Top padding for sticky header */
  max-width: 1400px;
  margin: 0 auto;
  background-color: #f8fafc;
  background-color: var(--bg-secondary, #f8fafc);
  color: #0f172a;
  color: var(--text-primary, #0f172a);
  min-height: 10vh;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  background: #ffffff;
  background: var(--surface-primary, #ffffff);
  color: #0f172a;
  color: var(--text-primary, #0f172a);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  box-shadow: var(--elevation-2, 0 1px 3px 0 rgba(0, 0, 0, 0.1));
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border-primary, #e2e8f0);
}

.admin-header h1 {
  color: #0f172a !important;
  color: var(--text-primary, #0f172a) !important;
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
}

.admin-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Quick Actions */
.admin-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 2rem;
}

.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.quick-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  border-color: #3498db;
}

.action-icon {
  font-size: 2rem;
  background: #f8fafc;
  padding: 0.75rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 60px;
}

.action-content h3 {
  margin: 0 0 0.25rem 0;
  color: #2c3e50;
  font-size: 1.125rem;
  font-weight: 600;
}

.action-content p {
  margin: 0;
  color: #6b7280;
  font-size: 0.875rem;
}

.admin-welcome {
  color: #666;
  font-weight: 500;
}

.logout-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s;
}

.logout-btn:hover {
  background: #c82333;
}

/* Analytics Grid */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 30px;
}

.analytics-card {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.analytics-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.card-icon {
  font-size: 2.5rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f8f9fa;
}

.analytics-card.total .card-icon { background: #e3f2fd; }
.analytics-card.pending .card-icon { background: #fff3e0; }
.analytics-card.approved .card-icon { background: #e8f5e8; }
.analytics-card.rejected .card-icon { background: #ffebee; }
.analytics-card.users .card-icon { background: #f3e5f5; }
.analytics-card.products .card-icon { background: #e0f2f1; }

.card-content h3 {
  margin: 0 0 10px 0;
  color: #666;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-number {
  font-size: 2rem;
  font-weight: bold;
  color: #2c3e50;
}

/* Dashboard Content */
.dashboard-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 30px;
  gap: 30px;
}

.pending-shops-section {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.pending-shops-section h2 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 1.5rem;
}

.no-pending {
  text-align: center;
  padding: 40px;
  color: #666;
}

/* Shop Cards */
.shops-grid {
  display: grid;
  grid-gap: 20px;
  gap: 20px;
}

.shop-card {
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 20px;
  background: white;
  transition: transform 0.3s, box-shadow 0.3s;
}

/* Phone number styling for subscription details */
.phone-number {
  font-family: 'Courier New', monospace;
  font-weight: 500;
  color: #2c3e50;
  background: #ecf8ff;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #bee3f8;
  cursor: help;
  transition: all 0.3s ease;
  display: inline-block;
}

.phone-number:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.shop-card {
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s;
  background: #fafafa;
}

.shop-card:hover {
  border-color: #007bff;
  box-shadow: 0 4px 15px rgba(0,123,255,0.1);
  transform: translateY(-2px);
}

.shop-header {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 15px;
}

.shop-logo {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #e9ecef;
}

.shop-info h3 {
  margin: 0 0 5px 0;
  color: #2c3e50;
  font-size: 1.2rem;
}

.shop-category {
  color: #007bff;
  font-weight: 500;
  margin: 0 0 5px 0;
}

.shop-date {
  color: #666;
  font-size: 0.9rem;
  margin: 0;
}

.shop-details {
  margin-bottom: 15px;
}

.shop-details p {
  margin: 5px 0;
  color: #555;
  font-size: 0.9rem;
}

.shop-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.approve-btn, .reject-btn, .details-btn, .cancel-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background-color 0.3s;
}

.approve-btn {
  background: #28a745;
  color: white;
}

.approve-btn:hover {
  background: #218838;
}

.reject-btn {
  background: #dc3545;
  color: white;
}

.reject-btn:hover {
  background: #c82333;
}

.details-btn {
  background: #007bff;
  color: white;
}

.details-btn:hover {
  background: #0056b3;
}

.cancel-btn {
  background: #6c757d;
  color: white;
}

.cancel-btn:hover {
  background: #545b62;
}

/* Recent Activity */
.recent-activity {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.recent-activity h2 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 1.3rem;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #007bff;
}

.activity-icon {
  font-size: 1.2rem;
  width: 30px;
  text-align: center;
}

.activity-content p {
  margin: 2px 0;
}

.activity-date {
  color: #666;
  font-size: 0.8rem;
}

.activity-reason {
  color: #dc3545;
  font-size: 0.9rem;
  font-style: italic;
}

/* Modal Styles */
.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;
}

.modal-content {
  background: white;
  border-radius: 10px;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.modal-content.small {
  max-width: 500px;
}

/* Large Modal for Shop Approval */
.modal-content.large-modal {
  max-width: 1400px;
  width: 95%;
  max-height: 95vh;
  border-radius: 15px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid #e9ecef;
  background: #f8f9fa;
  border-radius: 10px 10px 0 0;
}

.modal-header h2 {
  margin: 0;
  color: #2c3e50;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.close-btn:hover {
  background: #e9ecef;
}

.modal-body {
  padding: 25px;
}

.shop-detail-section {
  margin-bottom: 30px;
}

.shop-detail-section h3 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 1.2rem;
  border-bottom: 2px solid #007bff;
  padding-bottom: 5px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 15px;
  gap: 15px;
  margin-bottom: 20px;
}

.detail-item {
  padding: 10px;
  background: #f8f9fa;
  border-radius: 5px;
  border-left: 3px solid #007bff;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
  margin-left: 10px;
}

.status-badge.pending_approval {
  background: #fff3cd;
  color: #856404;
}

.status-badge.approved {
  background: #d4edda;
  color: #155724;
}

.status-badge.rejected {
  background: #f8d7da;
  color: #721c24;
}

.description-section, .logo-section {
  margin-top: 20px;
}

.modal-logo {
  max-width: 200px;
  max-height: 200px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #e9ecef;
  margin-top: 10px;
}

/* Products Section */
.products-section h3 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 1.2rem;
  border-bottom: 2px solid #28a745;
  padding-bottom: 5px;
}

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

.product-card {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 15px;
  background: #fafafa;
}

.product-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 10px;
}

.product-info h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 1rem;
}

.product-price {
  font-size: 1.1rem;
  font-weight: bold;
  color: #28a745;
  margin: 5px 0;
}

.product-category {
  color: #007bff;
  font-size: 0.9rem;
  margin: 5px 0;
}

.product-description {
  color: #666;
  font-size: 0.9rem;
  margin: 8px 0;
  line-height: 1.4;
}

.product-stock {
  color: #666;
  font-size: 0.8rem;
  margin: 5px 0 0 0;
}

.no-products {
  text-align: center;
  color: #666;
  padding: 40px;
  font-style: italic;
}

.modal-actions {
  padding: 20px 25px;
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  background: #f8f9fa;
  border-radius: 0 0 10px 10px;
}

/* Rejection Modal */
.rejection-textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  min-height: 100px;
}

.rejection-textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

/* Loading States */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

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

/* Error Message */
.error-message {
  background: #f8d7da;
  color: #721c24;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  border: 1px solid #f5c6cb;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .dashboard-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .admin-dashboard {
    padding: 10px;
  }
  
  .admin-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .analytics-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
  }
  
  .analytics-card {
    padding: 20px;
  }
  
  .card-number {
    font-size: 1.5rem;
  }
  
  .shop-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .shop-actions {
    justify-content: center;
  }
  
  .modal-content {
    margin: 10px;
    max-height: 95vh;
  }
  
  .products-grid {
    grid-template-columns: 1fr;
  }
  
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .analytics-grid {
    grid-template-columns: 1fr;
  }
  
  .shop-actions {
    flex-direction: column;
  }
  
  .modal-actions {
    flex-direction: column;
  }
}/* Tab N
avigation Styles */
.admin-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  border-bottom: 2px solid #e9ecef;
}

.tab-btn {
  background: none;
  border: none;
  padding: 15px 25px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: all 0.3s ease;
  color: #666;
  position: relative;
}

.tab-btn:hover {
  background: #f8f9fa;
  color: #333;
}

.tab-btn.active {
  background: white;
  color: #007bff;
  border-bottom: 3px solid #007bff;
  font-weight: 600;
}

/* User Management Styles */
.users-management-section {
  background: white;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.users-management-section h2 {
  color: #2c3e50;
  margin-bottom: 25px;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.users-table-container {
  overflow-x: auto;
  margin-bottom: 30px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.users-table th {
  background: #f8f9fa;
  padding: 15px 12px;
  text-align: left;
  font-weight: 600;
  color: #495057;
  border-bottom: 2px solid #e9ecef;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.users-table td {
  padding: 15px 12px;
  border-bottom: 1px solid #e9ecef;
  vertical-align: middle;
}

.users-table tr:hover {
  background: #f8f9fa;
}

.user-id {
  font-family: 'Courier New', monospace;
  color: #666;
  font-size: 12px;
  font-weight: 500;
}

.name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.name {
  font-weight: 500;
  color: #2c3e50;
}

.user-email {
  color: #666;
  font-size: 14px;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.role-badge.admin {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.role-badge.shopkeeper {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

.user-date {
  color: #666;
  font-size: 14px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.active {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

/* User Statistics */
.user-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.stat-label {
  color: #666;
  font-weight: 500;
  font-size: 14px;
}

.stat-value {
  color: #2c3e50;
  font-weight: 600;
  font-size: 16px;
}

.no-users {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.no-users p {
  font-size: 16px;
  margin: 0;
}

/* Responsive Design for User Management */
@media (max-width: 768px) {
  .admin-tabs {
    flex-direction: column;
  }
  
  .tab-btn {
    text-align: center;
    border-radius: 8px;
    margin-bottom: 5px;
  }
  
  .tab-btn.active {
    border-bottom: none;
    border-left: 4px solid #007bff;
  }
  
  .users-table-container {
    font-size: 14px;
  }
  
  .users-table th,
  .users-table td {
    padding: 10px 8px;
  }
  
  .user-stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .stat-item {
    padding: 8px 0;
  }
}

@media (max-width: 480px) {
  .users-table {
    font-size: 12px;
  }
  
  .users-table th,
  .users-table td {
    padding: 8px 6px;
  }
  
  .role-badge,
  .status-badge {
    font-size: 10px;
    padding: 2px 8px;
  }
}/* Ad
min Note Styles */
.admin-note {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 15px;
  margin: 10px 0;
}

.admin-note p {
  margin: 5px 0;
  color: #856404;
}

.admin-note strong {
  color: #856404;
}

.admin-note em {
  font-style: italic;
  color: #6c757d;
}/* 
Refresh button styles */
.refresh-btn {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  margin-right: 15px;
}

.refresh-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2980b9, #1f5f8b);
  transform: translateY(-1px);
}

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

/* Loading state for analytics cards */
.analytics-card.loading {
  opacity: 0.7;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.analytics-card.loading .card-number {
  color: #6c757d;
}

/* Better error message styling */
.error-message {
  background: linear-gradient(135deg, #fff3cd, #ffeaa7);
  border: 1px solid #ffc107;
  color: #856404;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 500;
}

/* Debug info (can be removed in production) */
.debug-info {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 0;
  font-family: monospace;
  font-size: 12px;
  color: #495057;
  max-height: 200px;
  overflow-y: auto;
}/* Enhanc
ed User Management Styles */

.user-contact {
  display: flex;
  align-items: center;
  gap: 6px;
}

.phone-contact,
.email-contact {
  display: flex;
  align-items: center;
  gap: 6px;
}

.contact-icon {
  font-size: 14px;
}

.method-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.method-badge.phone {
  background: #e8f5e8;
  color: #2d5a2d;
}

.method-badge.email {
  background: #e3f2fd;
  color: #1565c0;
}

.registration-method {
  text-align: center;
}

.user-contact span:last-child {
  font-family: monospace;
  font-size: 13px;
}

/* Mobile responsive for user table */
@media (max-width: 768px) {
  .users-table {
    font-size: 12px;
  }
  
  .user-contact {
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
  }
  
  .method-badge {
    font-size: 10px;
    padding: 2px 6px;
  }
  
  .contact-icon {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .users-table th:nth-child(1),
  .users-table td:nth-child(1) {
    display: none; /* Hide ID column on very small screens */
  }
  
  .users-table th:nth-child(4),
  .users-table td:nth-child(4) {
    display: none; /* Hide registration method column on very small screens */
  }
}/* Use
r Management Styles */

.status-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.status-badge.active {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.status-badge.inactive {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.verification-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  background: #e9ecef;
  color: #495057;
  border: 1px solid #dee2e6;
}

.user-actions {
  padding: 8px;
  text-align: center;
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.toggle-status-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 80px;
}

.toggle-status-btn.activate {
  background: #28a745;
  color: white;
}

.toggle-status-btn.activate:hover:not(:disabled) {
  background: #218838;
  transform: translateY(-1px);
}

.toggle-status-btn.deactivate {
  background: #dc3545;
  color: white;
}

.toggle-status-btn.deactivate:hover:not(:disabled) {
  background: #c82333;
  transform: translateY(-1px);
}

.toggle-status-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Mobile responsive for user actions */
@media (max-width: 768px) {
  .users-table th:last-child,
  .users-table td:last-child {
    min-width: 100px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
  
  .toggle-status-btn {
    font-size: 11px;
    padding: 4px 8px;
    min-width: 70px;
  }
  
  .status-badges {
    gap: 2px;
  }
  
  .verification-badge {
    font-size: 10px;
    padding: 1px 4px;
  }
}

@media (max-width: 480px) {
  .users-table-container {
    overflow-x: auto;
  }
  
  .users-table {
    min-width: 800px;
  }
  
  .toggle-status-btn {
    font-size: 10px;
    padding: 3px 6px;
    min-width: 60px;
  }
}/* A
ll Shops Management Section */
.all-shops-management-section,
.products-management-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.all-shops-management-section h2,
.products-management-section h2 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 1.5rem;
  font-weight: 600;
}

/* Subscription Plans Manager */
.plans-management-section {
	background: white;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	margin-top: 20px;
}
.plans-management-section h2 { color: #2c3e50; margin-bottom: 20px; font-size: 1.5rem; font-weight: 600; }
.plan-form { background: #f8f9fa; padding: 16px; border-radius: 10px; border: 1px solid #e9ecef; margin-bottom: 16px; }
.plan-form .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-gap: 12px; gap: 12px; }
.plan-form label { display: block; font-size: 0.85rem; color: #6b7280; margin-bottom: 6px; }
.plan-form input, .plan-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: white; color: #111827; }
.plan-form .form-actions { margin-top: 12px; display: flex; gap: 10px; }

.plans-table-container { overflow-x: auto; border-radius: 8px; border: 1px solid #e1e8ed; }
.plans-table { width: 100%; border-collapse: collapse; background: white; }
.plans-table th { background: #f8f9fa; padding: 12px 16px; text-align: left; font-weight: 600; color: #2c3e50; border-bottom: 2px solid #e1e8ed; font-size: 0.9rem; }
.plans-table td { padding: 12px 16px; border-bottom: 1px solid #f1f3f4; vertical-align: middle; }
.plans-table tr:hover { background: #f8f9fa; }
.plans-table .actions { display: flex; gap: 8px; }

/* Table Styles */
.shops-table-container,
.products-table-container {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #e1e8ed;
}

.shops-table,
.products-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.shops-table th,
.products-table th {
  background: #f8f9fa;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: #2c3e50;
  border-bottom: 2px solid #e1e8ed;
  font-size: 0.9rem;
}

.shops-table td,
.products-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f3f4;
  vertical-align: middle;
}

.shops-table tr:hover,
.products-table tr:hover {
  background-color: #f8f9fa;
}

/* Table Cell Styles */
.shop-id,
.product-id {
  font-family: 'Courier New', monospace;
  color: #666;
  font-size: 0.85rem;
}

.name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-logo,
.table-image {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #e1e8ed;
}

.name {
  font-weight: 500;
  color: #2c3e50;
}

.category-badge {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}

.status-badge.live,
.status-badge.approved {
  background: #d4edda;
  color: #155724;
}

.status-badge.pending,
.status-badge.pending_approval {
  background: #fff3cd;
  color: #856404;
}

.status-badge.rejected,
.status-badge.inactive {
  background: #f8d7da;
  color: #721c24;
}

.active-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.active-badge.active {
  background: #d4edda;
  color: #155724;
}

.active-badge.inactive {
  background: #f8d7da;
  color: #721c24;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.toggle-status-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 70px;
}

.toggle-status-btn.activate {
  background: #28a745;
  color: white;
}

.toggle-status-btn.activate:hover {
  background: #218838;
  transform: translateY(-1px);
}

.toggle-status-btn.deactivate {
  background: #dc3545;
  color: white;
}

.toggle-status-btn.deactivate:hover {
  background: #c82333;
  transform: translateY(-1px);
}

.toggle-status-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.details-btn {
  background: #007bff;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin:5px;
}

.details-btn:hover {
  background: #0056b3;
  transform: translateY(-1px);
}

/* Empty States */
.no-shops,
.no-products {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.no-shops p,
.no-products p {
  font-size: 1.1rem;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .shops-table-container,
  .products-table-container {
    font-size: 0.85rem;
  }
  
  .shops-table th,
  .products-table th,
  .shops-table td,
  .products-table td {
    padding: 8px 12px;
  }
  
  .table-logo,
  .table-image {
    width: 32px;
    height: 32px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
  
  .toggle-status-btn,
  .details-btn {
    font-size: 0.75rem;
    padding: 4px 8px;
    min-width: 60px;
  }
}

@media (max-width: 480px) {
  .all-shops-management-section,
  .products-management-section {
    padding: 16px;
    margin-top: 15px;
  }
  
  .shops-table,
  .products-table {
    font-size: 0.8rem;
  }
  
  .name-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .table-logo,
  .table-image {
    width: 28px;
    height: 28px;
  }
}

/* Enhanced Tab Styles */
.admin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.tab-btn {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #495057;
}

.tab-btn:hover {
  background: #e9ecef;
  border-color: #dee2e6;
  transform: translateY(-1px);
}

.tab-btn.active {
  background: #007bff;
  border-color: #007bff;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

@media (max-width: 768px) {
  .admin-tabs {
    flex-direction: column;
    gap: 8px;
  }
  
  .tab-btn {
    text-align: center;
    padding: 10px 16px;
    font-size: 0.85rem;
  }
}/* Fallb
ack Mode Notification */
.fallback-notification {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #fff3cd, #ffeaa7);
  border: 1px solid #ffc107;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
}

.notification-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.notification-content {
  font-size: 0.9rem;
  color: #856404;
  line-height: 1.4;
}

.notification-content strong {
  color: #533f03;
  font-weight: 600;
}

/* Hide notification in production when endpoints work */
.fallback-notification.hidden {
  display: none;
}

@media (max-width: 768px) {
  .fallback-notification {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    padding: 10px 12px;
  }
  
  .notification-content {
    font-size: 0.85rem;
  }
}/*
 Shop Status Indicator */
.shop-status-info {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  margin: 10px 0;
}

.status-indicator {
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 500;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.status-indicator.approved,
.status-indicator.live {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.status-indicator.rejected {
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.status-indicator.pending,
.status-indicator.pending_approval {
  background-color: #fef3c7;
  color: #d97706;
  border: 1px solid #fed7aa;
}

/* Modal Actions Improvements */
.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px;
  border-top: 1px solid #e5e7eb;
  background-color: #f9fafb;
}

.modal-actions .approve-btn,
.modal-actions .reject-btn {
  min-width: 120px;
}

.modal-actions .cancel-btn {
  background-color: #6b7280;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.modal-actions .cancel-btn:hover {
  background-color: #4b5563;
}/* Produc
t Cards with Carousel */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-top: 15px;
}

.product-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid #e5e7eb;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.product-image-section {
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
}

.admin-product-carousel {
  max-width: 200px;
}

.product-info {
  text-align: center;
}

.product-info h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
}

.product-price {
  font-size: 18px;
  font-weight: 700;
  color: #059669;
  margin: 4px 0;
}

.product-category {
  font-size: 12px;
  color: #6b7280;
  background-color: #f3f4f6;
  padding: 4px 8px;
  border-radius: 12px;
  display: inline-block;
  margin: 4px 0;
  text-transform: uppercase;
  font-weight: 500;
}

.product-description {
  font-size: 13px;
  color: #4b5563;
  margin: 8px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-stock {
  font-size: 12px;
  font-weight: 500;
  margin: 8px 0 4px 0;
  padding: 4px 8px;
  border-radius: 8px;
  display: inline-block;
}

.product-stock:contains("In Stock") {
  background-color: #dcfce7;
  color: #166534;
}

.product-stock:contains("Out of Stock") {
  background-color: #fef2f2;
  color: #dc2626;
}

.image-count {
  font-size: 11px;
  color: #6b7280;
  margin: 4px 0 0 0;
  font-style: italic;
}

/* No Products State */
.no-products {
  text-align: center;
  padding: 40px 20px;
  color: #6b7280;
}

.no-products p {
  margin: 8px 0;
}

.no-products p:first-child {
  font-size: 16px;
  font-weight: 500;
  color: #4b5563;
}

.no-products em {
  font-size: 14px;
  color: #9ca3af;
}

/* Responsive Product Grid */
@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
  
  .admin-product-carousel {
    max-width: 180px;
  }
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .admin-product-carousel {
    max-width: 160px;
  }
  
  .product-card {
    padding: 12px;
  }
}

/* Shop Logo in Modal */
.logo-section {
  margin: 20px 0;
  text-align: center;
}

.logo-section strong {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
  color: #374151;
}

.modal-logo {
  max-width: 200px;
  max-height: 200px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Modal Layout Improvements */
.modal-content {
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal-header {
  flex-shrink: 0;
  padding: 20px 20px 0 20px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 20px;
}

.modal-body {
  flex: 1 1;
  padding: 0 20px;
  overflow-y: auto;
}

.shop-details {
  margin-bottom: 20px;
}

.products-section {
  margin-top: 20px;
  border-top: 1px solid #e5e7eb;
  padding-top: 20px;
}

/* Responsive Modal */
@media (max-width: 768px) {
  .modal-logo {
    max-width: 180px;
    max-height: 180px;
  }
  
  .modal-content {
    margin: 10px;
    max-height: 95vh;
  }
  
  .modal-header,
  .modal-body {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .modal-logo {
    max-width: 150px;
    max-height: 150px;
  }
}
/* ==
======================================
   Enhanced Shop Approval Modal Styles
   ======================================== */

/* Modal Title Section */
.modal-title-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.modal-title-section h2 {
  margin: 0;
  color: #1e40af;
  font-size: 1.5rem;
}

.modal-title-section .shop-name {
  margin: 0;
  color: #64748b;
  font-size: 1.1rem;
  font-weight: 500;
}

/* Shop Review Layout */
.shop-review-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
  gap: 30px;
  padding: 20px;
}

/* Shop Info Column */
.shop-info-column {
  background: #f8fafc;
  border-radius: 12px;
  padding: 20px;
}

.shop-detail-section h3 {
  color: #1e40af;
  margin-bottom: 20px;
  font-size: 1.2rem;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 10px;
}

/* Logo Section - Prominent */
.logo-section.prominent {
  text-align: center;
  margin-bottom: 25px;
  padding: 20px;
  background: white;
  border-radius: 10px;
  border: 2px solid #10b981;
}

.logo-section.missing {
  text-align: center;
  margin-bottom: 25px;
  padding: 20px;
  background: #fef3c7;
  border-radius: 10px;
  border: 2px solid #f59e0b;
}

.logo-container {
  margin-bottom: 10px;
}

.shop-logo-large {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  border: 3px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.logo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  font-size: 3rem;
  opacity: 0.9;
}

.logo-status {
  font-weight: 600;
  margin: 0;
}

.logo-status.warning {
  color: #f59e0b;
}

/* Enhanced Detail Grid */
.detail-grid.enhanced {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
  gap: 15px;
}

.detail-row:last-child {
  grid-template-columns: 1fr 1fr;
}

.detail-item {
  background: white;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #3b82f6;
}

.detail-item strong {
  display: block;
  color: #374151;
  font-size: 0.9rem;
  margin-bottom: 5px;
}

.detail-value {
  color: #1f2937;
  font-weight: 500;
}

.category-badge {
  background: #dbeafe;
  color: #1e40af;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* Description Section */
.description-section.enhanced {
  background: white;
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
}

.description-section.enhanced strong {
  color: #374151;
  display: block;
  margin-bottom: 10px;
}

.description-content {
  background: #f9fafb;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #6366f1;
}

/* Products Column */
.products-column {
  background: #f8fafc;
  border-radius: 12px;
  padding: 20px;
}

.products-section.enhanced h3 {
  color: #1e40af;
  margin-bottom: 20px;
  font-size: 1.2rem;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 10px;
}

.products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.products-stats {
  display: flex;
  gap: 10px;
  align-items: center;
}

.product-count {
  background: #dbeafe;
  color: #1e40af;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
}

.warning-badge {
  background: #fef3c7;
  color: #f59e0b;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Enhanced Products Grid */
.products-grid.enhanced {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 10px;
}

.product-card.enhanced {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.product-card.enhanced:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.product-image-container {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-count-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
}

.product-image-placeholder {
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  color: #9ca3af;
}

.placeholder-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.product-info {
  padding: 15px;
}

.product-name {
  margin: 0 0 8px 0;
  color: #1f2937;
  font-size: 1.1rem;
  font-weight: 600;
}

.product-price {
  color: #059669;
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0 0 8px 0;
}

.product-category {
  color: #6b7280;
  font-size: 0.9rem;
  margin: 0 0 10px 0;
}

.product-description {
  color: #4b5563;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0 0 12px 0;
}

.product-status {
  margin-top: 10px;
}

.stock-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.stock-badge.in-stock {
  background: #d1fae5;
  color: #065f46;
}

.stock-badge.out-of-stock {
  background: #fee2e2;
  color: #991b1b;
}

/* No Products Section */
.no-products.enhanced {
  text-align: center;
  padding: 40px 20px;
  background: white;
  border-radius: 12px;
  border: 2px dashed #d1d5db;
}

.no-products-icon {
  font-size: 3rem;
  margin-bottom: 15px;
  opacity: 0.5;
}

.no-products.enhanced h4 {
  color: #374151;
  margin: 0 0 10px 0;
}

.no-products.enhanced p {
  color: #6b7280;
  margin: 0 0 20px 0;
}

.approval-note {
  background: #fef3c7;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #f59e0b;
}

.approval-note p {
  margin: 0;
  color: #92400e;
  font-size: 0.9rem;
}

/* Enhanced Modal Actions */
.modal-actions.enhanced {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 30px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  gap: 30px;
}

.approval-summary {
  flex: 1 1;
}

.checklist h4 {
  color: #374151;
  margin: 0 0 15px 0;
  font-size: 1.1rem;
}

.checklist-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
}

.checklist-item {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
}

.checklist-item.complete {
  background: #d1fae5;
  color: #065f46;
}

.checklist-item.incomplete {
  background: #fee2e2;
  color: #991b1b;
}

.action-buttons {
  display: flex;
  gap: 15px;
  align-items: center;
}

.approve-btn.enhanced,
.reject-btn.enhanced {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.approve-btn.enhanced {
  background: #10b981;
  color: white;
}

.approve-btn.enhanced:hover {
  background: #059669;
  transform: translateY(-1px);
}

.reject-btn.enhanced {
  background: #ef4444;
  color: white;
}

.reject-btn.enhanced:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

/* Responsive Design */
@media (max-width: 1200px) {
  .modal-content.large-modal {
    max-width: 95%;
    width: 95%;
  }
  
  .shop-review-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .checklist-items {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .modal-content.large-modal {
    max-width: 98%;
    width: 98%;
    max-height: 98vh;
    margin: 1vh auto;
  }
  
  .shop-review-layout {
    padding: 15px;
    gap: 15px;
  }
  
  .modal-actions.enhanced {
    flex-direction: column;
    gap: 20px;
  }
  
  .action-buttons {
    width: 100%;
    justify-content: center;
  }
  
  .detail-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .products-grid.enhanced {
    grid-template-columns: 1fr;
  }
}

/* Shop Activation Modal Styles */
.activation-shop-info {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  border-left: 4px solid #007bff;
}

.activation-shop-info h3 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 1.2rem;
}

.activation-shop-info p {
  margin: 4px 0;
  font-size: 0.9rem;
  color: #666;
}

.plan-selection {
  margin-bottom: 20px;
}

.plan-selection label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #2c3e50;
}

.plan-select {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #e1e8ed;
  border-radius: 6px;
  font-size: 0.9rem;
  background: white;
  transition: border-color 0.2s;
}

.plan-select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.selected-plan-details {
  margin-bottom: 20px;
}

.plan-preview {
  background: #e8f4f8;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #17a2b8;
}

.plan-preview h4 {
  margin: 0 0 12px 0;
  color: #2c3e50;
  font-size: 1rem;
}

.plan-preview ul {
  margin: 0;
  padding-left: 20px;
}

.plan-preview li {
  margin: 6px 0;
  font-size: 0.9rem;
  color: #495057;
}

.activation-warning {
  background: #fff3cd;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #ffc107;
  margin-bottom: 20px;
}

.activation-warning p {
  margin: 0 0 8px 0;
  font-weight: 600;
  color: #856404;
}

.activation-warning ul {
  margin: 0;
  padding-left: 20px;
}

.activation-warning li {
  margin: 4px 0;
  font-size: 0.85rem;
  color: #856404;
}

/* Subscription Status Styles */
.shop-subscription-status {
  min-width: 150px;
}

.subscription-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.subscription-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.subscription-badge.active {
  background: #d1fae5;
  color: #065f46;
}

.subscription-badge.inactive {
  background: #fee2e2;
  color: #991b1b;
}

.subscription-expiry {
  font-size: 0.75rem;
  color: #6b7280;
  text-align: center;
}

.subscription-slots {
  font-size: 0.75rem;
  color: #6b7280;
  text-align: center;
  font-weight: 500;
}

/* Enhanced Payment Management Styles */
.payments-management-section {
  width: 100%;
  max-width: none;
  padding: 0;
}

/* Enhanced Payment Header */
.payments-header-enhanced {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 32px;
  color: white;
  position: relative;
  overflow: hidden;
}

/* .payments-header-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cdefs%3E%3Cpattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"%3E%3Cpath d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/%3E%3C/pattern%3E%3C/defs%3E%3Crect width="100%25" height="100%25" fill="url(%23grid)"/%3E%3C/svg%3E') repeat;
  pointer-events: none;
} */
.payments-header-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cdefs%3E%3Cpattern id=%27grid%27 width=%2710%27 height=%2710%27 patternUnits=%27userSpaceOnUse%27%3E%3Cpath d=%27M 10 0 L 0 0 0 10%27 fill=%27none%27 stroke=%27rgba%28255,255,255,0.1%29%27 stroke-width=%270.5%27/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%27100%25%27 height=%27100%25%27 fill=%27url%28%23grid%29%27/%3E%3C/svg%3E") repeat;
  pointer-events: none;
}


.payments-header-content {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.header-title-section {
  flex: 1 1;
}

.payments-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  color: white;
}

.title-icon {
  font-size: 2.5rem;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
}

.total-badge {
  background: rgba(255, 255, 255, 0.25);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.payments-subtitle {
  font-size: 1.2rem;
  margin: 0;
  opacity: 0.9;
  font-weight: 400;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.refresh-btn-modern {
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.refresh-btn-modern:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.refresh-btn-modern:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

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

/* Enhanced Payment Summary Cards */
.payment-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

.summary-card-modern {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.summary-card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--card-accent), var(--card-accent-dark));
}

.summary-card-modern.total {
  --card-accent: #3b82f6;
  --card-accent-dark: #1d4ed8;
}

.summary-card-modern.pending {
  --card-accent: #f59e0b;
  --card-accent-dark: #d97706;
}

.summary-card-modern.paid {
  --card-accent: #10b981;
  --card-accent-dark: #059669;
}

.summary-card-modern.failed {
  --card-accent: #ef4444;
  --card-accent-dark: #dc2626;
}

.summary-card-modern.cancelled {
  --card-accent: #6b7280;
  --card-accent-dark: #4b5563;
}

.summary-card-modern:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.card-icon-modern {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--card-accent), var(--card-accent-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.card-trend {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
}

.card-trend.positive {
  background: #dcfce7;
  color: #166534;
}

.card-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.card-indicator.pending {
  background: #f59e0b;
}

.card-indicator.success {
  background: #10b981;
}

.card-indicator.failed {
  background: #ef4444;
}

.card-indicator.cancelled {
  background: #6b7280;
}

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

.card-body {
  position: relative;
  z-index: 1;
}

.card-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6b7280;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: #1f2937;
  margin: 0 0 4px 0;
  line-height: 1;
}

.card-subtitle {
  font-size: 0.875rem;
  color: #9ca3af;
  margin: 0;
  font-weight: 500;
}

/* Enhanced Payment Controls */
.payment-controls-panel {
  background: white;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.04);
}

.controls-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin: 0;
}

.select-wrapper {
  position: relative;
}

.status-filter-modern {
  appearance: none;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 40px 10px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 160px;
}

.status-filter-modern:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #6b7280;
  font-size: 0.8rem;
}

.controls-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.results-count {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

/* Enhanced Empty State */
.no-payments-modern {
  background: white;
  border-radius: 16px;
  padding: 64px 32px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
}

.empty-state {
  max-width: 400px;
  margin: 0 auto;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 16px;
  opacity: 0.6;
}

.empty-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.empty-description {
  font-size: 1rem;
  color: #6b7280;
  margin: 0 0 24px 0;
  line-height: 1.6;
}

.show-all-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.show-all-btn:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

/* Enhanced Payments Table */
.payments-table-modern {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 24px;
}

.table-wrapper {
  overflow-x: auto;
}

.payments-table-enhanced {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.payments-table-enhanced th {
  background: #f8fafc;
  padding: 16px 20px;
  text-align: left;
  font-weight: 600;
  color: #374151;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #e5e7eb;
}

.payments-table-enhanced td {
  padding: 20px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

.table-row-modern:hover {
  background: #f9fafb;
}

.table-row-modern:last-child td {
  border-bottom: none;
}

/* Table Cell Styles */
.payment-id-cell {
  min-width: 120px;
}

.id-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.payment-id-badge {
  background: #f3f4f6;
  color: #374151;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Courier New', monospace;
}

.payment-method {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
}

.payment-shop-cell {
  min-width: 200px;
}

.shop-info-modern {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shop-name-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shop-name-modern {
  font-weight: 600;
  color: #1f2937;
}

.shop-category-tag {
  background: #ede9fe;
  color: #7c3aed;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  width: fit-content;
}

.payment-order-cell {
  min-width: 180px;
}

.order-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-id-code {
  background: #f1f5f9;
  color: #475569;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: 'Courier New', monospace;
  border: 1px solid #e2e8f0;
}

.order-type {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
  text-transform: uppercase;
}

.order-type.subscription {
  background: #dbeafe;
  color: #1d4ed8;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
}

.order-type.standard {
  color: #6b7280;
}

.payment-amount-cell {
  min-width: 120px;
}

.amount-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.amount-main {
  font-weight: 700;
  color: #1f2937;
  font-size: 1rem;
}

.amount-currency {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
}

.payment-status-cell {
  min-width: 120px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  width: fit-content;
}

.status-pill.created {
  background: #f3f4f6;
  color: #374151;
}

.status-pill.pending {
  background: #fef3c7;
  color: #92400e;
}

.status-pill.paid {
  background: #d1fae5;
  color: #065f46;
}

.status-pill.failed {
  background: #fee2e2;
  color: #991b1b;
}

.status-pill.cancelled {
  background: #f3f4f6;
  color: #374151;
}

.status-indicator {
  width: auto;
  height: 6px;
  border-radius: 10%;
  background: currentColor;
  padding:20px;
}

.status-text {
  font-size: 0.8rem;
}

.payment-date-cell {
  min-width: 140px;
}

.date-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.date-main {
  font-weight: 600;
  color: #1f2937;
}

.date-time {
  font-size: 0.75rem;
  color: #6b7280;
}

.payment-owner-cell {
  min-width: 200px;
}

.owner-info-modern {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.owner-email-modern {
  font-weight: 500;
  color: #1f2937;
  font-size: 0.8rem;
}

.owner-phone-modern {
  font-size: 0.75rem;
  color: #6b7280;
}

.payment-actions-cell {
  min-width: 160px;
}

.action-buttons-modern {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.refetch-btn-modern {
  background: #3b82f6;
  color: white;
}

.refetch-btn-modern:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

.refetch-btn-modern.loading {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
}

.copy-btn-modern {
  background: #6b7280;
  color: white;
}

.copy-btn-modern:hover {
  background: #4b5563;
  transform: translateY(-1px);
}

.btn-text {
  font-size: 0.8rem;
}

/* Enhanced Pagination */
.pagination-wrapper-modern {
  background: white;
  border-radius: 12px;
  padding: 16px 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.04);
}

/* Enhanced Info Panels */
.payment-info-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-top: 32px;
}

.info-panel {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
}

.panel-header {
  background: #f8fafc;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.panel-icon {
  font-size: 1.3rem;
}

.panel-content {
  padding: 24px;
}

.status-guide-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.created {
  background: #374151;
}

.status-dot.pending {
  background: #f59e0b;
}

.status-dot.paid {
  background: #10b981;
}

.status-dot.failed {
  background: #ef4444;
}

.status-dot.cancelled {
  background: #6b7280;
}

.status-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.status-name {
  font-weight: 600;
  color: #1f2937;
  font-size: 0.9rem;
}

.status-desc {
  font-size: 0.8rem;
  color: #6b7280;
}

.sync-scenarios {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.scenario {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
}

.scenario-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.scenario-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scenario-text strong {
  font-weight: 600;
  color: #1f2937;
  font-size: 0.9rem;
}

.scenario-text span {
  font-size: 0.8rem;
  color: #6b7280;
}

/* Copy Toast */
.copy-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #1f2937;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 10000;
  animation: slideInRight 0.3s ease, fadeOut 0.3s ease 1.7s;
}

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

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

/* Responsive Design for Payments */
@media (max-width: 1200px) {
  .payments-header-enhanced {
    padding: 24px;
  }
  
  .payments-title {
    font-size: 2rem;
  }
  
  .payment-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }
  
  .payment-info-panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .admin-dashboard {
    padding: 70px 16px 16px 16px; /* Adjust for mobile header height */
  }
  
  .payments-header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .payments-title {
    font-size: 1.8rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .payment-controls-panel {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .controls-right {
    width: 100%;
    justify-content: flex-start;
  }
  
  .payments-table-enhanced {
    font-size: 0.8rem;
  }
  
  .payments-table-enhanced th,
  .payments-table-enhanced td {
    padding: 12px 8px;
  }
  
  .action-buttons-modern {
    flex-direction: column;
    gap: 4px;
  }
  
  .action-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .admin-dashboard {
    padding: 65px 12px 12px 12px; /* Adjust for smaller mobile header height */
  }
  
  .payment-summary-grid {
    grid-template-columns: 1fr;
  }
  
  .table-wrapper {
    overflow-x: scroll;
  }
  
  .empty-state {
    padding: 32px 16px;
  }
  
  .empty-icon {
    font-size: 3rem;
  }
  
  .empty-title {
    font-size: 1.3rem;
  }
}

/* Invoice Actions Styles */
.invoice-actions {
  text-align: center;
  vertical-align: middle;
  padding: 8px;
}

.invoice-btn {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
  min-width: 130px;
  justify-content: center;
}

.invoice-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #45a049, #3d8b40);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

.invoice-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
}

.invoice-btn:disabled {
  background: #cccccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.invoice-btn .spinner {
  width: 12px;
  height: 12px;
  border: 2px solid #ffffff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Responsive design for invoice column */
@media (max-width: 768px) {
  .invoice-actions {
    padding: 4px;
  }
  
  .invoice-btn {
    padding: 6px 8px;
    font-size: 11px;
    min-width: 100px;
  }
  
  .products-table th:nth-child(12), /* Invoice column */
  .products-table td:nth-child(12) {
    min-width: 120px;
  }
  
  .products-table th:nth-child(4), /* Phone column */
  .products-table td:nth-child(4) {
    min-width: 110px;
  }
}

/* Error handling styles */
.invoice-error {
  color: #f44336;
  font-size: 11px;
  margin-top: 2px;
  text-align: center;
}

.invoice-success {
  color: #4CAF50;
  font-size: 11px;
  margin-top: 2px;
  text-align: center;
}

/* Phone number styling */
.phone-number {
  display: inline-flex;
  align-items: center;
  font-family: monospace;
  font-weight: 500;
  color: #2c3e50;
  background: #f8f9fa;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  border: 1px solid #e9ecef;
}

.phone-number:before {
  content: '📞';
  margin-right: 4px;
  font-size: 0.8rem;
}
.category-list {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.category-list-empty {
  text-align: center;
  padding: 4rem 2rem;
  color: #6b7280;
}

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

.category-list-empty h3 {
  color: #374151;
  margin-bottom: 0.5rem;
}

.category-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.stat-card {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  flex: 1 1;
  min-width: 180px;
  max-width: 250px;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #3498db;
  margin-bottom: 0.5rem;
}

.stat-label {
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.category-table-container {
  overflow-x: auto;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: white;
}

.category-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 0;
  min-width: 800px;
}

.category-table th {
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
  padding: 0.75rem;
  text-align: left;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

.category-table td {
  padding: 0.75rem;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.category-table tr:hover {
  background: #f8fafc;
}

.category-table tr.inactive {
  opacity: 0.7;
}

.category-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.category-name .name {
  font-weight: 500;
  color: #1e293b;
}

.inactive-badge {
  background: #fef3c7;
  color: #92400e;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.category-description {
  max-width: 200px;
  color: #64748b;
  line-height: 1.4;
}

.category-description em {
  color: #94a3b8;
}

.category-slug {
  background: #f1f5f9;
  color: #475569;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.8rem;
}

.status-badge {
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-badge.active {
  background: #d1fae5;
  color: #065f46;
}

.status-badge.inactive {
  background: #fee2e2;
  color: #991b1b;
}

.shop-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.shop-count .count {
  font-size: 1.25rem;
  font-weight: 600;
  color: #3498db;
}

.shop-count .label {
  font-size: 0.75rem;
  color: #64748b;
}

.created-date {
  color: #64748b;
  white-space: nowrap;
}

.category-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-sm {
  padding: 0.5rem;
  font-size: 0.875rem;
  min-width: auto;
}

.btn-sm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.category-list-footer {
  padding: 1rem 1.5rem;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.help-text {
  color: #64748b;
  font-size: 0.875rem;
  margin: 0;
  line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .category-stats {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  
  .stat-card {
    padding: 1rem;
    max-width: none;
    flex: none;
  }
  
  .stat-number {
    font-size: 1.5rem;
  }
  
  .category-table {
    min-width: 600px;
  }
}

@media (max-width: 768px) {
  .category-stats {
    padding: 1rem;
  }
  
  .stat-card {
    padding: 1rem;
    min-width: auto;
  }
  
  .category-table-container {
    font-size: 0.8rem;
  }
  
  .category-table {
    min-width: 500px;
  }
  
  .category-table th,
  .category-table td {
    padding: 0.5rem;
  }
  
  .category-description {
    max-width: 120px;
  }
  
  .category-actions {
    flex-direction: column;
    gap: 0.25rem;
  }
  
  .btn-sm {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 640px) {
  .category-table {
    font-size: 0.75rem;
  }
  
  .category-table th,
  .category-table td {
    padding: 0.5rem 0.25rem;
  }
  
  .category-name .name {
    font-size: 0.875rem;
  }
  
  .category-description {
        width: 100%;
        max-width: none;
        font-size: medium;
        word-break: normal;
        white-space: normal;
  }
}
.category-form-container {
  padding: 2rem;
  max-width: 600px;
  margin: 0 auto;
}

.form-header {
  margin-bottom: 2rem;
  text-align: center;
}

.form-header h2 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
  font-size: 1.75rem;
  font-weight: 600;
}

.form-header p {
  color: #7f8c8d;
  font-size: 1rem;
  margin: 0;
}

.category-form {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  background: white;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-input.error,
.form-textarea.error {
  border-color: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.form-error {
  color: #e74c3c;
  font-size: 0.8rem;
  margin-top: 0.25rem;
  font-weight: 500;
}

.form-help {
  color: #6b7280;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

.form-help code {
  background: #f3f4f6;
  color: #374151;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.checkbox-group {
  display: flex;
  align-items: center;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-weight: 500;
  color: #374151;
}

.form-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-checkbox:checked {
  background-color: #3498db;
  border-color: #3498db;
}

.checkbox-text {
  -webkit-user-select: none;
          user-select: none;
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.category-info {
  background: #f8fafc;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
}

.category-info h3 {
  color: #374151;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.info-item label {
  font-weight: 600;
  color: #6b7280;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.info-item span,
.info-item code {
  color: #374151;
  font-size: 0.875rem;
}

.info-item code {
  background: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  border: 1px solid #d1d5db;
  display: inline-block;
}

/* Button Styles */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

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

.btn-primary {
  background-color: #3498db;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #2980b9;
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: #95a5a6;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #7f8c8d;
}

.btn-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); }
}

/* Responsive Design */
@media (max-width: 768px) {
  .category-form-container {
    padding: 1rem;
  }
  
  .category-form {
    padding: 1.5rem;
  }
  
  .form-header h2 {
    font-size: 1.5rem;
  }
  
  .form-actions {
    flex-direction: column-reverse;
  }
  
  .btn {
    justify-content: center;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .form-input,
  .form-textarea {
    padding: 0.625rem 0.875rem;
    font-size: 0.8rem;
  }
  
  .btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.8rem;
  }
}
.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: 1rem;
}

.modal-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 0;
  margin-bottom: 1rem;
}

.modal-header h3 {
  color: #1f2937;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6b7280;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: #f3f4f6;
  color: #374151;
}

.modal-body {
  padding: 0 1.5rem 1rem;
  text-align: center;
}

.warning-icon,
.delete-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.warning-icon {
  color: #f59e0b;
}

.delete-icon {
  color: #ef4444;
}

.modal-body h4 {
  color: #1f2937;
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.modal-body p {
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.suggestion-box,
.warning-box {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  text-align: left;
}

.suggestion-box {
  border-left: 4px solid #3b82f6;
}

.warning-box {
  border-left: 4px solid #ef4444;
  background: #fef2f2;
  border-color: #fecaca;
}

.suggestion-box h5,
.warning-box h5 {
  color: #374151;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.suggestion-box ul {
  margin: 0;
  padding-left: 1.25rem;
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.5;
}

.suggestion-box li {
  margin-bottom: 0.5rem;
}

.suggestion-box strong {
  color: #374151;
}

.category-details {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  margin: 1.5rem 0;
  text-align: left;
}

.category-details h5 {
  color: #374151;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.detail-item label {
  font-weight: 600;
  color: #6b7280;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-item span,
.detail-item code {
  color: #374151;
  font-size: 0.8rem;
}

.detail-item code {
  background: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  border: 1px solid #d1d5db;
  display: inline-block;
}

.status-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-block;
}

.status-badge.active {
  background: #d1fae5;
  color: #065f46;
}

.status-badge.inactive {
  background: #fee2e2;
  color: #991b1b;
}

.shop-count {
  font-weight: 600;
  color: #3b82f6;
}

.modal-footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

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

.btn-secondary {
  background-color: #6b7280;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #4b5563;
}

.btn-danger {
  background-color: #ef4444;
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background-color: #dc2626;
  transform: translateY(-1px);
}

.btn-icon {
  font-size: 1rem;
}

/* Responsive Design */
@media (max-width: 640px) {
  .modal-overlay {
    padding: 0.5rem;
  }
  
  .modal-content {
    max-height: 95vh;
  }
  
  .modal-header {
    padding: 1rem 1rem 0;
  }
  
  .modal-body {
    padding: 0 1rem 0.5rem;
  }
  
  .modal-footer {
    padding: 0.75rem 1rem 1rem;
    flex-direction: column-reverse;
  }
  
  .btn {
    justify-content: center;
  }
  
  .details-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .suggestion-box,
  .warning-box,
  .category-details {
    padding: 0.75rem;
  }
}

@media (max-width: 480px) {
  .modal-header h3 {
    font-size: 1.125rem;
  }
  
  .modal-body h4 {
    font-size: 1rem;
  }
  
  .warning-icon,
  .delete-icon {
    font-size: 2.5rem;
  }
  
  .btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.8rem;
  }
}
.admin-category-management {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
  background: #f8fafc;
  position: relative;
  z-index: 1;
}

.admin-category-management * {
  box-sizing: border-box;
}

.page-header {
  margin-bottom: 2rem;
}

.page-header h1 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
  font-size: 2rem;
  font-weight: 600;
}

.page-header p {
  color: #7f8c8d;
  font-size: 1.1rem;
  margin: 0;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

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

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

.alert {
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
}

.alert-error {
  background-color: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.alert-success {
  background-color: #d1fae5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

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

.category-management-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-top: 1rem;
  clear: both;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.category-actions {
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

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

.btn-primary {
  background-color: #3498db;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #2980b9;
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: #95a5a6;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #7f8c8d;
}

.btn-danger {
  background-color: #e74c3c;
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background-color: #c0392b;
}

.btn-icon {
  font-size: 1rem;
}

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

/* Responsive Design */
@media (max-width: 768px) {
  .admin-category-management {
    padding: 1rem;
  }
  
  .page-header h1 {
    font-size: 1.5rem;
  }
  
  .page-header p {
    font-size: 1rem;
  }
  
  .category-actions {
    padding: 1rem;
  }
  
  .btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.8rem;
  }
}
.flexible-payment {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.payment-error {
  background: #fee;
  border: 1px solid #fcc;
  color: #c33;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.payment-calculator h3 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

.payment-calculator p {
  color: #7f8c8d;
  margin-bottom: 2rem;
}

.amount-selector {
  margin-bottom: 2rem;
}

.amount-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.amount-btn {
  width: 50px;
  height: 50px;
  border: 2px solid #3498db;
  background: white;
  color: #3498db;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.amount-btn:hover:not(:disabled) {
  background: #3498db;
  color: white;
  transform: scale(1.1);
}

.amount-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.amount-display {
  text-align: center;
  min-width: 150px;
}

.amount-value {
  font-size: 2.5rem;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.amount-label {
  color: #7f8c8d;
  font-size: 0.9rem;
}

.amount-input-container {
  text-align: center;
}

.amount-input-container label {
  display: block;
  color: #7f8c8d;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.amount-input {
  width: 200px;
  padding: 0.75rem;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  font-size: 1rem;
  text-align: center;
  transition: border-color 0.3s ease;
}

.amount-input:focus {
  outline: none;
  border-color: #3498db;
}

.calculation-display {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.calc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e1e8ed;
}

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

.calc-item.total {
  border-top: 2px solid #3498db;
  margin-top: 0.5rem;
  padding-top: 1rem;
  font-weight: bold;
}

.calc-label {
  color: #7f8c8d;
}

.calc-value {
  color: #2c3e50;
  font-weight: 500;
}

.calc-value.highlight {
  color: #3498db;
  font-weight: bold;
}

.pricing-info {
  background: #e8f4fd;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.pricing-rule {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: #2c3e50;
  font-size: 0.9rem;
}

.pricing-rule:last-child {
  margin-bottom: 0;
}

.rule-icon {
  font-size: 1rem;
}

.pay-now-btn {
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.pay-now-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2980b9, #1f5f8b);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3);
}

.pay-now-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

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

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

.payment-security {
  text-align: center;
}

.security-badges {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.badge {
  background: #e8f4fd;
  color: #3498db;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.security-text {
  color: #7f8c8d;
  font-size: 0.8rem;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .flexible-payment {
    padding: 1.5rem;
    margin: 1rem;
  }
  
  .amount-controls {
    gap: 1rem;
  }
  
  .amount-value {
    font-size: 2rem;
  }
  
  .amount-input {
    width: 150px;
  }
  
  .security-badges {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}
/* Payment Page Styles */
.payment-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-container {
  max-width: 600px;
  width: 100%;
}

.payment-header {
  text-align: center;
  margin-bottom: 30px;
  color: white;
}

.payment-header h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.shop-info {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 15px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.shop-info h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #ffd700;
}

.shop-info p {
  font-size: 1.1rem;
  opacity: 0.9;
  margin: 0;
}

.alert {
  padding: 15px 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.alert-error {
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  color: #ff6b6b;
}

.alert-success {
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: #4CAF50;
}

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

.payment-features {
  background: rgba(255, 255, 255, 0.1);
  padding: 25px;
  border-radius: 15px;
  margin-top: 30px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.payment-features h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #ffd700;
}

.payment-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.payment-features li {
  padding: 10px 0;
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.payment-features li:last-child {
  border-bottom: none;
}

.payment-footer {
  text-align: center;
  margin-top: 30px;
}

.back-link {
  background: transparent;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 12px 25px;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.back-link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* Loading and Error States */
.loading-container,
.error-container,
.success-container {
  text-align: center;
  padding: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
  margin: 0 auto 20px;
}

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

.success-icon {
  font-size: 4rem;
  margin-bottom: 20px;
}

.success-container h2,
.error-container h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.payment-details {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  margin: 20px 0;
  text-align: left;
}

.payment-details p {
  margin: 8px 0;
  font-size: 1rem;
}

.dashboard-btn,
.back-btn {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 25px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 20px;
}

.dashboard-btn:hover,
.back-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .payment-page {
    padding: 15px;
  }
  
  .payment-header h1 {
    font-size: 2rem;
  }
  
  .shop-info {
    padding: 15px;
  }
  
  .shop-info h2 {
    font-size: 1.5rem;
  }
  
  .payment-features {
    padding: 20px;
  }
  
  .payment-features li {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .payment-header h1 {
    font-size: 1.8rem;
  }
  
  .shop-info h2 {
    font-size: 1.3rem;
  }
  
  .shop-info p {
    font-size: 1rem;
  }
  
  .payment-features {
    padding: 15px;
  }
  
  .success-container,
  .error-container,
  .loading-container {
    padding: 30px 20px;
  }
}/* Curr
ent Status Styles */
.current-status {
  margin-bottom: 24px;
}

.status-card {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 20px;
}

.status-card h3 {
  color: #2c3e50;
  margin-bottom: 16px;
  text-align: center;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.status-item .label {
  color: #666;
  font-weight: 500;
}

.status-item .value {
  font-weight: 600;
  color: #2c3e50;
}

.status-item .value.live {
  color: #27ae60;
}

.status-item .value.pending {
  color: #f39c12;
}

.status-item .value.available {
  color: #27ae60;
}

.status-item .value.full {
  color: #e74c3c;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .status-grid {
    grid-template-columns: 1fr;
  }
  
  .status-item {
    padding: 12px;
  }
}
.subscription-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #f8f9fa;
  min-height: 100vh;
}

.subscription-header {
  text-align: center;
  margin-bottom: 30px;
}

.subscription-header h1 {
  color: #333;
  margin-bottom: 10px;
  font-size: 2.5rem;
}

.payment-instructions {
  color: #666;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Alert styles */
.alert {
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.alert-error {
  background: #fee;
  border: 1px solid #fcc;
  color: #c33;
}

.alert-success {
  background: #efe;
  border: 1px solid #cfc;
  color: #3c3;
}

.alert-icon {
  font-size: 18px;
}

.subscription-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 25px;
  gap: 25px;
  margin-bottom: 40px;
}

.plan-card {
  background: white;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}

.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.plan-card:hover .buy-now-btn:not(:disabled) {
  background: linear-gradient(135deg, #229954, #1e8449);
  box-shadow: 0 2px 8px rgba(39, 174, 96, 0.2);
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.plan-header h3 {
  margin: 0;
  color: #333;
  font-size: 1.5rem;
}

.plan-price {
  display: flex;
  align-items: baseline;
}

.currency {
  font-size: 1.2rem;
  color: #007bff;
  margin-right: 2px;
}

.amount {
  font-size: 2rem;
  font-weight: bold;
  color: #007bff;
}

.plan-features {
  flex-grow: 1;
  margin-bottom: 25px;
}

.feature {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 1rem;
  color: #555;
}

.feature-icon {
  font-size: 1.2rem;
  margin-right: 10px;
  width: 24px;
  text-align: center;
}

.buy-now-btn {
  background: linear-gradient(135deg, #27ae60, #229954);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}

.buy-now-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #229954, #1e8449);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.buy-now-btn:disabled {
  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.payment-icon {
  font-size: 18px;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
}

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

/* Payment section styles */
.payment-section {
  margin-top: 30px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.loading, .error {
  text-align: center;
  padding: 40px;
  font-size: 1.2rem;
}

.loading {
  color: #007bff;
}

.error {
  color: #dc3545;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 5px;
  margin: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .subscription-page {
    padding: 15px;
  }
  
  .subscription-header h1 {
    font-size: 2rem;
  }
  
  .subscription-plans {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .plan-card {
    padding: 20px;
  }
  
  .payment-section {
    padding: 16px;
  }
}
/* Paymen
t security section */
.payment-security {
  text-align: center;
  margin-top: 40px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.security-badges {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.badge {
  background: #f8f9fa;
  color: #495057;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid #e9ecef;
}

.security-text {
  color: #6c757d;
  font-size: 0.9rem;
  margin: 0;
  max-width: 400px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .security-badges {
    gap: 10px;
  }
  
  .badge {
    font-size: 0.8rem;
    padding: 5px 10px;
  }
}