/* GENERAL */

body {
  font-family: "Poppins", sans-serif;
  /* Poppins gives a clean modern look to the whole site */
}

.navbar {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  /* Subtle shadow separates navbar from page content */
}

.nav-link {
  font-weight: 500;
  border-radius: 8px;
  transition: background 0.2s ease;
  /* transition makes the hover effect smooth instead of instant */
}

.nav-link:hover {
  background-color: rgba(13, 110, 253, 0.08);
  color: #0d6efd !important;
  /* Light blue tint on hover matching Bootstrap primary color */
}

.brand-text span {
  color: #0d6efd;
  /* Makes part of the brand name blue for a two-tone logo effect */
}

footer {
  background-color: #1a1a2e;
  /* Dark navy footer for strong visual contrast */
}

/* Hero Section with Background Image */
.hero-section {
  background-image: url("../images/hero.jpg");
  /* url path is relative to the CSS file location */
  background-size: cover;
  /* cover: image fills the entire hero area without stretching */
  background-position: center;
  /* center: focuses on the middle of the image */
  background-repeat: no-repeat;
  /* no-repeat: prevents image from tiling */
  min-height: 70vh;
  /* takes up 70% of screen height */
  position: relative;
  /* needed for the overlay to work */
}

.hero-overlay {
  background: rgba(0, 0, 0, 0.6);
  /* semi-transparent black overlay on top of the image */
  /* makes text readable over the background image */
  position: absolute;
  /* covers the entire hero section */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.hero-content {
  position: relative;
  /* sits on top of the overlay */
  z-index: 1;
  /* z-index: ensures content appears above the overlay */
}

/* ===== TABLE ===== */
#booking-table {
  border: 1px solid #1a3a2a !important;
  border-collapse: collapse !important;
  font-size: 0.7rem !important;
  background-color: #0d1f14 !important;
  /* very dark green background matching the image */
}

#booking-table th {
  background-color: #0d1f14 !important;
  /* dark green header */
  color: #4caf7d !important;
  /* bright green text for headers matching the image */
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  /* wide letter spacing matches the sporty header style */
  padding: 14px 16px !important;
  border-bottom: 1px solid #1a3a2a !important;
  border-right: 1px solid #1a3a2a !important;
  vertical-align: middle !important;
}

#booking-table td {
  background-color: #111f16 !important;
  /* slightly lighter dark green for body rows */
  color: #e0e0e0 !important;
  /* light grey text matching the image */
  padding: 14px 16px !important;
  border-bottom: 1px solid #1a3a2a !important;
  border-right: 1px solid #1a3a2a !important;
  /* subtle dark green borders between cells */
  vertical-align: middle !important;
}

/* Zebra striping - alternating row colors */
#booking-table tbody tr:nth-child(even) td {
  background-color: #0d1a10 !important;
  /* slightly darker green for even rows */
}

/* Hover effect */
#booking-table tbody tr:hover td {
  background-color: #162b1e !important;
  /* slightly lighter on hover */
  transition: background-color 0.2s ease;
}

/* Company Column */
#booking-table .company-cell {
  background-color: #111f16 !important;
  padding: 8px 12px !important;
}

/* Company Button */
#booking-table .company-btn {
  background-color: #1a3a2a !important;
  /* dark green button matching theme */
  color: #4caf7d !important;
  /* bright green text */
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border: 1px solid #4caf7d !important;
  /* green border around button */
  border-radius: 4px !important;
  padding: 5px 12px !important;
  display: inline-block !important;
  text-align: center !important;
  transition: all 0.2s ease;
  cursor: default;
}

#booking-table .company-btn:hover {
  background-color: #4caf7d !important;
  color: #0d1f14 !important;
  /* inverts colors on hover for a slick effect */
}

/* Booking Code Badge */
#booking-table .booking-code-badge {
  background-color: #1a3a2a !important;
  color: #4caf7d !important;
  /* green text on dark green background matching tip buttons in image */
  font-family: "Courier New", monospace !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  border: 1px solid #4caf7d !important;
  /* green border matching the tip buttons in the image */
  display: inline-block !important;
}

/* Odds Value */
.odds-value {
  color: #f0a500 !important;
  /* golden yellow for odds exactly matching the image */
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}

/* Date Cell */
#booking-table td:first-child {
  color: #a0b8a8 !important;
  /* slightly muted green-grey for dates matching the image */
  font-size: 0.8rem !important;
}

/* Pagination matching dark theme */
.pagination .page-link {
  background-color: #0d1f14 !important;
  color: #4caf7d !important;
  border: 1px solid #1a3a2a !important;
  margin: 0 2px;
  border-radius: 4px !important;
  font-weight: 500;
}

.pagination .page-item.active .page-link {
  background-color: #4caf7d !important;
  color: #0d1f14 !important;
  border-color: #4caf7d !important;
  font-weight: 700;
}

.pagination .page-link:hover {
  background-color: #1a3a2a !important;
  color: #4caf7d !important;
  border-color: #4caf7d !important;
}

/* Pagination */

/* Pagination */
.pagination .page-link {
  color: #4caf7d !important;
  /* dark navy matching site theme */
  border: 1.5px solid #1a1a2e !important;
  margin: 0 2px;
  border-radius: 6px !important;
  /* rounded page buttons */
  font-weight: 500;
}

.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #4caf7d 0%, #4caf7d 100%) !important;
  /* dark navy gradient for active page matching table header */
  color: #ffffff !important;
  border-color: #1a1a2e !important;
}

/* HERO BUTTON */
.hero-btn {
  background-color: #e0f5c8;
}