/* =====================================================================
   lab818 Studios — SimplyBook.me WIDGET CSS
   Paste into: Design → Custom CSS → "Widget CSS" tab
   All selectors are scoped to #events (SimplyBook's widget root)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════ */
#events,
#events * {
  font-family: 'Poppins', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  box-sizing: border-box !important;
}

#events {
  background: #f4f4f6 !important;
  color: #0a0a0b !important;
  font-size: 15px !important;
}

#events a {
  color: #0a0a0b !important;
  text-decoration: none !important;
}

#events a:hover {
  color: #4c9b58 !important;
  text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   STEP NAVIGATION BAR (Location / Category / Service / Time / Client)
   ═══════════════════════════════════════════════════════════════════ */

/* Nav bar container */
#events .wizard,
#events .wizard-head,
#events .steps-indicator,
#events .booking-steps,
#events nav.steps,
#events .step-tabs,
#events ul.steps {
  background: #0a0a0b !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  list-style: none !important;
}

/* Individual step tab */
#events .wizard li,
#events .wizard-head li,
#events .steps-indicator li,
#events .booking-steps li,
#events .step-tabs li,
#events ul.steps li,
#events .step-tab {
  background: #0a0a0b !important;
  color: rgba(255,255,255,0.45) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 14px 20px !important;
  border: none !important;
  clip-path: none !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  flex: 1 !important;
  text-align: center !important;
}

/* Active step */
#events .wizard li.current,
#events .wizard li.active,
#events .wizard-head li.current,
#events .wizard-head li.active,
#events .steps-indicator li.current,
#events .steps-indicator li.active,
#events .booking-steps li.active,
#events ul.steps li.active,
#events .step-tab.active {
  background: #ffffff !important;
  color: #0a0a0b !important;
  font-weight: 700 !important;
  clip-path: none !important;
  border-bottom: 2px solid #0a0a0b !important;
}

/* Completed / done step */
#events .wizard li.done,
#events .wizard li.completed,
#events .steps-indicator li.done {
  background: #1a1a1f !important;
  color: rgba(255,255,255,0.3) !important;
}

/* Step text inside */
#events .wizard li a,
#events .wizard li span,
#events .steps-indicator li a,
#events .steps-indicator li span {
  color: inherit !important;
  background: transparent !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: inherit !important;
  padding: 0 !important;
  text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TIMEZONE / INFO BAR
   ═══════════════════════════════════════════════════════════════════ */
#events .our-time,
#events .timezone-info,
#events .current-time {
  font-size: 0.67rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #6b6b75 !important;
  background: #f4f4f6 !important;
  padding: 8px 20px !important;
  border-bottom: 1px solid #e4e4e8 !important;
  text-align: right !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LOCATION / SERVICE CARDS
   ═══════════════════════════════════════════════════════════════════ */

/* Card grid container */
#events .companies,
#events .company-list,
#events .locations-list,
#events .services-list,
#events .categories-list,
#events .providers-list,
#events .units-list,
#events .events-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 14px !important;
  padding: 24px !important;
  background: #f4f4f6 !important;
  list-style: none !important;
  margin: 0 !important;
}

/* Individual card */
#events .company,
#events .company-item,
#events .location,
#events .location-item,
#events .service,
#events .service-item,
#events .category,
#events .category-item,
#events .provider,
#events .provider-item,
#events .unit,
#events .unit-item,
#events .event,
#events .event-item {
  background: #ffffff !important;
  border: 2px solid #e4e4e8 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: all 0.18s !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}

#events .company:hover,
#events .location:hover,
#events .service:hover,
#events .category:hover,
#events .provider:hover,
#events .event:hover,
#events .company-item:hover,
#events .service-item:hover {
  border-color: #b0b0b8 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.07) !important;
}

/* Card image */
#events .company img,
#events .location img,
#events .service img,
#events .event img,
#events .company-item img,
#events .service-item img {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  display: block !important;
}

/* Card body (text area below image) */
#events .company .info,
#events .company-info,
#events .service .info,
#events .service-info,
#events .event-info,
#events .location-info {
  padding: 18px 20px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Card title — h3 (confirmed selector from template) */
#events h3 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: -0.01em !important;
  color: #0a0a0b !important;
  margin: 0 0 4px 0 !important;
  padding: 0 20px !important;
  padding-top: 18px !important;
}

/* Card description (confirmed selector from template) */
#events p.description,
#events div.description {
  font-size: 0.78rem !important;
  color: #6b6b75 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  padding: 0 20px !important;
}

/* Duration text (confirmed selector from template) */
#events p.duration,
#events div.duration {
  font-size: 0.72rem !important;
  color: #6b6b75 !important;
  margin: 0 !important;
  padding: 0 20px !important;
}

/* Price */
#events .price,
#events p.price,
#events div.price,
#events span.price {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  color: #0a0a0b !important;
  padding: 0 20px !important;
  margin: 0 !important;
}

/* Address / location text */
#events .address,
#events p.address,
#events .location-address {
  font-size: 0.78rem !important;
  color: #6b6b75 !important;
  padding: 0 20px !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* "Read more" link */
#events a.read-more,
#events .read-more,
#events a.more-info,
#events .more-info {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #6b6b75 !important;
  text-decoration: none !important;
  padding: 0 20px !important;
  margin: 4px 0 !important;
  display: inline-block !important;
  transition: color 0.15s !important;
}

#events a.read-more:hover,
#events .read-more:hover {
  color: #0a0a0b !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SELECT BUTTON — input.reserve_time_btn (confirmed selector)
   ═══════════════════════════════════════════════════════════════════ */
#events input.reserve_time_btn,
#events button.reserve_time_btn,
#events .reserve_time_btn {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.87rem !important;
  background: #0a0a0b !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9px !important;
  padding: 11px 20px !important;
  margin: 14px 20px 20px !important;
  cursor: pointer !important;
  transition: all 0.17s !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  width: calc(100% - 40px) !important;
  display: block !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#events input.reserve_time_btn:hover,
#events button.reserve_time_btn:hover {
  background: #2a2a30 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(10,10,11,0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SELECT ANOTHER / SECONDARY BUTTON (confirmed selector)
   ═══════════════════════════════════════════════════════════════════ */
#events input.select_another_btn,
#events button.select_another_btn,
#events .select_another_btn {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.87rem !important;
  background: transparent !important;
  color: #6b6b75 !important;
  border: 1px solid #e4e4e8 !important;
  border-radius: 9px !important;
  padding: 11px 20px !important;
  cursor: pointer !important;
  transition: all 0.17s !important;
  box-shadow: none !important;
  text-transform: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#events input.select_another_btn:hover,
#events button.select_another_btn:hover {
  color: #0a0a0b !important;
  border-color: #b0b0b8 !important;
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SELECTED STATE (confirmed selector)
   ═══════════════════════════════════════════════════════════════════ */
#events .selectedEvent,
#events .selected-event,
#events .selected {
  border-color: #0a0a0b !important;
  background: #fafafa !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ANY OTHER BUTTONS IN THE WIDGET
   ═══════════════════════════════════════════════════════════════════ */
#events input[type="submit"],
#events button[type="submit"],
#events .btn-success,
#events .btn-primary,
#events .book-btn,
#events .next-btn,
#events .confirm-btn {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.87rem !important;
  background: #0a0a0b !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9px !important;
  padding: 11px 24px !important;
  cursor: pointer !important;
  transition: all 0.17s !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#events input[type="submit"]:hover,
#events button[type="submit"]:hover,
#events .btn-success:hover,
#events .btn-primary:hover {
  background: #2a2a30 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(10,10,11,0.15) !important;
  color: #ffffff !important;
}

#events .btn-default,
#events .btn-secondary,
#events .back-btn,
#events .prev-btn {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: #6b6b75 !important;
  border: 1px solid #e4e4e8 !important;
  border-radius: 9px !important;
  padding: 11px 24px !important;
  box-shadow: none !important;
  text-transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CALENDAR
   ═══════════════════════════════════════════════════════════════════ */
#events .datepicker,
#events .calendar,
#events table.calendar {
  border: 1px solid #e4e4e8 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  padding: 16px !important;
  font-family: 'Poppins', sans-serif !important;
}

#events .datepicker th,
#events .calendar th {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  color: #6b6b75 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  background: transparent !important;
  border: none !important;
  padding: 6px 4px !important;
}

#events .datepicker td,
#events .calendar td {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.8rem !important;
  border-radius: 7px !important;
  width: 34px !important;
  height: 34px !important;
  text-align: center !important;
  vertical-align: middle !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.12s !important;
  color: #0a0a0b !important;
}

#events .datepicker td.disabled,
#events .datepicker td.old,
#events .datepicker td.new,
#events .calendar td.disabled {
  color: #d0d0d8 !important;
  cursor: default !important;
  pointer-events: none !important;
}

#events .datepicker td:not(.disabled):not(.old):not(.new):hover,
#events .calendar td.available:hover {
  background: #f4f4f6 !important;
  border-color: #e4e4e8 !important;
}

#events .datepicker td.today,
#events .calendar td.today {
  border-color: #e4e4e8 !important;
  font-weight: 600 !important;
  background: transparent !important;
}

#events .datepicker td.active,
#events .datepicker td.selected,
#events .calendar td.selected,
#events .calendar td.active {
  background: #0a0a0b !important;
  border-color: #0a0a0b !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 7px !important;
}

/* Calendar nav prev/next */
#events .datepicker .prev,
#events .datepicker .next {
  background: #f4f4f6 !important;
  border: 1px solid #e4e4e8 !important;
  border-radius: 7px !important;
  color: #6b6b75 !important;
  font-size: 0.8rem !important;
}

#events .datepicker .prev:hover,
#events .datepicker .next:hover {
  background: #e4e4e8 !important;
  color: #0a0a0b !important;
}

/* Month/year label */
#events .datepicker .datepicker-switch {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  color: #0a0a0b !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TIME SLOTS
   ═══════════════════════════════════════════════════════════════════ */
#events .timeslots,
#events .time-slots,
#events ul.timeslots {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#events .timeslot,
#events .time-slot,
#events li.timeslot {
  padding: 7px 14px !important;
  border-radius: 9px !important;
  border: 1px solid #e4e4e8 !important;
  background: #ffffff !important;
  color: #0a0a0b !important;
  font-size: 0.8rem !important;
  font-family: 'Poppins', sans-serif !important;
  cursor: pointer !important;
  transition: all 0.13s !important;
  list-style: none !important;
  font-weight: 400 !important;
}

#events .timeslot:hover {
  border-color: #b0b0b8 !important;
  background: #f4f4f6 !important;
}

#events .timeslot.selected,
#events .timeslot.active {
  border-color: #0a0a0b !important;
  background: #0a0a0b !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

#events .timeslot.disabled,
#events .timeslot.busy {
  color: #d0d0d8 !important;
  pointer-events: none !important;
  text-decoration: line-through !important;
  border-color: #e4e4e8 !important;
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FORM FIELDS (client details step)
   ═══════════════════════════════════════════════════════════════════ */
#events label,
#events .control-label {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.77rem !important;
  font-weight: 500 !important;
  color: #6b6b75 !important;
  margin-bottom: 5px !important;
  display: block !important;
}

#events input[type="text"],
#events input[type="email"],
#events input[type="tel"],
#events input[type="number"],
#events textarea,
#events select,
#events .form-control {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.87rem !important;
  color: #0a0a0b !important;
  background: #ffffff !important;
  border: 1.5px solid #e4e4e8 !important;
  border-radius: 9px !important;
  padding: 11px 14px !important;
  box-shadow: none !important;
  outline: none !important;
  width: 100% !important;
  transition: border-color 0.15s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  height: auto !important;
}

#events input[type="text"]:focus,
#events input[type="email"]:focus,
#events input[type="tel"]:focus,
#events textarea:focus,
#events select:focus,
#events .form-control:focus {
  border-color: #0a0a0b !important;
  box-shadow: 0 0 0 3px rgba(10,10,11,0.06) !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════════════ */
#events .alert {
  border-radius: 9px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.82rem !important;
  box-shadow: none !important;
  border-width: 1px !important;
  padding: 12px 16px !important;
}

#events .alert-success {
  background: rgba(76,155,88,0.08) !important;
  border-color: rgba(76,155,88,0.3) !important;
  color: #1a3a22 !important;
}

#events .alert-danger,
#events .alert-error {
  background: rgba(200,40,40,0.06) !important;
  border-color: rgba(200,40,40,0.2) !important;
  color: #8b2020 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  #events .companies,
  #events .services-list,
  #events .categories-list {
    grid-template-columns: 1fr !important;
    padding: 14px !important;
  }

  #events input.reserve_time_btn {
    width: calc(100% - 28px) !important;
    margin: 10px 14px 16px !important;
  }
}