/* ============================================================
   /jak-dodawac-posty/ — podglądy kreatora (fake-UI). Wymaga podstrony.css.
   ============================================================ */

/* hero laptop screen */
.dp-screen { padding: 12px 14px; font-size: 11px; display: flex; flex-direction: column; gap: 8px; }
.dp-screen__tabs { display: flex; gap: 8px; }
.dp-screen__tabs span { padding: 4px 10px; border-radius: 6px; background: #EEF2F6; color: var(--u-ink-muted); font-weight: 700; }
.dp-screen__tabs .is-active { background: var(--u-primary); color: #fff; }
.dp-screen__label { font-weight: 700; color: var(--u-ink-2); }
.dp-screen__label b { color: var(--u-primary); }
.dp-screen__input, .dp-screen__area { border: 1px solid var(--u-border); border-radius: 6px; padding: 7px 9px; color: var(--u-ink-muted); }
.dp-screen__area { min-height: 36px; }
.dp-screen__cat { display: flex; align-items: center; gap: 7px; padding: 8px 9px; background: #F4F9FD; border: 1px solid #D9ECF8; border-radius: 6px; color: var(--u-ink-3); }
.dp-screen__cat i { color: var(--u-primary); }

/* media stacks (button/tip, publish/success) */
.dp-media-stack { display: grid; gap: 16px; align-content: start; }

/* step 1 — add post button preview */
.dp-addbtn { padding: 26px; display: flex; align-items: center; gap: 18px; }
.dp-addbtn__btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; background: var(--u-primary); color: #fff; border-radius: 9px; font-weight: 700; font-size: .9rem; }
.dp-addbtn__lines { flex: 1; display: grid; gap: 8px; }
.dp-addbtn__lines i { height: 7px; border-radius: 4px; background: #dde6ee; }
.dp-addbtn__lines i:last-child { width: 70%; }

/* step 2 — post form preview */
.dp-form { padding: 20px 22px; }
.dp-form__tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.dp-form__tabs span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; background: #EEF2F6; color: var(--u-ink-muted); font-weight: 700; font-size: .82rem; }
.dp-form__tabs .is-active { background: var(--u-primary); color: #fff; }
.dp-form__label { margin: 0 0 6px; font-weight: 700; color: var(--u-ink-2); font-size: .85rem; }
.dp-form__label b { color: var(--u-primary); }
.dp-form__label i { color: var(--u-ink-muted); margin-right: 4px; }
.dp-form__field { padding: 11px 13px; border: 1px solid var(--u-border); border-radius: 8px; color: var(--u-ink-muted); font-size: .85rem; margin-bottom: 14px; }
.dp-form__area { padding: 13px; min-height: 64px; border: 1px solid var(--u-border); border-radius: 8px 8px 0 0; border-bottom: none; color: var(--u-ink-muted); font-size: .85rem; }
.dp-form__toolbar { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border: 1px solid var(--u-border); border-radius: 0 0 8px 8px; background: #F8FAFC; color: var(--u-ink-2); }
.dp-form__toolbar b, .dp-form__toolbar i, .dp-form__toolbar u, .dp-form__toolbar span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; border-radius: 6px; font-size: .82rem; color: var(--u-ink-3); }
.dp-form__toolbar b:hover, .dp-form__toolbar span:hover { background: #EAEFF4; }

/* step 3 — categorization */
.dp-cat { padding: 20px 22px; }
.dp-cat__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 16px; font-weight: 800; color: var(--u-ink); }
.dp-cat__head i { color: var(--u-primary); }
.dp-cat__head span { font-weight: 500; font-size: .82rem; color: var(--u-ink-muted); }
.dp-cat__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dp-cat__grid > div { display: grid; gap: 5px; }
.dp-cat__grid span { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--u-ink-3); }
.dp-cat__grid span b { color: var(--u-primary); }
.dp-cat__select { padding: 9px 11px; border: 1px solid var(--u-border); border-radius: 7px; color: var(--u-ink-muted); font-size: .82rem; background: #fff; position: relative; }
.dp-cat__select::after { content: "▾"; position: absolute; right: 11px; color: var(--u-ink-muted); }
.dp-cat__tagslabel { margin: 16px 0 6px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--u-ink-3); }
.dp-cat__tagslabel small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--u-ink-muted); }
.dp-cat__tags { padding: 9px 11px; border: 1px dashed var(--u-border); border-radius: 7px; color: var(--u-ink-muted); font-size: .82rem; }

/* step 4 — attachments */
.dp-attach { padding: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.dp-attach__item { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; background: #fff; border: 1px solid var(--u-border); border-radius: 10px; font-weight: 700; color: var(--u-ink-2); font-size: .9rem; }
.dp-attach__item i { color: var(--u-primary); font-size: 1.05rem; }
.dp-attach__note { flex-basis: 100%; margin: 6px 0 0; font-size: .85rem; color: var(--u-ink-muted); }

/* step 5 — publish */
.dp-publish { padding: 24px 26px; display: flex; align-items: center; gap: 14px; }
.dp-publish__cancel { padding: 10px 20px; border: 1px solid var(--u-border); border-radius: 9px; color: var(--u-ink-3); font-weight: 700; font-size: .9rem; }
.dp-publish__go { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; background: var(--u-primary); color: #fff; border-radius: 9px; font-weight: 700; font-size: .9rem; }

/* dobre praktyki */
.dp-best { background: var(--u-bg); border-radius: var(--u-radius); padding: 36px 38px; }
.dp-best__title { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; font-size: 1.4rem; font-weight: 800; color: var(--u-ink); }
.dp-best__title i { color: var(--u-accent-dark); }
.dp-best__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.dp-best__card { background: #fff; border: 1px solid var(--u-border); border-radius: var(--u-radius-sm); padding: 22px 18px; text-align: center; }
.dp-best__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--u-primary-tint); color: var(--u-primary-dark); font-size: 1.25rem; margin-bottom: 14px; }
.dp-best__card h3 { margin: 0 0 8px; font-size: .98rem; font-weight: 800; color: var(--u-ink); }
.dp-best__card p { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--u-ink-3); }

@media (max-width: 980px) {
    .dp-best__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .dp-cat__grid { grid-template-columns: 1fr; }
    .dp-best { padding: 28px 22px; }
    .dp-best__grid { grid-template-columns: 1fr; }
    .dp-attach { justify-content: center; }
}