/* UI Helpers - lightweight utility classes
   These utilities rely on existing CSS variables from style.css (e.g., --card-bg, --text-color, --primary-color, --secondary-color, --border-color, --filter-bg)
   They are designed to be non-invasive and theme-aware. */

/* Cards */
.u-card {
  background: var(--card-bg, #ffffff);
  border-radius: 12px;
  border: 1px solid var(--border-color, rgba(0,0,0,0.08));
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}

.u-shadow-sm {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

 .u-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.10);
}

/* Glass variant */
.u-card-glass {
  background: var(--card-glass-bg, rgba(255,255,255,0.6));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color, rgba(255,255,255,0.4));
}

/* Buttons */
.u-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 10px 16px;
  line-height: 1.1;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.05s ease;
}

.u-btn:active {
  transform: translateY(1px);
}

.u-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--primary-color, #667eea), var(--secondary-color, #764ba2));
  border-color: rgba(0,0,0,0);
}

.u-btn-primary:hover {
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.35);
}

.u-btn-secondary {
  color: var(--text-color, #222);
  background: var(--filter-bg, #f2f3f5);
  border-color: var(--border-color, rgba(0,0,0,0.08));
}

.u-btn-secondary:hover {
  background: var(--filter-hover-bg, #eceef1);
}

.u-btn-outline {
  color: var(--text-color, #222);
  background: transparent;
  border-color: var(--border-color, rgba(0,0,0,0.12));
}

.u-btn-sm {
  padding: 6px 10px;
  font-size: 0.9rem;
  border-radius: 8px;
}

.u-btn-lg {
  padding: 14px 18px;
  font-size: 1.05rem;
  border-radius: 12px;
}

/* Grid helpers */
.u-grid {
  display: grid;
  gap: 12px;
}

/* 3 responsive columns (auto-fit) with a sensible min width */
.u-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Spacing */
.u-mt-md { margin-top: 16px; }
.u-mb-md { margin-bottom: 16px; }

/* Safe defaults for dark mode support if variables are set */
@media (prefers-color-scheme: dark) {
  .u-btn-secondary {
    background: var(--filter-bg, #1f2227);
  }
  .u-btn-secondary:hover {
    background: var(--filter-hover-bg, #2a2e35);
  }
}

/* Accessibility and focus */
.u-focus-ring {
  box-shadow: 0 0 0 3px rgba(102,126,234,0.35);
}

.u-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(102,126,234,0.35);
}

/* Active state for filter buttons when used with u-btn */
.filter-btn.u-btn.active {
  color: #fff;
  background: linear-gradient(135deg, var(--primary-color, #667eea), var(--secondary-color, #764ba2));
  border-color: transparent;
}

/* Badges */
.u-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--primary-color, #667eea);
}

/* Menu helpers */
.item-image { position: relative; }
.menu-img { opacity: 0; transition: opacity 0.3s ease; }
.menu-img.loaded { opacity: 1; }
.menu-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  background: var(--image-bg, #f3f4f6);
  color: var(--text-secondary, #6b7280);
  font-size: 2rem;
}