/* Image Placeholder Styles */

/* Default business image placeholder */
.business-image-placeholder {
    position: relative;
    height: 200px;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.business-image-placeholder::before {
    content: "\F179"; /* Bootstrap icon code for Building */
    font-family: "bootstrap-icons";
    font-size: 3rem;
    color: #ccc;
}

.business-image-placeholder::after {
    content: "No Image";
    position: absolute;
    bottom: 20px;
    font-size: 0.8rem;
    color: #999;
}

/* Featured business image placeholder */
.business-image-placeholder.featured {
    background-color: #f0f3f7;
    border-bottom: 3px solid var(--bs-primary);
}

.business-image-placeholder.featured::before {
    color: #b8b8b8;
    font-size: 3.5rem;
}

/* Category image placeholder */
.category-image-placeholder {
    height: 64px;
    width: 64px;
    margin: 0 auto 15px;
    background-color: #f8f9fa;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-image-placeholder::before {
    content: "\F5FC"; /* Bootstrap icon code for grid */
    font-family: "bootstrap-icons";
    font-size: 1.5rem;
    color: #ccc;
}

/* City image placeholder */
.city-image-placeholder {
    height: 250px;
    background-color: #f8f9fa;
    background-image: linear-gradient(135deg, #f5f5f5 25%, #f0f0f0 25%, #f0f0f0 50%, #f5f5f5 50%, #f5f5f5 75%, #f0f0f0 75%, #f0f0f0 100%);
    background-size: 40px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.city-image-placeholder::before {
    content: "\F3E5"; /* Bootstrap icon code for buildings */
    font-family: "bootstrap-icons";
    font-size: 4rem;
    color: #ccc;
}

/* User/profile image placeholder */
.profile-image-placeholder {
    height: 100px;
    width: 100px;
    background-color: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-image-placeholder::before {
    content: "\F4E3"; /* Bootstrap icon code for person */
    font-family: "bootstrap-icons";
    font-size: 2.5rem;
    color: #ccc;
}

/* Small variant of business image placeholder */
.business-image-placeholder.small {
    height: 100px;
}

.business-image-placeholder.small::before {
    font-size: 2rem;
}

.business-image-placeholder.small::after {
    content: "";
}