/**
 * DZ Life - Spacing Optimization
 * Reduces excessive padding and margins for a more compact layout
 * Maintains visual balance and responsive behavior
 */

/* ===================================
   OPTIMIZED UTILITY CLASSES
   Reduced by ~40-50% from original values
   =================================== */

/* Padding Top - Optimized Scale */
.pt-75 { padding-top: 40px !important; }
.pt-80 { padding-top: 45px !important; }
.pt-85 { padding-top: 45px !important; }
.pt-90 { padding-top: 50px !important; }
.pt-95 { padding-top: 50px !important; }
.pt-100 { padding-top: 55px !important; }
.pt-105 { padding-top: 55px !important; }
.pt-110 { padding-top: 60px !important; }
.pt-115 { padding-top: 60px !important; }
.pt-120 { padding-top: 65px !important; }
.pt-125 { padding-top: 65px !important; }
.pt-130 { padding-top: 70px !important; }
.pt-135 { padding-top: 70px !important; }
.pt-140 { padding-top: 75px !important; }
.pt-145 { padding-top: 75px !important; }
.pt-150 { padding-top: 80px !important; }
.pt-155 { padding-top: 80px !important; }
.pt-160 { padding-top: 85px !important; }
.pt-165 { padding-top: 85px !important; }

/* Padding Bottom - Optimized Scale */
.pb-75 { padding-bottom: 40px !important; }
.pb-80 { padding-bottom: 45px !important; }
.pb-85 { padding-bottom: 45px !important; }
.pb-90 { padding-bottom: 50px !important; }
.pb-95 { padding-bottom: 50px !important; }
.pb-100 { padding-bottom: 55px !important; }
.pb-105 { padding-bottom: 55px !important; }
.pb-110 { padding-bottom: 60px !important; }
.pb-115 { padding-bottom: 60px !important; }
.pb-120 { padding-bottom: 65px !important; }
.pb-125 { padding-bottom: 65px !important; }
.pb-130 { padding-bottom: 70px !important; }
.pb-135 { padding-bottom: 70px !important; }
.pb-140 { padding-bottom: 75px !important; }
.pb-145 { padding-bottom: 75px !important; }
.pb-150 { padding-bottom: 80px !important; }
.pb-155 { padding-bottom: 80px !important; }
.pb-160 { padding-bottom: 85px !important; }
.pb-165 { padding-bottom: 85px !important; }

/* Margin Top - Optimized Scale */
.mt-75 { margin-top: 40px !important; }
.mt-80 { margin-top: 45px !important; }
.mt-85 { margin-top: 45px !important; }
.mt-90 { margin-top: 50px !important; }
.mt-95 { margin-top: 50px !important; }
.mt-100 { margin-top: 55px !important; }
.mt-105 { margin-top: 55px !important; }
.mt-110 { margin-top: 60px !important; }
.mt-115 { margin-top: 60px !important; }
.mt-120 { margin-top: 65px !important; }
.mt-125 { margin-top: 65px !important; }
.mt-130 { margin-top: 70px !important; }

/* Margin Bottom - Optimized Scale */
.mb-75 { margin-bottom: 40px !important; }
.mb-80 { margin-bottom: 45px !important; }
.mb-85 { margin-bottom: 45px !important; }
.mb-90 { margin-bottom: 50px !important; }
.mb-95 { margin-bottom: 50px !important; }
.mb-100 { margin-bottom: 55px !important; }
.mb-105 { margin-bottom: 55px !important; }
.mb-110 { margin-bottom: 60px !important; }
.mb-115 { margin-bottom: 60px !important; }
.mb-120 { margin-bottom: 65px !important; }
.mb-125 { margin-bottom: 65px !important; }
.mb-130 { margin-bottom: 70px !important; }
.mb-135 { margin-bottom: 70px !important; }
.mb-140 { margin-bottom: 75px !important; }
.mb-145 { margin-bottom: 75px !important; }
.mb-150 { margin-bottom: 80px !important; }

/* ===================================
   SECTION PADDING OPTIMIZATION
   =================================== */

.section-padding-30 {
    padding: var(--dz-section-gap, 20px) 0 !important;
}

.section-padding-50 {
    padding: var(--dz-section-gap, 20px) 0 !important;
}

.section-padding-60 {
    padding: var(--dz-section-gap, 20px) 0 !important;
}

.section-padding {
    padding: var(--dz-section-gap, 20px) 0 !important;
}

/* ===================================
   MOBILE RESPONSIVE SPACING
   Tighter spacing on mobile devices
   =================================== */

@media (max-width: 767px) {
    /* Further reduce padding on mobile */
    .pt-75, .pt-80 { padding-top: 30px !important; }
    .pt-85, .pt-90 { padding-top: 35px !important; }
    .pt-95, .pt-100 { padding-top: 40px !important; }
    .pt-105, .pt-110 { padding-top: 45px !important; }
    .pt-115, .pt-120, .pt-125, .pt-130 { padding-top: 50px !important; }
    .pt-135, .pt-140, .pt-145, .pt-150 { padding-top: 55px !important; }
    .pt-155, .pt-160, .pt-165 { padding-top: 60px !important; }
    
    .pb-75, .pb-80 { padding-bottom: 30px !important; }
    .pb-85, .pb-90 { padding-bottom: 35px !important; }
    .pb-95, .pb-100 { padding-bottom: 40px !important; }
    .pb-105, .pb-110 { padding-bottom: 45px !important; }
    .pb-115, .pb-120, .pb-125, .pb-130 { padding-bottom: 50px !important; }
    .pb-135, .pb-140, .pb-145, .pb-150 { padding-bottom: 55px !important; }
    .pb-155, .pb-160, .pb-165 { padding-bottom: 60px !important; }
    
    .mt-75, .mt-80, .mt-85, .mt-90 { margin-top: 30px !important; }
    .mt-95, .mt-100, .mt-105, .mt-110 { margin-top: 35px !important; }
    .mt-115, .mt-120, .mt-125, .mt-130 { margin-top: 40px !important; }
    
    .mb-75, .mb-80, .mb-85, .mb-90 { margin-bottom: 30px !important; }
    .mb-95, .mb-100, .mb-105, .mb-110 { margin-bottom: 35px !important; }
    .mb-115, .mb-120, .mb-125, .mb-130 { margin-bottom: 40px !important; }
    .mb-135, .mb-140, .mb-145, .mb-150 { margin-bottom: 45px !important; }
    
    .section-padding-30 { padding: calc(var(--dz-section-gap, 20px) * 0.75) 0 !important; }
    .section-padding-50 { padding: var(--dz-section-gap, 20px) 0 !important; }
    .section-padding-60 { padding: calc(var(--dz-section-gap, 20px) * 1.25) 0 !important; }
    .section-padding { padding: calc(var(--dz-section-gap, 20px) * 0.75) 0 !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* Tablet - intermediate spacing */
    .pt-100, .pb-100 { padding-top: 50px !important; padding-bottom: 50px !important; }
    .pt-120, .pb-120 { padding-top: 60px !important; padding-bottom: 60px !important; }
    .pt-150, .pb-150 { padding-top: 70px !important; padding-bottom: 70px !important; }
}

/* ===================================
   COMPONENT-SPECIFIC OPTIMIZATIONS
   =================================== */

/* Product Grid - Reduce gaps */
.product-grid {
    row-gap: 20px !important;
}

.row-cols-lg-5 > * {
    margin-bottom: 20px !important;
}

/* Section Spacing Between Components */
section + section {
    margin-top: 0 !important;
}

/* Card Spacing */
.card {
    margin-bottom: 20px !important;
}

/* Container Vertical Spacing */
.container-fluid,
.container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Hero/Banner Sections - Keep reasonable spacing */
.hero-slider-1,
.home-slider,
.banner-area {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Footer Optimization */
footer.footer-area {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
}

/* Product Details Spacing */
.product-detail {
    padding: 30px 0 !important;
}

/* Breadcrumb Compact */
.breadcrumb-area {
    padding: 15px 0 !important;
}

/* ===================================
   ROW & COLUMN GAP OPTIMIZATION
   =================================== */

.row {
    --bs-gutter-y: 1.5rem;
}

@media (max-width: 767px) {
    .row {
        --bs-gutter-y: 1rem;
    }
}

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

/* Login/Auth Pages - Reduce excessive spacing */
.login-register-area,
.otp-login-area {
    padding: 40px 0 50px !important;
}

@media (max-width: 767px) {
    .login-register-area,
    .otp-login-area {
        padding: 30px 0 40px !important;
    }
}

/* Category Cards */
.category-card {
    margin-bottom: 20px !important;
}

/* Deal/Promo Sections */
.deals-section,
.promo-section {
    padding: 35px 0 !important;
}

/* Title/Heading Margins - the heading itself is margin:0 now (index.html); the gap to the
   content below it lives on .section-slider-header/.tales-slider-header instead, so the h3
   doesn't carry an asymmetric margin box that skews its centering against the slide arrows
   sitting next to it in the same flex row. This file was reintroducing that margin-bottom on
   h3.section-title independently of that fix, at the same specificity - whichever one actually
   won the cascade, having both agree on 0 removes the conflict either way. */
.section-title {
    margin-bottom: 0 !important;
}

h2.section-title,
h3.section-title {
    margin-bottom: 0 !important;
}

/* Widget Spacing */
.widget {
    margin-bottom: 25px !important;
}

/* Mobile Bottom Navigation Spacing Fix */
@media (max-width: 767px) {
    main {
        padding-bottom: 10px !important;
    }
}