/* Shared design selection controls for both studio editors. */
.bp-design-presets { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bp-design-presets legend { font-size: 12px; margin-bottom: 12px; }
.ballet-pages-dashboard-shell .bp-design-choice, .bp-design-choice { display: block; position: relative; padding: 12px; border: 1px solid #dfcbd0; border-radius: 10px; cursor: pointer; }
.bp-design-choice:has(input:checked) { background: #fcf2f4; border-color: #b96678; outline: 1px solid #b96678; }
.bp-design-choice strong, .bp-design-choice small { display: block; margin-top: 10px; }
.bp-design-choice small { font-size: 11px; line-height: 1.7; }
.ballet-pages-dashboard-shell .bp-design-fields .bp-sub-color-toggle { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11px; }
.ballet-pages-dashboard-shell .bp-sub-color-toggle input { width: 16px; height: 16px; min-height: 0; flex: 0 0 16px; }
@media(max-width:520px) { .bp-design-presets { grid-template-columns: 1fr; } }
/* Previews communicate composition, not only corner treatment. */
.bp-design-choice strong { overflow-wrap: anywhere; }
.bp-design-presets + .bp-design-presets { margin-top: 28px; }
.bp-choice-sample { height: 100px; display: grid; gap: 8px; padding: 12px; background: #fff; margin-top: 12px; border: 1px solid #eee; }
.bp-choice-sample i { display: block; background: #ead9dd; height: 52px; }
.bp-choice-sample b { display: block; width: 60%; height: 4px; background: #b8898f; margin: auto; }
.bp-choice-sample em { display: none; }
.sample-corner_style-soft i { border-radius: 14px; }
.sample-corner_style-arch i { border-radius: 50% 50% 0 0; }
.sample-hero_layout-full { background: #fff; align-content: start; }
.sample-hero_layout-full i { display: block; height: 48px; }
.sample-hero_layout-full b { margin-left: 0; width: 60%; height: 4px; }
.sample-hero_layout-arch { grid-template-columns: 1.4fr 1fr; align-items: center; }
.sample-hero_layout-arch i { grid-column: 1; grid-row: 1; border-radius: 0; height: auto; aspect-ratio: 16 / 9; }
.sample-hero_layout-arch b { grid-column: 2; grid-row: 1; width: 100%; }
.sample-hero_layout-banner i { border-radius: 8px; }
.bp-design-preview-surface[data-shape=arch] { border-radius: 60px 60px 14px 14px; }

.bp-choice-sample[class*="sample-background_pattern-"] { position: relative; display: block; background: #fcf5f4; }
.bp-choice-sample[class*="sample-background_pattern-"] > * { display: none; }
.sample-background_pattern-botanical { --bp-pattern-image: url('../patterns/botanical.svg'); }
.sample-background_pattern-floral { --bp-pattern-image: url('../patterns/floral.svg'); }
.bp-choice-sample[class*="sample-background_pattern-"]::after { content: ''; position: absolute; inset: 0; background: #ac727e; opacity: .55; mask: var(--bp-pattern-image, none) repeat 0 0 / 150px 150px; -webkit-mask: var(--bp-pattern-image, none) repeat 0 0 / 150px 150px; }
.sample-background_pattern-none::after { display: none; }

.sample-background_pattern-rose { --bp-pattern-image: url('../patterns/rose.svg'); }
.sample-background_pattern-mimosa { --bp-pattern-image: url('../patterns/mimosa.svg'); }
.sample-background_pattern-lace { --bp-pattern-image: url('../patterns/lace.svg'); }

/* Note rows show the same marker and grouping as the public page. */
.bp-note-editor { min-width: 0; margin: 24px 0; padding: 0; border: 0; }
.bp-note-editor legend { margin-bottom: 12px; padding: 0; font-size: 14px; font-weight: 600; }
.bp-note-editor [data-note-list] { display: grid; gap: 10px; }
.bp-note-editor .bp-note-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 8px; }
.bp-note-editor .bp-note-marker { padding-top: 12px; color: #966273; }
.bp-note-editor .bp-note-row textarea { width: 100%; min-height: 64px; margin: 0; padding: 10px 12px; border: 1px solid #e3d8dc; border-radius: 10px; background: #fff; box-shadow: none; font: inherit; line-height: 1.6; resize: vertical; box-sizing: border-box; }
.bp-note-editor .bp-note-row .bp-note-remove,
.bp-note-editor .bp-note-add { width: auto; min-height: 44px; margin: 0; padding: 8px 10px; border: 0; border-radius: 8px; background: #f6eef1; color: #754b59; box-shadow: none; font-size: 12px; cursor: pointer; }
.bp-note-editor .bp-note-add { margin-top: 12px; padding-inline: 16px; }
.bp-note-editor button:hover { background: #efdee5; }
.bp-note-editor :is(button, textarea):focus-visible { outline: 2px solid #a5677d; outline-offset: 2px; }