/* Define the new color palette as CSS variables for easy reuse */
:root {
  --app-golf-green: #7AC142;
  --app-dark-grey: #333333;
  --app-accent-red: #E74C3C;
  --app-off-white: #f8f9fa;

  /* Override Bootstrap's default theme colors */
  --bs-primary: var(--app-golf-green);
  --bs-primary-rgb: 122, 193, 66;
  --bs-danger: var(--app-accent-red);
  --bs-danger-rgb: 231, 76, 60;
  --bs-body-color: var(--app-dark-grey);
  --bs-body-bg: var(--app-off-white);
}

/* Use a more modern, clean font if available on the user's system */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Add some padding to the main content area */
main {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* Style default links to use the new primary color */
a {
  color: var(--app-golf-green);
  text-decoration: none;
}

a:hover {
  color: var(--app-dark-grey);
  text-decoration: underline;
}

/* Override Bootstrap's primary button color */
.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--app-golf-green);
  --bs-btn-border-color: var(--app-golf-green);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #69ac35; /* A slightly darker green for hover */
  --bs-btn-hover-border-color: #619b2e;
}

/* Style the homepage hero section */
.hero-section {
    background-color: #eef7e8; /* A very light, soft version of our green */
    border: 1px solid #dceecb;
}

/* Style the footer */
.footer {
  background-color: var(--app-dark-grey);
  color: white;
}

.footer a {
    color: #f8f9fa; /* Lighter text for footer links */
}

.footer a:hover {
    color: white;
}

/* --- New Styles for Booking Page Layout --- */

/* This will be the main container for our two columns */
.booking-layout-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* Align items to the top */
    gap: 2rem; /* Creates a nice space between the columns */
}

/* This is the main, scrollable column for tee times */
.booking-layout-main {
    flex: 1; /* Allows this column to grow and take up available space */
}

/* This is the sticky side panel for preferences */
.booking-layout-sidebar {
    width: 380px; /* Give the sidebar a fixed width */
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 1.5rem; /* The distance from the top of the viewport to stick to */
}

/* --- Responsive Handling for Mobile --- */
/* On medium screens and smaller (like tablets and phones) */
@media (max-width: 992px) {
    .booking-layout-container {
        /* Revert to a standard vertical layout */
        flex-direction: column;
    }

    .booking-layout-sidebar {
        /* The sidebar no longer needs a fixed width and is not sticky */
        width: 100%;
        position: static;
        margin-top: 2rem; /* Add some space above it when it stacks */
    }
}