/* Delete dish */
.form-container {
  background-color: #deb94dff;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-danger {
  background-color: #dc2626;
  border-color: #dc2626;
  color: #fff;
  padding: 0.5rem 1.5rem;
  border-radius: 0.375rem;
  transition: background-color 0.3s;
}
.btn-danger:hover {
  background-color: #b91c1c;
}

.btn-secondary {
  background-color: #6b7280;
  color: #fff;
  padding: 0.5rem 1.5rem;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: background-color 0.3s;
}
.btn-secondary:hover {
  background-color: #4b5563;
}

h2.section-title {
  color: #f9fafb;
  margin-bottom: 1rem;
}

.warning-box {
  background-color: #f87171;
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.5rem;
}

.dish-name {
  font-weight: 700;
  color: #1f2937;
}

/* Delete category */
.btn-primary {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
  padding: 0.5rem 1.5rem;
  border-radius: 0.375rem;
  transition: background-color 0.3s;
  text-decoration: none;
}
.btn-primary:hover {
  background-color: #2563eb;
}

.btn-cancel {
  background-color: #6b7280;
  color: #fff;
  padding: 0.5rem 1.5rem;
  border-radius: 0.375rem;
  text-decoration: none;
  margin-left: 1rem;
  transition: background-color 0.3s;
}
.btn-cancel:hover {
  background-color: #4b5563;
}

p.text-error {
  color: #f87171;
}

p.text-normal {
  color: #f9fafb;
}

.warning-icon {
  color: #fbbf24;
  margin-right: 0.5rem;
}

/* Add Edit Dish */
.form-container label {
  color: #f9fafb;
  font-weight: 500;
}

.form-container input,
.form-container select,
.form-container textarea {
  background-color: #6b727dff;
  border: 1px solid #3e6dccff;
  color: #f9fafb;
  padding: 0.5rem;
  border-radius: 0.375rem;
  width: 100%;
}
.form-container input:focus,
.form-container select:focus,
.form-container textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.form-container .text-xs {
  color: #9ca3af;
}

.form-container .text-red-600 {
  color: #f87171;
}

.current-image,
.current-image img {
  max-width: 140px;
  border-radius: 0.25rem;
  margin-top: 0.5rem;
}

.current-icon img {
  max-width: 100px;
  border-radius: 0.25rem;
  margin-top: 0.5rem;
}

/* Dish_list */
.category-filter a {
    text-decoration: none !important;
    display: inline-block;
    margin: 0 4px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.category-filter a.all {
    background-color: #343a40;
    color: #fff;
}

.category-filter a.category {
    background-color: #f8f9fa;
    color: #6c757d;
    border: 1px solid transparent;
}

.category-filter a.category.active {
    border: 1px solid #ffc107;
    color: #000;
    font-weight: 500;
}

.category-filter a:hover {
    text-decoration: none;
    opacity: 0.85;
}

/* Media Queris */
@media (max-width: 768px) {
    .category-filter a.badge {
        padding: 5px 10px !important;
        font-size: 0.85rem !important;
        margin: 2px 2px !important;
    }

    .category-filter {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }
}