/*
 * Welcome tour overlay — backdrop + spotlight + centered tour card.
 *
 * Formspråk: portalens Alternativ A — vit modal radius 16, pill-knappar,
 * solid blå progressbar, kanon-fokusring 0 0 0 3px rgba(37,99,235,0.4).
 * Palette: VARUMARKESGUIDE.md §4 (kanon).
 */

body.pt-tour-active {
    overflow: hidden;
}

/* Click-blocker — invisible layer that catches clicks anywhere on the
   page except on the tooltip (which is on a higher z-index). Without
   this, a user could click a still-visible sidebar link inside the
   spotlight and navigate away mid-tour.

   Cursor stays `default` (not `not-allowed`) so we don't signal "this
   is broken". On click, JS gives the tooltip a brief bump animation so
   older users get acknowledgment that their action landed somewhere. */
.pt-tour__blocker {
    position: fixed;
    inset: 0;
    z-index: 99989;
    background: transparent;
    cursor: default;
}

/* Backdrop: full-screen dim layer beneath the spotlight. */
.pt-tour__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    z-index: 99990;
    animation: ptTourFade 200ms ease-out;
}

/*
 * Spotlight: a transparent rectangle whose massive outset box-shadow
 * dims everything OUTSIDE the rectangle. The element itself stays
 * transparent so the target underneath is fully visible.
 * pointer-events:none so clicks pass through — they then hit the
 * blocker below and get swallowed (see .pt-tour__blocker above).
 */
.pt-tour__spotlight {
    position: fixed;
    background: transparent;
    box-shadow: 0 0 0 9999px rgba(17, 24, 39, 0.55);
    border-radius: 12px;
    pointer-events: none;
    z-index: 99991;
    opacity: 0;
    transition: opacity 200ms ease-out,
                top 280ms cubic-bezier(0.22, 1, 0.36, 1),
                left 280ms cubic-bezier(0.22, 1, 0.36, 1),
                width 280ms cubic-bezier(0.22, 1, 0.36, 1),
                height 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hide the plain backdrop once the spotlight is active so we don't
   double-dim — the spotlight's box-shadow handles it. */
body.pt-tour-active .pt-tour__backdrop {
    display: none;
}

/* Tour-kortet är CENTRERAT på skärmen — desktop OCH mobil (godkänd
   Alternativ A; tidigare top/bottom-pinning på mobil gav felplacering).
   JS positionerar enbart spotlighten; kortet är en fast centrerad modal
   och kan därmed aldrig hamna fel oavsett viewport. */
.pt-tour__tooltip {
    position: fixed;
    z-index: 99992;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100vw - 40px);
    max-width: 400px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(17, 24, 39, 0.25);
    opacity: 0;
    transition: opacity 220ms ease-out;
}

/* Brief click-feedback animation when user clicks the dimmed background.
   This gives a tactile "your click landed here" cue without signalling
   anything punitive (cursor stays default). translate(-50%, -50%) must
   be repeated in every keyframe — it is what keeps the card centered
   (see .pt-tour__tooltip above). */
.pt-tour__tooltip--bumped {
    animation: ptTourBump 220ms ease-out;
}

@keyframes ptTourBump {
    0%   { transform: translate(-50%, -50%) scale(1); }
    50%  { transform: translate(-50%, -50%) scale(1.02); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

/* Inline banner shown when the tour can't run (no visible targets).
   Used as a graceful fallback for the "Visa rundtur" Settings button
   in case some unusual layout hides every step. */
.pt-tour__banner {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 99993;
    max-width: calc(100vw - 32px);
    padding: 14px 20px;
    background: #1f2937;
    color: #ffffff;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.45;
    box-shadow: 0 12px 32px -8px rgba(17, 24, 39, 0.5);
    animation: ptTourBannerIn 200ms ease-out;
}

@keyframes ptTourBannerIn {
    from { transform: translate(-50%, 12px); opacity: 0; }
    to   { transform: translate(-50%, 0); opacity: 1; }
}

.pt-tour__tooltip-inner {
    padding: 22px 24px 18px;
}

.pt-tour__progress {
    margin-bottom: 12px;
}

/* Eyebrow: "RUNDTUR · Steg n av N" — 11px/800 blå (uppercase via CSS). */
.pt-tour__progress-text {
    display: block;
    font-size: 11px;
    color: #1d4ed8;
    font-weight: 800;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pt-tour__progress-bar {
    height: 6px;
    background: #f3f4f6;
    border-radius: 3px;
    overflow: hidden;
}

/* Solid blå fyllnad — width sätts inline av welcome-tour.js (n/N). */
.pt-tour__progress-bar > span {
    display: block;
    height: 100%;
    background: #2563eb;
    border-radius: 3px;
    transition: width 0.2s ease;
}

.pt-tour__title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 800;
    color: #111827;
    line-height: 1.35;
}

.pt-tour__text {
    margin: 0 0 16px;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.6;
}

.pt-tour__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pt-tour__actions-right {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/*
 * Tour buttons are fully self-contained — themes (Astra, etc.) commonly
 * target plain `button` and `:active` with high-impact styles like
 * gradients, transforms, and text-shadows that visually break the
 * tooltip. We reset every property a theme might touch and re-declare
 * each state (hover/active/focus/focus-visible/disabled). Double-class
 * selectors raise specificity to (0,2,0) so theme rules with
 * `button:hover` (0,1,1) can't bleed in.
 */
.pt-tour__btn.pt-tour__btn {
    box-sizing: border-box;
    min-height: 36px;
    padding: 8px 20px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    text-shadow: none;
    box-shadow: none;
    background-image: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: background-color 150ms ease, color 150ms ease,
                border-color 150ms ease, box-shadow 150ms ease;
}

.pt-tour__btn.pt-tour__btn:focus {
    outline: none;
}

/* Kanon-fokusring (en standard för hela kontot). OBS: variantreglerna
   nedan får INTE deklarera box-shadow — då släcks ringen på :focus. */
.pt-tour__btn.pt-tour__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4);
}

/* PRIMARY — "Nästa" / "Klar" (blå pill) */
.pt-tour__btn.pt-tour__btn--primary,
.pt-tour__btn.pt-tour__btn--primary:link,
.pt-tour__btn.pt-tour__btn--primary:visited {
    background-color: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.pt-tour__btn.pt-tour__btn--primary:hover:not(:disabled),
.pt-tour__btn.pt-tour__btn--primary:focus:not(:disabled) {
    background-color: #1d4ed8;
    color: #ffffff;
    border-color: #1d4ed8;
    text-shadow: none;
    transform: none;
}

.pt-tour__btn.pt-tour__btn--primary:active:not(:disabled) {
    background-color: #1e40af;
    color: #ffffff;
    border-color: #1e40af;
    text-shadow: none;
    transform: none;
}

.pt-tour__btn.pt-tour__btn--primary:disabled {
    background-color: #9ca3af;
    color: #ffffff;
    border-color: #9ca3af;
    cursor: not-allowed;
}

/* GHOST — "Tillbaka" (transparent pill med synlig border) */
.pt-tour__btn.pt-tour__btn--ghost,
.pt-tour__btn.pt-tour__btn--ghost:link,
.pt-tour__btn.pt-tour__btn--ghost:visited {
    background-color: transparent;
    color: #111827;
    border-color: rgba(17, 24, 39, 0.14);
    padding: 8px 16px;
}

.pt-tour__btn.pt-tour__btn--ghost:hover:not(:disabled),
.pt-tour__btn.pt-tour__btn--ghost:focus:not(:disabled) {
    background-color: transparent;
    color: #111827;
    border-color: #9ca3af;
    text-shadow: none;
    transform: none;
}

.pt-tour__btn.pt-tour__btn--ghost:active:not(:disabled) {
    background-color: #f3f4f6;
    color: #111827;
    border-color: #9ca3af;
    text-shadow: none;
    transform: none;
}

.pt-tour__btn.pt-tour__btn--ghost:disabled {
    background-color: transparent;
    color: #d1d5db;
    border-color: #e5e7eb;
    cursor: not-allowed;
}

/* SKIP — "Hoppa över" (muted textlänk) */
.pt-tour__btn.pt-tour__btn--skip,
.pt-tour__btn.pt-tour__btn--skip:link,
.pt-tour__btn.pt-tour__btn--skip:visited {
    background-color: transparent;
    color: #6b7280;
    border-color: transparent;
    font-size: 12.5px;
    padding: 8px 10px;
}

.pt-tour__btn.pt-tour__btn--skip:hover:not(:disabled),
.pt-tour__btn.pt-tour__btn--skip:focus:not(:disabled) {
    background-color: transparent;
    color: #111827;
    border-color: transparent;
    text-shadow: none;
    transform: none;
}

.pt-tour__btn.pt-tour__btn--skip:active:not(:disabled) {
    background-color: transparent;
    color: #111827;
    border-color: transparent;
    text-shadow: none;
    transform: none;
}

.pt-tour__btn.pt-tour__btn--skip:disabled {
    background-color: transparent;
    color: #d1d5db;
    border-color: transparent;
    cursor: not-allowed;
}

@keyframes ptTourFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pt-tour__backdrop,
    .pt-tour__tooltip,
    .pt-tour__spotlight,
    .pt-tour__tooltip--bumped,
    .pt-tour__banner {
        animation: none;
        transition: none;
    }
}

@media (max-width: 820px) {
    .pt-tour__actions-right {
        gap: 6px;
    }
}

/*
 * "Visa rundtur"-knappen i Settings - uses .pt-portal__settings-row
 * styling (defined in portal-redesign.css for <label>/<div>) but is a
 * <button>, so we fully reset native button chrome (incl. Astra's
 * default background, gradient border, transforms and box-shadows on
 * :active) and add hover/focus affordances consistent with the other
 * rows. Every state explicitly re-declares `border: 0` because some
 * themes paint a blue 2px focus/active border that bleeds through
 * even when the default state has none.
 */
.pt-portal__settings-row.pt-portal__settings-row--button {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: none;
    color: inherit;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    text-shadow: none;
    box-shadow: none;
    font: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: background-color 150ms ease, color 150ms ease;
}

.pt-portal__settings-row.pt-portal__settings-row--button:hover,
.pt-portal__settings-row.pt-portal__settings-row--button:focus {
    background-color: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
    text-shadow: none;
    transform: none;
    outline: none;
}

.pt-portal__settings-row.pt-portal__settings-row--button:hover .pt-portal__settings-row-title,
.pt-portal__settings-row.pt-portal__settings-row--button:hover .pt-portal__settings-row-action {
    color: #1d4ed8;
}

.pt-portal__settings-row.pt-portal__settings-row--button:active {
    background-color: rgba(37, 99, 235, 0.04);
    background-image: none;
    border: 0;
    box-shadow: none;
    text-shadow: none;
    transform: none;
    outline: none;
}

.pt-portal__settings-row.pt-portal__settings-row--button:active .pt-portal__settings-row-title,
.pt-portal__settings-row.pt-portal__settings-row--button:active .pt-portal__settings-row-action {
    color: #1e40af;
}

.pt-portal__settings-row.pt-portal__settings-row--button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.4);
    outline-offset: -3px;
    border-radius: 8px;
    border: 0;
}

/*
 * Generic settings-row action button (the chevron toggle for Profile
 * info, etc.). It's a <button> so themes paint background/border/
 * shadow on :hover and :active — fully reset so it stays a clean
 * round icon button regardless of theme.
 */
.pt-portal__settings-row-action.pt-portal__settings-row-action {
    background-color: transparent;
    background-image: none;
    border: 0;
    border-radius: 8px;
    padding: 6px;
    margin: 0;
    color: #9ca3af;
    box-shadow: none;
    text-shadow: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: background-color 150ms ease, color 150ms ease;
}

.pt-portal__settings-row-action.pt-portal__settings-row-action:hover,
.pt-portal__settings-row-action.pt-portal__settings-row-action:focus {
    background-color: rgba(37, 99, 235, 0.06);
    background-image: none;
    border: 0;
    color: #1d4ed8;
    box-shadow: none;
    text-shadow: none;
    transform: none;
    outline: none;
}

.pt-portal__settings-row-action.pt-portal__settings-row-action:active {
    background-color: rgba(37, 99, 235, 0.12);
    background-image: none;
    border: 0;
    color: #1e40af;
    box-shadow: none;
    text-shadow: none;
    transform: none;
    outline: none;
}

.pt-portal__settings-row-action.pt-portal__settings-row-action:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.4);
    outline-offset: 2px;
    border: 0;
}