/* Announcements from OrderPal: seller banner, history page and the platform composer. */
.announcement-stack { display: grid; gap: .6rem; margin-bottom: 1rem; }
.announcement-bar { --ann: var(--bs-primary); --ann-bg: var(--bs-primary-bg-subtle); --ann-text: var(--bs-primary-text-emphasis);
    display: flex; align-items: flex-start; gap: .75rem; padding: .8rem 1rem; border: 1px solid color-mix(in srgb, var(--ann), transparent 60%);
    border-left: 4px solid var(--ann); border-radius: 12px; background: var(--ann-bg); color: var(--ann-text); }
.announcement-bar > i { font-size: 1.15rem; line-height: 1.4; }
.announcement-bar > div { flex: 1; min-width: 0; }
.announcement-bar strong { display: block; font-size: .95rem; }
.announcement-bar p { margin: .2rem 0 0; font-size: .86rem; white-space: pre-line; overflow-wrap: anywhere; }
.announcement-when { display: inline-block; margin-top: .2rem; padding: .1rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--ann), transparent 85%); font-size: .78rem; font-weight: 600; }
.announcement-close { border: 0; background: transparent; color: inherit; opacity: .7; padding: .1rem .25rem; line-height: 1; }
.announcement-close:hover { opacity: 1; }
.announcement-maintenance { --ann: var(--bs-warning); --ann-bg: var(--bs-warning-bg-subtle); --ann-text: var(--bs-warning-text-emphasis); }
.announcement-important { --ann: var(--bs-danger); --ann-bg: var(--bs-danger-bg-subtle); --ann-text: var(--bs-danger-text-emphasis); }
.announcement-update { --ann: var(--bs-success); --ann-bg: var(--bs-success-bg-subtle); --ann-text: var(--bs-success-text-emphasis); }
.announcement-more { font-size: .8rem; }

/* Seller announcements page */
.announcements-page { max-width: 820px; }
.announcements-list { display: grid; gap: .75rem; padding: 0; list-style: none; }
.announcements-list .announcement-bar.is-old { opacity: .75; }
.announcements-list small.announcement-date { display: block; margin-top: .35rem; opacity: .8; font-size: .75rem; }

/* Platform composer */
.ann-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ann-preview-col { position: sticky; top: 1rem; }
.ann-field { margin-bottom: .9rem; }
.ann-kinds { display: flex; flex-wrap: wrap; gap: .4rem; }
.ann-kind { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border: 1px solid var(--bs-border-color); border-radius: 999px; background: var(--bs-body-bg); color: var(--bs-body-color); font-size: .82rem; }
.ann-kind.is-selected { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; }
.ann-audience { border: 0; padding: 0; margin-top: .5rem; }
.ann-picker { border: 1px solid var(--bs-border-color); border-radius: 10px; overflow: hidden; }
.ann-picker-tools { display: flex; gap: .5rem; padding: .5rem; background: var(--bs-tertiary-bg); }
.ann-picker-tools select { max-width: 9rem; }
.ann-picker-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem; padding: .35rem .6rem; border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); font-size: .8rem; }
.ann-picker-list { max-height: 16rem; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.ann-picker-list li { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.ann-picker-list li:last-child { border-bottom: 0; }
.ann-picker-list label { flex: 1; min-width: 0; cursor: pointer; font-size: .85rem; }
.ann-picker-list label small { display: block; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-table { font-size: .84rem; }
.ann-table-body { max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-kind-dot { display: inline-flex; width: 1.6rem; height: 1.6rem; align-items: center; justify-content: center; margin-right: .45rem; border-radius: 50%; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.ann-kind-dot.ann-kind-maintenance { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.ann-kind-dot.ann-kind-important { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.ann-kind-dot.ann-kind-update { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }

@media (max-width: 991.98px) {
    .ann-layout { grid-template-columns: 1fr; }
    .ann-preview-col { position: static; order: -1; }
}