/* Stunning Booking Site CSS for book.electricmanbn.com */
:root {
  --primary-color:    #8B0000;    /* Red Blood Dark */
  --secondary-color:  #2ecc71;    /* Emerald Green */
  --background-color: #1C1C1C;    /* Black Matte */
  --text-color:       #F5F5F5;
  --font-family:      'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ── Global Resets and Body ──────────────────────────────────────────────────── */
body {
  background-color: var(--background-color) !important;
  color:            var(--text-color)      !important;
  font-family:      var(--font-family)     !important;
  line-height:      1.6                   !important;
  margin:           0                     !important;
  padding:          0                     !important;
}
a, a:hover {
  color:           var(--secondary-color) !important;
  text-decoration: none                  !important;
  transition:      color 0.3s ease       !important;
}

/* ── Event Headings ───────────────────────────────────────────────────────── */
#events h3 {
  color:           var(--primary-color)   !important;
  font-size:       1.75rem               !important;
  text-transform:  uppercase             !important;
  border-bottom:   3px solid var(--secondary-color) !important;
  padding-bottom:  0.5rem                !important;
  margin-bottom:   1rem                  !important;
}

/* ── Duration Text ────────────────────────────────────────────────────────── */
#events p.duration,
#events div.duration {
  color:           var(--secondary-color) !important;
  font-weight:     600                   !important;
  letter-spacing:  0.5px                 !important;
}

/* ── Description Text ─────────────────────────────────────────────────────── */
#events p.description,
#events div.description {
  color:           #cccccc               !important;
  font-size:       1rem                  !important;
  margin-bottom:   1rem                  !important;
}

/* ── Selected Event Highlight ─────────────────────────────────────────────── */
#events .selectedEvent {
  background:      rgba(139, 0, 0, 0.1)   !important;
  border-left:     4px solid var(--primary-color) !important;
  padding:         1rem                  !important;
  border-radius:   0.5rem                !important;
}

/* ── Standard Buttons (now darker grey) ──────────────────────────────────── */
#events input.reserve_time_btn,
#events input.select_another_btn,
#eventForm #save_button {
  background-color: #444444 !important;   /* darker grey */
  color:            var(--secondary-color) !important; /* emerald green */
  border:           none      !important;
  padding:          0.75rem 1.5rem !important;
  font-size:        1rem      !important;
  border-radius:    0.375rem  !important;
  cursor:           pointer   !important;
  transition:       opacity 0.2s ease !important;
}
#events input.reserve_time_btn:hover,
#events input.select_another_btn:hover,
#eventForm #save_button:hover {
  opacity: 0.9 !important;
}

/* ── Form Section Headers ────────────────────────────────────────────────── */
#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {
  color:           var(--primary-color)   !important;
  margin-top:      1rem                  !important;
  font-size:       1.25rem               !important;
}

/* ── jQuery UI Widget Overrides ─────────────────────────────────────────── */
div.ui-widget-content {
  background-color: var(--background-color) !important;
  border:           1px solid #333333      !important;
  box-shadow:       0 2px 4px rgba(0, 0, 0, 0.3) !important;
  border-radius:    0.5rem                 !important;
  padding:          1rem                   !important;
}
div.ui-widget-header {
  background-color: var(--primary-color)   !important;
  color:            var(--text-color)      !important;
  padding:          0.75rem                !important;
  border-radius:    0.5rem 0.5rem 0 0      !important;
}

/* ── Timeline Table ──────────────────────────────────────────────────────── */
#timeline-container table.timeline {
  width:            100%                   !important;
  border-collapse:  collapse               !important;
  margin-top:       1rem                   !important;
}
.timeline td {
  height:           2rem                   !important;
  border:           1px solid #333333      !important;
  transition:       background-color 0.3s ease !important;
}
.timeline td.not_worked_time {
  background-color: #333333                !important;
}
.timeline td.free_time {
  background-color: rgba(255,140,0,0.2)    !important;
}
.timeline td.selected_time {
  background-color: var(--secondary-color) !important;
}
.timeline td.reserved_time {
  background-color: var(--primary-color)   !important;
}
.timeline td.reserved_time:hover {
  opacity: 0.9 !important;
}

/* ── Loading Overlay ────────────────────────────────────────────────────── */
div#loading {
  display:          flex                   !important;
  align-items:      center                 !important;
  justify-content:  center                 !important;
  background:       rgba(0, 0, 0, 0.6)     !important;
  position:         fixed                  !important;
  top:              0                      !important;
  left:             0                      !important;
  width:            100%                   !important;
  height:           100%                   !important;
  z-index:          9999                   !important;
}

/* ── Override default italics ───────────────────────────────────────────── */
body, h1, h2, h3, h4, h5, h6, p, a, span {
  font-style:       normal                 !important;
}

/* ── FORCE GREY BG + EMERALD GREEN TEXT ON ALL <button>s & PLUGIN BUTTONS ── */
button,
#events button,
#eventForm button,
input[type="button"],
input[type="submit"],
button.fc-button,
.fc .fc-button,
.ui-datepicker .ui-datepicker-buttonpane button {
  background-color: #444444 !important;   /* darker grey */
  color:            var(--secondary-color) !important;
  border:           none      !important;
  padding:          0.75rem 1.5rem !important;
  border-radius:    0.375rem    !important;
  cursor:           pointer      !important;
  transition:       opacity 0.2s ease !important;
}
button:hover,
#events button:hover,
#eventForm button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
button.fc-button:hover,
.fc .fc-button:hover,
.ui-datepicker .ui-datepicker-buttonpane button:hover {
  opacity: 0.9 !important;
}

#sb-main-container #main #sb-timeline #steps #details .detail-step-wrap .detail-step .license-links-container .promotions-letter-flag label[role=button]{ display: none; }