/* Onboarding Tour Styles for BuzzNest */

/* Custom styling for Shepherd.js Tour */
.shepherd-theme-dark {
    --shepherd-bg: #343a40;
    --shepherd-text: #ffffff;
    --shepherd-theme-primary: var(--bs-warning);
}

/* Custom theme class to ensure our styles take precedence */
.custom-tour-theme {
    background-color: #343a40 !important;
    color: #ffffff !important;
    border: 2px solid var(--bs-warning);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

/* Force text color to be visible */
.shepherd-text {
    color: white !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    font-weight: 500;
}

.shepherd-title {
    color: var(--bs-warning) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Ensure background is dark */
.shepherd-element {
    background-color: #343a40 !important;
    color: white !important;
    border: 2px solid var(--bs-warning) !important;
}

/* Fix content styles */
.shepherd-content {
    background-color: #343a40 !important;
}

.shepherd-header {
    background-color: #212529 !important;
}

/* Tour button in navbar */
.tour-button {
    background-color: transparent;
    border: 1px solid var(--bs-warning);
    border-radius: 5px;
    color: var(--bs-warning);
    margin-left: 10px;
    transition: all 0.3s ease;
}

.tour-button:hover, 
.tour-button:focus {
    background-color: var(--bs-warning);
    color: var(--bs-dark);
}

/* Tour modal styling */
.shepherd-element {
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    max-width: 350px;
    z-index: 9999;
}

.shepherd-has-title .shepherd-content .shepherd-header {
    background-color: var(--bs-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 20px;
}

.shepherd-title {
    color: var(--bs-warning);
    font-size: 18px;
    font-weight: 600;
}

.shepherd-text {
    color: var(--bs-light);
    font-size: 14px;
    line-height: 1.5;
    padding: 15px 20px;
}

.shepherd-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
}

.shepherd-button {
    background-color: transparent;
    border: 1px solid var(--bs-warning);
    border-radius: 5px;
    color: var(--bs-warning);
    font-size: 14px;
    font-weight: 500;
    margin: 0 5px;
    padding: 8px 15px;
    transition: all 0.3s ease;
}

.shepherd-button:hover,
.shepherd-button:focus {
    background-color: var(--bs-warning);
    color: var(--bs-dark);
}

.shepherd-button-primary {
    background-color: var(--bs-warning);
    color: var(--bs-dark);
}

.shepherd-button-primary:hover,
.shepherd-button-primary:focus {
    background-color: var(--bs-warning);
    box-shadow: 0 0 5px var(--bs-warning);
    color: var(--bs-dark);
    opacity: 0.9;
}

.shepherd-arrow {
    height: 16px;
    width: 16px;
}

.shepherd-arrow::before {
    background-color: var(--bs-dark);
}

/* Special styling for welcome and completion modals */
.tour-welcome-modal .shepherd-text,
.tour-complete-modal .shepherd-text {
    padding: 20px;
    text-align: center;
}

.tour-welcome-modal .shepherd-title,
.tour-complete-modal .shepherd-title {
    font-size: 20px;
    text-align: center;
}

.tour-welcome-modal .shepherd-footer,
.tour-complete-modal .shepherd-footer {
    justify-content: center;
}

/* Tour progress indicators */
.shepherd-progress {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.shepherd-progress-dot {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    height: 8px;
    margin: 0 4px;
    width: 8px;
}

.shepherd-progress-dot.active {
    background-color: var(--bs-warning);
    height: 10px;
    width: 10px;
}

/* Tour highlight effect */
.tour-highlight {
    box-shadow: 0 0 0 4px var(--bs-warning) !important;
    position: relative;
    z-index: 10;
}

/* Tour overlay */
.shepherd-modal-overlay-container.shepherd-modal-is-visible {
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9998;
}

/* Tour completion icon */
.tour-complete-icon {
    animation: pulse 2s infinite;
    color: var(--bs-success);
    font-size: 40px;
    margin-bottom: 15px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}