/* Super admin > Shop banners */
.bn-list { display: grid; gap: .8rem; }
.bn-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .8rem; border-radius: 18px; border: 1px solid rgba(127,127,127,.18); background: var(--bs-card-bg, #fff); }
.bn-row.off { opacity: .55; }
.bn-move { display: flex; flex-direction: column; gap: .25rem; }
.bn-move button { border: 1px solid rgba(127,127,127,.3); background: transparent; border-radius: 8px; width: 30px; height: 26px; line-height: 1; cursor: pointer; color: inherit; }
.bn-move button:disabled { opacity: .3; cursor: default; }
.bn-mini { width: 100%; max-width: 560px; }
.bn-meta { display: flex; flex-direction: column; gap: .35rem; align-items: flex-end; text-align: right; }
.bn-state { border-radius: 999px; padding: .05rem .6rem; font-size: .75rem; font-weight: 600; }
.bn-state.live { background: #e3f2d9; color: #2f7124; } .bn-state.scheduled { background: #eef4fb; color: #3b6aa0; } .bn-state.off, .bn-state.ended { background: #eee; color: #666; }

/* The slide itself (mirrors the shop's .ks-banner) */
.bn-slide { position: relative; overflow: hidden; border-radius: 18px; color: #fffdf7; padding: 1rem 1.1rem; min-height: 120px; font-family: "Itim", system-ui, sans-serif; }
.bn-slide h4 { font-family: "Caveat Brush", "Itim", sans-serif; font-weight: 400; font-size: 1.7rem; line-height: 1; margin: 0 0 .25rem; max-width: 68%; color: inherit; }
.bn-slide p { margin: 0 0 .6rem; max-width: 66%; font-size: .92rem; }
.bn-slide .bn-btn { display: inline-block; background: #fffdf7; color: #9a5532; border-radius: 999px; padding: .25rem .9rem; font-size: .9rem; }
.bn-slide img { position: absolute; right: -4px; bottom: -4px; height: 112px; max-width: 40%; object-fit: contain; }
.bn-slide.dark { color: #1d1915; } .bn-slide.dark .bn-btn { background: #1d1915; color: #fffdf7; }
.bn-slide.cover h4, .bn-slide.cover p { text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.bn-slide.colour h4, .bn-slide.colour p { max-width: 95%; }

.bn-preview-wrap { background: rgba(127,127,127,.06); border-radius: 16px; padding: .7rem; }
.bn-previews { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: .8rem; margin-top: .4rem; align-items: start; }
.bn-phone .bn-slide { min-height: 132px; }
.bn-desk .bn-slide { min-height: 220px; padding: 1.8rem 2rem; display: flex; flex-direction: column; justify-content: center; }
.bn-desk .bn-slide h4 { font-size: 2.6rem; } .bn-desk .bn-slide p { font-size: 1.05rem; max-width: 55%; }
.bn-desk .bn-slide img { height: 200px; right: 3%; bottom: 50%; transform: translateY(50%); }
@media (max-width: 991px) { .bn-previews { grid-template-columns: 1fr; } }

.bn-styles { display: grid; gap: .4rem; }
.bn-styles input { position: absolute; opacity: 0; }
.bn-styles span { display: flex; align-items: center; gap: .5rem; border: 2px solid rgba(127,127,127,.25); border-radius: 12px; padding: .45rem .7rem; cursor: pointer; }
.bn-styles span i { font-size: 1.3rem; color: #4b8b2a; }
.bn-styles input:checked + span { border-color: #4b8b2a; background: rgba(75,139,42,.08); }
.bn-styles input:focus-visible + span { outline: 2px solid #4b8b2a; outline-offset: 2px; }
.bn-swatches { display: flex; flex-wrap: wrap; gap: .35rem; }
.bn-swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.15); cursor: pointer; }
.bn-swatches button.on { box-shadow: 0 0 0 3px #1d1915; }