/* Image Fallback CSS - Fallback for missing images */

/* Fallback for missing images */
img[src*="404"],
img[src=""],
img:not([src]),
img[alt=""] {
    background: linear-gradient(135deg, #1B4D3E 0%, #B6935A 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 2rem !important;
    text-align: center !important;
    min-height: 150px !important;
    object-fit: cover !important;
    border-radius: 0.5rem !important;
}

/* Specific fallbacks for different card types */
.attraction-card img[src*="404"]::after,
.attraction-card img[src=""]::after,
.attraction-card img:not([src])::after {
    content: "🏛️";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: white;
    z-index: 1;
}

.guide-card img[src*="404"]::after,
.guide-card img[src=""]::after,
.guide-card img:not([src])::after {
    content: "👤";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: white;
    z-index: 1;
}

.restaurant-card img[src*="404"]::after,
.restaurant-card img[src=""]::after,
.restaurant-card img:not([src])::after {
    content: "🍽️";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: white;
    z-index: 1;
}

.trip-card img[src*="404"]::after,
.trip-card img[src=""]::after,
.trip-card img:not([src])::after {
    content: "🗺️";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: white;
    z-index: 1;
}

.hotel-card img[src*="404"]::after,
.hotel-card img[src=""]::after,
.hotel-card img:not([src])::after {
    content: "🏨";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: white;
    z-index: 1;
}

.bazaar-card img[src*="404"]::after,
.bazaar-card img[src=""]::after,
.bazaar-card img:not([src])::after {
    content: "🛍️";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: white;
    z-index: 1;
}

/* Generic fallback */
img[src*="404"]::after,
img[src=""]::after,
img:not([src])::after {
    content: "🖼️";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: white;
    z-index: 1;
}

/* Profile image fallbacks */
.profile-image img[src*="404"],
.profile-image img[src=""],
.profile-image img:not([src]) {
    background: linear-gradient(135deg, #1B4D3E 0%, #B6935A 100%) !important;
    border-radius: 50% !important;
    width: 100px !important;
    height: 100px !important;
}

.profile-image img[src*="404"]::after,
.profile-image img[src=""]::after,
.profile-image img:not([src])::after {
    content: "👤";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: white;
    z-index: 1;
}

/* Avatar fallbacks */
.avatar img[src*="404"],
.avatar img[src=""],
.avatar img:not([src]) {
    background: linear-gradient(135deg, #1B4D3E 0%, #B6935A 100%) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
}

.avatar img[src*="404"]::after,
.avatar img[src=""]::after,
.avatar img:not([src])::after {
    content: "👤";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    color: white;
    z-index: 1;
}

/* Logo fallbacks */
.logo img[src*="404"],
.logo img[src=""],
.logo img:not([src]) {
    background: linear-gradient(135deg, #1B4D3E 0%, #B6935A 100%) !important;
    border-radius: 0.5rem !important;
    width: 120px !important;
    height: 60px !important;
}

.logo img[src*="404"]::after,
.logo img[src=""]::after,
.logo img:not([src])::after {
    content: "🇸🇦";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: white;
    z-index: 1;
}

/* Hero section image fallbacks */
.hero img[src*="404"],
.hero img[src=""],
.hero img:not([src]) {
    background: linear-gradient(135deg, #1B4D3E 0%, #B6935A 100%) !important;
    width: 100% !important;
    height: 400px !important;
    object-fit: cover !important;
}

.hero img[src*="404"]::after,
.hero img[src=""]::after,
.hero img:not([src])::after {
    content: "🏜️";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: white;
    z-index: 1;
}

/* Gallery image fallbacks */
.gallery img[src*="404"],
.gallery img[src=""],
.gallery img:not([src]) {
    background: linear-gradient(135deg, #1B4D3E 0%, #B6935A 100%) !important;
    border-radius: 0.5rem !important;
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
}

.gallery img[src*="404"]::after,
.gallery img[src=""]::after,
.gallery img:not([src])::after {
    content: "📸";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: white;
    z-index: 1;
}

/* Make sure parent containers have relative positioning */
.attraction-card,
.guide-card,
.restaurant-card,
.trip-card,
.hotel-card,
.bazaar-card,
.profile-image,
.avatar,
.logo,
.hero,
.gallery {
    position: relative;
}

/* Loading state for images */
img[src*="loading"],
img[src*="placeholder"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: loading 1.5s infinite !important;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Error state for images */
img[src*="error"],
img[src*="broken"] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    text-align: center !important;
}

img[src*="error"]::after,
img[src*="broken"]::after {
    content: "❌";
    font-size: 2rem;
    color: white;
}