/* Mobile Tab Optimizations - Global for all tabs */

/* Compact mobile tab layout - overrides default tabBarView mobile styles */
@media screen and (max-width: 767px) {
    /* Global mobile tab optimizations for all tabBarView instances */
    .tabBarView .nav-tabs>li {
        display: inline-block !important;
        float: left !important;
        width: 33.33% !important;
        margin-bottom: 0 !important;
        text-align: center;
    }
    
    .tabBarView .nav-tabs>li>a {
        margin-right: 0 !important;
        padding: 10px 8px !important;
        font-size: 14px !important;
        border-radius: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .tabBarView .nav-tabs {
        border-bottom: 1px solid #ddd !important;
        margin-bottom: 15px !important;
    }
    
    .tabBarView .nav-tabs>li.active>a,
    .tabBarView .nav-tabs>li.active>a:hover,
    .tabBarView .nav-tabs>li.active>a:focus {
        border-bottom: 2px solid var(--common-text-linkcolor) !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        background: transparent !important;
    }
    
    .tabBarView .nav-tabs>li>a:hover {
        border-color: transparent !important;
        background: rgba(0,0,0,0.05) !important;
    }
    
    /* For tabs with 2 items */
    .tabBarView .nav-tabs>li:nth-child(2):last-child,
    .tabBarView .nav-tabs>li:first-child:nth-last-child(2) {
        width: 50% !important;
    }
    
    /* For tabs with 4 items */
    .tabBarView .nav-tabs>li:nth-child(4):last-child,
    .tabBarView .nav-tabs>li:first-child:nth-last-child(4),
    .tabBarView .nav-tabs>li:nth-child(2):nth-last-child(3),
    .tabBarView .nav-tabs>li:nth-child(3):nth-last-child(2) {
        width: 25% !important;
    }
    
    /* For tabs with 5 items */
    .tabBarView .nav-tabs>li:nth-child(5):last-child,
    .tabBarView .nav-tabs>li:first-child:nth-last-child(5),
    .tabBarView .nav-tabs>li:nth-child(2):nth-last-child(4),
    .tabBarView .nav-tabs>li:nth-child(3):nth-last-child(3),
    .tabBarView .nav-tabs>li:nth-child(4):nth-last-child(2) {
        width: 20% !important;
    }
    
    /* AGGRESSIVE OVERRIDE for Reviews mobile tabs - Use highest specificity but exclude manage listings and footer */
    
    /* Target review tabs specifically - avoid affecting manage listings and footer */
    .reviews ul:not(.footer ul):not([class*="bgImageSection"] ul) li[class*="listTabItem"],
    div[class*="reviewPanel"]:not(.footer):not([class*="bgImageSection"]) ul li[class*="listTabItem"],
    div[class*="review"]:not(.footer):not([class*="bgImageSection"]) ul li[class*="listTabItem"] {
        display: inline-block !important;
        float: left !important;
        width: 50% !important;
        margin-bottom: 0 !important;
        text-align: center !important;
        flex: none !important;
    }
    
    /* Target anchor elements (tab links) inside review containers - exclude footer */
    /*.reviews:not(.footer):not([class*="bgImageSection"]) ul li a,
    div[class*="reviewPanel"]:not(.footer):not([class*="bgImageSection"]) ul li a,
    div[class*="review"]:not(.footer):not([class*="bgImageSection"]) ul li a:not([class*="commonProfileAvatarLink"]) {
        margin-right: 0 !important;
        padding: 10px 8px !important;
        font-size: 14px !important;
        border-radius: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        width: 100% !important;
    }*/
    
    /* Override the specific mobileFlexContainer styles from Reviews.css - exclude footer */
    .reviews:not(.footer):not([class*="bgImageSection"]) ul[class*="mobileFlexContainer"],
    div[class*="reviewPanel"]:not(.footer):not([class*="bgImageSection"]) ul[class*="mobileFlexContainer"] {
        flex-direction: row !important;
        display: flex !important;
    }
    
    .reviews:not(.footer):not([class*="bgImageSection"]) ul[class*="mobileFlexContainer"] li,
    div[class*="reviewPanel"]:not(.footer):not([class*="bgImageSection"]) ul[class*="mobileFlexContainer"] li {
        display: inline-block !important;
        width: 50% !important;
        margin-bottom: 0 !important;
        flex: none !important;
    }
    
    /* Nuclear option - override ANY flexbox container that looks like tabs but NOT manage listings or footer */
    div[class*="review"]:not(.footer):not([class*="bgImageSection"]) [class*="Container"] ul:not([class*="panel"]):not([class*="footer"]),
    div[class*="Review"]:not(.footer):not([class*="bgImageSection"]) [class*="Container"] ul:not([class*="panel"]):not([class*="footer"]) {
        flex-direction: row !important;
        display: flex !important;
    }
    
    div[class*="review"]:not(.footer):not([class*="bgImageSection"]) [class*="Container"] ul:not([class*="panel"]):not([class*="footer"]) li,
    div[class*="Review"]:not(.footer):not([class*="bgImageSection"]) [class*="Container"] ul:not([class*="panel"]):not([class*="footer"]) li {
        display: inline-block !important;
        width: 50% !important;
        margin-bottom: 0 !important;
    }
    
    /* Keep the specific compactTabs class for backwards compatibility */
    .compactTabs .nav-tabs>li {
        display: inline-block !important;
        float: left !important;
        width: 33.33% !important;
        margin-bottom: 0 !important;
        text-align: center;
    }
    
    .compactTabs .nav-tabs>li>a {
        margin-right: 0 !important;
        padding: 10px 8px !important;
        font-size: 14px !important;
        border-radius: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .compactTabs .nav-tabs {
        border-bottom: 1px solid #ddd !important;
        margin-bottom: 15px !important;
    }
    
    .compactTabs .nav-tabs>li.active>a,
    .compactTabs .nav-tabs>li.active>a:hover,
    .compactTabs .nav-tabs>li.active>a:focus {
        border-bottom: 2px solid var(--common-text-linkcolor) !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        background: transparent !important;
    }
    
    .compactTabs .nav-tabs>li>a:hover {
        border-color: transparent !important;
        background: rgba(0,0,0,0.05) !important;
    }

    /* Override existing Reviews.css mobile styles that force vertical layout - exclude footer */
    .mobileFlexContainer:not(.footer):not([class*="bgImageSection"]) [class*="listContainer"]:not([class*="footer"]) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    
    .mobileFlexContainer:not(.footer):not([class*="bgImageSection"]) [class*="listTabItem"] {
        display: inline-block !important;
        float: left !important;
        width: 33.33% !important;
        margin-bottom: 0 !important;
        text-align: center;
        flex: 1 !important;
    }
    
    .mobileFlexContainer:not(.footer):not([class*="bgImageSection"]) [class*="listTabItem"] > a {
        display: block !important;
        padding: 10px 8px !important;
        font-size: 14px !important;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        border-bottom: 2px solid transparent !important;
        margin-bottom: 0 !important;
    }
    
    .mobileFlexContainer:not(.footer):not([class*="bgImageSection"]) [class*="listTabItem"].active > a,
    .mobileFlexContainer:not(.footer):not([class*="bgImageSection"]) [class*="listTabItem"] > a.active {
        border-bottom: 2px solid var(--common-text-linkcolor) !important;
        font-weight: bold !important;
    }
    
    /* Force horizontal layout for Reviews mobile tabs - EXCLUDE FOOTER */
    .youcarsBg:not(.footer):not([class*="bgImageSection"]) > ul[class*="listContainer"]:not(.tab-content):not([class*="panel"]):not([class*="footer"]),
    .reviews:not(.footer):not([class*="bgImageSection"]) ul[class*="listContainer"]:not(.tab-content):not([class*="panel"]):not([class*="footer"]) {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
    }
    
    .youcarsBg:not(.footer):not([class*="bgImageSection"]) ul[class*="listContainer"]:not(.tab-content):not([class*="panel"]):not([class*="footer"]) li[class*="listTabItem"],
    .reviews:not(.footer):not([class*="bgImageSection"]) ul[class*="listContainer"]:not(.tab-content):not([class*="panel"]):not([class*="footer"]) li[class*="listTabItem"] {
        display: block !important;
        width: 33.33% !important;
        float: none !important;
        flex: 1 !important;
        margin-bottom: 0 !important;
        text-align: center;
    }

    /* Hide Intercom chat widget on mobile for listing pages */
    body[data-route*="/listings/"] iframe[name="intercom-launcher"],
    body[data-route*="/listings/"] iframe[name="intercom-messenger"],
    body[data-route*="/listings/"] .intercom-lightweight-app,
    body[data-route*="/listings/"] .intercom-launcher-frame,
    body[data-route*="/listings/"] .intercom-messenger-frame,
    body[data-route*="/listings/"] div[id*="intercom"],
    body[data-route*="/listings/"] iframe[id*="intercom"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* MANAGE LISTINGS MOBILE FIXES - HIGHEST PRIORITY - SCOPED TO MANAGE LISTINGS ONLY */
    
    /* Override any previous 50% width rules for manage listing items - MORE SPECIFIC SELECTORS */
    .youcarsBg .tab-content ul li[class*="panelBody"],
    .youcarsBg .tab-content li[class*="panelBody"],
    .youcarsBg .tab-pane ul li[class*="panelBody"],
    .youcarsBg .tab-pane li[class*="panelBody"],
    .youcarsBg .manageListingItem ul li[class*="panelBody"],
    .youcarsBg .manageListingItem li[class*="panelBody"] {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }
    
    /* Ensure manage listing items use full width on mobile - SCOPED TO MANAGE LISTINGS */
    .youcarsBg .panelBody,
    .youcarsBg li.panelBody,
    .youcarsBg [class*="panelBody"],
    .manageListingItem .panelBody,
    .manageListingItem li.panelBody,
    .manageListingItem [class*="panelBody"] {
        width: 100% !important;
        display: block !important;
        float: none !important;
    }
    
    /* Fix Bootstrap grid columns for manage listings on mobile - SCOPED TO MANAGE LISTINGS */
    .youcarsBg .panelBody .row [class*="col-xs-"],
    .youcarsBg .panelBody .row [class*="col-sm-"],
    .youcarsBg .panelBody .row [class*="col-md-"],
    .youcarsBg .panelBody .row [class*="col-lg-"],
    .manageListingItem .panelBody .row [class*="col-xs-"],
    .manageListingItem .panelBody .row [class*="col-sm-"],
    .manageListingItem .panelBody .row [class*="col-md-"],
    .manageListingItem .panelBody .row [class*="col-lg-"] {
        width: 100% !important;
        float: none !important;
        padding: 0 15px !important;
    }
    
    /* Ensure Bootstrap hidden-xs class works properly */
    .hidden-xs {
        display: none !important;
    }
    
    /* Show elements that should be visible on mobile */
    .hidden-md.hidden-lg {
        display: block !important;
    }
    
    /* Ensure manage listing content layout is vertical on mobile - SCOPED TO MANAGE LISTINGS */
    .youcarsBg .panelBody .row,
    .manageListingItem .panelBody .row {
        display: block !important;
    }
    
    /* Stack listing photo and content vertically on mobile - SCOPED TO MANAGE LISTINGS */
    .youcarsBg .panelBody .listDetailContent,
    .manageListingItem .panelBody .listDetailContent {
        margin-top: 15px !important;
    }

    /* Responsive fix for ManageListing container - SCOPED TO MANAGE LISTINGS */
    .youcarsBg {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Ensure tabs container doesn't create horizontal overflow - SCOPED TO MANAGE LISTINGS */
    .youcarsBg .tabBarView {
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* SPECIFIC OVERRIDE: Prevent any ul li inside manage listings from getting 50% width - SCOPED TO MANAGE LISTINGS */
    .youcarsBg .tab-content ul li:not([class*="listTabItem"]):not([class*="footer"]),
    .youcarsBg .tab-pane ul li:not([class*="listTabItem"]):not([class*="footer"]),
    .youcarsBg ul li[class*="panelBody"]:not([class*="footer"]),
    .youcarsBg li[class*="panelBody"]:not([class*="footer"]),
    .manageListingItem ul li:not([class*="listTabItem"]):not([class*="footer"]),
    .manageListingItem li[class*="panelBody"]:not([class*="footer"]) {
        width: 100% !important;
        float: none !important;
        display: block !important;
        margin-bottom: 24px !important;
    }
}

/* Privacy Block Styling for Document Verification Page */
.privacyBlockHeader {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

.privacyBlockHeader img.lockIcon {
    margin-right: 0 !important;
    vertical-align: middle;
}

.privacyBlockHeader span {
    font-weight: 500;
    font-size: 20px;
    margin: 0;
    padding: 0;
    display: inline;
}

.privacyBlockDocPage {
    margin-top: 0 !important;
}

/* Ensure proper clearfix for the tab container */
.tabBarView .nav-tabs:after,
.compactTabs .nav-tabs:after,
body .youcarsBg ul:after,
body .reviews ul:after {
    content: "";
    display: table;
    clear: both;
}