/* Position the guide without changing the supplied page or Metronic components. */
#bladecity-guide {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 1030;
    pointer-events: none;
}

#bladecity-guide[hidden],
#bladecity-guide [hidden] {
    display: none !important;
}

#bladecity-guide .bc-guide-launcher {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 96px;
    height: 124px;
    pointer-events: auto;
    background: transparent;
    border: 0;
}

#bladecity-guide [data-guide-canvas] {
    display: block;
    width: 96px;
    height: 104px;
    pointer-events: none;
}

#bladecity-guide .bc-guide-fallback {
    position: absolute;
    top: 30px;
    left: 23px;
}

#bladecity-guide .bc-guide-label {
    line-height: 20px;
}

#bladecity-guide [data-guide-compact] {
    min-height: 44px;
    pointer-events: auto;
}

#bladecity-guide .bc-guide-panel {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: calc(100% + 12px);
    width: min(336px, calc(100vw - 32px));
    max-height: calc(100vh - 172px);
    max-height: calc(100dvh - 172px);
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
}

#bladecity-guide[data-guide-minimized="true"] .bc-guide-panel {
    max-height: calc(100vh - 92px);
    max-height: calc(100dvh - 92px);
}

#bladecity-guide .bc-guide-highlight {
    position: fixed;
    border: 2px solid #e1b854;
    border-radius: 8px;
    box-shadow: 0 0 0 3px rgb(225 184 84 / 12%);
    pointer-events: none;
    z-index: -1;
}

#bladecity-guide .bc-guide-launcher:focus-visible {
    outline: 2px solid #e1b854;
    outline-offset: 3px;
    border-radius: 12px;
}

#bladecity-guide summary:focus-visible {
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    #bladecity-guide {
        right: max(16px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
    }

    #bladecity-guide .bc-guide-launcher {
        width: 80px;
        height: 104px;
    }

    #bladecity-guide [data-guide-canvas] {
        width: 80px;
        height: 86px;
    }

    #bladecity-guide .bc-guide-fallback {
        top: 20px;
        left: 15px;
    }

    #bladecity-guide .bc-guide-panel {
        max-height: calc(100vh - 144px);
        max-height: calc(100dvh - 144px);
    }
}