/**
 * BullTech Container System for Elementor
 * Ensures consistent boxed layout
 * Version: 2.0.0
 */

/* ========================================
   BASE CONTAINER SYSTEM
   ======================================== */

/* Primary container for boxed layout */
.container,
.elementor-container,
.e-container,
.e-con {
  width: 100%;
  max-width: var(--container-width, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding, 20px);
  padding-right: var(--container-padding, 20px);
}

/* Elementor specific overrides */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--container-width, 1200px);
}

/* New Elementor containers (Flexbox) */
.e-container.e-container--boxed,
.e-con.e-con--boxed {
  max-width: var(--container-width, 1200px);
  margin: 0 auto;
}

/* Full width sections with inner container */
.elementor-section-full-width > .elementor-container,
.e-container--full > .e-con-inner {
  max-width: var(--container-width, 1200px);
  margin: 0 auto;
  padding-left: var(--container-padding, 20px);
  padding-right: var(--container-padding, 20px);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .container,
  .elementor-container,
  .e-container,
  .e-con {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .container,
  .elementor-container,
  .e-container,
  .e-con {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  /* Prevent horizontal overflow on mobile */
  .elementor-section,
  .e-container {
    overflow-x: hidden;
  }
}

/* Small mobile (< 480px) */
@media (max-width: 479px) {
  .container,
  .elementor-container,
  .e-container,
  .e-con {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ========================================
   SECTION SPACING
   ======================================== */

.elementor-section,
.e-container {
  padding-top: var(--section-padding, 60px);
  padding-bottom: var(--section-padding, 60px);
}

/* Section variations */
.section--small {
  padding-top: 30px;
  padding-bottom: 30px;
}

.section--medium {
  padding-top: 60px;
  padding-bottom: 60px;
}

.section--large {
  padding-top: 80px;
  padding-bottom: 80px;
}

.section--xlarge {
  padding-top: 100px;
  padding-bottom: 100px;
}

/* No padding variations */
.section--no-padding {
  padding: 0;
}

.section--no-top {
  padding-top: 0;
}

.section--no-bottom {
  padding-bottom: 0;
}

/* ========================================
   GRID SYSTEM FOR ELEMENTOR
   ======================================== */

/* 12 column grid */
.elementor-column-gap-default > .elementor-column > .elementor-element-populated {
  padding: var(--grid-gap, 24px);
}

/* Custom gap utilities */
.gap-xs { --grid-gap: 8px; }
.gap-sm { --grid-gap: 16px; }
.gap-md { --grid-gap: 24px; }
.gap-lg { --grid-gap: 32px; }
.gap-xl { --grid-gap: 40px; }

/* ========================================
   OVERFLOW PREVENTION
   ======================================== */

/* Prevent content from breaking out */
.elementor-widget-wrap,
.e-con-inner {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Images and media */
.elementor-image img,
.elementor-widget-image img,
.e-container img {
  max-width: 100%;
  height: auto;
}

/* ========================================
   SPECIAL CONTAINERS
   ======================================== */

/* Hero container */
.hero-container {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .hero-container {
    min-height: 70vh;
  }
}

/* Content container (for text heavy sections) */
.content-container {
  max-width: 800px;
  margin: 0 auto;
}

/* Wide container (for galleries, etc) */
.wide-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* Narrow container (for forms, etc) */
.narrow-container {
  max-width: 600px;
  margin: 0 auto;
}

/* ========================================
   E-COMMERCE SPECIFIC
   ======================================== */

/* Product grid container */
.products-container {
  display: grid;
  gap: var(--grid-gap, 24px);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Cart container */
.cart-container {
  max-width: 1000px;
  margin: 0 auto;
}

/* Checkout container */
.checkout-container {
  max-width: 600px;
  margin: 0 auto;
}

/* ========================================
   FIXES FOR COMMON ISSUES
   ======================================== */

/* Fix Elementor's default 100vw that causes horizontal scroll */
.elementor-section-wrap,
.elementor-location-header,
.elementor-location-footer {
  overflow-x: hidden;
}

/* Fix container alignment in RTL */
[dir="rtl"] .container,
[dir="rtl"] .elementor-container {
  margin-right: auto;
  margin-left: auto;
}

/* Ensure consistent spacing in nested containers */
.elementor-container .elementor-container {
  padding-left: 0;
  padding-right: 0;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Force boxed layout */
.force-boxed {
  max-width: var(--container-width, 1200px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Force full width */
.force-full-width {
  max-width: 100% !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}

/* ========================================
   FULL-BLEED PATTERN
   ======================================== */

/* Full-bleed sections */
.section-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Inner container for bleed sections */
.section-bleed > .bt-container,
.section-bleed .elementor-container {
  max-width: var(--container-width, 1200px);
  margin-inline: auto;
  padding-inline: var(--container-padding, 20px);
}

/* Alternative full-width without viewport units */
.full-width-section {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.full-width-section > .bt-container {
  max-width: var(--container-width, 1200px);
  margin-inline: auto;
  padding-inline: var(--container-padding, 20px);
}

/* Container with background */
.container-with-bg {
  position: relative;
  z-index: 1;
}

.container-with-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: inherit;
  z-index: -1;
}