/* Driver.js Tour Custom Styles
   Use CSS variable --tour-color to customize the theme color per page.
   Default: #0d6efd (blue)
   SOR page: #198754 (green)
   UDS page: #6f42c1 (purple)
*/

:root {
    --tour-color: #0d6efd;
    --tour-color-dark: #0b5ed7;
    --tour-shadow-color: rgba(13, 110, 253, 0.15);
    --tour-shadow-btn: rgba(13, 110, 253, 0.3);
    --tour-shadow-btn-hover: rgba(13, 110, 253, 0.4);
    --tour-highlight: rgba(13, 110, 253, 0.3);
}

.driver-popover {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 8px 25px var(--tour-shadow-color) !important;
    max-width: 400px !important;
    padding: 0 !important;
}

.driver-popover-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--tour-color) !important;
    padding: 20px 20px 10px 20px !important;
    margin: 0 !important;
    background: transparent !important;
}

.driver-popover-description {
    font-size: 0.95rem !important;
    color: #495057 !important;
    line-height: 1.6 !important;
    padding: 0 20px 20px 20px !important;
}

.driver-popover-close-btn {
    color: #6c757d !important;
    font-size: 1.5rem !important;
    top: 12px !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #f1f3f4 !important;
    border: none !important;
    transition: all 0.2s !important;
}

.driver-popover-close-btn:hover {
    background: #e9ecef !important;
    color: #dc3545 !important;
}

.driver-popover-footer {
    background: #f8f9fa !important;
    border-top: 1px solid #e9ecef !important;
    padding: 15px 20px !important;
    border-radius: 0 0 16px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.driver-popover-progress-text {
    font-size: 0.85rem !important;
    color: #6c757d !important;
    font-weight: 500 !important;
}

.driver-popover-prev-btn,
.driver-popover-next-btn {
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    transition: all 0.2s !important;
    cursor: pointer !important;
    text-shadow: none !important;
}

.driver-popover-prev-btn {
    background: #e9ecef !important;
    color: #495057 !important;
}

.driver-popover-prev-btn:hover {
    background: #dee2e6 !important;
}

.driver-popover-next-btn {
    background: linear-gradient(135deg, var(--tour-color) 0%, var(--tour-color-dark) 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px var(--tour-shadow-btn) !important;
}

.driver-popover-next-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px var(--tour-shadow-btn-hover) !important;
}

.driver-popover-navigation-btns {
    display: flex !important;
    gap: 10px !important;
}

.driver-popover-arrow {
    border: none !important;
}

.driver-popover-arrow-side-left,
.driver-popover-arrow-side-right,
.driver-popover-arrow-side-top,
.driver-popover-arrow-side-bottom {
    border: none !important;
}

.driver-active-element {
    box-shadow: 0 0 0 4px var(--tour-highlight) !important;
}