/* === BOOKING STEPS NAVIGATION BAR (styled like main nav) === */ 
#stepsHeader {
  border-bottom: 2px solid #E0E0E0 !important; /* subtle divider */
  margin-bottom: 25px !important;
}

#stepsHeader li {
  margin: 0 15px !important;  /* spacing between steps */
}

#stepsHeader li a,
#stepsHeader li span {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #001830 !important;  /* navy */
  padding: 10px 5px !important;
  text-transform: none !important;
  border-bottom: 3px solid transparent !important;
  transition: all 0.3s ease !important;
}

/* Hover effect */
#stepsHeader li a:hover,
#stepsHeader li span:hover {
  color: #65C2B3 !important;     /* teal text on hover */
  border-bottom: 3px solid #65C2B3 !important; /* teal underline */
}

/* Active step */
#stepsHeader li.active a,
#stepsHeader li.active span {
  color: #65C2B3 !important;     /* teal text */
  font-weight: 700 !important;
  border-bottom: 3px solid #65C2B3 !important;
}

/* Re-import Nunito (ensure highest priority) */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

/* Force Nunito globally */
body, p, span, div, a, h1, h2, h3, h4, h5, h6 {
  font-family: 'Nunito', sans-serif !important;
}
/* Import Playfair Display */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap');

/* Force Playfair Display for section + step titles */
div.title-section,
div.title-main {
  font-family: 'Nunito', serif !important;
  text-align: center !important;
  color: #001830 !important;   /* navy */
  text-transform: none !important;
  position: relative !important;
  width: 100% !important;
  display: block !important;
}

/* Large section titles (About Us, Reviews, Our Location) */
div.title-section {
  font-size: 50px !important;
  font-weight: 400 !important;
  line-height: 50px !important;
  padding-bottom: 30px !important;
  margin: 40px 0 30px 0 !important;
  border-bottom: 1px solid #00183020 !important; /* subtle line, optional */
}
div.title-section, div.title-main {
    font-family: 'Nunito', serif !important;
    text-align: center !important;
    color: #001830 !important;
    text-transform: none !important;
    position: relative !important;
    width: 100% !important;
    display: block !important;
/* Style the Prev Date / Next Date labels */
.sb_time_nav .sb_label {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #001830 !important;   /* navy */
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 12px !important;
}
/* Force Prev Date / Next Date styling */
#sb_time .sb_time_nav label,
#sb_time .sb_time_nav .sb_label {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #001830 !important;   /* navy */
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 15px !important;
}
/* Prev / Next Date labels fix */
#sb_time .sb_time_nav,
#sb_time .sb_time_nav label,
#sb_time .sb_time_nav span,
#sb_time .sb_time_nav .sb_label {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: #001830 !important;   /* navy */
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
/* === Prev / Next Date navigation === */
a.sb-date-navigate,
a.sb-date-navigate .txt {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: #001830 !important;  /* navy */
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
/* === Prev / Next Date navigation fix === */
#sb-timeline #steps #steps-content .datetime-step .header a.sb-date-navigate,
#sb-timeline #steps #steps-content .datetime-step .header a.sb-date-navigate .txt {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: #001830 !important;   /* navy */
  text-transform: none !important;
}

/* Icons inside the navigation */
#sb-timeline #steps #steps-content .datetime-step .header a.sb-date-navigate .fa {
  color: #001830 !important;
  font-size: 18px !important;
  margin: 0 6px !important;
}
/* === Force Prev / Next Date links === */
a.sb-date-navigate,
a.sb-date-navigate span,
a.sb-date-navigate .txt {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: #001830 !important;   /* navy */
  text-transform: none !important;
}

/* Icons inside Prev/Next */
a.sb-date-navigate .fa {
  color: #001830 !important;
  font-size: 18px !important;
  margin: 0 6px !important;
}
/* === Force Prev/Next Date styling === */
#sb-timeline #steps #steps-content .datetime-step .header a.sb-date-navigate,
#sb-timeline #steps #steps-content .datetime-step .header a.sb-date-navigate span,
#sb-timeline #steps #steps-content .datetime-step .header a.sb-date-navigate .txt {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: #001830 !important;   /* navy */
  text-transform: none !important;
}
/* === Prev/Next Month navigation buttons in calendar === */
a.sb-date-navigate,
a.sb-date-navigate span,
a.sb-date-navigate .fa,
a.sb-date-navigate .txt {
  font-family: 'Nunito', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #001830 !important;   /* navy */
  text-transform: none !important;
  text-decoration: none !important;
}
/* === Calendar Month Navigation (Prev / Next) === */
#sb-timeline #steps .sb_booking_content .datetime-step .header a,
#sb-timeline #steps .sb_booking_content .datetime-step .header a span,
#sb-timeline #steps .sb_booking_content .datetime-step .header a .fa {
  font-family: 'Nunito', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #001830 !important;   /* navy */
  text-decoration: none !important;
}
/* Force Prev/Next navigation arrows visibility */
.sb-date-navigate {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
    border: 2px solid #001830 !important;
    padding: 8px 15px !important;
    color: #001830 !important;
    font-weight: bold !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    position: relative !important;
    overflow: visible !important;
}

/* Previous/Next button text */
.sb-date-navigate span {
    color: #001830 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    display: inline !important;
    visibility: visible !important;
}

/* Font Awesome icons */
.sb-date-navigate .fa,
.sb-date-navigate i {
    color: #001830 !important;
    font-size: 16px !important;
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hover states */
.sb-date-navigate:hover {
    background-color: #001830 !important;
    color: #FFFFFF !important;
    border-color: #001830 !important;
}

.sb-date-navigate:hover span,
.sb-date-navigate:hover .fa,
.sb-date-navigate:hover i {
    color: #FFFFFF !important;
}
/* Target the Prev Date / Next Date navigation */
input[type="checkbox"] + label,
label[for*="prev"],
label[for*="next"],
.prev-date-label,
.next-date-label {
    background: transparent !important;
    border: 2px solid #001830 !important;
    color: #001830 !important;
    font-weight: bold !important;
    padding: 8px 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

/* Style the checkboxes that control prev/next date */
input[type="checkbox"][id*="prev"],
input[type="checkbox"][id*="next"] {
    display: none !important;
}

/* Add arrow icons to prev/next date labels */
label[for*="prev"]::before {
    content: "◄ " !important;
    font-weight: bold !important;
    margin-right: 5px !important;
}

label[for*="next"]::after {
    content: " ►" !important;
    font-weight: bold !important;
    margin-left: 5px !important;
}
/* Target the specific navigation links */
a.sb-date-navigate {
    background: transparent !important;
    border: 2px solid #001830 !important;
    color: #001830 !important;
    font-weight: bold !important;
    padding: 8px 15px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 12px !important;
}
/* Override SimpleBookMe's default styles completely */
div.txt-right {
    position: relative !important;
}

/* Create custom navigation buttons using CSS pseudo-elements */
div.txt-right::before {
    content: "◄ PREV DATE" !important;
    position: absolute !important;
    left: -150px !important;
    top: 0 !important;
    background: transparent !important;
    border: 2px solid #001830 !important;
    color: #001830 !important;
    font-weight: bold !important;
    padding: 8px 15px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    display: inline-block !important;
}

div.txt-right::after {
    content: "NEXT DATE ►" !important;
    background: transparent !important;
    border: 2px solid #001830 !important;
    color: #001830 !important;
    font-weight: bold !important;
    padding: 8px 15px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin-left: 10px !important;
}

/* Hide the existing broken navigation */
a.sb-date-navigate {
    display: none !important;
}

}

/* === Prev/Next Date checkboxes & labels === */
#eventForm #start_date-block-container label {
  font-family: 'Nunito', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #001830 !important;   /* navy text */
  cursor: pointer !important;
  transition: color 0.3s ease !important;
}

#eventForm #start_date-block-container label:hover {
  color: #65C2B3 !important;   /* teal on hover */
}

/* Checkbox styling */
#eventForm #start_date-block-container input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid #001830 !important;   /* navy border */
  border-radius: 3px !important;
  display: inline-block !important;
  position: relative !important;
  cursor: pointer !important;
  margin-right: 6px !important;
}

/* Checked state */
#eventForm #start_date-block-container input[type="checkbox"]:checked {
  background-color: #65C2B3 !important;   /* teal fill */
  border-color: #65C2B3 !important;
}