/* ============================================================
   V2 "Studio" canvas interaction skin — ONLY on the ?studio=1
   page (.bb-studio root). Hides the legacy editing chrome and
   provides the draft's selection/toolbar/add-block visuals.
   The legacy controls stay in the DOM (hidden) — the Studio
   toolbars carry the same data-bb-* datasets so the existing
   dispatcher executes everything.
   ============================================================ */

/* ---------------- hide legacy editor chrome ---------------- */
/* pencils hidden EVERYWHERE in Studio (structural hero/footer too) —
   the structural click handler .click()s them programmatically */
.bb-studio .bb-editor-block-hotspot,
.bb-studio .bb-editor-hotspot,
.bb-studio [data-bb-studio-canvas] .edit-design-btn,
.bb-studio [data-bb-studio-canvas] .edit-design-elemnt-btn,
.bb-studio [data-bb-studio-canvas] .hide-component-btn,
.bb-studio .bb-v2-add-block-row,
.bb-studio .bb-editor-menu {
    display: none !important;
}

/* legacy dashed editing borders off — Studio draws its own.
   Applies to structural regions (hero titles, embedded form shell)
   as well as stage blocks. */
.bb-studio [data-bb-editor-stage] .edit-border,
.bb-studio [data-bb-editor-stage] .editable-continer,
.bb-studio [data-bb-editor-stage] .bb-editor-object,
.bb-studio [data-bb-studio-canvas] .editable-header-block,
.bb-studio [data-bb-studio-canvas] .bb-v2-structural-form-shell,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] .editable-continer,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] .edit-border {
    border-color: transparent !important;
    outline: none !important;
}

.bb-studio [data-bb-editor-stage] .bb-editor-button-placeholder {
    outline: none !important;
}

/* legacy "ADD CARD" text links -> quiet dashed ghost buttons */
.bb-studio [data-bb-editor-stage] .bb-editor-add-item {
    background: transparent !important;
    border: 1.5px dashed currentColor !important;
    border-radius: 10px !important;
    color: inherit !important;
    cursor: pointer;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    margin: 10px 0;
    opacity: 0.45;
    padding: 9px 18px !important;
    text-decoration: none !important;
    text-transform: uppercase;
}

.bb-studio [data-bb-editor-stage] .bb-editor-add-item::before {
    border: none;
    border-radius: 0;
    content: "+";
    font-size: 13px;
    height: auto;
    width: auto;
}

.bb-studio [data-bb-editor-stage] .bb-editor-add-item:hover {
    opacity: 0.9;
}

.bb-studio [data-bb-editor-stage] .bb-editor-add-item img,
.bb-studio [data-bb-editor-stage] .bb-editor-add-item svg {
    display: none;
}

/* spacing edits animate on the canvas, exactly like the draft */
.bb-studio [data-bb-v2-block-shell] > * {
    transition: padding-top 0.25s ease, padding-bottom 0.25s ease;
}

/* the editor render pins sections to a literal 120px (the legacy drag-pill
   used to apply the real value on top — Studio hides that pill). The REAL
   paddings ship in the same style attr as CSS vars: make them win. */
.bb-studio [data-bb-v2-block-shell] > [style*="--bb-v2-section-padding-top"] {
    padding-top: var(--bb-v2-section-padding-top) !important;
}

.bb-studio [data-bb-v2-block-shell] > [style*="--bb-v2-section-padding-bottom"] {
    padding-bottom: var(--bb-v2-section-padding-bottom) !important;
}

/* ---------------- hover highlight ---------------- */
.bb-studio [data-bb-v2-block-shell] > *:hover {
    outline: 1.5px dashed rgba(219, 58, 87, 0.4) !important;
    outline-offset: -1.5px;
}

.bb-studio [data-bb-editor-stage] .bb-editor-object:hover {
    outline: 1.5px dashed rgba(42, 120, 214, 0.55) !important;
    outline-offset: 2px;
}

/* Structural regions use the same hover language as regular blocks. The
   transparent resting outline lets the dashed color fade in without layout
   movement; explicit header targets cover branding and the complete nav list. */
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] {
    outline: 1.5px dashed transparent !important;
    outline-offset: -1.5px;
    transition: outline-color 0.16s ease;
}

.bb-studio [data-bb-studio-canvas] [data-bb-structural-block]:hover {
    outline-color: rgba(219, 58, 87, 0.4) !important;
}

.bb-studio [data-bb-studio-canvas] [data-bb-studio-structural-object],
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] .editable-continer,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] .edit-border {
    outline: 1.5px dashed transparent !important;
    outline-offset: 2px;
    transition: background-color 0.16s ease, outline-color 0.16s ease;
}

.bb-studio [data-bb-studio-canvas] [data-bb-studio-structural-object]:hover,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] .editable-continer:hover,
.bb-studio [data-bb-studio-canvas] [data-bb-structural-block] .edit-border:hover {
    background-color: rgba(42, 120, 214, 0.025);
    outline-color: rgba(42, 120, 214, 0.55) !important;
}

/* ---------------- selection ---------------- */
.bb-studio .bb-studio-sel-block {
    outline: 2px solid var(--bbs-primary, #DB3A57) !important;
    outline-offset: -2px;
    position: relative;
}

.bb-studio [data-bb-structural-block].bb-studio-sel-structural {
    outline: 2px solid var(--bbs-primary, #DB3A57) !important;
    outline-offset: -2px;
    position: relative;
}

.bb-studio .bb-editor-object.bb-studio-sel-object {
    outline: 2px solid var(--bbs-nested, #2A78D6) !important;
    outline-offset: 2px;
    position: relative;
}

/* ---------------- floating toolbars ---------------- */
.bb-studio-tools {
    align-items: center;
    background: #fff;
    border: 1px solid var(--bbs-border, #EAE4DC);
    border-radius: 999px;
    box-shadow: 0 8px 28px rgba(43, 38, 34, 0.18);
    display: flex;
    font-family: var(--bbs-font, 'Inter', system-ui, sans-serif);
    gap: 2px;
    padding: 3px 5px;
    position: absolute;
    right: 14px;
    top: -17px;
    z-index: 60;
}

.bb-studio-tools--object {
    border-color: #CFE0F2;
    right: 8px;
    top: -15px;
}

.bb-studio-tools--structural {
    max-width: calc(100% - 28px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    top: 8px;
}

.bb-studio-tools--structural::-webkit-scrollbar {
    display: none;
}

.bb-studio-tools--structural .bb-studio-tools__name {
    color: var(--bbs-primary, #DB3A57);
    flex: none;
}

.bb-studio-tools__name {
    border-right: 1px solid var(--bbs-border, #EAE4DC);
    color: var(--bbs-text-2, #6E6660);
    font-size: 11.5px;
    font-weight: 700;
    margin-right: 3px;
    padding: 0 8px 0 5px;
    white-space: nowrap;
}

.bb-studio-tools--object .bb-studio-tools__name {
    color: var(--bbs-nested, #2A78D6);
}

.bb-studio-tools button {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--bbs-text-2, #6E6660);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    gap: 5px;
    height: 28px;
    justify-content: center;
    min-width: 28px;
    padding: 0 6px;
    white-space: nowrap;
}

.bb-studio-tools button:hover {
    background: #F6F6F6;
    color: var(--bbs-text, #2B2622);
}

.bb-studio-tools button.bb-studio-tools__danger:hover {
    background: #FFE9EE;
    color: #C22F4A;
}

.bb-studio-tools button.bb-studio-tools__drag {
    cursor: grab;
}

.bb-studio-tools svg {
    height: 15px;
    width: 15px;
}

body.bb-studio-dragging,
body.bb-studio-dragging * {
    cursor: grabbing !important;
    user-select: none;
}

.bb-studio [data-bb-v2-block-shell].bb-studio-drag-ghost {
    opacity: 0.35;
}

/* ---------------- between-block add gaps ---------------- */
.bb-studio-gap {
    height: 0;
    position: relative;
    z-index: 50;
}

.bb-studio-gap__hit {
    align-items: center;
    display: flex;
    height: 28px;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: -14px;
    transition: opacity 0.12s;
}

.bb-studio-gap:hover .bb-studio-gap__hit,
.bb-studio-gap.is-target .bb-studio-gap__hit {
    opacity: 1;
}

.bb-studio-gap__line {
    background: var(--bbs-primary, #DB3A57);
    border-radius: 2px;
    height: 2px;
    left: 22px;
    position: absolute;
    right: 22px;
    top: 50%;
}

.bb-studio-gap__plus {
    background: var(--bbs-primary, #DB3A57);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(219, 58, 87, 0.4);
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    height: 28px;
    line-height: 1;
    position: relative;
    width: 28px;
    z-index: 2;
}

.bb-studio-gap__plus:hover {
    background: var(--bbs-primary-hover, #C22F4A);
}

/* ---------------- delete grace period + Undo toast ---------------- */
.bb-studio .bb-studio-deleting {
    display: none !important;
}

.bb-studio-toast {
    align-items: center;
    background: var(--bbs-ink, #232025);
    border-radius: 12px;
    bottom: 26px;
    box-shadow: 0 14px 40px rgba(35, 32, 37, 0.35);
    color: #fff;
    display: flex;
    font-family: var(--bbs-font, 'Inter', system-ui, sans-serif);
    font-size: 13px;
    gap: 14px;
    left: 50%;
    overflow: hidden;
    padding: 12px 16px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 2147483400;
}

.bb-studio-toast__undo {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 14px;
}

.bb-studio-toast__undo:hover {
    background: rgba(255, 255, 255, 0.22);
}

.bb-studio-toast__bar {
    animation-name: bbStudioToastBar;
    animation-timing-function: linear;
    background: var(--bbs-primary, #DB3A57);
    bottom: 0;
    height: 3px;
    left: 0;
    position: absolute;
}

@keyframes bbStudioToastBar {
    from { width: 100%; }
    to { width: 0; }
}

/* ---------------- add-block picker modal ---------------- */
.bb-studio-picker {
    display: none;
    font-family: var(--bbs-font, 'Inter', system-ui, sans-serif);
    inset: 0;
    position: fixed;
    z-index: 2147483300;
}

.bb-studio-picker.is-open {
    display: block;
}

.bb-studio-picker__scrim {
    background: rgba(35, 32, 37, 0.45);
    inset: 0;
    position: absolute;
}

.bb-studio-picker__sheet {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
    left: 50%;
    max-height: 84vh;
    overflow: auto;
    padding: 24px 26px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(820px, 92vw);
}

.bb-studio-picker__sheet h2 {
    font-size: 19px;
    margin: 0 0 4px;
}

.bb-studio-picker__sub {
    color: var(--bbs-text-2, #6E6660);
    font-size: 13px;
    margin: 0 0 16px;
}

/* Studio-designed tiles (draft V2 look) built from the real preset registry */
.bb-studio-picker__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.bb-studio-picker__cat {
    background: #fff;
    border: 1px solid var(--bbs-border, #EAE4DC);
    border-radius: 999px;
    color: var(--bbs-text-2, #6E6660);
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 13px;
}

.bb-studio-picker__cat.is-active {
    background: var(--bbs-primary-soft, #FFF1F5);
    border-color: transparent;
    color: var(--bbs-primary, #DB3A57);
}

.bb-studio-picker__tiles {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, 1fr);
}

.bb-studio-tile {
    background: #fff;
    border: 1px solid var(--bbs-border, #EAE4DC);
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    padding: 12px;
    text-align: left;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.bb-studio-tile:hover {
    border-color: var(--bbs-primary, #DB3A57);
    box-shadow: 0 2px 10px rgba(43, 38, 34, 0.08);
}

.bb-studio-tile__prev {
    background: #FAF7F2;
    border: 1px solid var(--bbs-border, #EAE4DC);
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 96px;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 12px;
}

.bb-studio-tile__name {
    font-size: 13.5px;
    font-weight: 700;
    margin: 0 0 3px;
}

.bb-studio-tile__desc {
    color: var(--bbs-text-2, #6E6660);
    font-size: 11.5px;
    line-height: 1.4;
    margin: 0;
}

/* skeleton preview bits (shared by the tile art) */
.bb-studio-picker .sk { background: #D9D2C8; border-radius: 3px; }
.bb-studio-picker .sk--title { height: 8px; margin: 0 auto; width: 60%; background: #B7AEA3; }
.bb-studio-picker .sk--line { height: 5px; margin: 0 auto; width: 80%; }
.bb-studio-picker .sk-row { display: flex; flex: 1; gap: 6px; }
.bb-studio-picker .sk-col { display: flex; flex: 1; flex-direction: column; gap: 5px; }
.bb-studio-picker .sk-card { background: #fff; border: 1px solid #E5DED4; border-radius: 5px; display: flex; flex: 1; flex-direction: column; overflow: hidden; }
.bb-studio-picker .sk-card i { background: linear-gradient(135deg, #F3D9CE, #E4A9B8); display: block; height: 45%; }
.bb-studio-picker .sk-card b { background: #C9C0B4; border-radius: 3px; display: block; height: 5px; margin: 6px 6px 3px; }
.bb-studio-picker .sk-card s { background: #E5DED4; border-radius: 3px; display: block; height: 4px; margin: 0 10px 3px; text-decoration: none; }
.bb-studio-picker .sk-card u.star { background: #EDA100; border-radius: 3px; display: block; height: 4px; margin: 6px 8px 3px; }
.bb-studio-picker .sk-feat { align-items: center; display: flex; flex: 1; gap: 5px; }
.bb-studio-picker .sk-feat i { background: #EFC5C9; border-radius: 4px; flex: none; height: 12px; width: 12px; }
.bb-studio-picker .sk-feat .sk { flex: 1; height: 6px; margin: 0; width: auto; }
.bb-studio-picker .sk-img { background: linear-gradient(135deg, #F3D9CE, #E4A9B8); border-radius: 5px; flex: 1; }
.bb-studio-picker .sk-play { align-items: center; background: #232025; border-radius: 6px; display: flex; flex: 1; justify-content: center; }
.bb-studio-picker .sk-play::after { border-bottom: 7px solid transparent; border-left: 11px solid #fff; border-top: 7px solid transparent; content: ""; margin-left: 3px; }
.bb-studio-picker .sk-btn { background: var(--bbs-primary, #DB3A57); border-radius: 5px; height: 10px; margin: 2px auto 0; width: 36%; }
.bb-studio-picker .sk-field { background: #F6F1EA; border: 1px solid #E5DED4; border-radius: 4px; height: 10px; }

/* features grid: three real columns (icon over text), like the block it creates */
.bb-studio-picker .sk-fcol { align-items: center; display: flex; flex: 1; flex-direction: column; gap: 4px; justify-content: center; }
.bb-studio-picker .sk-fcol i { background: #EFC5C9; border-radius: 4px; height: 12px; width: 12px; }
.bb-studio-picker .sk-fcol .sk { height: 5px; margin: 0; width: 86%; }

/* paragraph list: timeline thread through the dots */
.bb-studio-picker .sk-tl { position: relative; }
.bb-studio-picker .sk-tl::before { background: #E5DED4; bottom: 8px; content: ""; left: 5px; position: absolute; top: 8px; width: 2px; }
.bb-studio-picker .sk-tl .sk-feat i { position: relative; }

/* faq accordion: stacked collapsed rows */
.bb-studio-picker .sk-acc { background: #EDE6DC; border-radius: 4px; display: block; flex: 1; min-height: 10px; position: relative; }
.bb-studio-picker .sk-acc::after { border-left: 2px solid #B7AEA3; border-bottom: 2px solid #B7AEA3; content: ""; height: 5px; position: absolute; right: 8px; top: 50%; transform: translateY(-70%) rotate(-45deg); width: 5px; }

/* conversion form: the form itself as a side card */
.bb-studio-picker .sk-form { background: #fff; border: 1px solid #E5DED4; border-radius: 6px; display: flex; flex: 1.1; flex-direction: column; gap: 4px; justify-content: center; padding: 8px; }
.bb-studio-picker .sk-form .sk-btn { margin: 1px 0 0; width: 58%; }