/*
========================================
FROG DARTS – CUSTOM CSS
========================================
*/

/* GENERAL PAGE BACKGROUND */
body {
  background: #ece8d2 !important;
}

/* MAIN BOOKING AREA */
#events {
  background: #008a00 !important;
  padding-bottom: 40px !important;
}

/* STEP NAVIGATION */
#events .steps,
#events .top-date-time {
  background: #ffffff !important;
}

/* STEP ACTIVE */
#events .step.active {
  background: #000000 !important;
  color: #ffffff !important;
}

/* GENERAL CARD STYLE */
#events .tab,
#events .tab-pd,
#events .event-item,
#events .company-item {
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15) !important;
  border: none !important;
}

/* ========================================
FIRST PACKAGE CARD
======================================== */

#events div[aria-label*="Interactive Darts Paris"] {
  background: #fff0cc !important;
  border-top: 8px solid #d89a1d !important;
}

/* FIRST PACKAGE BUTTON */

#events div[aria-label*="Interactive Darts Paris"] .btn,
#events div[aria-label*="Interactive Darts Paris"] button {
  background: #d89a1d !important;
  color: #111111 !important;
}

/* ========================================
SECOND PACKAGE CARD
======================================== */

#events div[aria-label*="Happy Hours Interactive Darts Paris"] {
  background: #efe3ff !important;
  border-top: 8px solid #7a1f68 !important;
}

/* SECOND PACKAGE BUTTON */

#events div[aria-label*="Happy Hours Interactive Darts Paris"] .btn,
#events div[aria-label*="Happy Hours Interactive Darts Paris"] button {
  background: #7a1f68 !important;
  color: #ffffff !important;
}

/* ========================================
GENERAL BUTTONS
======================================== */

#events .btn,
#events button,
#events input.reserve_time_btn {
  border-radius: 6px !important;
  font-weight: 700 !important;
  border: none !important;
}

/* BUTTON HOVER */

#events .btn:hover,
#events button:hover {
  opacity: 0.92 !important;
}

/* ========================================
TIME SLOT BUTTONS
======================================== */

.timeline td.free_time,
#events .available_time {
  background: #5ad35a !important;
  border-radius: 6px !important;
}

/* SELECTED TIME */

.timeline td.selected_time {
  background: #000000 !important;
  color: #ffffff !important;
}

/* ========================================
HEADINGS
======================================== */

#events h3 {
  font-weight: 800 !important;
  color: #111111 !important;
}

/* ========================================
BACK LINK
======================================== */

#events .back-link,
#events .prev_step {
  color: #000000 !important;
  font-weight: 700 !important;
}