/* The unfollow confirm (frontend/partials/unfollow-confirm.blade.php).
   Self-contained since 29 Oct 2026, when it left network-linkedin.css: it
   shows on My Network, the company page and the employer's My circle, which
   share no stylesheet. A native <dialog> on the top layer, so it owns its box
   model and its colours; dark mode keys off html[data-theme="dark"] like
   candidate-dark.css. */
.wd-confirm {
    --wdc-surface: #fff;
    --wdc-ink: rgba(0, 0, 0, .9);
    --wdc-muted: rgba(0, 0, 0, .6);
    --wdc-border: rgba(0, 0, 0, .08);
    --wdc-border-mid: rgba(0, 0, 0, .15);
    --wdc-hover: rgba(0, 0, 0, .06);
    --wdc-focus: #0a66c2;
    --wdc-red: #b24020;
    --wdc-red-hover: #8f3218;
}
html[data-theme="dark"] .wd-confirm {
    --wdc-surface: #1b2025;
    --wdc-ink: rgba(255, 255, 255, .92);
    --wdc-muted: rgba(255, 255, 255, .66);
    --wdc-border: rgba(255, 255, 255, .1);
    --wdc-border-mid: rgba(255, 255, 255, .24);
    --wdc-hover: rgba(255, 255, 255, .08);
    --wdc-focus: #71b7fb;
}

.wd-confirm, .wd-confirm * { box-sizing: border-box; }
.wd-confirm {
    width: min(420px, calc(100vw - 32px)); max-width: none; padding: 0; margin: auto;
    border: 1px solid var(--wdc-border); border-radius: 12px;
    background: var(--wdc-surface); color: var(--wdc-ink);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .22);
    font-family: inherit;
}
.wd-confirm::backdrop { background: rgba(9, 14, 25, .5); }
.wd-confirm__box { padding: 20px 20px 16px; }
.wd-confirm__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wd-confirm__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--wdc-ink); }
.wd-confirm__x {
    width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: none; cursor: pointer; font-size: 20px;
    color: var(--wdc-muted);
}
.wd-confirm__x:hover { background: var(--wdc-hover); color: var(--wdc-ink); }
.wd-confirm__text { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--wdc-muted); overflow-wrap: anywhere; }
.wd-confirm__foot {
    display: flex; justify-content: flex-end; gap: 8px; margin: 20px -20px 0; padding: 14px 20px 0;
    border-top: 1px solid var(--wdc-border);
}
.wd-confirm__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border: 1px solid transparent; border-radius: 999px;
    font: inherit; font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; background: none;
}
.wd-confirm__btn--ghost { border-color: var(--wdc-border-mid); color: var(--wdc-muted); }
.wd-confirm__btn--ghost:hover { background: var(--wdc-hover); color: var(--wdc-ink); }
.wd-confirm__btn--danger { background: var(--wdc-red); border-color: var(--wdc-red); color: #fff; }
.wd-confirm__btn--danger:hover { background: var(--wdc-red-hover); border-color: var(--wdc-red-hover); color: #fff; }
.wd-confirm__btn:focus-visible, .wd-confirm__x:focus-visible { outline: 2px solid var(--wdc-focus); outline-offset: 2px; }