/* 
 * Custom intro.js styles with high specificity to override defaults
 * Using !important to ensure precedence over CDN styles
 */

/* Botones con mayor especificidad - matching btn-prim-mid style */
.introjs-button.introjs-button {
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 22px !important;
    background-color: #3E79F7 !important;
    border-color: #3E79F7 !important;
    border: 1px solid #3E79F7 !important;
    padding: 9px 13px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; /* Keep background shadow */
    text-shadow: none !important; /* Remove only text shadow */
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.introjs-button.introjs-button:hover {
    color: #fcf6f6 !important;
    background-color: #3E79F7 !important;
    border-color: #3E79F7 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important; /* Keep background shadow on hover */
    text-shadow: none !important; /* Remove only text shadow on hover */
}

.introjs-button.introjs-button:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(62, 121, 247, 0.2) !important; /* Keep focus shadow */
    text-shadow: none !important; /* Remove only text shadow on focus */
}

/* Botón de salir con mayor especificidad - Natural X style */
.introjs-skipbutton.introjs-skipbutton {
    background: transparent !important;
    color: #6c757d !important;
    border: none !important;
    border-radius: 50% !important;
    padding: 8px !important;
    font-size: 0 !important; /* Hide original text */
    text-indent: -9999px !important; /* Hide original text */
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    text-shadow: none !important;
}

/* Change the skip button text to a proper X symbol */
.introjs-skipbutton.introjs-skipbutton::before {
    content: "×" !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
    color: #6c757d !important;
    text-indent: 0 !important;
}

.introjs-skipbutton.introjs-skipbutton:hover {
    background: rgba(108, 117, 125, 0.1) !important;
    color: #495057 !important;
    transform: scale(1.1) !important;
}

.introjs-skipbutton.introjs-skipbutton:hover::before {
    color: #495057 !important;
}

/* Done button keeps the normal style */
.introjs-donebutton.introjs-donebutton {
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 22px !important;
    background-color: #3E79F7 !important;
    border-color: #3E79F7 !important;
    border: 1px solid #3E79F7 !important;
    padding: 9px 13px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.introjs-donebutton.introjs-donebutton:hover {
    color: #fcf6f6 !important;
    background-color: #3E79F7 !important;
    border-color: #3E79F7 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Tooltip con mayor especificidad */
.introjs-tooltip.introjs-tooltip {
    border-radius: 12px !important;
    padding: 16px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; /* Keep tooltip shadow */
    font-family: 'Poppins', sans-serif !important;
    max-width: 320px !important;
    border: none !important;
    background: white !important;
}

/* Texto del tooltip */
.introjs-tooltiptext {
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #374151 !important;
    margin-bottom: 1rem !important;
    text-shadow: none !important; /* Remove text shadow */
}

/* Título del tooltip */
.introjs-tooltip-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-bottom: 0.75rem !important;
    text-shadow: none !important; /* Remove text shadow */
    border-bottom: 1px solid #e5e7eb !important;
    padding-bottom: 0.5rem !important;
}

/* Barra de progreso con mayor especificidad */
.introjs-progress.introjs-progress {
    background: #e5e7eb !important;
    border-radius: 4px !important;
    height: 6px !important;
    margin: 1rem 0 !important;
}

.introjs-progressbar.introjs-progressbar {
    background-color: #2563eb !important;
    height: 6px !important;
    border-radius: 4px !important;
    transition: width 0.3s ease !important;
}

/* Flechas del tooltip */
.introjs-arrow.top,
.introjs-arrow.top-right,
.introjs-arrow.top-middle {
    border-bottom-color: white !important;
}

.introjs-arrow.bottom,
.introjs-arrow.bottom-right,
.introjs-arrow.bottom-middle {
    border-top-color: white !important;
}

.introjs-arrow.left,
.introjs-arrow.left-top,
.introjs-arrow.left-middle {
    border-right-color: white !important;
}

.introjs-arrow.right,
.introjs-arrow.right-top,
.introjs-arrow.right-middle {
    border-left-color: white !important;
}

/* Overlay con mayor especificidad */
.introjs-overlay.introjs-overlay {
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(2px) !important;
}

/* Elemento destacado */
.introjs-helperLayer.introjs-helperLayer {
    border: 3px solid #3E79F7 !important;
    border-radius: 8px !important;
    box-shadow: 
        0 0 0 4px rgba(62, 121, 247, 0.2) !important,
        0 10px 30px rgba(0, 0, 0, 0.2) !important; /* Keep background shadows */
}

/* Botones del tooltip - layout */
.introjs-tooltipbuttons {
    text-align: right !important;
    margin-top: 1rem !important;
    display: flex !important;
    gap: 0.5rem !important;
    justify-content: flex-end !important;
}

/* Ajustes responsive */
@media (max-width: 768px) {
    .introjs-tooltip.introjs-tooltip {
        max-width: calc(100vw - 2rem) !important;
        margin: 1rem !important;
    }
    
    .introjs-tooltipbuttons {
        flex-direction: column-reverse !important;
    }
    
    .introjs-button.introjs-button,
    .introjs-skipbutton.introjs-skipbutton {
        width: 100% !important;
        margin: 0.25rem 0 !important;
    }
}