/**
 * 我的最愛功能樣式
 */

/* 星號基本樣式 */
.menu-favorite-star {
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
    color: #a1acb8;
}

/* 星號 hover 效果 */
.menu-favorite-star:hover {
    color: #ffab00;
    transform: scale(1.2);
}

/* 已收藏的星號（實心） */
.menu-favorite-star.ti-star-filled {
    color: #ffab00;
}

.menu-favorite-star.ti-star-filled:hover {
color: #ff9800;
}

/* 移除按鈕樣式 */
.menu-favorite-remove {
    font-size: 0.875rem;
    transition: all 0.2s ease-in-out;
    color: #a1acb8;
    opacity: 0;
}

.menu-item:hover .menu-favorite-remove {
    opacity: 1;
}

.menu-favorite-remove:hover {
    color: #ff4c51;
    transform: scale(1.2);
}

/* 確保星號和移除按鈕不影響選單項目的點擊 */
.menu-link {
    position: relative;
}

.menu-favorite-star,
.menu-favorite-remove {
    z-index: 10;
}

/* 我的最愛標題列背景色 */
.menu-favorite-header {
    background-color: rgba(255, 171, 0, 0.08) !important;
}

.menu-favorite-header:hover,
.menu-favorite-header:focus {
    background-color: rgba(255, 171, 0, 0.12) !important;
}

.menu-item.open > .menu-favorite-header {
    background-color: rgba(255, 171, 0, 0.12) !important;
}

/* 最近使用標題列背景色 */
.menu-recent-header {
    background-color: rgba(105, 108, 255, 0.08) !important;
}

.menu-recent-header:hover,
.menu-recent-header:focus {
    background-color: rgba(105, 108, 255, 0.12) !important;
}

.menu-item.open > .menu-recent-header {
    background-color: rgba(105, 108, 255, 0.12) !important;
}

/* Dark mode 支援 */
.menu-dark .menu-favorite-star {
    color: #8592a3;
}

.menu-dark .menu-favorite-star:hover {
    color: #ffab00;
}

.menu-dark .menu-favorite-star.ti-star-filled {
    color: #ffab00;
}

.menu-dark .menu-favorite-remove {
    color: #8592a3;
}

.menu-dark .menu-favorite-remove:hover {
    color: #ff4c51;
}

/* Dark mode - 我的最愛標題列 */
.menu-dark .menu-favorite-header {
    background-color: rgba(255, 171, 0, 0.12) !important;
}

.menu-dark .menu-favorite-header:hover,
.menu-dark .menu-favorite-header:focus {
    background-color: rgba(255, 171, 0, 0.16) !important;
}

.menu-dark .menu-item.open > .menu-favorite-header {
    background-color: rgba(255, 171, 0, 0.16) !important;
}

/* Dark mode - 最近使用標題列 */
.menu-dark .menu-recent-header {
    background-color: rgba(105, 108, 255, 0.12) !important;
}

.menu-dark .menu-recent-header:hover,
.menu-dark .menu-recent-header:focus {
    background-color: rgba(105, 108, 255, 0.16) !important;
}

.menu-dark .menu-item.open > .menu-recent-header {
    background-color: rgba(105, 108, 255, 0.16) !important;
}

/* 確保 menu-link 內的元素正確排列 */
.menu-sub .menu-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.menu-sub .menu-link > div {
    flex: 1;
}

/* 特殊區塊的子選單保持顯示 */
/* 覆蓋 inline style */
.menu-vertical .menu-inner > .menu-item[data-special-section] {
    height: auto !important;      /* 覆蓋 style="height: 38px" */
    overflow: visible !important; /* 覆蓋 style="overflow: hidden" */
}

/* 子選單保持顯示 */
.menu-vertical .menu-inner > .menu-item[data-special-section] > .menu-sub {
    display: flex !important;
}

/* 特殊區塊的 toggle 箭頭保持顯示 */
/* .menu-vertical .menu-item[data-special-section] > .menu-toggle:after,
.menu-vertical .menu-item[data-special-section].open > .menu-toggle:after {
  transform: translateY(-50%) rotate(90deg) !important;
} */

/* 特殊區塊的 toggle 箭頭保持隱藏 */
.menu-vertical .menu-item[data-special-section] > .menu-toggle:after {
    display: none !important;
}

/* 收起選單時，特殊區塊的子選單保持隱藏，避免有大塊空白區塊 */
.layout-menu-fixed.layout-menu-collapsed:not(.layout-menu-expanded):not(.layout-menu-hover) .menu-vertical .menu-inner > .menu-item[data-special-section] > .menu-sub{
    display: none !important;
}