/* ================================================
   APPOINTMENT HOUR BOOKING — Theme CSS
   Paste into: Appointment Hour Booking >>
   General Settings >> Edit Styles
   ================================================ */

/* ── Variables via body scope ── */
#fbuilder {
  font-family: 'Jost', sans-serif !important;
  background: transparent !important;
  max-width: 100% !important;
}

/* ════════════════════════════
   FORM TITLE & DESCRIPTION
════════════════════════════ */
#fbuilder .fform h1 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  color: #2c2118 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
  margin-bottom: 12px !important;
}
#fbuilder .fform > span,
#fbuilder .fform > p {
  font-family: 'Jost', sans-serif !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: #7a6452 !important;
  line-height: 1.8 !important;
  margin-bottom: 32px !important;
  display: block !important;
}

/* ════════════════════════════
   ALL LABELS
════════════════════════════ */
#fbuilder label,
#fbuilder span.label,
#fbuilder .field_label {
  font-family: 'Jost', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #2c2118 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Required asterisk */
#fbuilder label .r {
  color: #b8924a !important;
  font-weight: 600 !important;
}

/* ════════════════════════════
   INPUT / TEXTAREA / SELECT
════════════════════════════ */
#fbuilder input[type=text],
#fbuilder input[type=email],
#fbuilder input[type=tel],
#fbuilder input[type=number],
#fbuilder textarea,
#fbuilder select {
  font-family: 'Jost', sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: #2c2118 !important;
  background: #fdf7f1 !important;
  border: 1px solid rgba(185, 145, 90, 0.35) !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  width: 100% !important;
  outline: none !important;
  transition: border-color 0.25s, box-shadow 0.25s !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#fbuilder input[type=text]:focus,
#fbuilder input[type=email]:focus,
#fbuilder input[type=tel]:focus,
#fbuilder input[type=number]:focus,
#fbuilder textarea:focus,
#fbuilder select:focus {
  border-color: #b8924a !important;
  box-shadow: 0 0 0 3px rgba(185, 145, 90, 0.12) !important;
  background: #fff !important;
}

/* Select arrow */
#fbuilder select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b8924a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 42px !important;
  cursor: pointer !important;
}

/* ════════════════════════════
   CALENDAR HEADER
════════════════════════════ */
#fbuilder .ui-datepicker-header {
  background: #2c2118 !important;
  color: #c9a256 !important;
  text-shadow: none !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 12px 16px !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  border: none !important;
}
#fbuilder .ui-datepicker-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #c9a256 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
#fbuilder .ui-datepicker-prev,
#fbuilder .ui-datepicker-next {
  color: #c9a256 !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
}
#fbuilder .ui-datepicker-prev:hover,
#fbuilder .ui-datepicker-next:hover {
  background: rgba(201, 162, 86, 0.15) !important;
  border-radius: 4px !important;
}

/* ── Calendar day headers (SU MO TU…) ── */
#fbuilder .ui-datepicker th {
  background: #f5ede2 !important;
  color: #b8924a !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 8px 4px !important;
  border: none !important;
}

/* ── Calendar table reset ── */
#fbuilder .ui-datepicker table,
#fbuilder .ui-datepicker thead,
#fbuilder .ui-datepicker tr,
#fbuilder .ui-datepicker th,
#fbuilder .ui-datepicker td {
  border: 0px !important;
}
#fbuilder .ui-datepicker {
  box-shadow: 0 8px 32px rgba(44, 33, 24, 0.1) !important;
  border: 1px solid rgba(185, 145, 90, 0.2) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  font-family: 'Jost', sans-serif !important;
  background: #fdf7f1 !important;
  padding: 0 !important;
}
#fbuilder .ui-datepicker-inline {
  max-width: none !important;
  width: 100% !important;
}

/* ── Available dates ── */
#fbuilder td:not(.ui-datepicker-unselectable) a.ui-state-default {
  background: #fdf7f1 !important;
  color: #2c2118 !important;
  border-radius: 6px !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 400 !important;
  text-align: center !important;
  transition: background 0.2s, color 0.2s !important;
}
#fbuilder td:not(.ui-datepicker-unselectable) a.ui-state-default:hover {
  background: rgba(185, 145, 90, 0.18) !important;
  color: #b8791a !important;
}

/* ── Active/selected date ── */
#fbuilder .ui-datepicker-calendar .ui-state-active {
  background: #b8791a !important;
  color: #fff !important;
  border-radius: 6px !important;
}

/* ── Non-available / past dates ── */
#fbuilder .ui-datepicker-unselectable .ui-state-default,
#fbuilder .beforemindate.ui-datepicker-unselectable .ui-state-default {
  background: transparent !important;
  color: #c9b89e !important;
  cursor: not-allowed !important;
}

/* ── Fully-booked dates ── */
#fbuilder .notavailslot.ui-datepicker-unselectable .ui-state-default {
  background: rgba(185, 145, 90, 0.12) !important;
  color: #b8924a !important;
  text-decoration: line-through !important;
}

/* ── Invalid/holiday dates ── */
#fbuilder .invalidDate.ui-datepicker-unselectable .ui-state-default {
  color: #d4c5ad !important;
}

/* ── Today highlight ── */
#fbuilder .ui-datepicker-today .ui-state-default {
  border: 1px solid #b8924a !important;
  color: #b8924a !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

/* ════════════════════════════
   TIME SLOTS
════════════════════════════ */
#fbuilder .slots {
  background: #f5ede2 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-top: 8px !important;
}
#fbuilder .slots div {
  border: 0px !important;
}
#fbuilder .slots div a {
  background: #fdf7f1 !important;
  color: #2c2118 !important;
  border: 1px solid rgba(185, 145, 90, 0.3) !important;
  border-radius: 6px !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 8px 14px !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin: 3px !important;
}
#fbuilder .slots div a:hover,
#fbuilder .slots div a.selected {
  background: #b8791a !important;
  color: #fff !important;
  border-color: #b8791a !important;
}

/* Already-booked slots */
#fbuilder .slots .htmlUsed a {
  text-decoration: line-through !important;
  background: #ede0cc !important;
  color: #b8924a !important;
  border-color: transparent !important;
}

/* Currently selected slots */
#fbuilder .slots .currentSelection a {
  background: #b8924a !important;
  color: #fff !important;
  border-color: #b8924a !important;
}

/* ════════════════════════════
   APPOINTMENT LIST (summary)
════════════════════════════ */
#fbuilder .ahb_list {
  margin: 12px 0 !important;
}
#fbuilder .ahb_list .ahb_list_time,
#fbuilder .ahb_list .ahb_list_service {
  border: 0px !important;
  background: #f5ede2 !important;
  color: #2c2118 !important;
  padding: 8px 14px !important;
  margin-right: 8px !important;
  display: inline-block !important;
  border-radius: 6px !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}
#fbuilder .ahb_list a {
  border: 0px !important;
  background: #b8924a !important;
  padding: 8px 14px !important;
  color: #fff !important;
  display: inline-block !important;
  border-radius: 6px !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
}
#fbuilder .ahb_list a:hover {
  background: #9a6814 !important;
}

/* ════════════════════════════
   SECTION BREAK
════════════════════════════ */
#fbuilder .section_breaks .section_break {
  border: 0px !important;
  border-top: 1px solid rgba(185, 145, 90, 0.25) !important;
  margin: 24px 0 !important;
}
#fbuilder .section_breaks label {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #2c2118 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
#fbuilder .section_breaks span {
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: #7a6452 !important;
}

/* ════════════════════════════
   INSTRUCTIONS / DISCLAIMER TEXT
════════════════════════════ */
#fbuilder .comment_area label {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #2c2118 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
#fbuilder .comment_area span {
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: #7a6452 !important;
  line-height: 1.75 !important;
}

/* Hide phone format placeholder */
.uh_phone .l { display: none !important; }

/* Hide date format label */
#fbuilder .dformat { display: none !important; }

/* ════════════════════════════
   SUBMIT BUTTON
════════════════════════════ */
#fbuilder .pbSubmit {
  font-family: 'Jost', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: #fff !important;
  background: #b8791a !important;
  border: none !important;
  border-radius: 40px !important;
  padding: 15px 42px !important;
  cursor: pointer !important;
  transition: background 0.25s, transform 0.2s !important;
  margin: 8px auto !important;
  float: none !important;
  display: inline-block !important;
  box-shadow: 0 4px 16px rgba(184, 121, 26, 0.3) !important;
}
#fbuilder .pbSubmit:hover {
  background: #9a6814 !important;
  transform: translateY(-1px) !important;
}

/* ── Next / Previous buttons ── */
#fbuilder .pbNext,
#fbuilder .pbPrevious {
  font-family: 'Jost', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #b8924a !important;
  background: transparent !important;
  border: 1px solid rgba(185, 145, 90, 0.5) !important;
  border-radius: 40px !important;
  padding: 12px 28px !important;
  cursor: pointer !important;
  transition: background 0.25s, color 0.25s !important;
  margin: 4px !important;
}
#fbuilder .pbNext:hover,
#fbuilder .pbPrevious:hover {
  background: #b8924a !important;
  color: #fff !important;
  border-color: #b8924a !important;
}

/* ════════════════════════════
   GENERAL FIELD SPACING
════════════════════════════ */
#fbuilder .fields_cell,
#fbuilder .field_cell {
  margin-bottom: 20px !important;
}

/* Responsive calendar */
#fbuilder .ui-datepicker-inline { max-width: none !important; }