/* ============================================
   BODY BENTO — SimplyBook.me Custom CSS
   Brand: #F9652F orange / #111111 dark / #FFFFFF white
   Font: General Sans via CDNFonts
   ============================================ */

/* --- FONT IMPORT --- */
@import url('https://fonts.cdnfonts.com/css/general-sans');

/* --- GLOBAL RESET & BASE --- */
body, html {
  font-family: 'General Sans', sans-serif !important;
  background-color: #111111 !important;
  color: #ffffff !important;
}

* {
  font-family: 'General Sans', sans-serif !important;
}

/* --- PAGE WRAPPER --- */
#page-wrap, #main-content, .container, .row {
  background-color: #111111 !important;
}

/* --- HEADER / BUSINESS NAME --- */
#header, .header, #company_name, .company-name {
  background-color: #111111 !important;
  border-bottom: 1px solid #222222 !important;
}

#company_name a, .company-name a, #company_name, .company-name {
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  font-size: 1.4rem !important;
}

/* --- NAVIGATION / MENU --- */
nav, .navbar, .nav, #nav {
  background-color: #111111 !important;
  border-bottom: 1px solid #1e1e1e !important;
}

nav a, .nav a, .navbar a {
  color: #aaaaaa !important;
  font-weight: 500 !important;
}

nav a:hover, .nav a:hover {
  color: #F9652F !important;
}

/* --- SERVICE / EVENT CARDS --- */
#events h3 {
  font-family: 'General Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 4px !important;
}

#events .event, #events li, .event-item {
  background-color: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin-bottom: 12px !important;
  transition: border-color 0.2s ease !important;
}

#events .event:hover, #events li:hover {
  border-color: #F9652F !important;
}

#events p.duration, #events div.duration {
  font-family: 'General Sans', sans-serif !important;
  color: #888888 !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  margin-top: 4px !important;
}

#events p.description, #events div.description {
  font-family: 'General Sans', sans-serif !important;
  color: #aaaaaa !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  margin-top: 8px !important;
}

#events .selectedEvent {
  background-color: #1e1e1e !important;
  border: 1px solid #F9652F !important;
  border-radius: 12px !important;
}

/* --- BUTTONS --- */
#events input.reserve_time_btn,
#eventForm #save_button,
input[type="submit"],
button[type="submit"],
.btn, .button, a.btn {
  background-color: #F9652F !important;
  color: #ffffff !important;
  font-family: 'General Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.02em !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
  text-transform: uppercase !important;
}

#events input.reserve_time_btn:hover,
#eventForm #save_button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.btn:hover, .button:hover {
  background-color: #e05520 !important;
  transform: translateY(-1px) !important;
}

#events input.select_another_btn {
  background-color: transparent !important;
  color: #aaaaaa !important;
  border: 1px solid #333333 !important;
  border-radius: 8px !important;
  font-family: 'General Sans', sans-serif !important;
  font-weight: 500 !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, color 0.2s ease !important;
}

#events input.select_another_btn:hover {
  border-color: #F9652F !important;
  color: #F9652F !important;
}

/* --- DATE/TIME SECTION HEADINGS --- */
#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {
  font-family: 'General Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.08em !important;
  color: #888888 !important;
  margin-bottom: 12px !important;
}

/* --- CALENDAR WIDGET --- */
div.ui-widget-content {
  background-color: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-family: 'General Sans', sans-serif !important;
}

div.ui-widget-header {
  background-color: #222222 !important;
  border: none !important;
  color: #ffffff !important;
  font-family: 'General Sans', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 10px 10px 0 0 !important;
}

.ui-datepicker td a, .ui-datepicker td span {
  color: #ffffff !important;
  border-radius: 6px !important;
  font-family: 'General Sans', sans-serif !important;
}

.ui-datepicker td a:hover {
  background-color: #F9652F !important;
  color: #ffffff !important;
}

.ui-datepicker .ui-state-active, 
.ui-datepicker .ui-state-highlight {
  background-color: #F9652F !important;
  color: #ffffff !important;
  border: none !important;
}

.ui-datepicker-prev, .ui-datepicker-next {
  color: #F9652F !important;
}

/* --- TIMELINE / TIME SLOTS --- */
#timeline-container table.timeline {
  background-color: #1a1a1a !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid #2a2a2a !important;
}

.timeline td {
  font-family: 'General Sans', sans-serif !important;
  font-size: 0.85rem !important;
}

.timeline td.not_worked_time {
  background-color: #161616 !important;
  color: #444444 !important;
}

.timeline td.free_time {
  background-color: #1a2a1a !important;
  color: #aaaaaa !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}

.timeline td.free_time:hover {
  background-color: #F9652F !important;
  color: #ffffff !important;
}

.timeline td.selected_time {
  background-color: #F9652F !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.timeline td.reserved_time {
  background-color: #2a2a2a !important;
  color: #555555 !important;
}

/* --- FORMS --- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
  background-color: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-family: 'General Sans', sans-serif !important;
  font-size: 0.9rem !important;
  padding: 10px 14px !important;
  transition: border-color 0.2s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: #F9652F !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(249, 101, 47, 0.15) !important;
}

input::placeholder, textarea::placeholder {
  color: #555555 !important;
}

label, dt, dt b, dd label {
  color: #aaaaaa !important;
  font-family: 'General Sans', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

#start_date-block-container .zend_form dt,
#start_date-block-container .zend_form dt b,
#start_date-block-container .zend_form dd label {
  color: #aaaaaa !important;
  font-family: 'General Sans', sans-serif !important;
  font-weight: 500 !important;
}

/* --- LOADING SPINNER --- */
div#loading {
  background-color: rgba(17, 17, 17, 0.9) !important;
  color: #F9652F !important;
}

/* --- LINKS --- */
a {
  color: #F9652F !important;
  text-decoration: none !important;
}

a:hover {
  color: #e05520 !important;
}

/* --- FOOTER --- */
#footer, footer {
  background-color: #111111 !important;
  border-top: 1px solid #1e1e1e !important;
  color: #555555 !important;
  font-size: 0.8rem !important;
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar {
  width: 6px !important;
}

::-webkit-scrollbar-track {
  background: #111111 !important;
}

::-webkit-scrollbar-thumb {
  background: #333333 !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #F9652F !important;
}