/**
 * Driver.js Tour Styling
 * 
 * Customizes Driver.js popover and overlay to match RacePace brand
 * Implements "Modern Glass" style with Spotlight & Card system
 */

/* Highlighted Element Halo - The Spotlight Effect */
.driver-active-element {
    box-shadow: 0 0 0 4px var(--tertiary-color-transparent-50, rgba(5, 160, 209, 0.5)) !important;
    border-radius: 4px; /* Optional, might depend on element */
    z-index: 100004 !important; /* Ensure it's above the overlay */
}

/* Popover Container - The Floating Card */
.driver-popover {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.2) !important;
    padding: 1.5rem !important;
    max-width: 400px !important;
    color: var(--primary-color, #232F3E) !important;
}

/* Remove Arrow/Triangle */
.driver-popover-arrow {
    display: none !important;
}

/* Title */
.driver-popover-title {
    font-family: "Inter", sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important; /* 18px */
    margin-bottom: 0.5rem !important;
    color: var(--primary-color, #232F3E) !important;
    line-height: 1.4 !important;
}

/* Description */
.driver-popover-description {
    font-family: "Inter", sans-serif !important;
    font-size: 0.95rem !important; /* 15px */
    line-height: 1.6 !important;
    color: var(--font-color, #333) !important;
    margin-bottom: 1.5rem !important;
}

/* Footer / Buttons Container */
.driver-popover-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    margin-top: 0 !important;
}

.driver-popover-navigation-btns {
    display: flex !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

/* Next Button (Primary) - Minimalist Circle */
.driver-popover-next-btn {
    background-color: var(--tertiary-color, #05A0D1) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-shadow: none !important;
    order: 2 !important; /* Ensure it's on the right */
}

/* Ensure hidden buttons stay hidden (overriding the display: flex !important above) */
.driver-popover-next-btn[style*="display: none"],
.driver-popover-prev-btn[style*="display: none"] {
    display: none !important;
}

.driver-popover-next-btn:hover {
    background-color: var(--tertiary-color-dark, #0485AC) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px var(--tertiary-color-transparent-30) !important;
}

.driver-popover-next-btn:active {
    transform: translateY(0) !important;
}

/* Previous Button (Secondary) - Minimalist Circle */
.driver-popover-prev-btn {
    background-color: transparent !important;
    color: var(--font-color, #555) !important;
    border: 1px solid var(--divider-color, rgba(35, 47, 62, 0.1)) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    order: 1 !important; /* Ensure it's on the left */
}

.driver-popover-prev-btn:hover {
    color: var(--primary-color, #232F3E) !important;
    background-color: rgba(0,0,0,0.05) !important;
    border-color: var(--primary-color, #232F3E) !important;
}

/* Close Button */
.driver-popover-close-btn {
    color: var(--font-color, #888) !important;
    opacity: 0.6 !important;
    padding: 4px !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}

.driver-popover-close-btn:hover {
    background-color: rgba(0,0,0,0.05) !important;
    color: var(--cancel-red, #dc3545) !important;
    opacity: 1 !important;
}

/* Progress Text - Minimalist */
.driver-popover-progress-text {
    font-family: "Inter", sans-serif !important;
    font-size: 0.8rem !important;
    color: #888 !important;
    font-weight: 500 !important;
    /* Position it if needed, or let it sit */
    display: none !important; 
}

/* Dark Mode Support (if body has dark-mode class or similar) */
@media (prefers-color-scheme: dark) {
    .driver-popover {
        background: rgba(30, 41, 59, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }

    .driver-popover-title {
        color: #ffffff !important;
    }

    .driver-popover-description {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .driver-popover-prev-btn {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    .driver-popover-prev-btn:hover {
        color: #ffffff !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
}