/**
 * 账户页面底栏修复样式
 * 专门处理my-account页面底栏样式问题
 */

/* 专门针对账户页面的底栏样式 */
body.page-template-page-my-account .nav-bar,
body.page-id-my-account .nav-bar,
.my-account-page .nav-bar,
body[class*="my-account"] .nav-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70px !important;
    background-color: white !important;
    border-top: 1px solid rgba(0,0,0,0.05) !important;
    z-index: 999999 !important;
    padding: 5px 0 !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 确保账户页面内容区域有足够的底部内边距 */
body.page-template-page-my-account .content,
body.page-id-my-account .content,
.my-account-page .content,
body[class*="my-account"] .content,
.account-container {
    padding-bottom: 80px !important;
    margin-bottom: 0 !important;
}

/* 确保账户页面底栏中的导航项正确显示 */
body.page-template-page-my-account .nav-bar .nav-item,
body.page-id-my-account .nav-bar .nav-item,
.my-account-page .nav-bar .nav-item,
body[class*="my-account"] .nav-bar .nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20% !important;
    height: 100% !important;
    color: #999 !important;
}

/* 确保"我的"项在账户页面正确高亮 */
body.page-template-page-my-account .nav-bar .nav-item[href*="my-account"],
body.page-id-my-account .nav-bar .nav-item[href*="my-account"],
.my-account-page .nav-bar .nav-item[href*="my-account"],
body[class*="my-account"] .nav-bar .nav-item[href*="my-account"] {
    color: #f44336 !important;
}

body.page-template-page-my-account .nav-bar .nav-item[href*="my-account"] svg,
body.page-id-my-account .nav-bar .nav-item[href*="my-account"] svg,
.my-account-page .nav-bar .nav-item[href*="my-account"] svg,
body[class*="my-account"] .nav-bar .nav-item[href*="my-account"] svg {
    fill: #f44336 !important;
}

body.page-template-page-my-account .nav-bar .nav-item[href*="my-account"] span,
body.page-id-my-account .nav-bar .nav-item[href*="my-account"] span,
.my-account-page .nav-bar .nav-item[href*="my-account"] span,
body[class*="my-account"] .nav-bar .nav-item[href*="my-account"] span {
    color: #f44336 !important;
}