.topping-option {
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fafafa;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: border 0.2s, background 0.2s, transform 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.topping-option:hover {
  background: #fef2e4;
  border-color: #ff914d;
  transform: scale(1.03);
}

.topping-option.selected {
  background: #ff914d;
  color: #fff;
  border-color: #ff7518;
}

.topping-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #eee;
  margin-bottom: 8px;
}

.topping-info {
  font-size: 13px;
  color: #444;
  text-align: center;
}

.topping-name {
  font-weight: 600;
}

.topping-price {
  color: #d9480f;
  font-weight: 600;
}

.toppings-modal h3 {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.toppings-modal {
  display: none;
}

.toppings-modal.is-open {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.toppings-modal {
  display: none; 
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#save {
  background: #ff914d;
  color: #fff;
  width: 150px;
  border-radius: 8px;
  padding: 10px;
}

#cancel{
  background: #ddd;
  color: #333;
  width: 150px;
  border-radius: 8px;
  padding: 10px;
}

.modal { 
  position: fixed; 
  inset: 0; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background: rgba(0,0,0,0.6); 
  z-index: 999; 
}

.modal-content { 
  background: #fff; 
  border-radius: 12px; 
  padding: 20px; 
  max-width: 600px; 
  width: 90%; 
  max-height: 80vh; 
  overflow-y: auto; 
}

#toppingOptions {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 12px; 
  margin-top: 12px;
}

.modal-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  justify-content: center;
}