/* Styles definition here */
/* ========= OSDC: Warm Hospitality Scheduler Styling ========= */

/* Keep the service dropdown hidden (we already confirmed this works) */
#fbuilder .ahbfield_service { 
  display: none !important; 
}

/* Overall layout: wider, softer, calmer */
#fbuilder{
  max-width: 920px;
  margin: 0 auto;
  padding: 18px 14px;
  font-family: inherit;            /* use your site’s font */
  color: #1a1a1a;
}

/* Put the calendar + form into a welcoming “card” */
.cp_ahb_wrapper,
.cp_ahb_calendar,
.cp_ahb_form{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.06) !important;
}

/* Add breathing room so it feels less tight/boxy */
.cp_ahb_wrapper{
  padding: 26px 26px !important;
}

/* Center month title cleanly */
.cp_ahb_calendar caption{
  text-align: center !important;
  font-size: 26px !important;
  letter-spacing: .4px;
  font-weight: 600;
}

/* Softer day headers */
.cp_ahb_calendar th{
  font-size: 13px !important;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: .65;
}

/* Soften the calendar grid feeling */
.cp_ahb_calendar td,
.cp_ahb_calendar th{
  border-color: rgba(0,0,0,.05) !important;
}
.cp_ahb_calendar td{
  border-radius: 10px !important;
}

/* Selected day: warm champagne, not loud */
.cp_ahb_calendar .selected,
.cp_ahb_calendar td.ui-datepicker-current-day a{
  background: #e7dbc8 !important;
  color: #1a1a1a !important;
  border-radius: 10px !important;
}

/* Time slots: friendly “pill” buttons */
.cp_ahb_calendar .slots a,
.cp_ahb_timeslot{
  border-radius: 999px !important;
  padding: 10px 16px !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  background: #ffffff !important;
  letter-spacing: .3px;
  transition: all .18s ease;
}

/* Hover: gentle warmth */
.cp_ahb_calendar .slots a:hover,
.cp_ahb_timeslot:hover{
  background: #f6f1ea !important;
  border-color: rgba(0,0,0,.22) !important;
  transform: translateY(-1px);
}

/* Selected time: subtle OSDC blue glow (not a blocky fill) */
.cp_ahb_calendar .slots a.active,
.cp_ahb_timeslot.cp_ahb_selected{
  background: #ffffff !important;
  border-color: rgba(14,47,92,.55) !important;
  box-shadow: 0 8px 18px rgba(14,47,92,.14) !important;
}

/* Form labels: welcoming, readable */
.cp_ahb_form label{
  font-size: 16px !important;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Inputs: softer and easier on the eyes */
.cp_ahb_form input[type="text"],
.cp_ahb_form input[type="email"],
.cp_ahb_form input[type="tel"],
.cp_ahb_form textarea,
.cp_ahb_form select{
  width: 100% !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* Focus state: calm, accessible (no harsh red outline) */
.cp_ahb_form input:focus,
.cp_ahb_form textarea:focus,
.cp_ahb_form select:focus,
.cp_ahb_calendar .slots a:focus{
  outline: none !important;
  border-color: rgba(14,47,92,.55) !important;
  box-shadow: 0 0 0 3px rgba(14,47,92,.12) !important;
}

/* If the plugin tries to show red “error” outlines aggressively, soften them */
.cp_ahb_form .error,
.cp_ahb_form input.error,
.cp_ahb_form textarea.error{
  border-color: rgba(180, 80, 80, .45) !important;
  box-shadow: 0 0 0 3px rgba(180, 80, 80, .10) !important;
}
/* --- Slightly more breathing room between sections --- */
.cp_ahb_calendar{
  margin-bottom: 22px !important;
}

/* --- Make the date (03/27/2026) feel softer and elegant --- */
.cp_ahb_calendar .date_selected,
.cp_ahb_date{
  font-size: 18px !important;
  letter-spacing: .4px;
  opacity: .8;
}

/* --- Reduce harsh blue outline on timeslots --- */
.cp_ahb_calendar .slots a{
  border-color: rgba(14,47,92,.35) !important;
}
/* Soften Appointment Hour Booking headline */
.dfb {
    font-size: 22px !important;
    letter-spacing: 0.4px !important;
    font-weight: 500 !important;
}