/* --- Global / Base Styles --- */

/* Styles for a general reserve button/element */
.reserve {
    background-color: #ff6c00;
    color: #fff !important; /* !important should be used sparingly, but kept if truly necessary to override */
    width: 100%;
    max-width: 200px; /* Limits the width of the reserve element */
}

/* Styles for text that needs to wrap within a container */
.wrapped-text {
    width: 50%; /* Set the width to 50% of the parent container */
    margin: 0 auto; /* Center the element horizontally */
    word-wrap: break-word; /* Ensures long words break and wrap */
    /* overflow-wrap: break-word; is the modern equivalent, can be used for better browser support */
    padding: 10px; /* Optional: Add padding for visual spacing within the element */
    box-sizing: border-box; /* Includes padding in the element's total width */
}

/* Styles for Uikit-related links (assuming 'uk-link' is a Uikit class) */
/* Combine similar link styles for clarity */
a.uk-link-text,
.uk-link-text a,
.uk-link-toggle .uk-link-text,
a,
.uk-link {
    color: #fff; /* White color for all links by default */
    text-decoration: none; /* No underline by default */
    cursor: pointer; /* Indicates it's clickable */
}

/* Styles for link hovers */
a:hover,
.uk-link:hover,
.uk-link-toggle:hover .uk-link {
    color: #fff; /* Maintain white color on hover */
    text-decoration: underline; /* Add underline on hover */
}

/* Styles for search label */
.search_label {
    position: relative;
    z-index: 10; /* Ensures it's above other elements if positioned */
    color: black; /* Ensure it's visible against various backgrounds */
}



/* Base styles for all screen sizes (mobile-first approach) */
.location {
    font-size: 16px;
    padding-right: 10px;
    padding-left: 10px;
    line-height: 1.2; /* Ensures good vertical spacing for text */
}

#search_div {
    background-color: #fff;
    padding-bottom: 25px;
    padding-left: 15px;
    padding-right: 15px;
    max-width: 1200px; /* Prevents it from being too wide on large screens */
    margin-left: auto; /* Centers the div horizontally */
    margin-right: auto; /* Centers the div horizontally */
}

/* Small screens (e.g., mobile phones) */
@media (max-width: 600px) {
    .location {
        font-size: 14px; /* Slightly smaller font size for better fit */
        padding-right: 5px; /* Reduce padding for tighter spacing */
        padding-left: 5px;
    }

    #search_div {
        padding-bottom: 15px; /* Reduce vertical padding */
        padding-left: 10px; /* Reduce horizontal padding */
        padding-right: 10px;
    }
}

/* Medium screens (e.g., tablets) */
@media (min-width: 601px) and (max-width: 900px) {
    .location {
        font-size: 15px; /* Slightly adjust font size */
        padding-right: 8px;
        padding-left: 8px;
    }

    #search_div {
        padding-bottom: 20px;
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Large screens (e.g., desktops) - base styles often suffice, but can fine-tune here */
@media (min-width: 901px) {
    .location {
        font-size: 16px; /* Back to original size or slightly larger */
    }
    /* No significant changes needed for #search_div usually, unless you want more padding */
}

/* Very large screens (e.g., ultra-wide monitors) */
@media (min-width: 1201px) {
    #search_div {
        padding-left: 20px; /* Slightly more padding for very wide screens */
        padding-right: 20px;
    }
}