/**
 * Copyright © ProPlayerFC. All rights reserved.
 * Global Mobile Navigation Styles
 * Applies to navigation sections on all frontend pages
 */

/* Navigation Sections Container */
.sections.nav-sections {
    display: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Show navigation when toggle is active (via JS) */
.sections.nav-sections.nav-sections--open {
    display: block !important;
}

.section-items.nav-sections-items {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Section Item Title (Toggle Button) */
.section-item-title.nav-sections-item-title {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.section-item-title.nav-sections-item-title:first-child {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.section-item-title.nav-sections-item-title:last-of-type {
    border-bottom: 1px solid #e5e7eb !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.section-item-title.nav-sections-item-title:hover {
    background: #f9fafb !important;
}

.section-item-title.nav-sections-item-title.active {
    background: #f3f4f6 !important;
}

.section-item-title.nav-sections-item-title.active + .section-item-content {
    display: block !important;
}

.nav-sections-item-switch {
    display: block !important;
    padding: 16px 20px !important;
    color: #374151 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.nav-sections-item-switch:hover {
    color: #000000 !important;
    text-decoration: none !important;
}

/* Section Item Content */
.section-item-content.nav-sections-item-content {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-top: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.section-item-content.nav-sections-item-content[aria-hidden="false"] {
    display: block !important;
}

.section-item-content.nav-sections-item-content:not([aria-hidden="true"]) {
    display: block !important;
}

/* Navigation Menu */
.navigation[data-action="navigation"] {
    padding: 0 !important;
}

.navigation[data-action="navigation"] .ui-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
}

.navigation[data-action="navigation"] .ui-menu-item {
    border-bottom: 1px solid #f3f4f6 !important;
}

.navigation[data-action="navigation"] .ui-menu-item:last-child {
    border-bottom: none !important;
}

.navigation[data-action="navigation"] .ui-menu-item a {
    display: block !important;
    padding: 14px 20px !important;
    color: #374151 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.navigation[data-action="navigation"] .ui-menu-item a:hover {
    background: #f9fafb !important;
    color: #000000 !important;
    padding-left: 24px !important;
}

/* Header Links (Account Section) */
.section-item-content .header.links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.section-item-content .header.links li {
    border-bottom: 1px solid #f3f4f6 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.section-item-content .header.links li:last-child {
    border-bottom: none !important;
}

.section-item-content .header.links li a,
.section-item-content .header.links li .customer-welcome,
.section-item-content .header.links li .user-menu-wrapper {
    display: block !important;
    padding: 14px 20px !important;
    color: #374151 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    word-wrap: break-word !important;
}

.section-item-content .header.links li a:hover {
    background: #f9fafb !important;
    color: #000000 !important;
    padding-left: 24px !important;
    text-decoration: none !important;
}

.section-item-content .header.links li.greet,
.section-item-content .header.links li .greet,
.section-item-content .header.links li .greet.logged-in,
.section-item-content .header.links li .greet span.logged-in {
    display: none !important;
}

/* User Menu Wrapper inside mobile nav */
.section-item-content .user-menu-wrapper {
    border-bottom: 1px solid #f3f4f6 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Greeting - oculto no mobile (apenas desktop) */
.section-item-content .user-menu-wrapper .user-menu-greeting {
    display: none !important;
}

/* Avatar (photo) - visible on mobile */
.section-item-content .user-menu-wrapper .user-avatar {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 16px 12px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    align-self: flex-start !important;
}

/* Placeholder when no photo - visible on mobile */
.section-item-content .user-menu-wrapper .user-avatar-placeholder {
    display: flex !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 16px 12px !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
}

.section-item-content .user-menu-wrapper .user-dropdown {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
}

.section-item-content .user-menu-wrapper .user-dropdown-header,
.section-item-content .user-menu-wrapper .user-dropdown-menu,
.section-item-content .user-menu-wrapper .user-dropdown-footer {
    width: 100% !important;
    max-width: 100% !important;
}

/* Customer Menu inside mobile nav */
.section-item-content .customer-menu {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Skip to Content */
.action.skip.contentarea {
    position: absolute !important;
    left: -9999px !important;
    z-index: 999 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
}

.action.skip.contentarea:focus {
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    background: #000000 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    z-index: 1000 !important;
}

.action.skip.contentarea:focus span {
    display: inline !important;
}

.action.skip.contentarea span {
    display: none !important;
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .sections.nav-sections {
        margin-bottom: 20px !important;
    }
    
    .nav-sections-item-switch {
        padding: 14px 16px !important;
        font-size: 14px !important;
    }
    
    .navigation[data-action="navigation"] .ui-menu-item a,
    .section-item-content .header.links li a,
    .section-item-content .header.links li .greet {
        padding: 12px 16px !important;
        font-size: 13px !important;
    }
    
    .navigation[data-action="navigation"] .ui-menu-item a:hover,
    .section-item-content .header.links li a:hover {
        padding-left: 20px !important;
    }
    
    .section-item-content .user-menu-wrapper .user-dropdown {
        margin: 0 !important;
    }
    
    .section-item-content .user-menu-wrapper .user-dropdown-header {
        padding: 12px 16px !important;
    }
    
    .section-item-content .user-menu-wrapper .user-dropdown-item {
        padding: 12px 16px !important;
    }
    
    .section-item-content .user-menu-wrapper .user-dropdown-footer {
        padding: 0 !important;
    }
    
    .section-item-content .user-menu-wrapper .user-dropdown-logout {
        padding: 12px 16px !important;
    }
}

/* Hide navigation sections on desktop */
@media (min-width: 768px) {
    .sections.nav-sections {
        display: none !important;
    }
}