/* ===================================================================
   BJ-Deal Global Responsive Fixes
   ===================================================================
   
   This file contains global responsive fixes that apply across the 
   entire website. It addresses:
   
   1. Container full width on tablets (sm breakpoint)
   2. Pagination SVG icons sizing
   3. Vertical ad cards max-width and grid layout on tablets
   
   Bootstrap 5 Breakpoints Reference:
   - xs: < 576px
   - sm: >= 576px and < 768px (TABLET)
   - md: >= 768px and < 992px
   - lg: >= 992px and < 1200px
   - xl: >= 1200px and < 1400px
   - xxl: >= 1400px
   
   =================================================================== */

:root {
    /* Responsive Constants */
    --bjd-container-tablet-padding: 0.75rem;
    --bjd-pagination-icon-size: 0.75rem;
    --bjd-ad-card-max-width-tablet: 320px;
    --bjd-ad-card-max-width-desktop: 380px;
    --bjd-ad-card-max-width-xl: 400px;
}

/* ===================================================================
   1. CONTAINER FULL WIDTH ON TABLETS (sm breakpoint)
   ===================================================================
   
   Makes containers full width on tablet devices (576px - 767px)
   to match the ad details page behavior.
   
   =================================================================== */

/* Tablet (sm breakpoint): Full width container */
@media (min-width: 576px) and (max-width: 767.98px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-fluid {
        max-width: 100% !important;
        padding-left: var(--bjd-container-tablet-padding) !important;
        padding-right: var(--bjd-container-tablet-padding) !important;
    }
}

/* ===================================================================
   2. PAGINATION SVG ICONS SIZING
   ===================================================================
   
   Fixes oversized SVG icons in pagination navigation across the site.
   These styles apply globally to all pagination components.
   
   =================================================================== */

/* Base pagination SVG styling - comprehensive selectors */
.pagination svg,
.pagination .page-item svg,
.pagination .page-link svg,
.pagination li svg,
.pagination a svg,
.pagination span svg,
nav[aria-label*="pagination"] svg,
nav[aria-label*="Pagination"] svg,
nav[aria-label*="PAGINATION"] svg,
.pagination-wrapper svg,
ul.pagination svg,
ul.pagination .page-item svg,
ul.pagination .page-link svg,
nav .pagination svg,
nav .pagination .page-item svg,
nav .pagination .page-link svg {
    width: var(--bjd-pagination-icon-size) !important;
    height: var(--bjd-pagination-icon-size) !important;
    max-width: var(--bjd-pagination-icon-size) !important;
    max-height: var(--bjd-pagination-icon-size) !important;
    min-width: var(--bjd-pagination-icon-size) !important;
    min-height: var(--bjd-pagination-icon-size) !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Ensure SVG paths and children inherit sizing */
.pagination svg *,
.pagination .page-link svg *,
.pagination .page-item svg *,
.pagination-wrapper svg *,
nav[aria-label*="pagination"] svg * {
    max-width: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
}

/* Force SVG viewBox scaling */
.pagination svg[viewBox],
.pagination .page-item svg[viewBox],
.pagination .page-link svg[viewBox],
.pagination-wrapper svg[viewBox],
nav[aria-label*="pagination"] svg[viewBox] {
    width: var(--bjd-pagination-icon-size) !important;
    height: var(--bjd-pagination-icon-size) !important;
    max-width: var(--bjd-pagination-icon-size) !important;
    max-height: var(--bjd-pagination-icon-size) !important;
}

/* Page link alignment for icons */
.pagination .page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    line-height: 1.5 !important;
}

/* Previous/Next buttons spacing */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    padding: 0.375rem 0.75rem !important;
}

/* Pagination wrapper styling (brand colors) */
.pagination {
    --bs-pagination-color: #495057;
    --bs-pagination-bg: #fff;
    --bs-pagination-border-color: #dee2e6;
    --bs-pagination-hover-color: #dd5500;
    --bs-pagination-hover-bg: #fff3e0;
    --bs-pagination-hover-border-color: #dd5500;
    --bs-pagination-focus-color: #dd5500;
    --bs-pagination-focus-bg: #fff3e0;
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #dd5500;
    --bs-pagination-active-border-color: #dd5500;
    --bs-pagination-disabled-color: #6c757d;
    --bs-pagination-disabled-bg: #fff;
    --bs-pagination-disabled-border-color: #dee2e6;
}

/* Page link border radius */
.pagination .page-link {
    border-radius: 0.375rem;
    margin: 0 0.125rem;
    transition: all 0.2s ease;
}

/* Responsive pagination adjustments */
@media (max-width: 575.98px) {
    .pagination .page-link {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.875rem !important;
    }
    
    .pagination svg,
    .pagination .page-item svg,
    .pagination .page-link svg,
    .pagination li svg,
    .pagination a svg,
    .pagination span svg,
    nav[aria-label*="pagination"] svg,
    .pagination-wrapper svg {
        width: 0.625rem !important;
        height: 0.625rem !important;
        max-width: 0.625rem !important;
        max-height: 0.625rem !important;
        min-width: 0.625rem !important;
        min-height: 0.625rem !important;
    }
}

/* ===================================================================
   3. VERTICAL AD CARDS - TABLET RESPONSIVE FIXES
   ===================================================================
   
   Ensures vertical ad cards:
   - Have the same max-width as on the user dashboard
   - Display at least 2 per row on tablets (sm breakpoint)
   
   =================================================================== */

/* Vertical ad cards max-width constraint */
.collector-vertical-card {
    max-width: 100%;
}

/* Tablet (sm breakpoint): 2 cards per row with max-width */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Force 2 cards per row on tablets */
    #adsCollectorResults.row > .col-12,
    #adsCollectorResults.row > .col-md-6,
    #adsCollectorResults.row > .col-xl-4,
    #adsCollectorResults.row > [class*="col-"] {
        flex: 0 0 calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
        width: calc(50% - 0.5rem) !important;
    }
    
    /* Apply max-width to vertical cards on tablets */
    .collector-vertical-card {
        max-width: var(--bjd-ad-card-max-width-tablet) !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Boosted sidebar vertical cards */
    .boosted-sidebar .collector-vertical-card {
        max-width: 100% !important;
    }
    
    /* Dashboard ad cards */
    .dashboard-ad-card-vertical,
    [class*="dashboard-ad-card"].collector-vertical-card {
        max-width: var(--bjd-ad-card-max-width-tablet) !important;
    }
}

/* Medium screens (md breakpoint): 2 cards per row */
@media (min-width: 768px) and (max-width: 991.98px) {
    #adsCollectorResults.row > .col-12,
    #adsCollectorResults.row > .col-md-6,
    #adsCollectorResults.row > .col-xl-4,
    #adsCollectorResults.row > [class*="col-"] {
        flex: 0 0 calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
    }
    
    .collector-vertical-card {
        max-width: var(--bjd-ad-card-max-width-tablet) !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Large screens (lg breakpoint): Constrained max-width */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .collector-vertical-card {
        max-width: var(--bjd-ad-card-max-width-desktop) !important;
    }
}

/* Extra large screens (xl breakpoint and above) */
@media (min-width: 1200px) {
    .collector-vertical-card {
        max-width: var(--bjd-ad-card-max-width-desktop) !important;
    }
    
    #adsCollectorResults.row > .col-12,
    #adsCollectorResults.row > .col-md-6,
    #adsCollectorResults.row > .col-xl-4 {
        flex: 0 0 auto !important;
        width: var(--bjd-ad-card-max-width-desktop) !important;
        max-width: var(--bjd-ad-card-max-width-desktop) !important;
    }
}

@media (min-width: 1400px) {
    .collector-vertical-card {
        max-width: var(--bjd-ad-card-max-width-xl) !important;
    }
    
    #adsCollectorResults.row > .col-12,
    #adsCollectorResults.row > .col-md-6,
    #adsCollectorResults.row > .col-xl-4 {
        width: var(--bjd-ad-card-max-width-xl) !important;
        max-width: var(--bjd-ad-card-max-width-xl) !important;
    }
}

/* ===================================================================
   4. AD CARD COMPONENT (x-ads.card) RESPONSIVE FIXES
   ===================================================================
   
   These styles apply to the reusable ad card component used in
   sidebars and other locations.
   
   =================================================================== */

/* Tablet: Ensure ad cards in flex containers respect max-width */
@media (min-width: 576px) and (max-width: 767.98px) {
    .d-flex.flex-column .collector-vertical-card {
        max-width: var(--bjd-ad-card-max-width-tablet) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ===================================================================
   5. DASHBOARD AD CARDS RESPONSIVE FIXES
   ===================================================================
   
   Ensures dashboard ad cards maintain proper sizing on tablets.
   
   =================================================================== */

/* Dashboard vertical cards - tablet */
@media (min-width: 576px) and (max-width: 767.98px) {
    .dashboard-content .row > .col-12.col-md-6.col-xl-4 {
        flex: 0 0 calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
    }
    
    .dashboard-content .collector-vertical-card,
    .dashboard-content [class*="ad-card-vertical"] {
        max-width: var(--bjd-ad-card-max-width-tablet) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ===================================================================
   6. PRINT STYLES
   =================================================================== */

@media print {
    .pagination {
        display: none !important;
    }
}