/* =========================
   Driver.js + MudBlazor Theme
   ========================= */

.mud-driver-theme {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-radius: 16px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.28) !important;
    transition: all .18s ease !important;
}

    /* =========================
   Title
   ========================= */

    .mud-driver-theme .driver-popover-title {
        color: var(--mud-palette-primary) !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        margin-bottom: 8px !important;
    }

    /* =========================
   Description
   ========================= */

    .mud-driver-theme .driver-popover-description {
        color: var(--mud-palette-text-primary) !important;
        line-height: 1.65 !important;
        font-size: 14px !important;
    }

    /* =========================
   Footer
   ========================= */

    .mud-driver-theme .driver-popover-footer {
        margin-top: 14px !important;
    }

    /* =========================
   Buttons
   ========================= */

    .mud-driver-theme .driver-popover-next-btn,
    .mud-driver-theme .driver-popover-prev-btn {
        background: var(--mud-palette-primary) !important;
        color: var(--mud-palette-primary-text) !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 7px 16px !important;
        text-shadow: none !important;
        font-weight: 600 !important;
        transition: all .15s ease !important;
    }

        /* Hover */

        .mud-driver-theme .driver-popover-next-btn:hover,
        .mud-driver-theme .driver-popover-prev-btn:hover {
            filter: brightness(1.08);
            transform: translateY(-1px);
        }

        /* =========================
   Disabled Button
   ========================= */

        .mud-driver-theme .driver-popover-prev-btn:disabled,
        .mud-driver-theme .driver-popover-next-btn:disabled {
            opacity: 0.45 !important;
        }

    /* =========================
   Progress Text
   ========================= */

    .mud-driver-theme .driver-popover-progress-text {
        color: var(--mud-palette-text-secondary) !important;
        font-size: 13px !important;
    }

    /* =========================
   Close Button
   ========================= */

    .mud-driver-theme .driver-popover-close-btn {
        color: var(--mud-palette-text-secondary) !important;
        transition: all .15s ease !important;
    }

        .mud-driver-theme .driver-popover-close-btn:hover {
            color: var(--mud-palette-error) !important;
            transform: scale(1.1);
        }

/* =========================
   Highlighted Element
   ========================= */

.driver-active-element {
    border-radius: 12px !important;
    box-shadow: 0 0 0 4px var(--mud-palette-primary) !important;
    transition: all .18s ease !important;
}

/* =========================
   Arrow Colors
   ========================= */

.driver-popover-arrow-side-left.driver-popover-arrow {
    border-left-color: var(--mud-palette-surface) !important;
}

.driver-popover-arrow-side-right.driver-popover-arrow {
    border-right-color: var(--mud-palette-surface) !important;
}

.driver-popover-arrow-side-top.driver-popover-arrow {
    border-top-color: var(--mud-palette-surface) !important;
}

.driver-popover-arrow-side-bottom.driver-popover-arrow {
    border-bottom-color: var(--mud-palette-surface) !important;
}

/* =========================
   Smooth animation
   ========================= */

.driver-popover {
    animation: driverFadeIn .18s ease;
}

@keyframes driverFadeIn {

    from {
        opacity: 0;
        transform: translateY(6px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* =========================
   Highlighted Element (純淨無邊框版)
   ========================= */
.driver-active-element {
    /* 1. 徹底拔除所有實體線條、外框與陰影 */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    /* 2. 確保基本圓角與層級正確即可 */
    position: relative !important;
    z-index: 100002 !important;
    border-radius: 4px !important;
    /* 3. 【可選】如果希望高亮元件看起來稍微立體一點，可以加一層非常淡的環境光 */
    /* 如果你希望完全跟平常一樣，也可以把下面這行刪掉 */
    background-color: var(--mud-palette-surface) !important;
}

/* ==========================================
   解決 Sticky Nav 覆蓋 Driver.js 的終極 CSS
   ========================================== */

/* 1. 確保 Driver.js 的黑底遮罩與提示泡泡在最最最上層 */
.driver-overlay {
    z-index: 200000 !important;
}

.driver-popover {
    z-index: 200001 !important;
}

/* 2. 當元件被高亮時，強制提升它的層級，突破 sticky 的封鎖 */
.driver-active-element {
    position: relative !important;
    z-index: 200002 !important; /* 比遮罩和泡泡都要高 */
}

/* 3. 防禦機制：如果你的 sticky-nav 設定了極大的 z-index，
      確保在導覽進行時，將導覽列調低，或是讓高亮元件超越它 */
.sticky-nav {
    /* 檢查你原本的 .sticky-nav 裡的 z-index，通常設 1000 就夠了。
       只要確保它小於 200000，就不會遮擋 Help Tour。 */
    z-index: 1000;
}