/* ============================================================================
 * Guided Tour (Shepherd.js) - CheckmyCarrier styling
 *
 * Themed variant of Shepherd.js that matches the CheckmyCarrier brand.
 * All colours are pulled from CSS custom properties defined in variables.css
 * so the tour automatically adapts to the light and dark themes.
 * ==========================================================================*/

/* ---- Modal overlay -------------------------------------------------------- */
.shepherd-modal-overlay-container {
    /* Softer than the Shepherd default black overlay. */
    fill: rgba(15, 23, 42, 0.55);
    transition: opacity 250ms ease-in-out;
}

/* ---- Step container ------------------------------------------------------- */
.shepherd-element {
    max-width: 420px;
    background: var(--bg-main);
    color: var(--text-main);
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    border-radius: 14px;
    box-shadow:
        0 10px 30px -4px rgba(0, 0, 0, 0.18),
        0 4px 12px -2px rgba(var(--primary-rgb), 0.18);
    font-family: inherit;
    z-index: 10050;
    animation: cmc-tour-pop 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* Centered steps (steps without an attachTo target).
 * JS pins the element to the viewport center in the `show` handler. Until it
 * has done so we hide the popup to avoid a flash at Shepherd's default
 * anchor-less coordinates (which end up in a corner of the screen). */
.shepherd-element.cmc-tour-centered {
    visibility: hidden;
}
.shepherd-element.cmc-tour-centered.cmc-tour-centered-ready {
    visibility: visible;
}
.shepherd-element.cmc-tour-centered .shepherd-arrow {
    display: none !important;
}

@keyframes cmc-tour-pop {
    from { opacity: 0; transform: scale(0.96) translateY(4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Reuse the pop-in effect for centered steps without breaking the transform-based centering. */
@keyframes cmc-tour-pop-centered {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.shepherd-element.cmc-tour-centered.cmc-tour-centered-ready {
    animation: cmc-tour-pop-centered 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* ---- Header --------------------------------------------------------------- */
.shepherd-header {
    background: linear-gradient(135deg,
        rgba(var(--primary-rgb), 0.12) 0%,
        rgba(var(--primary-rgb), 0.04) 100%);
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.18);
    padding: 0.9rem 1.1rem;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.shepherd-title {
    color: var(--text-main);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
}

.shepherd-title::before {
    content: "\F287"; /* bootstrap-icons: patch-question-fill */
    font-family: "bootstrap-icons";
    color: var(--primary);
    font-size: 1.2rem;
    line-height: 1;
    display: inline-block;
}

.cmc-tour-progress {
    display: inline-block;
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: rgba(var(--primary-rgb), 0.16);
    color: var(--primary-dark);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

[data-theme="DARK"] .cmc-tour-progress {
    background: rgba(var(--primary-rgb), 0.22);
    color: var(--primary);
}

/* Close ("x") button */
.shepherd-cancel-icon {
    color: var(--brand-mid);
    font-size: 1.35rem;
    line-height: 1;
    opacity: 0.75;
    transition: opacity 120ms ease, color 120ms ease;
}
.shepherd-cancel-icon:hover {
    color: var(--danger);
    opacity: 1;
}

/* ---- Body / text ---------------------------------------------------------- */
.shepherd-text {
    padding: 1rem 1.1rem 0.35rem 1.1rem;
    color: var(--text-main);
    font-size: 0.95rem;
    line-height: 1.55;
}
.shepherd-text strong {
    color: var(--primary-dark);
}
[data-theme="DARK"] .shepherd-text strong {
    color: var(--primary);
}
.shepherd-text em {
    color: var(--brand-mid);
    font-style: normal;
}
.shepherd-text code {
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary-dark);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.85em;
}
[data-theme="DARK"] .shepherd-text code {
    background: rgba(var(--primary-rgb), 0.2);
    color: var(--primary);
}
.shepherd-text .bi {
    color: var(--primary);
}

/* ---- Footer / buttons ----------------------------------------------------- */
.shepherd-footer {
    padding: 0.75rem 1.1rem 1rem 1.1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
    border-top: 0;
}

.shepherd-button {
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.45rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: transform 90ms ease, box-shadow 120ms ease,
                background-color 120ms ease, color 120ms ease;
    cursor: pointer;
}
.shepherd-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
}
.shepherd-button:active {
    transform: translateY(1px);
}

.shepherd-button-primary,
.shepherd-button:not(.shepherd-button-secondary):not(.shepherd-button-skip) {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}
.shepherd-button-primary:hover,
.shepherd-button:not(.shepherd-button-secondary):not(.shepherd-button-skip):hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #ffffff;
}

.shepherd-button-secondary {
    background: transparent;
    color: var(--text-main);
    border-color: rgba(var(--primary-rgb), 0.35);
}
.shepherd-button-secondary:hover {
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-dark);
    border-color: rgba(var(--primary-rgb), 0.55);
}
[data-theme="DARK"] .shepherd-button-secondary:hover {
    color: var(--primary);
}

.shepherd-button-skip {
    background: transparent;
    color: var(--brand-mid);
    border: none;
    margin-right: auto; /* push to the left */
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.shepherd-button-skip:hover {
    color: var(--danger);
    background: transparent;
}

/* ---- Arrow ---------------------------------------------------------------- */
/*
 * The Shepherd arrow is a 14x14 square that is rotated 45deg so one corner
 * points at the anchored element. If we draw a border on all four sides,
 * the two sides facing the popup are visible and produce a diamond outline
 * where the arrow overlaps the popup body.
 *
 * Fix: start with no border and re-enable only the two outward-facing sides
 * based on data-popper-placement (which Shepherd/Floating-UI sets on the
 * step element). The arrow is rotated 45deg, so:
 *   placement=top    -> arrow sits below popup, points down  -> bottom+right sides
 *   placement=bottom -> arrow sits above popup, points up    -> top+left sides
 *   placement=left   -> arrow sits right of popup, points left -> top+right sides
 *   placement=right  -> arrow sits left of popup, points right -> bottom+left sides
 */
.shepherd-arrow,
.shepherd-arrow::before {
    width: 14px;
    height: 14px;
}
.shepherd-arrow::before {
    background: var(--bg-main);
    border: 1px solid transparent;
    box-sizing: border-box;
}
.shepherd-element[data-popper-placement^="top"] .shepherd-arrow::before {
    border-bottom-color: rgba(var(--primary-rgb), 0.25);
    border-right-color: rgba(var(--primary-rgb), 0.25);
}
.shepherd-element[data-popper-placement^="bottom"] .shepherd-arrow::before {
    border-top-color: rgba(var(--primary-rgb), 0.25);
    border-left-color: rgba(var(--primary-rgb), 0.25);
}
.shepherd-element[data-popper-placement^="left"] .shepherd-arrow::before {
    border-top-color: rgba(var(--primary-rgb), 0.25);
    border-right-color: rgba(var(--primary-rgb), 0.25);
}
.shepherd-element[data-popper-placement^="right"] .shepherd-arrow::before {
    border-bottom-color: rgba(var(--primary-rgb), 0.25);
    border-left-color: rgba(var(--primary-rgb), 0.25);
}

/* ---- Highlighted target --------------------------------------------------- */
.shepherd-target-highlighted,
.shepherd-enabled.shepherd-target {
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.35),
                0 0 0 8px rgba(var(--primary-rgb), 0.15) !important;
    border-radius: 8px;
    transition: box-shadow 200ms ease-in-out;
}

/* ---- Dark theme fine tuning ---------------------------------------------- */
[data-theme="DARK"] .shepherd-element {
    background: var(--bg-main);
    border-color: rgba(var(--primary-rgb), 0.35);
    box-shadow:
        0 12px 34px -6px rgba(0, 0, 0, 0.55),
        0 4px 14px -2px rgba(var(--primary-rgb), 0.25);
}
[data-theme="DARK"] .shepherd-header {
    background: linear-gradient(135deg,
        rgba(var(--primary-rgb), 0.18) 0%,
        rgba(var(--primary-rgb), 0.06) 100%);
    border-bottom-color: rgba(var(--primary-rgb), 0.28);
}
[data-theme="DARK"] .shepherd-arrow::before {
    background: var(--bg-main);
    /* Reset border, per-placement rules below re-enable only the outward sides. */
    border-color: transparent;
}
[data-theme="DARK"] .shepherd-element[data-popper-placement^="top"] .shepherd-arrow::before {
    border-bottom-color: rgba(var(--primary-rgb), 0.35);
    border-right-color: rgba(var(--primary-rgb), 0.35);
}
[data-theme="DARK"] .shepherd-element[data-popper-placement^="bottom"] .shepherd-arrow::before {
    border-top-color: rgba(var(--primary-rgb), 0.35);
    border-left-color: rgba(var(--primary-rgb), 0.35);
}
[data-theme="DARK"] .shepherd-element[data-popper-placement^="left"] .shepherd-arrow::before {
    border-top-color: rgba(var(--primary-rgb), 0.35);
    border-right-color: rgba(var(--primary-rgb), 0.35);
}
[data-theme="DARK"] .shepherd-element[data-popper-placement^="right"] .shepherd-arrow::before {
    border-bottom-color: rgba(var(--primary-rgb), 0.35);
    border-left-color: rgba(var(--primary-rgb), 0.35);
}
[data-theme="DARK"] .shepherd-modal-overlay-container {
    fill: rgba(0, 0, 0, 0.65);
}

/* ---- Small screens -------------------------------------------------------- */
@media (max-width: 576px) {
    .shepherd-element {
        max-width: calc(100vw - 24px);
    }
    .shepherd-footer {
        justify-content: space-between;
    }
    .shepherd-button-skip {
        margin-right: 0;
    }
}