/* ===============================================
   VISUAL DESIGN IMPROVEMENTS FOR BAYONMART
   Desktop & Mobile Optimizations
   =============================================== */

/* =============
   DESKTOP FIXES (1025px+)
   ============= */
@media (min-width: 1025px) {
    
    /* FIX: Reduce oversized icons in navigation */
    .elementor-180 .elementor-element.elementor-element-b7782ab {
        --e-icon-list-icon-size: 16px !important;  /* was 21px */
    }
    
    /* FIX: Make icon-box icons more professional size */
    .elementor-180 .elementor-element.elementor-element-34ec91bd .elementor-icon,
    .elementor-180 .elementor-element.elementor-element-38110a9f .elementor-icon,
    .elementor-180 .elementor-element.elementor-element-58886670 .elementor-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 24px !important;
        line-height: 48px !important;
    }
    
    /* FIX: Better font sizes for desktop readability */
    .elementor-180 .elementor-element.elementor-element-2d4a487 .elementor-image-box-title {
        font-size: 42px !important;  /* was 58px */
        line-height: 1.2 !important;
    }
    
    .elementor-180 .elementor-element.elementor-element-9e45eb3 .elementor-heading-title {
        font-size: 36px !important;  /* was 46px */
    }
    
    .elementor-180 .elementor-element.elementor-element-57ec0f1 .elementor-heading-title {
        font-size: 28px !important;  /* was 35px */
    }
    
    /* FIX: Proper spacing and layout */
    .elementor-container {
        max-width: 1200px !important;
        padding: 0 20px !important;
    }
    
    /* FIX: Button sizing */
    .elementor-button {
        padding: 12px 24px !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
    
    /* FIX: Icon list text sizing */
    .elementor-icon-list-text {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    /* FIX: Professional heading sizes */
    .elementor-180 .elementor-element.elementor-element-d6b014d .elementor-heading-title,
    .elementor-180 .elementor-element.elementor-element-f1c626f .elementor-heading-title {
        font-size: 16px !important;  /* was 20px */
        letter-spacing: 2px !important;  /* was 6.4px */
    }
    
    .elementor-180 .elementor-element.elementor-element-1ea2e30 .elementor-heading-title,
    .elementor-180 .elementor-element.elementor-element-e8aaa32 .elementor-heading-title {
        font-size: 32px !important;  /* was 30px */
        line-height: 1.3 !important;
    }
    
    /* FIX: Section spacing */
    .elementor-section {
        padding: 60px 0 !important;
    }
    
    /* FIX: Better visual hierarchy */
    .elementor-180 .elementor-element.elementor-element-447bc98 .elementor-heading-title {
        font-size: 14px !important;  /* was 17px */
    }
    
    .elementor-180 .elementor-element.elementor-element-1920c9d .elementor-heading-title {
        font-size: 16px !important;  /* was 18px */
        letter-spacing: 1.5px !important;  /* was 4.7px */
    }
    
    .elementor-180 .elementor-element.elementor-element-3e15f7d .elementor-heading-title {
        font-size: 36px !important;  /* was 40px */
    }
}

/* =============
   MOBILE FIXES (767px and below)
   ============= */
@media (max-width: 767px) {
    
    /* FIX: Mobile icon sizes */
    .elementor-180 .elementor-element.elementor-element-b7782ab {
        --e-icon-list-icon-size: 14px !important;
        padding: 8px 3px !important;
    }
    
    /* FIX: Mobile icon-box icons */
    .elementor-180 .elementor-element.elementor-element-34ec91bd .elementor-icon,
    .elementor-180 .elementor-element.elementor-element-38110a9f .elementor-icon,
    .elementor-180 .elementor-element.elementor-element-58886670 .elementor-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
        line-height: 40px !important;
    }
    
    /* FIX: Mobile typography */
    .elementor-180 .elementor-element.elementor-element-2d4a487 .elementor-image-box-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
    
    /* FIX: Mobile heading sizes */
    .elementor-180 .elementor-element.elementor-element-1ea2e30 .elementor-heading-title {
        font-size: 24px !important;  /* was 34px */
    }
    
    .elementor-180 .elementor-element.elementor-element-e8aaa32 .elementor-heading-title {
        font-size: 26px !important;  /* was 34px */
    }
    
    /* FIX: Mobile container padding */
    .elementor-container {
        padding: 0 15px !important;
    }
    
    /* FIX: Mobile section spacing */
    .elementor-section {
        padding: 40px 0 !important;
    }
    
    /* FIX: Mobile button sizing */
    .elementor-button {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
    
    /* FIX: Mobile icon list spacing */
    .elementor-icon-list-item {
        margin-bottom: 8px !important;
    }
    
    .elementor-icon-list-text {
        font-size: 13px !important;
    }
}

/* =============
   TABLET FIXES (768px to 1024px)
   ============= */
@media (min-width: 768px) and (max-width: 1024px) {
    
    /* FIX: Tablet icon sizes */
    .elementor-180 .elementor-element.elementor-element-b7782ab {
        --e-icon-list-icon-size: 18px !important;
    }
    
    /* FIX: Tablet icon-box icons */
    .elementor-180 .elementor-element.elementor-element-34ec91bd .elementor-icon,
    .elementor-180 .elementor-element.elementor-element-38110a9f .elementor-icon,
    .elementor-180 .elementor-element.elementor-element-58886670 .elementor-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 22px !important;
        line-height: 44px !important;
    }
    
    /* FIX: Tablet typography */
    .elementor-180 .elementor-element.elementor-element-2d4a487 .elementor-image-box-title {
        font-size: 36px !important;
    }
    
    /* FIX: Tablet container */
    .elementor-container {
        padding: 0 20px !important;
    }
    
    /* FIX: Tablet section spacing */
    .elementor-section {
        padding: 50px 0 !important;
    }
}

/* =============
   UNIVERSAL FIXES (All Devices)
   ============= */

/* FIX: Better visual consistency */
.elementor-icon-box-wrapper {
    transition: transform 0.3s ease !important;
}

.elementor-icon-box-wrapper:hover {
    transform: translateY(-5px) !important;
}

/* FIX: Better button styling */
.elementor-button {
    border-radius: 4px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    transition: all 0.3s ease !important;
}

/* FIX: Consistent spacing */
.elementor-widget-heading .elementor-heading-title {
    margin-bottom: 0.5em !important;
}

/* FIX: Better icon spacing */
.elementor-icon-list-icon {
    margin-right: 8px !important;
}

/* FIX: Professional shadows */
.elementor-section {
    box-shadow: none !important;
}

.elementor-180 .elementor-element.elementor-element-e774c1e > .elementor-element-populated {
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

/* FIX: Better text readability */
body, p, .elementor-widget-text-editor {
    line-height: 1.6 !important;
}

/* FIX: Social icons sizing */
.elementor-180 .elementor-element.elementor-element-09a6c26 {
    --icon-size: 18px !important;
}

/* FIX: Image carousel improvements */
.elementor-180 .elementor-element.elementor-element-20fa70a .elementor-swiper-button {
    background: rgba(255,255,255,0.9) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
}

/* =============
   ADDITIONAL PROFESSIONAL FIXES
   ============= */

/* FIX: Prevent text from being too large on any device */
@media (min-width: 1200px) {
    /* Extra large desktop fixes */
    .elementor-180 .elementor-element.elementor-element-2d4a487 .elementor-image-box-title {
        font-size: 38px !important;
        max-width: 80% !important;
    }
    
    .elementor-180 .elementor-element.elementor-element-9e45eb3 .elementor-heading-title {
        font-size: 34px !important;
    }
    
    /* Better container management */
    .elementor-container {
        max-width: 1200px !important;
        margin: 0 auto !important;
    }
}

/* FIX: Icon consistency across all devices */
.elementor-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
}

/* FIX: Better spacing for icon lists */
.elementor-icon-list-items {
    margin: 0 !important;
    padding: 0 !important;
}

.elementor-icon-list-item {
    display: flex !important;
    align-items: center !important;
    margin: 0 0 12px 0 !important;
    padding: 8px 0 !important;
}

/* FIX: Professional button hover effects */
.elementor-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* FIX: Better section backgrounds */
.elementor-section:nth-child(odd) {
    background-color: #fafafa !important;
}

.elementor-section:nth-child(even) {
    background-color: #ffffff !important;
}

/* FIX: Better visual hierarchy */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600 !important;
    margin: 0 0 1rem 0 !important;
}

/* FIX: Consistent padding/margins */
.elementor-widget {
    margin-bottom: 20px !important;
}

/* FIX: Better responsive behavior */
@media (max-width: 480px) {
    /* Extra small mobile fixes */
    .elementor-180 .elementor-element.elementor-element-2d4a487 .elementor-image-box-title {
        font-size: 24px !important;
    }
    
    .elementor-180 .elementor-element.elementor-element-b7782ab {
        --e-icon-list-icon-size: 12px !important;
    }
    
    .elementor-icon-list-text {
        font-size: 12px !important;
    }
    
    .elementor-container {
        padding: 0 10px !important;
    }
}

/* FIX: Loading performance */
.elementor-section, .elementor-column, .elementor-widget-wrap {
    will-change: auto !important;
}

/* FIX: Better accessibility */
.elementor-button:focus,
.elementor-icon-box:focus {
    outline: 2px solid #0073aa !important;
    outline-offset: 2px !important;
}

/* FIX: Smooth transitions */
* {
    transition: all 0.3s ease !important;
}