/* ==========================================================================
   Tutorial / Walkthrough custom styles (Shepherd.js)
   Designed to blend with the Sneat theme.
   ========================================================================== */

/* Popover container */
.shepherd-element.tutorial-step,
.shepherd-element {
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(67, 89, 113, 0.18),
                0 0.25rem 0.5rem rgba(67, 89, 113, 0.10);
    border: 1px solid rgba(67, 89, 113, 0.08);
    background-color: #fff;
    max-width: 420px;
    font-family: inherit;
}

/* Header (title + cancel) */
.shepherd-header {
    background-color: #f8f7fa;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid rgba(67, 89, 113, 0.08);
    display: flex;
    align-items: center;
}

.shepherd-title {
    color: #566a7f;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    flex: 1;
}

/* Cancel (X) icon */
.shepherd-cancel-icon {
    color: #a1acb8;
    font-size: 1.5rem;
    line-height: 1;
    background: transparent;
    border: 0;
    padding: 0 0.25rem;
    transition: color 0.15s ease-in-out;
}

.shepherd-cancel-icon:hover {
    color: #566a7f;
}

/* Body — auto-scrolls vertically if the text exceeds 60% of viewport height,
   so the header and footer (with buttons) always stay visible. */
.shepherd-text {
    color: #697a8d;
    font-size: 0.9375rem;
    line-height: 1.55;
    padding: 1rem 1.125rem;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Subtle scrollbar styling so it doesn't look out of place */
.shepherd-text::-webkit-scrollbar {
    width: 6px;
}
.shepherd-text::-webkit-scrollbar-track {
    background: transparent;
}
.shepherd-text::-webkit-scrollbar-thumb {
    background-color: rgba(133, 146, 163, 0.35);
    border-radius: 3px;
}
.shepherd-text::-webkit-scrollbar-thumb:hover {
    background-color: rgba(133, 146, 163, 0.55);
}

.shepherd-text strong {
    color: #566a7f;
    font-weight: 600;
}

/* Footer with buttons */
.shepherd-footer {
    padding: 0.5rem 1.125rem 0.875rem 1.125rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 0;
}

/* Buttons (we use Bootstrap btn classes via tutorial-core.js) */
.shepherd-button {
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.4375rem 0.875rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.shepherd-button.btn-primary {
    background-color: #696cff;
    border-color: #696cff;
    color: #fff;
}

.shepherd-button.btn-primary:not(:disabled):hover {
    background-color: #5f61e6;
    border-color: #5f61e6;
}

.shepherd-button.btn-label-secondary {
    background-color: rgba(133, 146, 163, 0.16);
    border-color: transparent;
    color: #8592a3;
}

.shepherd-button.btn-label-secondary:not(:disabled):hover {
    background-color: rgba(133, 146, 163, 0.26);
    color: #8592a3;
}

/* Arrow color matches popover background */
.shepherd-arrow:before {
    background-color: #fff;
    border: 1px solid rgba(67, 89, 113, 0.08);
}

/* When the arrow points up (popover below target), the arrow's
   visible side touches the header (light gray bg) */
.shepherd-element[data-popper-placement^="bottom"] .shepherd-arrow:before {
    background-color: #f8f7fa;
}

/* Modal overlay (the dim backdrop with cutout for highlighted element).
   IMPORTANT: in Shepherd v11 the class is applied directly to the <svg>
   element (not to a wrapping container), so the path is a DIRECT child:
       <svg class="shepherd-modal-overlay-container">
           <path d="..." />
       </svg>
   This CSS targets the path inside that svg with !important, since the
   default browser fill on an SVG path is solid black. */
svg.shepherd-modal-overlay-container,
.shepherd-modal-overlay-container {
    transition: opacity 0.25s ease-in-out;
    pointer-events: none;
}

svg.shepherd-modal-overlay-container.shepherd-modal-is-visible,
.shepherd-modal-overlay-container.shepherd-modal-is-visible {
    opacity: 1 !important;
}

/* The actual dim layer — Sneat dark blue at 60%, NOT pure black */
svg.shepherd-modal-overlay-container > path,
.shepherd-modal-overlay-container > path,
.shepherd-modal-overlay-container path {
    fill: rgba(67, 89, 113, 0.6) !important;
    fill-opacity: 1 !important;
    transition: d 0.3s ease-in-out;
}

/* Highlighted target element gets a subtle outline */
.shepherd-enabled.shepherd-target {
    position: relative;
    z-index: 9999;
}

/* Centered (no attachTo) popover sits in the middle of the viewport */
.shepherd-element.shepherd-centered {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Smaller popover on small screens */
@media (max-width: 576px) {
    .shepherd-element.tutorial-step,
    .shepherd-element {
        max-width: calc(100vw - 2rem);
    }

    .shepherd-text {
        font-size: 0.875rem;
        padding: 0.875rem 1rem;
    }

    .shepherd-header {
        padding: 0.75rem 1rem;
    }

    .shepherd-footer {
        padding: 0.5rem 1rem 0.75rem 1rem;
    }
}

/* Dark mode support (Sneat uses .dark-style on <html>) */
html.dark-style .shepherd-element {
    background-color: #2b2c40;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
}

html.dark-style .shepherd-header {
    background-color: #232333;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

html.dark-style .shepherd-title {
    color: #cbcbe2;
}

html.dark-style .shepherd-text {
    color: #a3a4cc;
}

html.dark-style .shepherd-text strong {
    color: #cbcbe2;
}

html.dark-style .shepherd-cancel-icon {
    color: #7e7f9b;
}

html.dark-style .shepherd-cancel-icon:hover {
    color: #cbcbe2;
}

html.dark-style .shepherd-arrow:before {
    background-color: #2b2c40;
    border-color: rgba(255, 255, 255, 0.06);
}

html.dark-style .shepherd-element[data-popper-placement^="bottom"] .shepherd-arrow:before {
    background-color: #232333;
}

/* In dark mode, use a slightly darker overlay so the contrast remains pleasant */
html.dark-style svg.shepherd-modal-overlay-container > path,
html.dark-style .shepherd-modal-overlay-container > path,
html.dark-style .shepherd-modal-overlay-container path {
    fill: rgba(15, 18, 32, 0.65) !important;
}