/* =====================================================
   ReDi Reservation - MUTED GOLD THEME (CLEAN & FIXED)
   Complete WordPress Override CSS
   ===================================================== */

/* 1. Global Variables */
:root,
html,
body,
#redi-reservation-app,
#redi-reservation-app .redi-reservation-container {
  --primary: 40 43% 55% !important; /* #BB9A5C */
  --primary-foreground: 0 0% 100% !important;
  --ring: 40 43% 55% !important;
  --accent: 40 43% 90% !important;
}

/* 2. Tab Navigation Icons & Text (All Steps) */
#redi-reservation-app .tab-navigation svg,
.redi-reservation-container .tab-navigation svg,
#redi-reservation-app [class*="tab-"] svg,
.redi-reservation-container [class*="tab-"] svg,
#redi-reservation-app .text-primary svg,
.redi-reservation-container .text-primary svg {
  color: hsl(40, 43%, 55%) !important;
  stroke: hsl(40, 43%, 55%) !important;
  fill: transparent !important;
}

#redi-reservation-app .tab-navigation .text-primary,
#redi-reservation-app .text-primary,
.redi-reservation-container .text-primary,
#redi-reservation-app .tab-active,
.redi-reservation-container .tab-active {
  color: hsl(40, 43%, 55%) !important;
}

#redi-reservation-app .tab-navigation .tab-button.tab-active,
#redi-reservation-app .tab-active,
.redi-reservation-container .tab-active,
#redi-reservation-app .tab-item .tab-active,
.redi-reservation-container .tab-item .tab-active {
  border-bottom-color: hsl(40, 43%, 55%) !important;
  border-bottom: 4px solid hsl(40, 43%, 55%) !important;
}

/* 3. All Buttons & Final Submit Button */
#redi-reservation-app .bg-primary,
.redi-reservation-container .bg-primary,
#redi-reservation-app button.bg-primary,
.redi-reservation-container button.bg-primary,
#redi-reservation-app button[type="submit"],
.redi-reservation-container button[type="submit"],
#redi-reservation-app .book-now-button,
.redi-reservation-container .book-now-button {
  background-color: hsl(40, 43%, 55%) !important;
  border-color: hsl(40, 43%, 55%) !important;
  color: #ffffff !important;
}

#redi-reservation-app .bg-primary:hover,
.redi-reservation-container .bg-primary:hover,
#redi-reservation-app button.bg-primary:hover,
.redi-reservation-container button.bg-primary:hover,
#redi-reservation-app button[type="submit"]:hover,
.redi-reservation-container button[type="submit"]:hover,
#redi-reservation-app .book-now-button:hover,
.redi-reservation-container .book-now-button:hover {
  background-color: hsl(40, 43%, 45%) !important;
  border-color: hsl(40, 43%, 45%) !important;
}

/* 4. Badges & Calendar */
#redi-reservation-app .discount-badge,
.redi-reservation-container .discount-badge {
  background-color: hsl(40, 43%, 55%) !important;
}

#redi-reservation-app .rdp-day_selected,
.redi-reservation-container .rdp-day_selected,
#redi-reservation-app [data-selected="true"],
.redi-reservation-container [data-selected="true"],
#redi-reservation-app .bg-primary.text-primary-foreground {
  background-color: hsl(40, 43%, 55%) !important;
}

#redi-reservation-app .rdp-day_today,
.redi-reservation-container .rdp-day_today {
  border-color: hsl(40, 43%, 55%) !important;
}

/* 5. Time Slots */
#redi-reservation-app .time-slot-button.selected,
.redi-reservation-container .time-slot-button.selected,
#redi-reservation-app button[data-state="active"],
.redi-reservation-container button[data-state="active"] {
  background-color: hsl(40, 43%, 55%) !important;
  border-color: hsl(40, 43%, 55%) !important;
  color: white !important;
}

/* 6. Form Inputs & Focus States */
#redi-reservation-app input:focus,
#redi-reservation-app textarea:focus,
#redi-reservation-app select:focus,
.redi-reservation-container input:focus,
.redi-reservation-container textarea:focus,
.redi-reservation-container select:focus,
#redi-reservation-app .react-tel-input .form-control:focus,
.redi-reservation-container .react-tel-input .form-control:focus {
  border-color: hsl(40, 43%, 55%) !important;
  box-shadow: 0 0 0 2px hsla(40, 43%, 55%, 0.25) !important;
  outline: none !important;
}

/* 7. Links */
#redi-reservation-app a:not(.no-style),
.redi-reservation-container a:not(.no-style) {
  color: hsl(40, 43%, 55%) !important;
}

#redi-reservation-app a:hover,
.redi-reservation-container a:hover {
  color: hsl(40, 43%, 40%) !important;
}

/* 8. Layout Backgrounds */
#redi-reservation-app .redi-reservation-container {
  background-color: #fdf6f0 !important;
}

#redi-reservation-app .bg-muted,
.redi-reservation-container .bg-muted,
#redi-reservation-app .tab-navigation,
.redi-reservation-container .tab-navigation {
  background-color: #fffcf9 !important;
}