/*
 * Spacing Override CSS
 * Ensures proper spacing across all containers and sections
 * Fixes edge-to-edge layout issues
 * Loads after all other CSS files to override any conflicting styles
 */

/* ========================================
   UNIVERSAL CONTAINER SPACING (High Priority)
   ======================================== */

/* Main containers - balanced padding for optimal width usage */
.auto-container,
.container,
.inner-container,
.content-container {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

/* Section wrappers */
section,
.section,
.page-section,
.content-section,
.section-inner {
    padding: 60px 0 !important;
}

/* Content areas */
.content-wrapper,
.page-content,
.main-content,
.section-content {
    padding: 0 10px !important;
    margin: 0 auto !important;
    max-width: 1400px !important;
    box-sizing: border-box !important;
}

/* ========================================
   CARD AND COMPONENT SPACING
   ======================================== */

/* Cards and blocks */
.card,
.service-card,
.feature-card,
.testimonial-card,
.service-block,
.feature-block,
.team-block,
.product-block,
.category-box,
.info-box {
    margin: 0 8px 25px 8px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* Grid layouts */
.features-grid,
.services-grid,
.stats-grid,
.product-grid,
.team-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    padding: 0 8px !important;
    margin: 30px 0 !important;
}

/* Row and column layouts */
.row {
    margin: 0 -10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

.col,
.column,
.content-column,
.image-column {
    padding: 0 10px !important;
    flex: 1 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* ========================================
   HEADER SPECIFIC FIXES
   ======================================== */

.main-header .auto-container,
.main-header .container {
    padding: 0 20px !important;
}

.header-upper,
.header-lower {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ========================================
   FOOTER SPECIFIC FIXES
   ======================================== */

.main-footer .auto-container,
.main-footer .container {
    padding: 0 20px !important;
}

.footer-widgets-section,
.footer-bottom {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ========================================
   FORM POSITIONING FIXES
   ======================================== */

/* Quote forms on mobile */
.quote-form,
.enquery1 {
    position: relative !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 20px auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
}

/* ========================================
   RESPONSIVE SPACING UPDATES
   ======================================== */

/* Tablet (768px and up) */
@media (min-width: 768px) {
    .auto-container,
    .container,
    .inner-container,
    .content-container {
        padding: 0 20px !important;
    }
    
    .content-wrapper,
    .page-content,
    .main-content,
    .section-content {
        padding: 0 15px !important;
    }
    
    .features-grid,
    .services-grid,
    .stats-grid {
        padding: 0 10px !important;
        gap: 25px !important;
    }
    
    .card,
    .service-card,
    .feature-card,
    .testimonial-card {
        margin: 0 10px 30px 10px !important;
        padding: 25px !important;
    }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
    .auto-container,
    .container,
    .inner-container,
    .content-container {
        padding: 0 30px !important;
    }
    
    .content-wrapper,
    .page-content,
    .main-content,
    .section-content {
        padding: 0 20px !important;
    }
    
    .features-grid,
    .services-grid,
    .stats-grid {
        padding: 0 15px !important;
        gap: 30px !important;
    }
    
    .card,
    .service-card,
    .feature-card,
    .testimonial-card {
        margin: 0 15px 30px 15px !important;
        padding: 30px !important;
    }
    
    /* Desktop quote form positioning */
    .quote-form,
    .enquery1 {
        position: absolute !important;
        right: 5% !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        max-width: 450px !important;
    }
}

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
    .auto-container,
    .container,
    .inner-container,
    .content-container {
        padding: 0 40px !important;
        max-width: 1600px !important;
    }
    
    .content-wrapper,
    .page-content,
    .main-content,
    .section-content {
        padding: 0 25px !important;
    }
    
    .features-grid,
    .services-grid,
    .stats-grid {
        padding: 0 20px !important;
        gap: 35px !important;
    }
    
    .quote-form,
    .enquery1 {
        right: 8% !important;
        max-width: 500px !important;
    }
}

/* Extra Large Desktop (1600px and up) */
@media (min-width: 1600px) {
    .auto-container,
    .container,
    .inner-container,
    .content-container {
        padding: 0 60px !important;
        max-width: 1800px !important;
    }
    
    .content-wrapper,
    .page-content,
    .main-content,
    .section-content {
        padding: 0 40px !important;
    }
    
    .quote-form,
    .enquery1 {
        right: 10% !important;
    }
}

/* ========================================
   TEXT AND IMAGE CONTENT SPACING
   ======================================== */

.text-content h1,
.text-content h2,
.text-content h3,
.content-column h1,
.content-column h2,
.content-column h3 {
    margin-bottom: 20px !important;
}

.text-content p,
.content-column p {
    margin-bottom: 15px !important;
}

.image-container,
.image-column {
    padding: 0 15px !important;
}

.image-container img,
.image-column img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
}

/* ========================================
   SIDEBAR AND WIDGET SPACING
   ======================================== */

.sidebar,
.sidebar-side {
    padding: 0 15px !important;
}

.sidebar-widget,
.widget {
    margin-bottom: 40px !important;
    padding: 25px !important;
    background: #f8f9fa !important;
    border-radius: 10px !important;
}

/* ========================================
   UTILITY OVERRIDES
   ======================================== */

/* Remove any potential edge-to-edge overrides */
.full-width,
.container-fluid {
    padding: 0 20px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Ensure flex containers don't break */
.d-flex {
    display: flex !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.align-items-center {
    align-items: center !important;
}

/* ========================================
   SPECIFIC PROBLEM FIXES
   ======================================== */

/* Fix any containers that might be causing issues */
body {
    overflow-x: hidden !important;
}

.page-wrapper {
    overflow-x: hidden !important;
    width: 100% !important;
}

/* Ensure no element goes full width without padding */
* {
    box-sizing: border-box !important;
}

/* Make sure tables and large content respect container width */
table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

img {
    max-width: 100% !important;
    height: auto !important;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .auto-container,
    .container {
        padding: 0 !important;
        max-width: none !important;
    }
    
    .quote-form,
    .enquery1 {
        display: none !important;
    }
}