/*
 * Step-by-step walkthroughs on the solution pages: Social Media Copy & Paste
 * (seo/landing/partials/social-workflow.blade.php) and Bulk shipping labels
 * (seo/landing/partials/bulk-walkthrough.blade.php).
 * Everything is scoped to .sw so it can't affect the rest of the public pages.
 */
.sw {
    --sw-brand: var(--pp-primary, #0e7c86);
    --sw-brand-50: color-mix(in srgb, var(--sw-brand) 8%, #fff);
    --sw-ink: #0f172a;
    --sw-muted: #64748b;
    --sw-line: #e2e8f0;
    --sw-amber: #f59e0b;
    --sw-green: #22a35a;
    --sw-green-50: #e9f8ef;
    --sw-shadow: 0 12px 32px rgba(15, 23, 42, .10);
}
.sw img, .sw svg { max-width: 100%; }

/* Step list: number rail on the left, text + picture per step */
.sw-steps { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: sw; }
.sw-step { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 20px; padding-bottom: 44px; }
.sw-step:last-child { padding-bottom: 0; }
.sw-step::before { content: ""; position: absolute; left: 25px; top: 52px; bottom: 0; border-left: 2px dashed color-mix(in srgb, var(--sw-brand) 35%, var(--sw-line)); }
.sw-step:last-child::before { display: none; }
.sw-num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--sw-brand); color: #fff; font-size: 20px; font-weight: 800; box-shadow: 0 8px 18px color-mix(in srgb, var(--sw-brand) 30%, transparent); }
.sw-num.is-amber { background: var(--sw-amber); box-shadow: 0 8px 18px rgba(245, 158, 11, .3); }
.sw-step-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: start; }
.sw-step-body.is-wide { grid-template-columns: minmax(0, 1fr); }
.sw-kicker { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sw-brand); }
.sw-step h3 { margin: 4px 0 8px; font-size: 1.3rem; font-weight: 800; color: var(--sw-ink); }
.sw-step p { margin: 0 0 10px; color: #475569; line-height: 1.65; }
.sw-tips { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sw-tips li { position: relative; padding-left: 26px; font-size: 14.5px; color: #475569; }
.sw-tips li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--sw-green-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322a35a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat; }

/* Example social media post (generic, no platform branding) */
.sw-post { margin: 0; padding: 14px 16px 16px; border-radius: 16px; background: #fff; border: 1px solid #dddfe2; box-shadow: var(--sw-shadow); font-family: Helvetica, Arial, sans-serif; color: #050505; overflow: hidden; }
.sw-post-head { display: flex; align-items: center; gap: 10px; }
.sw-post-head b { display: block; font-size: 15px; }
.sw-post-head small { display: block; font-size: 12.5px; color: #65676b; }
.sw-avatar { display: inline-flex; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; background: linear-gradient(135deg, #7c3aed, #c084fc); color: #fff; font-weight: 700; font-size: 14px; }
.sw-tag { margin-left: auto; padding: 3px 8px; border-radius: 999px; background: #f0f2f5; color: #65676b; font-style: normal; font-size: 11px; font-weight: 700; white-space: nowrap; }
.sw-post-text { margin: 10px 0; font-size: 15px; line-height: 1.4; }
.sw .sw-photo { display: block; max-width: none; width: calc(100% + 32px); height: auto; margin: 0 -16px; }
.sw-reacts { display: flex; justify-content: space-between; padding: 10px 0 0; font-size: 14px; color: #65676b; }

.sw-comments { padding: 14px; border-radius: 16px; background: #fff; border: 1px solid #dddfe2; box-shadow: var(--sw-shadow); font-family: Helvetica, Arial, sans-serif; color: #050505; }
.sw-comments-list { display: grid; gap: 8px; }
.sw-comments.is-selected .sw-comments-list { padding: 8px 6px; border-radius: 10px; background: rgba(59, 130, 246, .12); outline: 2px dashed rgba(59, 130, 246, .55); outline-offset: 2px; }
.sw-comment { display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: start; }
.sw-c-avatar { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; align-items: center; justify-content: center; background: #e4e6eb; color: #4b5563; font-size: 11px; font-weight: 700; }
.sw-bubble { display: inline-block; padding: 7px 12px; border-radius: 16px; background: #f0f2f5; font-size: 14px; line-height: 1.3; }
.sw-bubble em { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: #1b74e4; }
.sw-bubble b { display: block; font-size: 13px; }
.sw-comment small { display: block; margin: 2px 0 0 12px; font-size: 12px; font-weight: 700; color: #65676b; }
.sw-copied { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 12px; border-radius: 999px; background: var(--sw-ink); color: #fff; font-size: 12.5px; font-weight: 600; }
.sw-copied svg { width: 15px; height: 15px; color: #fbbf24; }
.sw-copied kbd { padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, .15); color: #fff; font: 600 11px sans-serif; box-shadow: none; }

/* Real SellTrac screens */
.sw-shot { margin: 0; }
.sw-mock { border-radius: 14px; background: #fff; box-shadow: var(--sw-shadow); overflow: hidden; border: 1px solid var(--sw-line); }
.sw-mock-head { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--sw-line); background: #fbfcfe; font-size: 12.5px; font-weight: 600; color: var(--sw-muted); }
.sw-mock-head i { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: #e2e8f0; }
.sw-mock-head span { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-mock-head em { margin-left: auto; flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: var(--sw-green-50); color: var(--sw-green); font-style: normal; font-size: 11px; font-weight: 700; }
.sw-mock img { display: block; width: 100%; height: auto; }
.sw-shot figcaption { margin-top: 10px; font-size: 13.5px; color: var(--sw-muted); line-height: 1.55; }
.sw-shot.is-tall { max-width: 460px; }

.sw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 0; max-width: 420px; }
.sw-stats div { padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--sw-line); text-align: center; }
.sw-stats dt { font-size: 12px; font-weight: 600; color: var(--sw-muted); text-transform: uppercase; letter-spacing: .05em; }
.sw-stats dd { margin: 2px 0 0; font-size: 24px; font-weight: 800; color: var(--sw-ink); }
.sw-share { margin: 0; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--sw-line); box-shadow: 0 2px 8px rgba(15, 23, 42, .06); }
.sw-share img { display: block; width: 100%; max-width: 360px; height: auto; border-radius: 8px; }
.sw-share figcaption { margin-top: 10px; font-size: 13.5px; color: var(--sw-muted); }

/* Bulk shipping labels walkthrough (bulk-walkthrough.blade.php) */
.sw-marks { position: relative; }
.sw-mark { position: absolute; border: 3px solid var(--sw-brand); border-radius: 8px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--sw-brand) 22%, transparent); pointer-events: none; }
.sw-mark.is-amber { border-color: var(--sw-amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sw-amber) 25%, transparent); }
.sw-mark b, .sw-notes b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sw-brand); color: #fff; font-size: 13px; font-weight: 800; }
.sw-mark b { position: absolute; top: -14px; left: -14px; box-shadow: 0 0 0 3px #fff; }
.sw-mark b.right { left: auto; right: -14px; }
.sw-mark.is-amber b, .sw-notes b.is-amber { background: var(--sw-amber); }
.sw-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sw-notes span { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: #475569; line-height: 1.45; }
.sw-notes b { flex: 0 0 auto; }
.sw-panels { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1px; background: var(--sw-line); }
.sw-panels > div { position: relative; padding: 36px 14px 14px; background: #f6f8fb; }
.sw-panels img { border-radius: 8px; }
.sw-panel-tag { position: absolute; top: 10px; left: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sw-muted); }
.sw-print { margin: 0; padding: 24px; border-radius: 18px; background: linear-gradient(140deg, var(--sw-brand-50), #fff); border: 1px solid var(--sw-line); }
.sw-print figcaption { margin-top: 8px; text-align: center; font-size: 12.5px; color: var(--sw-muted); }
.sw-label-fan { position: relative; aspect-ratio: 1 / .8; max-width: 420px; margin: 0 auto; }
.sw-label-fan img { position: absolute; top: 4%; left: 30%; width: 40%; height: auto; border: 1px solid #d5dbe3; border-radius: 4px; background: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, .14); transform-origin: 50% 100%; }
.sw-label-fan img:nth-child(1) { transform: rotate(-14deg) translateX(-26%); }
.sw-label-fan img:nth-child(2) { transform: rotate(-5deg) translateX(-9%); }
.sw-label-fan img:nth-child(3) { transform: rotate(5deg) translateX(9%); }
.sw-label-fan img:nth-child(4) { transform: rotate(14deg) translateX(26%); }

@media (max-width: 900px) {
    .sw-panels { grid-template-columns: minmax(0, 1fr); }
    .sw-notes { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .sw-step-body { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .sw-shot.is-tall { max-width: 520px; }
}
@media (max-width: 575.98px) {
    .sw-step { grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; padding-bottom: 36px; }
    .sw-step::before { left: 19px; top: 40px; }
    .sw-num { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; }
    .sw-post { padding: 12px 12px 14px; }
    .sw .sw-photo { width: calc(100% + 24px); margin: 0 -12px; }
    .sw-mark { border-width: 2px; box-shadow: none; }
    .sw-mark b { width: 20px; height: 20px; font-size: 11px; top: -10px; left: -10px; }
    .sw-mark b.right { right: -10px; }
    .sw-print { padding: 16px; }
}