/* Basic styling for the small form on the homepage */
.quick-booking-form {
    max-width: -webkit-fill-available;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-row {
    margin-bottom: 15px;
}

.quick-booking-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.quick-booking-form input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Ensures padding doesn't widen the input */
}

#quick-book-btn {
    width: 100%;
    padding: 12px;
    background-color: #272727;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background-color 0.3s;
}

#quick-book-btn:hover {
    background-color: #000000;
}

/*
 * Target the main container for the Autocomplete dropdown.
 * This class is added by the Google Maps Places API.
 */


.pac-container {
    /* Critical Fix 1: Very high z-index on the container itself */
    z-index: 9999999 !important; 
    
    /* Critical Fix 2: Sometimes, 'position: fixed' is required on mobile to float correctly */
    position: absolute !important; 
    
    /* Ensure other styles for appearance are also high-specificity */
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Fix 3: Also target the overlay, if one exists (like Google’s built-in overlay) */
/* This is a less common fix but good for stubborn cases */
.pac-overlay {
    z-index: 9999998 !important; 
}

/* Remove the border from the very last item */
.pac-item:last-child {
    border-bottom: none;
}

/*
 * Highlight the item the user hovers over or navigates to with the keyboard
 */
.pac-item:hover,
.pac-item-selected {
    background-color: #f5f5f5; /* Light gray background */
}
.pac-item-selected {
    /* Optional: Use a brand color for text when selected */
    color: #333; 
    font-weight: 500;
}

/*
 * Style the main part of the suggestion text (e.g., "JFK Airport")
 */
.pac-item-query {
    /* Make the main text slightly darker and bolder */
    color: #333;
    font-weight: 600;
    margin-right: 5px;
}

/*
 * Style the secondary details (e.g., ", New York")
 */
.pac-matched {
    color: #666;
    font-weight: 400;
}


/*
 * 1. Hide the default Google Maps icon
 */
.pac-icon {
    display: none !important; /* FORCED HIDING */
    visibility: hidden !important;
}



/* KEEP and adjust this block for custom icon layout */
.pac-item {
    display: flex !important; /* FORCED FLEX */
    align-items: center !important; 
    /* ... keep other styles here, like padding, border, etc. ... */
}

/*
 * 3. Use the ::before pseudo-element to inject a Font Awesome icon
 * This relies on the Font Awesome library being loaded on the page.
 */
.pac-item::before {
    /* Font Awesome properties */
    font-family: 'FontAwesome';
    content: "\f041"; /* Unicode for fa-map-marker (or use \f04b for fa-map-pin) */
    
    /* Styling for your custom icon */
    color: #272727; /* Your brand color */
    font-size: 1.1em;
    margin-right: 10px; /* Spacing between icon and text */
    width: 20px; /* Give it a fixed width for alignment */
    text-align: center;
}

/* Optional: Style the primary text to ensure it takes up the rest of the space */
.pac-item-query {
    flex-grow: 1; 
    font-weight: 600;
}


/* Use your brand colors for selection and hover */
.pac-item:hover {
    background-color: #FFF8EE; /* A very light tint of your gold/brown */
}

/* Highlight the selected item with a subtle border or background */
.pac-item-selected {
    background-color: #FFF8EE; 
    border-left: 3px solid #C39951; /* Add a branded left border */
    padding-left: 9px; /* Adjust padding to make room for the border */
}

/* Styling the footer/attribution area to fit your design */
.pac-container .pac-footer {
    /* Set a clean background that matches your container */
 overflow: visible;
}

.pac-container:after {
    /* Disclaimer: not needed to show 'powered by Google' if also a Google Map is shown */

    background-image: none !important;
    height: 0px;
}

  /* Custom Class Name for the Container */
.mainDiv {

    /* max-w-4xl */
    max-width: 56rem; /* Equivalent to 896px */

    /* mx-auto */
    margin-left: auto;
    margin-right: auto;

    /* p-4 */
    padding: 1rem;

    /* bg-white */
    background-color: #ffffff;

    /* shadow-xl */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* rounded-lg */
    border-radius: 0.5rem;

    /* font-sans */
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* md:p-8 */
@media (min-width: 768px) {
    .mainDiv {
        padding: 2rem;
    }
}


/* style.css */

.no-scroll {
    overflow: hidden;
}

.toptabDiv {
    /* flex */
    display: flex;

    /* border-b */
    border-bottom: 1px solid #e5e7eb; /* Default border color (gray-200 or gray-300 often used) */
    
    /* mb-6 */
    margin-bottom: 1.5rem; /* Equivalent to 24px */

    /* justify-center */
    justify-content: center; /* Horizontally centers the items inside the flex container */
}

/* Custom Colors defined in the main CSS file */
:root {
    --color-brand-primary: #C39951;
}

/* Style for ALL tab buttons */
.tab-button {
    padding-top: 0.5rem;   /* py-2 */
    padding-bottom: 0.5rem; /* py-2 */
    padding-left: 1rem;    /* px-4 */
    padding-right: 1rem;   /* px-4 */
    font-size: 0.875rem;   /* text-sm */
    font-weight: 600;      /* font-semibold */
    cursor: pointer;       /* cursor-pointer */
    outline: 2px solid transparent; /* focus:outline-none */
    outline-offset: 2px;    /* focus:outline-none */
    background-color: transparent !important; /* !bg-transparent */
    color: #6b7280; /* default text-gray-500 */
    transition: all 150ms ease-in-out;
    border: 0px solid transparent;
}

/* Media Query for larger screens (md: prefix) */
@media (min-width: 768px) {
    .tab-button {
        font-size: 1rem; /* md:text-base */
    }
}

/* Specific styles for the ACTIVE tab */
.tab-button.active {
    /* !border-b-2 !border-[#C39951] */
    border-bottom-width: 2px !important;
    border-color: #C39951 !important; 
    border-radius: none;
    
    /* !text-[#C39951] */
    color: #C39951 !important;
}


.tab-button:hover {
    color: #C39951;      /* hover:text-[#C39951] */
    border-color: #C39951; /* hover:border-[#C39951] */
}