/**
 * Custom Icons for Stage Real Estate Theme
 * 
 * @package Stage_Real_Estate
 * @version 1.0.0
 */

/* ==========================================================================
   Icon Font Base
   ========================================================================== */
[class^="icon-"], [class*=" icon-"] {
    font-family: 'stage-icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Service Icons (Using Unicode symbols as fallback)
   ========================================================================== */
.icon-real-estate:before {
    content: "🏢";
    font-size: 2rem;
}

.icon-construction:before {
    content: "🏗️";
    font-size: 2rem;
}

.icon-interior:before {
    content: "🏠";
    font-size: 2rem;
}

.icon-decor:before {
    content: "🛋️";
    font-size: 2rem;
}

.icon-phone:before {
    content: "📞";
    font-size: 1rem;
}

.icon-email:before {
    content: "✉️";
    font-size: 1rem;
}

.icon-location:before {
    content: "📍";
    font-size: 1rem;
}

/* ==========================================================================
   Alternative SVG-based Icons
   ========================================================================== */
.service-icon.svg-icon {
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
}

.service-icon.real-estate-svg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2L2 7v10c0 5.55 3.84 9.05 9 9.93 5.16-.88 9-4.38 9-9.93V7l-10-5z'/%3E%3C/svg%3E");
}

.service-icon.construction-svg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13.75 7h-3.5c-.41 0-.75.34-.75.75s.34.75.75.75h3.5c.41 0 .75-.34.75-.75S14.16 7 13.75 7zM22 11v2h-1v8h-2v-8h-1v-2h4zM6 11v2H5v8H3v-8H2v-2h4z'/%3E%3C/svg%3E");
}

.service-icon.interior-svg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

.service-icon.decor-svg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 13c1.66 0 3-1.34 3-3S8.66 7 7 7s-3 1.34-3 3 1.34 3 3 3zm12-6h-8v7H3V6H1v11h2v3h2v-3h12v3h2v-3h2V6h-2V4z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Icon Animations
   ========================================================================== */
.service-icon {
    position: relative;
    overflow: hidden;
}

.service-icon::before {
    transition: transform 0.3s ease;
}

.service-card:hover .service-icon::before {
    transform: scale(1.1) rotate(5deg);
}

.service-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.service-card:hover .service-icon::after {
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   Contact Icons
   ========================================================================== */
.contact-info .icon-phone,
.contact-info .icon-email,
.footer-contact .icon-phone,
.footer-contact .icon-email,
.footer-contact .icon-location {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    vertical-align: middle;
}

/* RTL adjustments for icons */
html[dir="rtl"] .contact-info .icon-phone,
html[dir="rtl"] .contact-info .icon-email,
html[dir="rtl"] .footer-contact .icon-phone,
html[dir="rtl"] .footer-contact .icon-email,
html[dir="rtl"] .footer-contact .icon-location {
    margin-left: 0;
    margin-right: 8px;
}

/* ==========================================================================
   Responsive Icon Adjustments
   ========================================================================== */
@media (max-width: 768px) {
    .service-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .icon-real-estate:before,
    .icon-construction:before,
    .icon-interior:before,
    .icon-decor:before {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .service-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .icon-real-estate:before,
    .icon-construction:before,
    .icon-interior:before,
    .icon-decor:before {
        font-size: 1.2rem;
    }
}