/**
 * MOBILE HEADER ULTRA COMPACT - MEPET VERSION v2.0
 * Spacing sangat minimal dengan icon yang lebih besar
 * FORCE OVERRIDE SEMUA STYLE YANG KONFLIK
 */

/* ULTIMATE FORCE OVERRIDE - MOBILE HEADER ULTRA COMPACT */
@media (max-width: 991px) {
    /* Header container - ULTRA MINIMAL PADDING */
    .header7,
    header .header7,
    #stickyheader .header7,
    .header-style2 .header7 {
        padding: 2px 0 !important; /* ULTRA MINIMAL */
        margin: 0 !important;
        min-height: 45px !important;
    }
    
    /* Container - ULTRA MEPET KE TEPI */
    .header7 .custom-container,
    .header7 .container,
    .custom-container,
    .container {
        padding-left: 5px !important; /* ULTRA TIGHT */
        padding-right: 5px !important; /* ULTRA TIGHT */
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Header contain - ULTRA MINIMAL SPACING */
    .header7 .header-contain,
    .header-contain {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 !important; /* NO PADDING */
        margin: 0 !important;
        min-height: 40px !important; /* COMPACT HEIGHT */
        gap: 0 !important;
    }
    
    /* Logo block - ULTRA TIGHT */
    .header7 .logo-block,
    .logo-block {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 !important; /* NO PADDING */
        margin: 0 !important;
    }
    
    /* Brand logo - ULTRA COMPACT */
    .header7 .brand-logo,
    .brand-logo {
        max-width: calc(100% - 90px) !important; /* SPACE FOR ICONS */
        padding: 0 !important; /* NO PADDING */
        margin: 0 !important;
    }
    
    .header7 .brand-logo a,
    .brand-logo a {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important; /* ULTRA MINIMAL GAP */
        padding: 0 !important; /* NO PADDING */
        margin: 0 !important;
    }
    
    /* Logo images - MODERATE SIZE */
    .header7 .brand-logo img,
    .brand-logo img {
        max-height: 28px !important; /* SMALLER LOGOS */
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Divider - MAKE VISIBLE AND PROPORTIONAL */
    .header7 .brand-logo .mx-3,
    .brand-logo .mx-3 {
        margin-left: 4px !important; /* MODERATE SPACE */
        margin-right: 4px !important; /* MODERATE SPACE */
        height: 18px !important; /* PROPORTIONAL HEIGHT */
        width: 1px !important;
        background-color: #ccc !important; /* FORCE VISIBLE */
        display: inline-block !important; /* ENSURE DISPLAY */
        opacity: 1 !important; /* FORCE VISIBLE */
        visibility: visible !important; /* FORCE VISIBLE */
    }
    
    /* SEARCH ICON - ALIGNED AND CONSISTENT */
    .header7 .mobile-search,
    .mobile-search {
        padding: 8px !important; /* CONSISTENT PADDING */
        margin: 0 2px !important; /* ULTRA MINIMAL MARGIN */
        border-radius: 0 !important; /* NO RADIUS */
        background: transparent !important; /* NO BACKGROUND */
        min-width: 44px !important; /* GOOD TOUCH TARGET */
        min-height: 44px !important; /* GOOD TOUCH TARGET */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: none !important; /* NO ANIMATION */
        border: none !important;
        box-shadow: none !important;
        vertical-align: middle !important; /* FORCE ALIGNMENT */
        cursor: pointer !important; /* SHOW CLICKABLE */
    }
    
    .header7 .mobile-search:hover,
    .mobile-search:hover {
        background: transparent !important; /* NO HOVER BACKGROUND */
        transform: none !important;
    }
    
    .header7 .mobile-search i,
    .mobile-search i {
        font-size: 20px !important; /* CONSISTENT SIZE */
        color: #333 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important; /* CONSISTENT LINE HEIGHT */
        vertical-align: middle !important; /* FORCE ALIGNMENT */
        pointer-events: none !important; /* PREVENT ICON CLICK CONFLICTS */
    }
    
    /* BURGER MENU - ALIGNED AND CONSISTENT */
    .header7 .toggle-nav,
    .toggle-nav {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important; /* CONSISTENT PADDING */
        margin: 0 2px !important; /* ULTRA MINIMAL MARGIN */
        border-radius: 0 !important; /* NO RADIUS */
        background: transparent !important; /* NO BACKGROUND */
        transition: none !important; /* NO ANIMATION */
        min-width: 44px !important; /* GOOD TOUCH TARGET */
        min-height: 44px !important; /* GOOD TOUCH TARGET */
        border: none !important;
        box-shadow: none !important;
        vertical-align: middle !important; /* FORCE ALIGNMENT */
    }
    
    .header7 .toggle-nav:hover,
    .toggle-nav:hover {
        background: transparent !important; /* NO HOVER BACKGROUND */
        transform: none !important;
    }
    
    .header7 .toggle-nav .sidebar-bar,
    .toggle-nav .sidebar-bar,
    .sidebar-bar {
        font-size: 22px !important; /* CONSISTENT SIZE */
        color: #333 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important; /* CONSISTENT LINE HEIGHT */
        vertical-align: middle !important; /* FORCE ALIGNMENT */
    }
    
    /* Hide desktop elements */
    .header7 form,
    .header7 .categroy-contain,
    form,
    .categroy-contain {
        display: none !important;
    }
    
    /* Remove all margins and padding from containers */
    .header7 .row,
    .header7 .col-12,
    .row,
    .col-12 {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
}

/* EXTRA SMALL MOBILE - ULTRA COMPACT */
@media (max-width: 480px) {
    .header7 .custom-container,
    .custom-container,
    .container {
        padding-left: 3px !important; /* ULTRA TIGHT */
        padding-right: 3px !important; /* ULTRA TIGHT */
    }
    
    .header7 .brand-logo a,
    .brand-logo a {
        gap: 3px !important; /* SLIGHTLY MORE FOR BIGGER LOGOS */
    }
    
    .header7 .brand-logo .mx-3,
    .brand-logo .mx-3 {
        margin-left: 3px !important;
        margin-right: 3px !important;
        height: 18px !important;
    }
    
    .header7 .brand-logo img,
    .brand-logo img {
        max-height: 25px !important; /* SMALLER ON SMALL SCREENS */
    }
    
    /* Smaller icons on small screens */
    .header7 .mobile-search i,
    .mobile-search i,
    .mobilecat-toggle i {
        font-size: 18px !important; /* SMALLER */
    }
    
    .header7 .toggle-nav .sidebar-bar,
    .toggle-nav .sidebar-bar,
    .sidebar-bar {
        font-size: 20px !important; /* SMALLER */
    }
}

/* MEDIUM MOBILE - COMPACT BUT USABLE */
@media (min-width: 481px) and (max-width: 767px) {
    .header7 .custom-container,
    .custom-container,
    .container {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    
    .header7 .brand-logo img,
    .brand-logo img {
        max-height: 27px !important; /* MODERATE LOGOS */
    }
    
    /* Moderate icons for medium screens */
    .header7 .mobile-search i,
    .mobile-search i,
    .mobilecat-toggle i {
        font-size: 19px !important;
    }
    
    .header7 .toggle-nav .sidebar-bar,
    .toggle-nav .sidebar-bar,
    .sidebar-bar {
        font-size: 21px !important;
    }
}

/* LARGE MOBILE - BALANCED */
@media (min-width: 768px) and (max-width: 991px) {
    .header7 .custom-container,
    .custom-container,
    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .header7 .brand-logo img,
    .brand-logo img {
        max-height: 30px !important; /* MODERATE LOGOS */
    }
    
    /* Slightly bigger icons for large mobile */
    .header7 .mobile-search i,
    .mobile-search i,
    .mobilecat-toggle i {
        font-size: 21px !important;
    }
    
    .header7 .toggle-nav .sidebar-bar,
    .toggle-nav .sidebar-bar,
    .sidebar-bar {
        font-size: 23px !important;
    }
}

/* STICKY HEADER - ULTRA COMPACT */
@media (max-width: 991px) {
    #stickyheader.sticky .header7,
    .sticky .header7 {
        padding: 1px 0 !important; /* EVEN MORE COMPACT WHEN STICKY */
    }
    
    #stickyheader.sticky .header7 .brand-logo img,
    .sticky .header7 .brand-logo img,
    .sticky .brand-logo img {
        max-height: 25px !important; /* SMALLER WHEN STICKY */
    }
    
    #stickyheader.sticky .header7 .mobile-search i,
    .sticky .header7 .mobile-search i,
    .sticky .mobile-search i,
    .sticky .mobilecat-toggle i {
        font-size: 18px !important; /* SMALLER WHEN STICKY */
    }
    
    #stickyheader.sticky .header7 .toggle-nav .sidebar-bar,
    .sticky .header7 .toggle-nav .sidebar-bar,
    .sticky .toggle-nav .sidebar-bar,
    .sticky .sidebar-bar {
        font-size: 20px !important; /* SMALLER WHEN STICKY */
    }
}

/* FIXED HEADER POSITIONING */
@media (max-width: 991px) {
    #stickyheader,
    header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background: white !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }
    
    /* ULTRA MINIMAL BODY PADDING */
    body {
        padding-top: 45px !important; /* REDUCED FROM 50px */
    }
}

/* REMOVE ALL UNNECESSARY STYLING */
@media (max-width: 991px) {
    .header7 .toggle-nav,
    .header7 .mobile-search,
    .toggle-nav,
    .mobile-search,
    .mobilecat-toggle {
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Remove focus outline for cleaner look */
    .header7 .toggle-nav:focus,
    .header7 .mobile-search:focus,
    .toggle-nav:focus,
    .mobile-search:focus,
    .mobilecat-toggle:focus {
        outline: none !important;
        box-shadow: none !important;
    }
}

/* FORCE OVERRIDE ANY CONFLICTING STYLES */
@media (max-width: 991px) {
    .header7,
    .header7 *,
    .header7 .custom-container,
    .header7 .header-contain,
    .header7 .logo-block,
    .header7 .brand-logo,
    header,
    header *,
    .custom-container,
    .header-contain,
    .logo-block,
    .brand-logo {
        box-sizing: border-box !important;
    }
    
    /* Ensure no extra spacing */
    .header7 .brand-logo,
    .brand-logo {
        overflow: visible !important;
        white-space: nowrap !important;
    }
    
    /* Force minimal spacing */
    .header7 .d-flex,
    .d-flex {
        gap: 0 !important;
    }
    
    /* FORCE PROPER ALIGNMENT FOR ALL HEADER ELEMENTS */
    .header7 .header-contain,
    .header-contain {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 40px !important; /* CONSISTENT HEIGHT */
    }
    
    /* FORCE LOGO SECTION ALIGNMENT */
    .header7 .logo-block,
    .logo-block {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }
    
    .header7 .brand-logo,
    .brand-logo {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }
    
    .header7 .brand-logo a,
    .brand-logo a {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        gap: 4px !important;
    }
    
    /* FORCE DIVIDER ALIGNMENT */
    .header7 .brand-logo .mx-3,
    .brand-logo .mx-3 {
        align-self: center !important;
        flex-shrink: 0 !important;
    }
    
    /* FORCE ICON BUTTONS ALIGNMENT */
    .header7 .mobile-search,
    .header7 .toggle-nav,
    .mobile-search,
    .toggle-nav,
    .mobilecat-toggle {
        align-self: center !important;
        flex-shrink: 0 !important;
    }
}

/* ULTRA FORCE - OVERRIDE EVERYTHING */
@media (max-width: 991px) {
    /* Force all flex containers to be tight */
    .d-flex,
    .align-items-center,
    .justify-content-between {
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Force header elements to be edge-to-edge */
    .header-style2,
    .header-style2 *,
    #stickyheader,
    #stickyheader * {
        margin: 0 !important;
    }
    
    /* Force icons to be bigger */
    .fa-search,
    .fa-bars,
    i.fa-search,
    i.fa-bars {
        font-size: 20px !important;
        color: #333 !important;
    }
    
    /* DEDICATED MOBILE SEARCH OVERLAY - ONLY FOR MOBILE */
    .mobile-search-overlay {
        display: none;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.8) !important;
        z-index: 999999 !important;
        opacity: 0;
        transition: opacity 0.3s ease !important;
    }
    
    .mobile-search-overlay.active {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .mobile-search-container {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) scale(0.8) !important;
        width: 90% !important;
        max-width: 400px !important;
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
        transition: transform 0.3s ease !important;
    }
    
    .mobile-search-overlay.active .mobile-search-container {
        transform: translate(-50%, -50%) scale(1) !important;
    }
    
    .mobile-search-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 20px 20px 15px 20px !important;
        border-bottom: 1px solid #eee !important;
    }
    
    .mobile-search-header h5 {
        margin: 0 !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #333 !important;
    }
    
    .mobile-search-close {
        background: none !important;
        border: none !important;
        font-size: 20px !important;
        color: #666 !important;
        cursor: pointer !important;
        padding: 5px !important;
        border-radius: 50% !important;
        transition: background-color 0.2s ease !important;
    }
    
    .mobile-search-close:hover {
        background: #f0f0f0 !important;
        color: #333 !important;
    }
    
    .mobile-search-form {
        padding: 20px !important;
    }
    
    .mobile-search-input-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .mobile-search-select {
        width: 100% !important;
        padding: 12px 15px !important;
        border: 2px solid #ddd !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        background: white !important;
        color: #333 !important;
        outline: none !important;
    }
    
    .mobile-search-select:focus {
        border-color: #007bff !important;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
    }
    
    .mobile-search-input-wrapper {
        display: flex !important;
        position: relative !important;
    }
    
    .mobile-search-input {
        flex: 1 !important;
        padding: 12px 15px !important;
        padding-right: 50px !important;
        border: 2px solid #ddd !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        outline: none !important;
    }
    
    .mobile-search-input:focus {
        border-color: #007bff !important;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
    }
    
    .mobile-search-submit {
        position: absolute !important;
        right: 5px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: #007bff !important;
        border: none !important;
        border-radius: 6px !important;
        color: white !important;
        padding: 8px 12px !important;
        cursor: pointer !important;
        transition: background-color 0.2s ease !important;
    }
    
    .mobile-search-submit:hover {
        background: #0056b3 !important;
    }
    
    .mobile-search-submit i {
        font-size: 14px !important;
    }
    
    /* Body scroll lock when mobile search is open */
    body.mobile-search-open {
        overflow: hidden !important;
    }
}

/* HIDE MOBILE SEARCH ON DESKTOP */
@media (min-width: 992px) {
    .mobile-search-overlay {
        display: none !important;
    }
}