/* General Body Styles */
body {
  font-family: "Tahoma", "Arial", sans-serif;
  direction: rtl;
  text-align: right;
  margin: 0;
  padding: 0;
  background-color: #f8f9fa; /* Light background for consistency */
  color: #333;
}

/* Header Styles */
header {
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

header h1 {
  font-size: 1.75rem;
  font-weight: bold;
  color: #1a202c;
}

/* Navigation Links/Buttons */
nav a,
nav button {
  text-decoration: none;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Cart Icon Specifics */
.relative {
  position: relative;
}

#cart-count {
  position: absolute;
  top: -8px; /* Adjust as needed */
  right: -8px; /* Adjust as needed */
  background-color: #ef4444; /* Red-500 */
  color: white;
  font-size: 0.75rem; /* text-xs */
  font-weight: bold;
  border-radius: 9999px; /* rounded-full */
  height: 20px; /* h-5 */
  width: 20px; /* w-5 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Main Content Area */
main {
  padding: 2rem 0;
}

/* Category Filters */
.category-filter {
  cursor: pointer;
  border: 1px solid #cbd5e0; /* border-input */
  background-color: #ffffff; /* bg-background */
  color: #4a5568; /* text-gray-700 */
}

.category-filter:hover {
  background-color: #edf2f7; /* hover:bg-accent */
  color: #2d3748; /* hover:text-accent-foreground */
}

.category-filter[data-state="active"] {
  background-color: #4f46e5; /* primary color */
  color: white;
  border-color: #4f46e5;
}

/* Menu Item Cards */
.menu-item {
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
  background-color: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.menu-item img {
  width: 100%;
  height: 12rem; /* h-48 */
  object-fit: cover;
}

.menu-item.opacity-50 {
  opacity: 0.5;
}

.menu-item.cursor-not-allowed {
  cursor: not-allowed;
}

.menu-item h3 {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600; /* font-semibold */
  color: #1a202c; /* text-gray-900 */
}

.menu-item p {
  font-size: 0.875rem; /* text-sm */
  color: #4a5568; /* text-gray-600 */
}

.menu-item span.text-xl {
  font-size: 1.25rem; /* text-xl */
  font-weight: bold;
  color: #4f46e5; /* primary-600 */
}

.add-to-cart-btn {
  background-color: #4f46e5; /* primary */
  color: white;
  padding: 0.5rem 0.75rem; /* px-3 py-2 */
  border-radius: 0.375rem; /* rounded-md */
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  transition: background-color 0.2s ease-in-out;
}

.add-to-cart-btn:hover {
  background-color: #4338ca; /* hover:bg-primary/90 */
}

/* Footer Styles */
footer {
  background-color: #2d3748; /* gray-800 */
  color: white;
  padding: 1.5rem 0;
  text-align: center;
}

/* Admin Panel Specific Styles */
.tab-button {
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.tab-button.bg-gray-200 {
  background-color: #e2e8f0;
  color: #2d3748;
}

.tab-button:hover {
  background-color: #e2e8f0;
}

.tab-content {
  /* Managed by JS for display/hidden */
}

/* Modals */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fefefe;
  margin: auto; /* Centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be responsive */
  max-width: 500px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal-content h3 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.modal-content label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #333;
}

.modal-content input[type="text"],
.modal-content input[type="number"],
.modal-content textarea,
.modal-content select {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 0.375rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
}

.modal-content button {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.modal-content button[type="submit"] {
  background-color: #4f46e5;
  color: white;
}

.modal-content button[type="submit"]:hover {
  background-color: #4338ca;
}

.modal-content button[type="button"] {
  /* Cancel button */
  background-color: #6b7280;
  color: white;
}

.modal-content button[type="button"]:hover {
  background-color: #4b5563;
}

/* Utility classes for TailwindCSS components not directly used in PHP but for reference */
.bg-primary {
  background-color: #4f46e5;
} /* Indigo-600 */
.text-primary-foreground {
  color: #ffffff;
}
.hover\:bg-primary\/90:hover {
  background-color: #4338ca;
} /* Darker Indigo */
.bg-destructive {
  background-color: #ef4444;
} /* Red-500 */
.text-destructive-foreground {
  color: #ffffff;
}
.hover\:bg-destructive\/90:hover {
  background-color: #dc2626;
} /* Darker Red */
.border-input {
  border-color: #cbd5e0;
}
.bg-background {
  background-color: #ffffff;
}
.hover\:bg-accent:hover {
  background-color: #edf2f7;
}
.hover\:text-accent-foreground:hover {
  color: #2d3748;
}
.ring-offset-background {
  --tw-ring-offset-color: #ffffff;
}
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: #4f46e5;
} /* Primary color for focus ring */