/* /Styles/listings.css */

/* Optional: Import base variables/resets if desired */
 @import url('/Styles/index.css'); 
/* OR Define necessary variables directly */
:root {
    --yelp-red: #d32323;
    --yelp-dark: #333;
    --yelp-light: #f5f5f5;
    --border-light: #eee;
    --border-medium: #ccc;
    --success-green: #2e7d32;
    --success-light: #e8f5e9;
    --error-red: #d32f2f;
    --error-light: #ffebee;
    --star-gold: #ffc107;
    --warning-orange: #ff9800; /* For badges */
}

/* --- Page Container --- */
.listings-page-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 15px;
}

.listings-page-container h1 {
    text-align: center;
    color: var(--yelp-dark);
    margin-bottom: 30px;
    font-size: 2rem;
}

/* --- Controls Section --- */
.controls-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 30px;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 180px;
}
.filter-group.search-group {
    flex-grow: 2;
    min-width: 250px;
}

.filter-group label {
    font-size: 0.9rem;
    font-weight: bold;
    color: #555;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.filter-group label i {
    color: var(--yelp-red);
}

/* Apply consistent form control styles */
.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
    background-color: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus {
     outline: none;
     border-color: var(--yelp-red);
     box-shadow: 0 0 0 3px rgba(211, 35, 35, 0.15);
}
select.form-control {
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 12px 12px;
     padding-right: 40px;
     cursor: pointer;
}


/* --- Buttons (General & Specific) --- */
.btn {
     /* Define base button styles here if not importing from index.css */
     display: inline-block;
     background: var(--yelp-red);
     color: white;
     border: none;
     padding: 10px 20px;
     border-radius: 4px;
     cursor: pointer;
     font-weight: bold;
     font-size: 1rem;
     transition: background 0.3s ease;
     text-decoration: none;
     text-align: center;
     line-height: 1.4; /* Adjust line height for consistency */
}
.btn:hover { background: #b71c1c; }

.btn-secondary {
     background-color: white;
     color: var(--yelp-red);
     border: 1px solid var(--yelp-red);
}
.btn-secondary:hover {
     background-color: var(--yelp-light);
     color: var(--yelp-red); /* Ensure color stays on hover */
}

.btn-small {
    padding: 6px 14px;
    font-size: 0.85rem;
}

.btn-details {
    /* Uses .btn and .btn-small */
    background-color: var(--yelp-red);
    color: white;
}
.btn-details:hover {
    background-color: #b71c1c;
    color: white;
}

/* Reset button specific adjustments */
.filter-group #reset-filters-button {
    padding: 10px 20px; /* Match input padding */
    height: 42.5px; /* Match input height */
    font-size: 0.95rem;
    flex-grow: 0;
    min-width: auto;
    /* Uses .btn and .btn-secondary styles */
}


/* --- Listings Grid Section --- */
.listings-grid-section {
    margin-top: 30px; /* Space above grid */
}

/* Business Grid Layout */
.business-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px; /* Increased gap */
}

/* Business Card Styling */
.business-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-light); /* Subtle border */
}
.business-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.business-img {
    height: 170px; /* Adjusted height */
    background-size: cover;
    background-position: center;
    background-color: var(--yelp-light); /* Fallback color */
    position: relative; /* For badge positioning */
}

.business-info {
    padding: 15px;
    flex-grow: 1; /* Allows this section to grow */
    display: flex;
    flex-direction: column;
}

.business-name {
    color: var(--yelp-red);
    margin: 0 0 5px 0; /* Reduced margin */
    font-size: 1.2rem;
    font-weight: bold;
}

.business-rating {
    color: var(--star-gold);
    margin-bottom: 8px;
    font-size: 0.9rem;
    line-height: 1; /* Prevent extra space */
}
.business-rating .review-count {
    margin-left: 5px;
    font-size: 0.85em;
    color: #777;
}

.business-category {
     font-size: 0.8rem; /* Smaller category */
     color: #888;
     margin-bottom: 5px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
}

.business-location-summary {
     font-size: 0.9em;
     color: #555;
     margin-top: 5px;
     line-height: 1.4;
}

/* Badge on Image */
.business-img .list-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    padding: 3px 7px; /* Adjusted padding */
    font-size: 0.7rem; /* Adjusted size */
    background: var(--warning-orange);
    color: white;
    border-radius: 3px;
    font-weight: bold;
}

/* Card Actions (View Details Button Area) */
.card-actions {
    padding: 12px 15px;
    margin-top: auto; /* Pushes to bottom */
    text-align: center;
    border-top: 1px solid var(--border-light);
    background-color: #f9f9f9; /* Slight background tint */
}


/* --- Loading Spinner & Messages --- */
.loading-message,
.empty-section-message {
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-style: italic;
    width: 100%;
    grid-column: 1 / -1; /* Span grid columns */
}

.loading-spinner {
    display: block; /* Center spinner */
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: var(--yelp-red);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px auto; /* Center and add space below */
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.empty-section-message {
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 500; /* Slightly bolder */
    color: var(--yelp-dark);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .controls-section {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    .filter-group { min-width: 100%; }
    .filter-group.search-group { min-width: 100%; }
    .filter-group #reset-filters-button { width: 100%; margin-top: 5px; }

    .business-grid {
        grid-template-columns: 1fr; /* Single column */
    }
}