/* ===================================
   FINAL UI FIXES - PRIORITY OVERRIDE
   =================================== */

/* Fix Layout Alignment - CENTER ALL ELEMENTS */
@media (min-width: 768px) {
    .hero-content {
        text-align: center !important;
        align-items: center !important;
    }

    .hero-social-share {
        margin: 1.5rem auto 0 !important;
        justify-content: center !important;
        max-width: 100% !important;
    }

    #locateMeBtn {
        margin-left: auto !important;
        margin-right: auto !important;
        /* margin-top: 3rem is set below - don't override it */
    }
}

@media (max-width: 767px) {
    .hero-content {
        text-align: center !important;
        align-items: center !important;
    }

    .hero-social-share {
        margin: 1.5rem auto 0 !important;
        justify-content: center !important;
    }
}

/* Premium Locate Me Button - Removed to allow modern-ui.css 3D styles */
/* The 3D capsule effect is now defined in modern-ui.css */

/* 1. Address Alignment Fix (Force Left) */
.detail-address-full {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
}

.detail-address-full .detail-label {
    margin-right: 0.5rem !important;
    white-space: nowrap !important;
}

.detail-address-full .detail-val {
    text-align: left !important;
    flex: 1 !important;
}

/* 2. Trending Searches Layout (Equal Columns) */
.trending-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
}

@media (min-width: 768px) {
    .trending-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

.trending-category {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* 3. Trending Heading Gradient */
.trending-heading {
    background: linear-gradient(90deg, #d946ef 0%, #f43f5e 50%, #f97316 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 800 !important;
    display: inline-block !important;
    width: fit-content !important;
}


/* ===================================
   Chip Styling - MOVED
   Styles moved to: assets/css/components/chips.css
   =================================== */


/* ===================================
   5. Fix Stats Location (User Request)
   =================================== */
.hero-content {
    display: flex !important;
    flex-direction: column !important;
    /* align-items is set above for responsiveness */
}

/* Ensure proper spacing between share and stats */
.stats-grid {
    margin-top: 3rem !important;
    width: 100% !important;
    justify-content: center !important;
}

/* For desktop, if we want it centered or left?
   User asked to move items BELOW share.
   Share is left-aligned on desktop in final-fixes.
   So stats should probably align left too, or center if full width?
   Standard stats usually look best centered or filling width.
   Let's keep default grid behavior but ensure it breaks to new line.
*/

/* ===================================
   6. Search Bar to Location Button Gap (Permanent Fix)
   =================================== */
/* Ensure consistent 3rem gap between search bar and "Use My Location" button */
.search-box-wrapper .locate-me-btn {
    margin-top: 1rem !important;
}