/* ==========================================================================
   ECOMERCIO CENTRALIZED LAYOUT ENGINE
   File: /assets/css/custom-layout.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL CONTAINER & GRID ARCHITECTURE
   -------------------------------------------------------------------------- */
.eco-main-container-class {
    display: grid;
    grid-template-columns: 260px 1fr 260px; /* Left Sidebar | Main Content | Right Sidebar */
    gap: 25px;
    width: 100%;
    max-width: 1320px;  /* Matches dashboard-wrapper max-width for vertical alignment */
    margin: 0 auto;     /* Centered alignment */
    padding: 40px 20px; /* Horizontal padding matching header/dashboard */
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

/* 🛡️ STRICT GRID SAFETY RULES
   Prevents images, carousels, or long text strings from forcing grid columns to expand */
.eco-main-container-class > * {
    min-width: 0;
    max-width: 100%;
}

.eco-main-container-class img,
.eco-main-container-class iframe,
.eco-main-container-class .slick-slider,
.eco-main-container-class .owl-carousel,
.eco-main-container-class .swiper {
    max-width: 100% !important;
    height: auto !important;
}

/* --------------------------------------------------------------------------
   2. COLUMN WRAPPERS & LAYOUT FLEXIBILITY
   -------------------------------------------------------------------------- */
.home-sidebar-left, 
.detail-left-column, 
.home-sidebar-right, 
.detail-right-column { 
    display: flex; 
    flex-direction: column; 
    gap: 25px; 
}

.home-main-column, 
.detail-middle-column { 
    display: flex; 
    flex-direction: column; 
    gap: 25px; 
    min-width: 0; 
}

/* --------------------------------------------------------------------------
   3. SHARED UI WIDGETS & FORM COMPONENTS
   -------------------------------------------------------------------------- */
.widget-panel { 
    background: #ffffff; 
    border: 1px solid #eaeaea; 
    border-radius: 4px; 
    padding: 20px; 
    box-shadow: 0 1px 4px rgba(0,0,0,0.03); 
}

.widget-title { 
    font-size: 1.05rem; 
    font-weight: 700; 
    color: #111111; 
    margin-bottom: 15px; 
    border-bottom: 2px solid #ff5a5f; 
    padding-bottom: 6px; 
    display: inline-block; 
}

/* Search Form Elements */
.search-widget-form { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}

.search-widget-form input, 
.search-widget-form select { 
    width: 100%; 
    padding: 8px 12px; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    font-size: 0.85rem; 
    box-sizing: border-box;
}

.filter-group { 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
}

.filter-group label { 
    font-size: 0.8rem; 
    font-weight: 600; 
    color: #555555; 
}

.price-inputs { 
    display: flex; 
    gap: 8px; 
}

.price-inputs input { 
    width: 50% !important; 
}

/* Action Buttons */
.filter-btn { 
    width: 100%; 
    padding: 10px; 
    font-weight: 700; 
    border-radius: 4px; 
    border: none; 
    cursor: pointer; 
    font-size: 0.85rem; 
    margin-top: 5px; 
    transition: background 0.2s; 
}

.filter-btn:not(.reset) { 
    background: #ff0033; 
    color: #ffffff; 
}

.filter-btn:not(.reset):hover { 
    background: #cc0029; 
}

.filter-btn.reset { 
    background: #e9ecef; 
    color: #495057; 
    margin-top: 8px; 
}

.filter-btn.reset:hover { 
    background: #dee2e6; 
}

.masked-action-btn { 
    background: #f7f9fa; 
    border: 1px dashed #ced4da; 
    border-radius: 4px; 
    padding: 12px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    cursor: pointer; 
    text-decoration: none; 
    color: #333333; 
    transition: all 0.2s; 
    font-size: 0.9rem; 
}

.masked-action-btn:hover { 
    background: #ffffff; 
    border-color: #ff5a5f; 
}

.masked-icon-box { 
    width: 32px; 
    height: 32px; 
    border-radius: 4px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #ffffff; 
}

/* --------------------------------------------------------------------------
   4. MEDIA & GALLERY CONTAINMENT
   -------------------------------------------------------------------------- */
.main-image-container { 
    position: relative; 
    width: 100%; 
    max-height: 480px; 
    overflow: hidden; 
    border-radius: 4px; 
    border: 1px solid #eaeaea; 
    background: #fafafa; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.main-image-container img { 
    width: 100%; 
    height: auto; 
    max-height: 480px; 
    object-fit: contain; 
}

.gallery-thumbs { 
    display: flex; 
    gap: 0.5rem; 
    margin-top: 0.5rem; 
    overflow-x: auto; 
}

.thumb-item { 
    width: 70px; 
    height: 50px; 
    object-fit: cover; 
    border: 1px solid #eaeaea; 
    border-radius: 4px; 
    cursor: pointer; 
    opacity: 0.7; 
}

.thumb-item.active { 
    opacity: 1; 
    border-color: #ff5a5f; 
}

/* --------------------------------------------------------------------------
   5. AD CARD GRID LAYOUT (Home / Listings)
   -------------------------------------------------------------------------- */
.featured-ads-grid,
.regular-ads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    width: 100%;
    margin-top: 15px;
}

.ad-card {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ad-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   6. RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .eco-main-container-class { 
        grid-template-columns: 260px 1fr; /* Hides right sidebar on medium screens */
    }
    .home-sidebar-right, 
    .detail-right-column { 
        display: none; 
    }
}

@media (max-width: 992px) {
    .eco-main-container-class { 
        grid-template-columns: 1fr; /* Single column layout for tablets & mobile */
        padding: 20px 15px;
    }
    .home-sidebar-left, 
    .detail-left-column { 
        order: 2; 
    }
    .home-main-column, 
    .detail-middle-column { 
        order: 1; 
    }
}
/* ==========================================================================
   FLEXBOX & COLUMN BREAKOUT FIX
   ========================================================================== */

/* 1. Force Bootstrap row to stay flex and wrap correctly */
.container > .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* 2. Prevent any flex item from expanding beyond its col-lg allocation */
.container .col-lg-3,
.container .col-lg-6 {
    min-width: 0 !important; /* Critical for CSS flexbox with sliders/images */
}

/* 3. Contain carousel slider width so it doesn't push middle column wide */
#mainTopCarousel {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

#carouselTrack {
    display: flex !important;
    width: 100% !important;
}

#carouselTrack .carousel-slide {
    min-width: 100% !important;
    max-width: 100% !important;
}

#carouselTrack img {
    width: 100% !important;
    height: 280px !important;
    object-fit: cover !important;
}
/* ==========================================================================
   PAGE WIDTH ALIGNMENT (Matches dashboard.php)
   ========================================================================== */

/* Force all main layout containers to match dashboard's 1320px cap */
.container,
.eco-main-container-class {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
/* Ensure the navigation bar wrapper respects the 1320px alignment limit */
.main-navbar .container,
.main-content-wrapper {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Ensure form controls scale smoothly within columns */
.searchbar-wrapper .form-control,
.searchbar-wrapper .form-select {
    border-color: #e5e7eb;
}
/* ==========================================================================
   PROFESSIONAL MARKETPLACE STYLES
   ========================================================================== */

/* 1. Subtle overall background contrast */
body {
    background-color: #f8fafc !important; /* Soft Slate Tint */
}

/* 2. Professional Card Elevation */
.card-polished {
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease-in-out;
}

.card-polished:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04) !important;
    transform: translateY(-2px);
}

/* 3. Sticky Sidebars (Scrolls gracefully with page) */
@media (min-width: 992px) {
    .sticky-sidebar {
        position: sticky;
        top: 84px; /* Adjust based on navbar height */
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
}

/* 4. Custom scrollbars for clean sidebars */
.sticky-sidebar::-webkit-scrollbar {
    width: 4px;
}
.sticky-sidebar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}