/* Custom Shepherd.js theme for Mahalo AI - Enhanced to match site's look and feel */

/* For tours using shepherd-theme-custom class */
.shepherd-element.shepherd-theme-custom .shepherd-content {
    border-radius: 0.5rem !important;
    max-width: 400px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(99, 102, 241, 0.1) !important;
}

.shepherd-element.shepherd-theme-custom .shepherd-header {
    background: linear-gradient(to right, #6366f1, #a855f7) !important; /* from-indigo-500 to-purple-600 */
    color: white !important;
    padding: 1rem !important;
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
}

.shepherd-element.shepherd-theme-custom .shepherd-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: white !important; /* Ensure title text is white */
}

.shepherd-element.shepherd-theme-custom .shepherd-text {
    padding: 1.5rem !important;
    line-height: 1.5 !important;
    color: #4b5563 !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.shepherd-element.shepherd-theme-custom .shepherd-footer {
    padding: 0.75rem 1.5rem 1.5rem !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.shepherd-element.shepherd-theme-custom .shepherd-button {
    font-weight: 500 !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 9999px !important;
    font-size: 0.875rem !important;
    margin-left: 0.75rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.shepherd-element.shepherd-theme-custom .shepherd-button-primary {
    background: linear-gradient(to right, #6366f1, #a855f7) !important; /* from-indigo-500 to-purple-600 */
    color: white !important;
}

.shepherd-element.shepherd-theme-custom .shepherd-button-primary:hover {
    background: linear-gradient(to right, #4f46e5, #9333ea) !important; /* from-indigo-600 to-purple-700 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.shepherd-element.shepherd-theme-custom .shepherd-button-secondary {
    background-color: #f3f4f6 !important;
    color: #4b5563 !important;
}

.shepherd-element.shepherd-theme-custom .shepherd-button-secondary:hover {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

.shepherd-element.shepherd-theme-custom .shepherd-cancel-icon {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 1.25rem !important;
    transition: color 0.2s !important;
}

.shepherd-element.shepherd-theme-custom .shepherd-cancel-icon:hover {
    color: white !important;
}

/* Override styles for tours using inline Tailwind classes */
/* Target tours that have bg-purple-100 class */
.shepherd-element .bg-purple-100.shepherd-content .shepherd-header {
    background: linear-gradient(to right, #6366f1, #a855f7) !important;
    color: white !important;
    padding: 1rem !important;
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
}

/* Also try targeting without .shepherd-element wrapper */
.shepherd-content.shepherd-theme-custom .shepherd-header {
    background: linear-gradient(to right, #6366f1, #a855f7) !important;
    color: white !important;
    padding: 1rem !important;
}

/* Ensure header text is always white */
.shepherd-element.shepherd-theme-custom .shepherd-header * {
    color: white !important;
}