/* Custom cities styling - Main site */
.cities__card--soon {
  background-color: #f59e0b !important;
  border: none !important; /* Remove border */
  color: white !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4) !important; /* Add glow effect similar to green buttons */
}

.cities__card--soon .cities__name,
.cities__card--soon .cities__zip,
.cities__card--soon .cities__delivery-time,
.cities__card--soon .cities__delivery-icon,
.cities__card--soon .cities__coming-soon,
.cities__card--soon .cities__order-btn {
  color: white !important;
}

.cities__card--soon .cities__order-btn {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white !important;
}

/* Style for city pills in main site */
.city__pill.coming-soon {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border: none !important; /* Remove border */
  color: white !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4) !important; /* Add glow effect */
}

/* Add hover effect for the coming soon pills */
.city__pill.coming-soon:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.5) !important; /* Enhanced glow on hover */
  background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
}

/* Style for available city pills in main site */
.city__pill.available {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: none !important; /* Remove border */
  color: white !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important; /* Add glow effect */
}

/* Star icon styling - new implementation with custom class */
.custom-city-star {
  display: inline-block;
  margin-left: 8px; /* مسافة أكبر بين الاسم والنجمة */
  color: #FFD700; /* لون ذهبي */
  font-size: 14px; /* حجم مناسب */
  vertical-align: middle; /* محاذاة عمودية مع النص */
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
  position: relative; /* للمساعدة في الضبط الدقيق */
  top: -1px; /* ضبط دقيق للمحاذاة */
}

/* Add hover effect for available pills */
.city__pill.available:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.5) !important; /* Enhanced glow on hover */
  background: linear-gradient(135deg, #10b981, #047857) !important;
}

/* Admin panel styling for cities - make "Bald" button have full background color */
.btn-warning, 
.btn-warning.active {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border: none !important; /* Remove border */
  color: white !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4) !important; /* Add glow effect */
  opacity: 1 !important;
}

/* Fix hover state for consistency */
.btn-warning:hover {
  background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.5) !important; /* Enhanced glow on hover */
  transform: translateY(-1px) !important;
}

/* Override any other styling that could be interfering */
.btn-outline.btn-warning.active {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4) !important;
}

/* Cities search input styling */
.cities__search-input::placeholder {
  color: rgba(0, 0, 0, 0.6); /* Dark placeholder text with some transparency */
  font-weight: 400;
}

/* Admin panel styling for "Verfügbar" green button */
.btn-success, 
.btn-success.active {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: none !important; /* Remove border */
  color: white !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important; /* Add glow effect */
  opacity: 1 !important;
}

/* Fix hover state for green button */
.btn-success:hover {
  background: linear-gradient(135deg, #10b981, #047857) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.5) !important; /* Enhanced glow on hover */
  transform: translateY(-1px) !important;
}

/* Override any other styling that could be interfering with green button */
.btn-outline.btn-success.active {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}