/* Custom Icons for PlayPlayLah */

.custom-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.custom-icon-small {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
}

.custom-icon-large {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

/* Amenity badge icons */
.amenity-badge .custom-icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

/* Override icon backgrounds in playground amenity sections */
.d-flex.align-items-center.p-3.rounded .custom-icon,
.d-flex.align-items-center.p-3 .custom-icon,
.playground-amenity .custom-icon {
    background-color: #FFF7E4 !important;
    background: #FFF7E4 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
    border-radius: 8px !important;
    padding: 4px !important;
}

/* Additional specific targeting for amenity icons - apply cream background to ALL icons */
.custom-icon {
    background-color: #FFF7E4 !important;
    background: #FFF7E4 !important;
    border-radius: 6px !important;
    padding: 3px !important;
}

/* Make sure SVG icons have cream backgrounds */
.custom-icon svg,
.custom-icon img {
    background: #FFF7E4 !important;
    background-color: #FFF7E4 !important;
    border-radius: 4px !important;
}

/* Navigation icons */
.navbar-brand .custom-icon {
    width: 24px;
    height: 24px;
    margin-right: 6px;
}

/* Button icons */
.btn .custom-icon {
    width: 18px;
    height: 18px;
    margin-right: 5px;
}

/* Card header icons */
.card-title .custom-icon {
    width: 22px;
    height: 22px;
    margin-right: 6px;
}

/* Filter for making icons match theme colors */
.icon-green {
    filter: hue-rotate(90deg) saturate(1.5);
}

.icon-white {
    filter: brightness(0) invert(1);
}

.icon-muted {
    filter: grayscale(0.5) opacity(0.7);
}

/* Ensure active/selected navigation elements don't get muted */
.navbar-nav .nav-link.active .custom-icon,
.btn.active .custom-icon,
a.active .custom-icon {
    filter: none !important;
    opacity: 1 !important;
}