/* ============================================================
   Home Enhancements - Navbar, Cards, Utilities (mobile-first)
   ============================================================ */

/* Enhanced navbar */
.navbar-enhanced {
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    transition: all .25s ease;
    top: 0;
}

.navbar-enhanced.scrolled {
    background: rgba(255,255,255,.98);
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
}

.navbar-enhanced .navbar-brand {
    color: #333 !important;
    font-size: 1.3rem;
    font-weight: 700;
}

.navbar-enhanced .navbar-brand img,
.navbar-enhanced .navbar-logo,
.navbar-enhanced .site-logo {
    height: 48px !important;
    max-height: 48px !important;
    max-width: 180px !important;
    width: auto !important;
    object-fit: contain;
}

.navbar-enhanced .nav-link {
    color: #374151 !important;
    font-weight: 500;
    padding: .5rem .75rem;
    transition: color .2s ease;
    font-size: .9rem;
}

.navbar-enhanced .nav-link:hover {
    color: #667eea !important;
}

.navbar-enhanced .btn-gradient {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    color: white;
    padding: .45rem 1.2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: .88rem;
    transition: all .2s ease;
}

.navbar-enhanced .btn-gradient:hover {
    box-shadow: 0 3px 10px rgba(102,126,234,.3);
    color: white;
}

/* Mobile menu */
@media (max-width: 991px) {
    .navbar-enhanced .navbar-collapse {
        background: rgba(255,255,255,.99);
        border-radius: 10px;
        padding: .75rem;
        margin-top: .5rem;
        box-shadow: 0 8px 24px rgba(0,0,0,.1);
    }

    .navbar-enhanced .navbar-nav { padding: .25rem 0; }

    .navbar-enhanced .nav-link {
        padding: .65rem .85rem;
        border-radius: 8px;
        margin: .15rem 0;
    }

    .navbar-enhanced .nav-link:hover {
        background: rgba(102,126,234,.08);
    }

    .navbar-enhanced .navbar-brand img,
    .navbar-enhanced .navbar-logo,
    .navbar-enhanced .site-logo {
        height: 40px !important;
        max-height: 40px !important;
        max-width: 140px !important;
    }
}

/* Smooth scroll */
html { scroll-behavior: smooth; }
body { padding-top: 0; }

/* Hero gradient (legacy support) */
.hero-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
    margin-top: 0;
    padding-top: 80px;
}

.hero-gradient::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.08' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,133.3C960,128,1056,96,1152,90.7C1248,85,1344,107,1392,117.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom;
    background-size: cover;
}

/* Floating shapes (hidden on mobile, shown on desktop) */
.floating-shapes { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.shape { position: absolute; opacity: .08; }
.shape-1, .shape-2, .shape-3 { display: none; }

@media (min-width: 992px) {
    .shape-1, .shape-2, .shape-3 { display: block; }
    .shape-1 { width: 160px; height: 160px; background: #fff; border-radius: 50%; top: 10%; left: 5%; animation: floatShape 6s ease-in-out infinite; }
    .shape-2 { width: 120px; height: 120px; background: #fff; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; top: 60%; right: 10%; animation: floatShape 8s ease-in-out infinite reverse; }
    .shape-3 { width: 80px; height: 80px; background: #fff; border-radius: 50%; bottom: 20%; left: 15%; animation: floatShape 4s ease-in-out infinite; }
}
@keyframes floatShape { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }

/* Mobile responsive overrides */
@media (max-width: 768px) {
    .hero-gradient { min-height: auto; padding: 3.5rem 0; }
    .display-3 { font-size: 1.75rem; }
    .display-4 { font-size: 1.25rem; }
    .lead { font-size: .95rem; }
    .container { padding-left: 1rem; padding-right: 1rem; }
    .btn { min-height: 44px; padding: 10px 16px; }
}

@media (max-width: 480px) {
    .hero-gradient { padding: 2.5rem 0; }
    .row.g-3 > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

/* Enhanced card styles */
.category-card-enhanced:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(102,126,234,.15);
}

.category-icon-enhanced {
    width: 60px; height: 60px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: #fff;
    transition: transform .2s ease;
}

.category-card-enhanced:hover .category-icon-enhanced { transform: scale(1.06); }

.ad-card-enhanced {
    background: #fff; border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transition: all .2s ease;
    position: relative;
}

.ad-card-enhanced:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

.ad-card-enhanced .badge-urgent {
    position: absolute; top: 8px; right: 8px;
    background: #ef4444; color: #fff;
    padding: .35rem .75rem; border-radius: 16px;
    font-size: .75rem; font-weight: 600;
}

.stat-card-enhanced {
    background: #fff; border-radius: 12px;
    padding: 1.5rem; text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    transition: transform .2s ease;
    border: 1px solid #f0f0f0;
}

.stat-card-enhanced:hover { transform: translateY(-3px); }

.stat-number-enhanced {
    font-size: 2rem; font-weight: 700;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (min-width: 768px) { .stat-number-enhanced { font-size: 2.5rem; } }

/* Category cards */
.bg-gradient-light { background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%); }

.category-card-popular {
    display: block; text-align: center;
    padding: 1.5rem .8rem; background: #fff; border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    transition: all .15s ease;
    border: 1px solid #e5e7eb;
    position: relative; overflow: hidden;
}

.category-card-popular::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.category-card-popular:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    border-color: #667eea;
}

.category-icon-popular {
    width: 56px; height: 56px;
    margin: 0 auto .8rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #fff;
    transition: transform .15s ease;
}

.category-card-popular:hover .category-icon-popular { transform: scale(1.04); }

.category-stats { margin-top: .4rem; }

.category-card-standard {
    display: flex; align-items: center;
    padding: .8rem; background: #fff; border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    transition: all .15s ease;
    border: 1px solid #e5e7eb;
}

.category-card-standard:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,.07);
    border-color: #667eea;
}

.category-icon-standard {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, rgba(102,126,234,.1), rgba(118,75,162,.1));
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: #667eea;
    margin-right: .8rem; flex-shrink: 0;
    transition: all .15s ease;
}

.category-card-standard:hover .category-icon-standard {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
}

.category-info { flex: 1; min-width: 0; }
.category-info h6 { font-weight: 600; color: #333; margin-bottom: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.category-arrow { color: #667eea; opacity: 0; transform: translateX(-3px); transition: all .15s ease; }
.category-card-standard:hover .category-arrow { opacity: .7; transform: translateX(0); }

/* RTL categories */
[dir="rtl"] .category-card-standard { flex-direction: row-reverse; }
[dir="rtl"] .category-icon-standard { margin-right: 0; margin-left: .8rem; }
[dir="rtl"] .category-arrow { transform: translateX(3px); }
[dir="rtl"] .category-card-standard:hover .category-arrow { transform: translateX(0); }

/* Gradient button */
.btn-gradient {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none; color: #fff;
    padding: .7rem 1.5rem; border-radius: 50px;
    font-weight: 600; font-size: .9rem;
    transition: all .2s ease;
    position: relative; overflow: hidden;
    min-height: 44px;
}

.btn-gradient:hover {
    box-shadow: 0 6px 20px rgba(102,126,234,.35);
    color: #fff;
}

.btn-gradient::before {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transition: left .5s;
}

.btn-gradient:hover::before { left: 100%; }

/* Utility tags */
.trending-badge {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff; padding: .2rem .6rem;
    border-radius: 16px; font-size: .75rem; font-weight: 600;
}

.price-tag {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff; padding: .4rem .8rem;
    border-radius: 8px; font-weight: 600; display: inline-block;
}

.location-tag {
    background: #f3f4f6; color: #6b7280;
    padding: .2rem .6rem; border-radius: 16px; font-size: .85rem;
}

.quick-links {
    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
    border-radius: 12px; padding: 1.5rem; margin-top: 2rem;
}

.quick-link-item {
    display: flex; align-items: center;
    padding: .8rem; border-radius: 10px;
    transition: all .2s ease;
}

.quick-link-item:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.quick-link-icon {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; margin-right: .8rem; flex-shrink: 0;
}