/* MyPost2 Shepherd Tour Custom Styles */

/*
|------------------------------------------------
| Z-INDEX STACK: Shepherd.js Compatibility
|------------------------------------------------
| The default Shepherd z-index is 9999. We'll aggressively boost the
| target element and the Shepherd overlay to ensure visibility.
*/

/* --- WordPress Admin Menu Layering Fix --- */

/* Base Admin Menu Z-Index (Keep low) */
#adminmenu {
    z-index: 999996 !important; 
    position: relative !important;
}

/* 🚩 CRITICAL FIX: Ensure the target link is highest AND fully opaque */
#toplevel_page_mypost2,
#adminmenu li.wp-has-current-submenu,
#adminmenu a[href*="mypost2"] {
    /* Set Z-index above the Shepherd overlay (default is 9999) */
    z-index: 100000 !important; 
    position: relative !important;
    opacity: 1 !important; 
}

/* --- Shepherd.js Component Overrides --- */

/* Overlay Customization (The dark area) */
.shepherd-modal-is-open .shepherd-target-click-disabled {
    opacity: 0.7 !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Tooltip Customization (The popover box) */
.shepherd-step {
    border-radius: 15px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #e5e7eb !important;
    min-width: 400px !important;
    max-width: 500px !important;
    padding: 0 !important;
    /* Ensure the tooltip is high, but the target elements are higher */
    z-index: 99999 !important; 
}

/* Tooltip Header and Title */
.shepherd-header {
    padding: 10px 32px 10px !important;
    border-radius: 15px!important;
}

.shepherd-title {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

/* Tooltip Content */
.shepherd-text {
    padding: 12px 32px 32px !important;
    color: #333 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

/* Footer (Buttons) */
.shepherd-footer {
    padding: 20px 32px 24px !important;
    background:#E6E6E6;
    border-top: 1px solid #e5e7eb !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-radius: 15px;
}

/* All Buttons Base */
.shepherd-button {
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Primary Button (Next) */
.shepherd-button.shepherd-button-primary {
    background: #4f46e5 !important;
    color: #ffffff !important;
    order: 2; /* Move next to the right */
}

.shepherd-button.shepherd-button-primary:hover {
    background: #4338ca !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
}

/* Secondary Button (Back/Skip) */
.shepherd-button.shepherd-button-secondary {
    background: #f3f4f6 !important;
    color: #374151 !important;
    order: 1; /* Move back/skip to the left */
}

.shepherd-button.shepherd-button-secondary:hover {
    background: #e5e7eb !important;
}

.shepherd-element {
    border-radius: 15px;
    border: 3px solid #ef4444 !important;
}    

/* Highlight menu items during tour */
.shepherd-target,
.shepherd-enabled.shepherd-target {
    outline: 3px solid #ef4444 !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}
.shepherd-arrow, .shepherd-arrow:before {
    height: 48px;
    position: absolute;
    width: 48px;
    z-index: -1;
}

.shepherd-button-step-counter {
    background: #ef4444 !important;
    color: #ffffff !important;
    cursor: default !important;
    pointer-events: none !important;
    font-size: 14px !important;
}

.shepherd-button-step-counter:hover {
    background: transparent !important;
}