/* Customized styles for intro.js tooltips with adjusted z-index */

/* Ensure that tooltips and overlays are above all other elements */
.introjs-overlay,
.introjs-helperLayer,
.introjs-fixParent,
.introjs-showElement,
.introjs-tooltipReferenceLayer {
    z-index: 999999 !important;
}

.introjs-tooltip {
    z-index: 1000000 !important;
}

.introjs-tooltip {
    background-color: white;
    border-radius: 30px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
    font-family: Arial, sans-serif;
    padding: 20px;
    max-width: 400px;
}

.introjs-tooltip h1,
.introjs-tooltip h2,
.introjs-tooltip h3,
.introjs-tooltip h4,
.introjs-tooltip h5,
.introjs-tooltip h6 {
    color: #7ca395;
    margin-top: 0;
}

.introjs-tooltiptext {
    font-size: 16px;
    line-height: 1.5;
}

.introjs-arrow {
    border-color: white transparent transparent transparent;
}

.introjs-helperLayer {
    background-color: rgba(124, 163, 149, 0.2);
    border-radius: 30px;
    box-shadow: 0 0 0 4px rgba(124, 163, 149, 0.8);
}

.introjs-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

.introjs-button,
.introjs-skipbutton,
.introjs-prevbutton,
.introjs-nextbutton {
    background-color: #7ca395 !important;
    color: white !important;
    border: none;
    border-radius: 30px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    margin: 5px;
    text-shadow: none !important;
    
}

.introjs-button:hover,
.introjs-skipbutton:hover,
.introjs-prevbutton:hover,
.introjs-nextbutton:hover {
    color: white !important;
    background-color: #6c8d80;
    text-shadow: none !important;
}

.introjs-bullets {
    display: none;
}

.introjs-progress {
    background-color: #f0f0f0;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 10px;
}

.introjs-progressbar {
    background-color: #7ca395;
    height: 100%;
}

/* Adjusting the highlighted element */
.introjs-fixParent {
    z-index: 999999 !important;
}

.introjs-helperLayer {
    box-shadow: 0 0 0 4px rgba(124, 163, 149, 0.5);
    z-index: 999999 !important;
}

.introjs-tooltipReferenceLayer {
    z-index: 999999 !important;
}

.introjs-tooltip {
    z-index: 1000000 !important;
}

.introjs-showElement.introjs-relativePosition {
    z-index: 999999 !important;
}
.introjs-skipbutton {

}
.nav-link{
    font-size: 18px;
    background-color:  rgba(124, 163, 149, 0.5) !important;
    color: white !important;
}
.nav-link.active{
    background-color: #7ca395 !important;
}

.btn-outline-primary {
    --bs-btn-color:  rgba(124, 163, 149, 0.5);
    --bs-btn-border-color: #7ca395;
}

/* Special handling for advisor icon in intro tours */
.introjs-showElement#advisorIcon {
    position: relative !important;
    z-index: 1000001 !important; /* Higher than tooltip */
}

/* Fix for highlighting fixed-position elements */
.introjs-fixParent.advisor-container {
    position: fixed !important;
    z-index: 1000001 !important;
    bottom: 30px !important;
    right: 30px !important;
}

/* Add a visible highlight border for the advisor icon specifically */
.introjs-helperLayer[data-element-position-top][data-element-position-right] {
    background-color: rgba(124, 163, 149, 0.3) !important;
    border: 3px solid rgba(124, 163, 149, 0.8) !important;
}

/* Create a spotlight effect for the advisor icon */
.introjs-helperLayer[data-element-id="advisorIcon"] {
    background-color: transparent !important;
    border: none !important;
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.7) !important;
}

/* Ensure the tooltip position is accurate for the advisor icon */
.introjs-tooltip[data-element-id="advisorIcon"] {
    position: fixed !important;
    top: auto !important;
    bottom: 100px !important;
    right: 100px !important;
    left: auto !important;
}

/* Add fixed positioning for advisor tooltip */
.advisor-tooltip {
    position: fixed !important;
    bottom: 70px !important;
    right: 20px !important;
    transform: none !important;
    max-width: 300px;
    /* Ensure it's not too wide */
}

#modelSelector {
    color: gray !important;
}