/* Global Resets & Basic Body Styling */
body {
    font-family: 'Roboto', 'Montserrat', sans-serif;
    margin: 0;
    background-color: #f0f0f0; /* Light grey background */
    color: #222; /* Default dark text color */
    line-height: 1.5; /* Improved readability */
}

.container {
    width: 90%;
    max-width: 1280px; /* Wider container */
    margin: 0 auto;
    padding: 0 15px;
}

/* Main Content Area */
.locator-main {
    padding: 30px 0 50px 0; /* Vertical padding for the main content block */
}

.page-title-section {
    text-align: center;
    margin-bottom: 30px;
}

.page-title-section h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.7em; /* Zudio-like title size */
    font-weight: 700; /* Bolder */
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0;
}

.filter-controls-section {
    background-color: #ffffff; /* White background for filter bar */
    padding: 25px 0;
    margin-bottom: 35px;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.search-controls {
    display: flex;
    gap: 25px;
    justify-content: center;
    align-items: center;
    max-width: 700px; /* Limit width of dropdowns container */
    margin: 0 auto;
}

.search-controls select {
    flex-grow: 1;
    padding: 12px 35px 12px 15px; /* Right padding for arrow space */
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    font-size: 0.95em;
    font-family: 'Montserrat', sans-serif;
    appearance: none; /* Remove default arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23555'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    cursor: pointer;
    min-width: 220px;
}
.search-controls select:disabled {
    background-color: #f8f8f8;
    cursor: not-allowed;
    opacity: 0.7;
}


/* Store Listing Area */
.store-listing-area {
    /* No specific background, inherits from body or parent */
}

.stores-area-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4em;
    font-weight: 700; /* Bolder */
    color: #000;
    text-align: center;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 30px;
    letter-spacing: 0.5px;
}

.store-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* Responsive columns */
    gap: 25px;
}

.store-item {
    background-color: #f7f7f7; /* Light grey for cards, Zudio uses even lighter or white */
    /* For a whiter card: background-color: #fff; */
    border: 1px solid #e0e0e0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 190px; /* Adjust based on typical content */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Subtle shadow */
}

.store-info {
    flex-grow: 1;
}

.store-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05em;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 10px;
}

.store-address-label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.75em;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.store-address-text {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9em;
    color: #555;
    line-height: 1.5;
    margin-bottom: 15px;
}

.store-actions {
    margin-top: auto; /* Push button to the bottom */
}

.more-details-btn {
    display: inline-block;
    background-color: #000000;
    color: #ffffff;
    padding: 10px 18px;
    text-decoration: none;
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0; /* Sharp corners */
    text-align: center;
    align-self: flex-start;
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.2s ease;
}
.more-details-btn:hover {
    background-color: #333;
}

.loading-message, .no-results-message {
    text-align: center;
    padding: 50px 20px;
    font-size: 1.1em;
    color: #666;
    grid-column: 1 / -1; /* Span all columns if grid is active */
}

/* Pagination */
.pagination {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0; /* Separator for pagination */
}
.pagination button {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px 15px;
    margin: 0 4px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 0.9em;
    font-family: 'Montserrat', sans-serif;
    color: #333;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pagination button:hover:not(:disabled) {
    background-color: #f0f0f0;
    border-color: #bbb;
}
.pagination button.active-page,
.pagination button:disabled {
    background-color: #000000;
    color: #ffffff;
    border-color: #000000;
    cursor: default;
}
.pagination span { /* For ellipsis */
    padding: 10px 5px;
    color: #555;
    display: inline-block;
    vertical-align: middle;
    font-size: 0.9em;
}

/* Responsive Adjustments */
@media (max-width: 992px) { /* Tablets */
    .store-items-grid {
        grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); /* Adjust min for 2 columns */
        gap: 20px;
    }
}

@media (max-width: 767px) { /* Mobile */
    .container {
        width: 95%;
    }
    .page-title-section h1 {
        font-size: 1.4em;
    }
    .search-controls {
        flex-direction: column;
        gap: 15px;
    }
    .search-controls select {
        width: 100%;
        min-width: auto;
    }
    .store-items-grid {
        grid-template-columns: 1fr; /* Single column */
        gap: 15px;
    }
    .stores-area-title {
        font-size: 1.2em;
    }
    .store-item {
        min-height: auto;
        padding: 15px;
    }
    .store-name {
        font-size: 1em;
    }
    .more-details-btn {
        padding: 9px 16px;
        font-size: 0.75em;
    }
}

/* ... (Keep all your existing styles from the previous "final" response) ... */

/* Main Site Header Styles */
.site-main-header {
    background-color: #000000; /* Black header background */
    color: #ffffff;
    padding: 15px 0;
    border-bottom: 1px solid #222; /* Darker border for the black header */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo .logo-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.8em; /* Large logo text */
    font-weight: 800; /* Very bold */
    color: #ffffff;
    text-decoration: none;
    letter-spacing: -1px; /* Slightly tighter letter spacing */
}
/* If using an image for logo:
.logo img {
    max-height: 45px; // Adjust as needed
}
*/

.main-navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-navigation ul li {
    margin-left: 30px; /* Spacing between nav items */
}

.main-navigation ul li a {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 500;
    text-transform: uppercase; /* Zudio nav items are often uppercase */
    letter-spacing: 0.5px;
    padding: 5px 0;
    transition: color 0.2s ease;
}

.main-navigation ul li a:hover {
    color: #cccccc; /* Lighter grey on hover */
}

/* Breadcrumb Section Styles */
.breadcrumb-section {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9em;
    color: #555;
    padding: 15px 0; /* Add padding to the breadcrumb itself */
    margin-bottom: 10px; /* Space below breadcrumbs */
    /* border-bottom: 1px solid #e0e0e0; /* Optional separator line */
}

.breadcrumb-section a {
    color: #337ab7; /* Standard link blue, or Zudio's accent color */
    text-decoration: none;
}

.breadcrumb-section a:hover {
    text-decoration: underline;
}

.breadcrumb-section span {
    color: #333; /* Current page in breadcrumb is often darker */
}

/* Adjustments to Page Title Section if needed due to breadcrumbs */
.page-title-section {
    text-align: center;
    margin-bottom: 30px; /* Keep or adjust this margin */
}

.page-title-section h2 { /* For "STORE LOCATOR" */
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5em;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px; /* Space between the two titles */
}

.page-title-section h1 { /* For "FIND THE ZUDIO STORE..." */
    font-family: 'Montserrat', sans-serif;
    font-size: 1.7em;
    font-weight: 500; /* Original was 700, Zudio's seems a bit lighter */
    color: #000; /* Or #222 */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

/* Responsive Adjustments for Header & Breadcrumbs */
@media (max-width: 767px) {
    .header-container {
        flex-direction: column; /* Stack logo and nav on mobile */
        gap: 15px;
    }
    .main-navigation ul {
        justify-content: center; /* Center nav items when stacked */
        flex-wrap: wrap; /* Allow nav items to wrap */
        gap: 10px; /* Gap between wrapped items */
    }
    .main-navigation ul li {
        margin-left: 15px; /* Adjust spacing for mobile nav */
        margin-right: 15px;
    }
    .logo .logo-text {
        font-size: 2.2em; /* Slightly smaller logo on mobile */
    }
    .breadcrumb-section {
        padding: 10px 0;
        font-size: 0.85em;
    }
    .page-title-section h2 {
        font-size: 1.3em;
    }
    .page-title-section h1 {
        font-size: 1.4em;
    }
}

/* ... (Rest of your existing CSS for .filter-controls-section, .store-listing-area, etc.) ... */

/* ... (Keep all your existing styles from the previous "final" response) ... */

/* Main Site Footer Styles */
.site-main-footer {
    background-color: #000000; /* Black footer background */
    color: #ffffff;
    padding: 40px 0; /* Ample padding */
    font-family: 'Montserrat', sans-serif; /* Consistent font */
    font-size: 0.9em; /* Base font size for footer */
    line-height: 1.6;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
    gap: 20px; /* Gap between columns when they wrap */
}

.footer-column {
    flex: 1; /* Allow columns to share space */
    min-width: 280px; /* Minimum width before wrapping */
}

.footer-left p {
    margin-top: 0;
    margin-bottom: 12px;
}

.footer-copyright {
    font-weight: 500;
    letter-spacing: 0.5px;
}

.footer-tagline {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-social {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-social a {
    color: #ffffff;
    text-decoration: none;
    font-weight: normal; /* Social handles might not be uppercase/bold */
    text-transform: none;
    display: inline-flex; /* Align icon and text nicely */
    align-items: center;
    margin-left: 5px; /* Space after "FOLLOW US" or comma */
}

.footer-social a:hover {
    text-decoration: underline;
}

.social-icon {
    width: 18px; /* Adjust icon size as needed */
    height: 18px;
    margin-right: 6px;
    vertical-align: middle; /* Better alignment if not using flex */
    /* If using SVGs, you might want to set fill: currentColor; via CSS if they are not inherently white */
}

.footer-right {
    text-align: left; /* Default, but can be right-aligned if preferred */
}

.footer-links {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links li a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.footer-links li a:hover {
    text-decoration: underline;
}

/* Responsive Adjustments for Footer */
@media (max-width: 767px) {
    .footer-container {
        flex-direction: column; /* Stack columns on mobile */
        text-align: center; /* Center text in columns on mobile */
    }
    .footer-column {
        min-width: 100%; /* Full width for columns */
        margin-bottom: 20px;
    }
    .footer-column:last-child {
        margin-bottom: 0;
    }
    .footer-right {
        text-align: center; /* Ensure right column links are centered too */
    }
    .footer-social a {
        margin-left: 3px; /* Reduce margin for stacked social links */
        margin-right: 3px;
    }
}


/* ... (Keep all your existing styles from index.php, header, footer, etc.) ... */

/* Store Detail Page Specific Styles */
.store-detail-page .breadcrumb-section {
    /* Styles from index.php breadcrumb can be reused or slightly adjusted */
    margin-bottom: 20px;
    font-size: 0.9em;
}

.selected-store-section {
    display: flex;
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
    gap: 30px; /* Gap between info column and map column */
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e0e0e0; /* Separator line */
}

.store-info-column {
    flex: 1; /* Takes available space, can be a fixed width too */
    min-width: 300px; /* Ensure it has some width before wrapping */
}

.store-info-column h1 { /* For selected store name */
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8em; /* Prominent store name */
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 15px;
}

.address-block {
    margin-bottom: 20px;
}

.address-title-label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9em;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    display: block; /* Make it block to sit above address */
    margin-bottom: 5px;
}

#selected-store-address {
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

#back-button {
    background-color: #000000;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85em;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    transition: background-color 0.2s ease;
}
#back-button:hover {
    background-color: #333;
}

.map-column {
    flex: 1.5; /* Give map more space, adjust ratio as needed */
    min-width: 300px; /* Ensure map has width */
    /* max-width: 60%; /* Optional max width for map */
}

.store-detail-map-canvas {
    width: 100%;
    height: 350px; /* Adjust height as desired */
    background-color: #e9e9e9; /* Placeholder while map loads */
    border: 1px solid #ccc;
}
.map-loading-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #777;
}


/* Google Reviews Section */
.reviews-section {
    margin-top: 30px; /* Space above reviews if they appear */
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e0e0e0; /* Separator line */
}
.reviews-section h2 { /* "Google Reviews" title */
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3em;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: left; /* Align to left, not centered */
}
#reviews-list {
    /* Max height and scroll for reviews if there are many */
    /* max-height: 400px; */
    /* overflow-y: auto; */
}
.review-card {
    border: 1px solid #e0e0e0;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #f9f9f9;
    border-radius: 3px;
}
.review-card .author { font-weight: bold; color: #333; }
.review-card .rating { color: #f5b300; /* Star color */ margin-left: 5px; }
.review-card .time { font-size: 0.85em; color: #777; margin-bottom: 5px; }
.review-card .text { font-size: 0.95em; color: #444; line-height: 1.5; white-space: pre-wrap; }
.review-card img { border-radius: 50%; margin-top: 8px; }


/* Other Stores Section */
.other-stores-section {
    margin-top: 30px; /* Space above "Other stores" list */
}
/* .stores-area-title for "OTHER STORES IN [CITY]" is reused from index.php styles */
/* .store-items-grid and .store-item styles are reused from index.php styles */
/* Ensure they are general enough or duplicate/prefix if needed */


/* Responsive Adjustments for Store Detail Page */
@media (max-width: 767px) {
    .selected-store-section {
        gap: 20px; /* Reduce gap on mobile */
    }
    .store-info-column, .map-column {
        flex-basis: 100%; /* Stack info and map on mobile */
    }
    .store-info-column h1 {
        font-size: 1.5em;
    }
    .store-detail-map-canvas {
        height: 280px; /* Adjust map height for mobile */
    }
    .reviews-section h2 {
        font-size: 1.2em;
    }
}