/**
 * Mobile Header Positioning Fixes
 * Ensures proper layout with logo on left and buttons on right
 * Overrides parent theme styles with higher specificity
 */

/* Force light background color - override parent theme */
.careerfy-mobilehder-strip,
.careerfy-mobilehder-strip.mobile-hder-style1 {
    background: #F9FAFB !important;
    background-color: #F9FAFB !important;
}

/* Override any dark mode styles */
@media (prefers-color-scheme: dark) {
    .careerfy-mobilehder-strip,
    .careerfy-mobilehder-strip.mobile-hder-style1 {
        background: #F9FAFB !important;
        background-color: #F9FAFB !important;
    }
}

/* Force proper flexbox layout */
.mobile-hder-topcon {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* Logo positioning - always left */
.mobile-logocon {
    flex: 0 0 auto !important;
    order: 1 !important;
    margin-right: auto !important;
    max-width: 50% !important;
}

/* Buttons positioning - always right */
.mobile-right-btnscon {
    flex: 0 0 auto !important;
    order: 2 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Ensure buttons don't wrap */
.mobile-right-btnscon a,
.mobile-right-btnscon .mobile-empty-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* Ensure proper order of buttons */
.mobile-right-btnscon {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-direction: row !important;
}

/* First button (notifications or empty) */
.mobile-right-btnscon .mobile-usernotifics-btn,
.mobile-right-btnscon .mobile-empty-btn {
    order: 1 !important;
}

/* Second button (profile or login) */
.mobile-right-btnscon .jobsearch-useracount-hdrbtn,
.mobile-right-btnscon .mobile-login-btn {
    order: 2 !important;
}

/* Third button (menu) */
.mobile-right-btnscon .mobile-navigation-togglebtn {
    order: 3 !important;
}

/* Responsive adjustments for very small screens */
@media (max-width: 360px) {
    .mobile-hder-topcon {
        padding: 8px 12px !important;
    }
    
    .mobile-logocon {
        max-width: 45% !important;
    }
    
    .mobile-right-btnscon {
        gap: 6px !important;
    }
    
    .mobile-navigation-togglebtn,
    .mobile-right-btnscon a,
    .mobile-empty-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
}

/* Ensure proper spacing on all screen sizes */
@media (max-width: 991px) {
    .mobile-hder-topcon {
        min-height: 60px !important;
    }
    
    .mobile-logocon a img {
        max-height: 40px !important;
        width: auto !important;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .mobile-hder-topcon {
        min-height: 56px !important;
        padding: 10px 12px !important;
    }
    
    .mobile-logocon a img {
        max-height: 36px !important;
    }
    
    .mobile-navigation-togglebtn,
    .mobile-right-btnscon a,
    .mobile-empty-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
}

/* Small devices */
@media (min-width: 481px) and (max-width: 767px) {
    .mobile-hder-topcon {
        min-height: 60px !important;
        padding: 12px 16px !important;
    }
    
    .mobile-logocon a img {
        max-height: 40px !important;
    }
    
    .mobile-navigation-togglebtn,
    .mobile-right-btnscon a,
    .mobile-empty-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
}

/* Medium devices */
@media (min-width: 768px) and (max-width: 991px) {
    .mobile-hder-topcon {
        min-height: 64px !important;
        padding: 12px 20px !important;
    }
    
    .mobile-logocon a img {
        max-height: 44px !important;
    }
    
    .mobile-navigation-togglebtn,
    .mobile-right-btnscon a,
    .mobile-empty-btn {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
    }
}