#form-container.builder-side-panel {
    background: #ffffff;
    border-left: 1px solid #d2d5da;
    box-shadow: -4px 0 18px rgba(0, 0, 0, 0.22);
    height: 100vh;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    transition: width 0.2s ease;
    width: min(400px, 100vw);
    z-index: 2147483000;
}

#form-container.builder-side-panel.is-expanded {
    width: min(72rem, 100vw);
}

#form-container.builder-side-panel[hidden],
#form-container.builder-side-panel.d-none {
    display: none !important;
}

#wtm-form-design-modal {
    z-index: 1050 !important;
}

/* Studio chrome intentionally lives near the maximum z-index. Keep the shared
   form designer above the topbar, structure rail, and inspector only when it
   is opened inside the studio editor; the legacy editor keeps Bootstrap's
   normal modal layer above. */
.bb-studio #wtm-form-design-modal {
    z-index: 2147483500 !important;
}

#wtm-form-design-modal .wtm-fd-snippet-root[data-wtm-form-type="login"] .close,
#wtm-form-design-modal .wtm-fd-snippet-root[data-wtm-form-type="login"] .close span,
#wtm-form-design-modal .wtm-fd-snippet-root[data-wtm-form-type="login"] .close i {
    color: currentColor !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

#wtm-form-design-modal .wtm-fd-snippet-root[data-wtm-form-type="login"] .close {
    align-items: center;
    display: inline-flex;
    font-size: 0 !important;
    height: 24px;
    justify-content: center;
    line-height: 1;
    padding: 0 !important;
    width: 24px;
}

#wtm-form-design-modal .wtm-fd-snippet-root[data-wtm-form-type="login"] .close svg,
#wtm-form-design-modal .wtm-fd-snippet-root[data-wtm-form-type="login"] .close svg path {
    color: currentColor !important;
    stroke: currentColor !important;
}

#wtm-form-design-modal .wtm-fd-snippet-root[data-wtm-form-type="login"] .close .fa-close:before {
    color: currentColor !important;
    content: "" !important;
}

#wtm-form-design-modal .wtm-fd-snippet-root[data-wtm-form-type="login"] .close span {
    display: block;
    height: 24px;
    position: relative;
    width: 24px;
}

#wtm-form-design-modal .wtm-fd-snippet-root[data-wtm-form-type="login"] .close i {
    display: none;
}

#wtm-form-design-modal .wtm-fd-snippet-root[data-wtm-form-type="login"] .close span::before,
#wtm-form-design-modal .wtm-fd-snippet-root[data-wtm-form-type="login"] .close span::after {
    background: currentColor;
    border-radius: 999px;
    content: "";
    height: 1.5px;
    left: 3px;
    position: absolute;
    top: 11px;
    width: 18px;
}

#wtm-form-design-modal .wtm-fd-snippet-root[data-wtm-form-type="login"] .close span::before {
    transform: rotate(45deg);
}

#wtm-form-design-modal .wtm-fd-snippet-root[data-wtm-form-type="login"] .close span::after {
    transform: rotate(-45deg);
}

#wtm-form-design-modal .wtm-fd-snippet-root[data-wtm-form-type="login"] .modal-body .btn-primary {
    display: block;
    margin-top: 16px !important;
}

.modal-backdrop:has(+ #wtm-form-design-modal),
#wtm-form-design-modal + .modal-backdrop,
.modal-backdrop.show {
    z-index: 1040 !important;
}

.bb-v2-modal-host {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 1300;
}

.bb-v2-modal-host[hidden],
.bb-v2-modal-host.d-none {
    display: none !important;
}

.bb-v2-modal-scrim {
    background: rgba(0, 0, 0, 0.38);
    inset: 0;
    position: absolute;
}

.bb-v2-modal-shell {
    background: transparent;
    box-shadow: none;
    max-height: calc(100vh - 48px);
    overflow: auto;
    position: relative;
    width: auto;
    z-index: 1;
}

.bb-v2-modal-shell .standard-modal {
    display: block;
    height: auto;
    opacity: 1;
    overflow: visible;
    padding: 0 !important;
    position: static;
    width: auto;
}

.bb-v2-modal-shell .standard-modal .modal-dialog {
    margin: 0;
    max-width: calc(100vw - 36px) !important;
    min-width: 0 !important;
    transform: none !important;
}

.bb-v2-modal-shell .standard-modal .medium-m {
    width: min(31.25rem, calc(100vw - 36px)) !important;
}

.bb-v2-modal-shell .standard-modal .large-m {
    width: min(50rem, calc(100vw - 36px)) !important;
}

.bb-v2-modal-shell .standard-modal .builder-side-panel-header-actions {
    margin-left: auto;
}

.bb-v2-modal-shell .standard-modal .builder-side-panel-close-btn {
    background: transparent;
    border: 0;
    color: #1a1a1a;
    cursor: pointer;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    min-width: 24px;
    padding: 0;
}

.bb-v2-modal-shell .standard-modal .builder-side-panel-close-btn:focus {
    box-shadow: none;
    outline: 0;
}

.bb-v2-modal-shell .builder-panel-modal {
    background: transparent;
    display: block;
    height: auto;
    opacity: 1;
    overflow: visible;
    padding: 0 !important;
    position: static;
    width: 100%;
}

.bb-v2-modal-shell .builder-panel-dialog {
    margin: 0 !important;
    max-width: none !important;
    min-height: 0;
    min-width: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.bb-v2-modal-shell .modal-content {
    border: 0;
    border-radius: 0.25rem !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
    width: 100%;
}

#form-container.builder-side-panel,
#form-container.builder-side-panel * {
    box-sizing: border-box;
}

#form-container.builder-side-panel .builder-side-panel-content {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

#form-container.builder-side-panel .builder-panel-modal {
    background: transparent;
    display: block;
    height: auto;
    opacity: 1;
    overflow: visible;
    padding: 0 !important;
    position: static;
    width: 100%;
}

#form-container.builder-side-panel .builder-panel-dialog {
    margin: 0 !important;
    max-width: none !important;
    min-height: 0;
    min-width: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

#form-container.builder-side-panel .modal-content {
    border: 0;
    border-radius: 0 !important;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}

#form-container.builder-side-panel .modal-header {
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #d2d5da;
    display: flex;
    gap: 12px;
    height: 63px;
    min-height: 63px;
    padding: 15px 23px;
    position: sticky;
    top: 0;
    z-index: 4;
}

#form-container.builder-side-panel .modal-header > :first-child {
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 500;
    margin-right: auto;
}

#form-container.builder-side-panel .builder-side-panel-header-actions {
    align-items: center;
    display: flex;
    gap: 12px;
}

#form-container.builder-side-panel .builder-side-panel-size-btn,
#form-container.builder-side-panel .builder-side-panel-close-btn {
    background: #ffffff;
    border: 1px solid #d2d5da;
    border-radius: 4px;
    color: #000000;
    cursor: pointer;
    font-weight: 700;
    height: 32px;
    line-height: 20px;
    min-width: 32px;
    padding: 5px 10px;
}

#form-container.builder-side-panel .builder-side-panel-size-btn {
    box-shadow: none;
    font-size: 13px;
    min-width: 78px;
    padding-left: 12px;
    padding-right: 12px;
    width: auto;
}

#form-container.builder-side-panel .builder-side-panel-size-btn:focus,
#form-container.builder-side-panel .builder-side-panel-close-btn:focus {
    box-shadow: none;
    outline: 0;
}

#form-container.builder-side-panel .builder-side-panel-close-btn {
    border: 0;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    min-width: 20px;
    padding: 0;
    width: 20px;
}

#form-container.builder-side-panel .bb-v2-form-design-link {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #1A1A1A !important;
    display: inline;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    padding: 0;
    text-decoration: none;
}

#form-container.builder-side-panel .bb-v2-form-design-link:hover,
#form-container.builder-side-panel .bb-v2-form-design-link:focus {
    color: #1A1A1A !important;
    text-decoration: underline;
}

#form-container.builder-side-panel .modal-body {
    flex: 1 1 auto;
    max-height: none;
    overflow: visible;
    padding: 18px 32px 18px !important;
}

#global-styling-toggle-btn {
    align-items: center;
    background-color: #db3a57;
    border: 0;
    border-radius: 4px;
    bottom: 16px;
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    position: fixed;
    right: 16px;
    transition: background-color 0.2s ease-in-out;
    width: 40px;
    z-index: 2147482990;
}

#global-styling-toggle-btn:hover,
#global-styling-toggle-btn:focus {
    background-color: #c92f4b;
    outline: 0;
}

#global-styling-container.bb-v2-global-style-panel {
    background: #ffffff;
    border-left: 1px solid #dddddd;
    box-shadow: -2px 0 6px rgba(0, 0, 0, 0.2);
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
    width: min(25rem, 100vw);
    z-index: 2147483000;
}

#global-styling-container.bb-v2-global-style-panel[hidden],
#global-styling-container.bb-v2-global-style-panel.d-none {
    display: none !important;
}

#global-styling-container.bb-v2-global-style-panel .modal-content {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#global-styling-container.bb-v2-global-style-panel .modal-header {
    align-items: center;
    border-bottom: 1px solid #d2d5da;
    display: flex;
    flex: 0 0 auto;
    height: 63px;
    justify-content: space-between;
    padding: 15px 23px;
}

#global-styling-container.bb-v2-global-style-panel .modal-header > :first-child {
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 500;
}

#global-styling-container.bb-v2-global-style-panel .builder-side-panel-close-btn {
    background: transparent;
    border: 0;
    color: #1a1a1a;
    cursor: pointer;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    min-width: 24px;
    padding: 0;
}

#global-styling-container.bb-v2-global-style-panel .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 24px 18px !important;
}

#global-styling-container.bb-v2-global-style-panel input,
#global-styling-container.bb-v2-global-style-panel select {
    color: rgba(0, 0, 0, 0.3);
}

#global-styling-container.bb-v2-global-style-panel select option {
    color: #000000 !important;
}

#global-styling-container.bb-v2-global-style-panel input.is-edit,
#global-styling-container.bb-v2-global-style-panel select.is-edit {
    color: #000000;
}

#global-styling-container.bb-v2-global-style-panel .round-slider {
    background: #ffffff;
    border: 1px solid #d2d5da;
    border-radius: 4px;
}

#global-styling-container.bb-v2-global-style-panel .switcher-button {
    background: #ffffff;
    border: 1px solid rgba(204, 204, 204, 0.8);
    border-radius: 4px;
    color: #000000;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
    padding: 12px 14px;
}

#global-styling-container.bb-v2-global-style-panel .switcher-button.active {
    background: #db3a57;
    border-color: #db3a57;
    color: #ffffff;
}

#global-styling-container.bb-v2-global-style-panel .setting-section-name {
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 700;
}

#global-styling-container.bb-v2-global-style-panel .setting-hr {
    border: 0;
    border-top: 1px solid #d2d5da;
    margin: 16px 0;
}

#global-styling-container.bb-v2-global-style-panel .bb-standard-btn {
    min-height: 44px;
}

#form-container.builder-side-panel .standard-modal {
    z-index: auto;
}

.component-settings-container,
.block-settings-container {
    width: 100%;
}

.component-settings-container .switch-component-settings,
.component-settings-container .bb-v2-footer-edit-tab,
.block-settings-container .switch-component-settings {
    background: #ffffff;
    border: 1px solid rgba(204, 204, 204, 0.8);
    border-radius: 4px;
    color: #000000;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
    padding: 12px 14px;
}

.component-settings-container .switch-component-settings.active,
.component-settings-container .bb-v2-footer-edit-tab.active,
.block-settings-container .switch-component-settings.active {
    background: #db3a57;
    border-color: #db3a57;
    color: #ffffff;
}

#form-container.builder-side-panel .form-row {
    column-gap: 12px;
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
    row-gap: 12px;
}

#form-container.builder-side-panel .form-row > .w-100,
#form-container.builder-side-panel .form-row > .d-flex.flex-column.w-100,
#form-container.builder-side-panel .form-row > .flex-1 {
    flex: 1 1 14rem;
    max-width: 100%;
    min-width: min(14rem, 100%);
    width: auto !important;
}

#form-container.builder-side-panel .form-row.flex-column > * {
    width: 100% !important;
}

#form-container.builder-side-panel .bb-range {
    max-width: none;
    min-width: 0;
    width: 100%;
}

#form-container.builder-side-panel .bb-range .range-input {
    width: 100%;
}

#form-container.builder-side-panel .component-settings-container.is-content-tab .bb-text-align-control {
    display: none;
}

#form-container.builder-side-panel .align-btns-container {
    background-color: #f5f5f5;
    border: 1px solid #d2d5da;
    border-radius: 10px;
    display: flex;
}

#form-container.builder-side-panel .align-btns-container label.text-align-btn {
    cursor: pointer;
    margin: 0 !important;
}

#form-container.builder-side-panel .text-align-btn input[type="radio"] {
    appearance: none;
    border: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    opacity: 0;
    padding: 0 !important;
    position: absolute;
    width: 0 !important;
}

#form-container.builder-side-panel .text-align-btn .text-align-btn-mark {
    align-items: center;
    display: flex;
    height: 2rem;
    justify-content: center;
    width: 2.5rem;
}

#form-container.builder-side-panel .text-align-btn-mark svg {
    height: 1rem;
}

#form-container.builder-side-panel .text-align-btn input[type="radio"]:checked ~ .text-align-btn-mark {
    background-color: #ffffff;
    border: 2px solid #c8c8c8;
    border-radius: 10px;
}

#form-container.builder-side-panel .content-tab > .form-row.align-items-end {
    margin-bottom: 20px !important;
}

#form-container.builder-side-panel .content-tab > .form-row.align-items-end > .w-100 {
    transform: translateY(4px);
}

#form-container.builder-side-panel .styling-tab .title-block > .form-row:nth-child(2),
#form-container.builder-side-panel .styling-tab .description-block > .form-row:nth-child(2) {
    margin-top: 4px;
    padding-top: 4px;
    row-gap: 16px;
}

#form-container.builder-side-panel .styling-tab .title-block > .form-row:nth-child(3),
#form-container.builder-side-panel .styling-tab .description-block > .form-row:nth-child(3) {
    padding-top: 3.5px;
    row-gap: 32px;
}

#form-container.builder-side-panel .styling-tab .title-block {
    border-bottom: 1px solid #d2d5da;
    margin-bottom: 20px;
    padding-bottom: 16px;
}

#form-container.builder-side-panel label:not(.form-control) {
    color: #1a1a1a;
    display: inline-block;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 19px;
    margin-bottom: 6px;
}

#form-container.builder-side-panel .d-flex.flex-column > label:not(.form-control),
#form-container.builder-side-panel .flex-1 > label:not(.form-control),
#form-container.builder-side-panel .w-100 > label:not(.form-control) {
    align-self: flex-start;
    width: auto !important;
}

#form-container.builder-side-panel input,
#form-container.builder-side-panel select,
#form-container.builder-side-panel textarea,
#form-container.builder-side-panel .form-control,
#global-styling-container.bb-v2-global-style-panel input,
#global-styling-container.bb-v2-global-style-panel select,
#global-styling-container.bb-v2-global-style-panel textarea,
#global-styling-container.bb-v2-global-style-panel .form-control {
    background: #ffffff;
    border: 1px solid #d2d5da !important;
    border-radius: 4px;
    box-shadow: none;
    color: #1a1a1a;
    font-size: 14px;
    min-height: 40px;
    padding: 8px 12px;
    width: 100%;
}

#form-container.builder-side-panel input:focus,
#form-container.builder-side-panel select:focus,
#form-container.builder-side-panel textarea:focus,
#form-container.builder-side-panel .form-control:focus,
#global-styling-container.bb-v2-global-style-panel input:focus,
#global-styling-container.bb-v2-global-style-panel select:focus,
#global-styling-container.bb-v2-global-style-panel textarea:focus,
#global-styling-container.bb-v2-global-style-panel .form-control:focus {
    border-color: #db3a57 !important;
    box-shadow: 0 0 0 2px rgba(219, 58, 87, 0.18);
    outline: 0;
    outline-offset: 1px;
}

#global-styling-container.bb-v2-global-style-panel select.form-control,
#global-styling-container.bb-v2-global-style-panel select,
#form-container.builder-side-panel select.form-control,
#form-container.builder-side-panel select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("/images/dropdown-arrow-black.png") !important;
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    padding-right: 36px !important;
}

#form-container.builder-side-panel textarea.form-control {
    min-height: 86px;
    resize: vertical;
}

.contnent-part-name {
    color: #1a1a1a;
    font-size: 16px;
    line-height: 1.3;
}

.border-bottom {
    border-bottom: 1px solid #d2d5da !important;
}

.pb-3 {
    padding-bottom: 16px !important;
}

.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 16px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mt-0 { margin-top: 0 !important; }
.mt-3 { margin-top: 16px !important; }
.ml-2 { margin-left: 8px !important; }
.ml-3 { margin-left: 16px !important; }
.d-flex { display: flex !important; }
.flex-column { flex-direction: column !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.w-100 { width: 100% !important; }
.flex-1 { flex: 1 1 0 !important; }
.text-center { text-align: center !important; }
.fw-500 { font-weight: 500 !important; }
.opacity-40 { opacity: 0.4 !important; }

.bb-v2-builder-page .site-branding {
    align-items: center;
    display: flex;
    gap: 16px;
    padding: 5px 0;
}

.bb-v2-builder-page .site-footer {
    font-family: Rubik, sans-serif;
    font-size: 17.6px;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .bb-v2-builder-page .flex-md-row {
        flex-direction: row !important;
    }

    .bb-v2-builder-page .d-none.d-md-block {
        display: block !important;
    }
}

.image-preview-container.column {
    align-items: center;
    border: 1px solid #d2d5da;
    display: flex;
    flex: 0 0 78px;
    height: 78px;
    justify-content: center;
    width: 78px;
}

.image-preview-container.column img {
    max-height: 64px;
    max-width: 64px;
    object-fit: contain;
}

.help-text {
    color: #8b8f98;
    font-size: 12px;
    font-weight: 700;
    margin-left: 4px;
}

.file-label {
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hide-elem-btn,
.block-bg-eye-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    height: 10px;
    justify-content: center;
    margin-left: 4px;
    padding: 0;
    width: 14px;
}

.hide-elem-btn img,
.block-bg-eye-toggle img {
    height: 10px;
    width: 14px;
}

.color-container {
    position: relative;
    width: 100%;
}

.color-container .color-preview {
    border: 1px solid #d2d5da;
    border-radius: 4px;
    cursor: pointer;
    height: 32px;
    margin: 0;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 64px;
    z-index: 2;
}

.color-container input {
    padding-right: 76px !important;
}

.colorpicker,
.colorpicker.dropdown-menu {
    z-index: 2147483000 !important;
}

.bb-color-palette {
    background: #ffffff;
    border: 1px solid #c7ccd4;
    border-radius: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    left: 0;
    padding: 8px;
    position: absolute;
    top: 46px;
    width: 164px;
    z-index: 2147483000;
}

.bb-color-palette__body {
    display: flex;
    gap: 5px;
}

.bb-color-palette__sv {
    background:
        linear-gradient(to top, #000000, rgba(0, 0, 0, 0)),
        linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
    border: 0;
    cursor: crosshair;
    height: 125px;
    padding: 0;
    position: relative;
    width: 125px;
}

.bb-color-palette__thumb {
    border: 1px solid #000000;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #ffffff;
    height: 8px;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 8px;
}

.bb-color-palette__hue {
    background: linear-gradient(to bottom, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
    border: 0 !important;
    border-radius: 0 !important;
    cursor: pointer;
    display: block;
    height: 125px !important;
    min-height: 125px !important;
    margin: 0;
    padding: 0 !important;
    position: relative;
    width: 17px !important;
}

.bb-color-palette__hue-thumb {
    background: #ffffff;
    border: 1px solid #8b95a1;
    border-radius: 0;
    height: 5px;
    left: 0;
    pointer-events: none;
    position: absolute;
    transform: translateY(-50%);
    width: 17px;
}

.bb-color-palette__value {
    background: #8b5cf6;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    height: 19px;
    line-height: 19px;
    margin-top: 6px;
    text-align: center;
    text-transform: uppercase;
    width: 147px;
}

.editable-image {
    cursor: pointer;
}

.bb-inline-editing {
    cursor: text;
    outline: 0;
    outline-offset: 0;
}

.bb-v2-editor-root [data-bb-inline-edit][data-bb-field-key="label"]:empty::before,
.bb-v2-editor-root [data-bb-inline-edit][data-bb-field-key="description"]:empty::before {
    color: currentColor;
    content: attr(data-bb-placeholder);
    opacity: 0.42;
}

.bb-v2-editor-root [data-bb-inline-edit][data-bb-field-key="label"]:empty,
.bb-v2-editor-root [data-bb-inline-edit][data-bb-field-key="description"]:empty {
    display: block;
    min-height: 1.2em;
}

.bb-text-mark {
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.bb-text-mark--editable {
    cursor: pointer;
    position: relative;
}

.bb-text-addon-popover {
    background: #ffffff;
    border: 1px solid #ff2f57;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    color: #ff2f57;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    min-height: 30px;
    padding: 6px 10px;
    position: absolute;
    z-index: 1045;
}

#form-container.builder-side-panel .bb-text-addon-form textarea[readonly] {
    background: #f8f9fb;
    min-height: 68px;
    resize: none;
}

#form-container.builder-side-panel .bb-v2-structural-v1-form-panel {
    color: #404040;
    font-family: Rubik, sans-serif;
    font-size: 17.6px;
    line-height: 1.3;
}

#form-container.builder-side-panel .bb-v2-structural-v1-form-panel #edit-form-modal,
#form-container.builder-side-panel .bb-v2-structural-v1-form-panel #edit-form-modal .modal-body,
#form-container.builder-side-panel .bb-v2-structural-v1-form-panel #edit-form-modal form,
#form-container.builder-side-panel .bb-v2-structural-v1-form-panel #edit-form-modal .form-row {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

#form-container.builder-side-panel .bb-v2-structural-v1-form-panel #edit-form-modal .modal-body {
    padding: 1.125rem clamp(1rem, 3vw, 2rem) 6rem !important;
}

#form-container.builder-side-panel .bb-v2-structural-v1-form-panel #edit-form-modal .form-row > .w-100,
#form-container.builder-side-panel .bb-v2-structural-v1-form-panel #edit-form-modal .form-row > .flex-1,
#form-container.builder-side-panel .bb-v2-structural-v1-form-panel #edit-form-modal .form-row > .form-group,
#form-container.builder-side-panel .bb-v2-structural-v1-form-panel #edit-form-modal .form-row > .d-flex {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

#form-container.builder-side-panel .bb-v2-structural-v1-form-panel #edit-form-modal label:not(.form-control) {
    color: #32383e;
    line-height: 19px !important;
}

#form-container.builder-side-panel .bb-v2-structural-v1-form-panel #edit-form-modal .wtm-open-form-design {
    /* The "Form design" link opens the form editor. The Studio panel colors it
       (08-studio-panel.css:683); the non-Studio panel only set line-height, so
       the link inherited an invisible color and the owner could not find it.
       Give it the same visible treatment here. */
    color: var(--bbs-primary, #DB3A57) !important;
    font-size: 12.5px !important;
    font-weight: 600;
    line-height: 18.2px;
    text-decoration: none;
}

#form-container.builder-side-panel .bb-v2-structural-v1-form-panel #edit-form-modal .wtm-open-form-design:hover {
    text-decoration: underline;
}

#form-container.builder-side-panel .bb-v2-structural-v1-form-panel #edit-form-modal .save-form-btn {
    align-items: center;
    background-color: #D84560 !important;
    border-color: #B03C51 !important;
    color: #ffffff !important;
    display: flex;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    height: 44px;
    justify-content: center;
}

#form-container.builder-side-panel .bb-v2-structural-v1-form-panel #edit-form-modal .bb-standard-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff url("/images/dropdown-arrow-black.png") no-repeat right 10px center !important;
    background-size: 18px 18px !important;
    border: 1px solid #D2D5DA !important;
    border-radius: 0.25rem !important;
    color: #000000 !important;
    font-family: inherit;
    font-size: 0.875rem !important;
    line-height: 1.2rem;
    min-height: 2.5rem !important;
    overflow: hidden;
    padding: 0.375rem 1.4rem 0.375rem 0.75rem !important;
    text-overflow: ellipsis;
}

#form-container.builder-side-panel .bb-v2-structural-v1-header-panel,
#form-container.builder-side-panel .bb-v2-structural-v1-background-panel {
    color: #404040;
    font-family: Rubik, sans-serif;
    font-size: 16px;
    line-height: 1.3;
}

#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .modal,
#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .modal-body,
#form-container.builder-side-panel .bb-v2-structural-v1-header-panel form,
#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .form-row,
#form-container.builder-side-panel .bb-v2-structural-v1-background-panel .modal,
#form-container.builder-side-panel .bb-v2-structural-v1-background-panel .modal-body,
#form-container.builder-side-panel .bb-v2-structural-v1-background-panel form,
#form-container.builder-side-panel .bb-v2-structural-v1-background-panel .form-row {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .content-tab > .form-row.align-items-end > .w-100,
#form-container.builder-side-panel .bb-v2-structural-v1-background-panel .content-tab > .form-row.align-items-end > .w-100 {
    transform: none;
}

#form-container.builder-side-panel .bb-v2-structural-v1-header-panel label:not(.form-control),
#form-container.builder-side-panel .bb-v2-structural-v1-background-panel label:not(.form-control) {
    color: #32383e;
    line-height: 19px !important;
}

#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .help-text {
    font-weight: 400;
    line-height: 1.35;
    margin-left: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .phone-number-block,
#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .background-block {
    border-top: 1px solid #d2d5da;
    margin-top: 16px;
    padding-top: 16px;
}

#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .phone-number-block {
    border-bottom: 1px solid #d2d5da;
    margin-bottom: 16px;
    padding-bottom: 16px;
}

#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .content-tab > .d-flex:first-child {
    white-space: nowrap;
}

#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .content-tab > .form-row.align-items-end {
    transform: translateY(2.1px);
}

#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .nav-category-card > .mt-2 {
    margin-top: 20px !important;
}

#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .nav-category-manager > .d-flex:first-of-type > div:last-child {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 8px !important;
}

#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .nav-category-manager .add-nav-item-btn,
#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .nav-category-manager .add-nav-category-btn {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    min-width: 0;
    padding-left: 18px;
    padding-right: 18px;
    width: auto !important;
}

#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .nav-category-card-header,
#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .nav-item-row-header {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .nav-category-card:not(:has(.nav-item-row)) > .mt-2 {
    margin-top: 12px !important;
}

#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .nav-category-card:has(.nav-item-row + .nav-item-row + .nav-item-row) > .mt-2 {
    margin-top: 24px !important;
}

#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .button-container {
    margin-bottom: 16px;
}

#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .form-row:has(#phone_number_type) {
    padding-bottom: 10px;
    transform: translateY(4.1px);
}

#form-container.builder-side-panel .bb-v2-structural-v1-header-panel.bb-v2-header-login-visible .edit-block-btn {
    transform: translateY(-5px);
}

#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .edit-block-btn,
#form-container.builder-side-panel .bb-v2-structural-v1-background-panel .edit-background-image-btn {
    align-items: center;
    background-color: #D84560 !important;
    border-color: #B03C51 !important;
    color: #ffffff !important;
    display: flex;
    font-family: Rubik, sans-serif;
    font-weight: 400;
    height: 44px;
    justify-content: center;
}

#form-container.builder-side-panel .bb-v2-structural-v1-background-panel .bb-range,
#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .bb-range {
    align-items: initial;
    display: block;
    min-width: 0;
    max-width: none;
    padding-top: 1.75rem;
    position: relative;
    width: 100%;
}

#form-container.builder-side-panel .bb-v2-structural-v1-background-panel .form-row > .w-50 {
    flex: 1 1 100%;
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

#form-container.builder-side-panel .bb-v2-structural-v1-background-panel .bb-range .range-input,
#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .bb-range .range-input {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: transparent !important;
    background-image: linear-gradient(#DB3A57, #DB3A57) !important;
    background-repeat: no-repeat;
    background-size: 0 100%;
    border: 0 !important;
    border-radius: 3px;
    height: 4px !important;
    margin: 0;
    min-height: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

#form-container.builder-side-panel .bb-v2-structural-v1-background-panel .bb-range .range-input::-webkit-slider-thumb,
#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .bb-range .range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: #ffffff;
    border: 1px solid #C1C9D2;
    border-radius: 50%;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    height: 1rem;
    width: 1rem;
}

#form-container.builder-side-panel .bb-v2-structural-v1-background-panel .bb-range .output,
#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .bb-range .output {
    background: transparent;
    border-radius: 0;
    color: inherit;
    display: flex;
    font-size: inherit;
    justify-content: center;
    padding: 0;
    position: absolute;
    top: 0;
    width: 1rem;
}

#form-container.builder-side-panel .bb-v2-structural-v1-background-panel .bb-range .output-text,
#form-container.builder-side-panel .bb-v2-structural-v1-header-panel .bb-range .output-text {
    background-color: #DB3A57;
    color: #ffffff;
    font-size: 10px;
    left: 50%;
    padding: 0.2rem 0.3rem;
    position: absolute;
    top: 0;
    transform: translate(-50%);
}

.bb-v2-structural-nav__links > a,
.bb-v2-structural-nav-category__toggle {
    font-size: 13.7px !important;
}

.bb-v2-structural-phone span {
    font-size: 13.76px !important;
}

#form-container.builder-side-panel .bb-text-addon-checks {
    align-items: center;
    display: flex;
    gap: 18px;
}

#form-container.builder-side-panel .bb-text-addon-checks label {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    margin-bottom: 0;
}

#form-container.builder-side-panel .bb-text-addon-checks input[type="checkbox"] {
    min-height: 0;
    width: auto;
}

#form-container.builder-side-panel .bb-text-addon-existing {
    border-bottom: 1px solid #d2d5da;
    padding-bottom: 14px;
}

#form-container.builder-side-panel .bb-text-addon-empty {
    color: #7d8390;
    font-size: 13px;
    line-height: 1.35;
}

#form-container.builder-side-panel .bb-text-addon-mark-row {
    align-items: flex-start;
    border: 1px solid #d2d5da;
    border-radius: 4px;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    margin-bottom: 10px;
    padding: 10px;
}

#form-container.builder-side-panel .bb-text-addon-mark-main {
    display: grid;
    gap: 6px;
    min-width: 0;
}

#form-container.builder-side-panel .bb-text-addon-mark-main small {
    color: #727784;
    font-size: 12px;
    line-height: 1.25;
}

#form-container.builder-side-panel .bb-text-addon-mark-sample {
    display: inline-block;
    line-height: 1.2;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 2px 4px;
    width: fit-content;
}

#form-container.builder-side-panel .bb-text-addon-mark-actions {
    display: flex;
    gap: 8px;
}

#form-container.builder-side-panel .bb-text-addon-mark-actions .btn {
    min-height: 32px;
    padding: 5px 9px;
}

.image-preview-container.section {
    align-items: center;
    border: 1px solid #d2d5da;
    display: flex;
    flex: 0 0 144px;
    height: 144px;
    justify-content: center;
    margin-right: 16px;
    width: 144px;
}

.image-preview-container.section img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

#form-container.builder-side-panel .component_font_weight option[value="100"] { font-weight: 100; }
#form-container.builder-side-panel .component_font_weight option[value="200"] { font-weight: 200; }
#form-container.builder-side-panel .component_font_weight option[value="300"] { font-weight: 300; }
#form-container.builder-side-panel .component_font_weight option[value="400"] { font-weight: 400; }
#form-container.builder-side-panel .component_font_weight option[value="500"] { font-weight: 500; }
#form-container.builder-side-panel .component_font_weight option[value="600"] { font-weight: 600; }
#form-container.builder-side-panel .component_font_weight option[value="700"] { font-weight: 700; }
#form-container.builder-side-panel .component_font_weight option[value="800"] { font-weight: 800; }
#form-container.builder-side-panel .component_font_weight option[value="900"] { font-weight: 900; }

.bb-text-align-control {
    align-items: center;
    background: #f5f6f7;
    border: 1px solid #d2d5da;
    border-radius: 8px;
    display: flex;
    padding: 3px;
}

.bb-text-align-control button {
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    display: inline-flex;
    font-size: 0;
    height: 28px;
    justify-content: center;
    line-height: 1;
    align-items: center;
    width: 38px;
}

.bb-text-align-control button.active {
    background: #ffffff;
    box-shadow: 0 0 0 1px #b8bdc7;
}

.bb-align-icon {
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 16px;
    justify-content: center;
    width: 16px;
}

.bb-align-icon span {
    background: #000000;
    border-radius: 2px;
    display: block;
    height: 2px;
    width: 14px;
}

.bb-align-icon--left {
    align-items: flex-start;
}

.bb-align-icon--center {
    align-items: center;
}

.bb-align-icon--right {
    align-items: flex-end;
}

.bb-align-icon--left span:nth-child(2),
.bb-align-icon--center span:nth-child(2),
.bb-align-icon--right span:nth-child(2) {
    width: 12px;
}

.layout-select-btn {
    cursor: pointer;
}

.layout-select-btn input {
    appearance: none;
    height: 0;
    position: absolute;
    visibility: hidden;
    width: 0;
    z-index: -1;
}

.layout-select-box-cont {
    background-color: #f2f2f2;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
    display: flex;
    padding: 6px;
}

.layout-select-btn input:checked ~ .layout-select-box-cont {
    border-color: #db3a57;
}

.layout-select-box {
    background-color: #cccccc;
    border-radius: 4px;
    height: 40px;
    width: 40px;
}

.layout-select-box + .layout-select-box {
    margin-left: 6px;
}

#form-container.builder-side-panel .block-settings-container .block-bg-body {
    min-height: 159px;
    padding-top: 4px;
}

#form-container.builder-side-panel .block-settings-container .block-bg-body > .w-100 > .mb-10 {
    transform: translateY(-3px);
}

#form-container.builder-side-panel .block-settings-container .block-shadow-row {
    min-height: 211.8px;
    padding-top: 4px;
}

#form-container.builder-side-panel .block-settings-container .block-shadow-row > .contnent-part-name,
#form-container.builder-side-panel .block-settings-container .block-borders-row > .contnent-part-name {
    transform: translateY(-4px);
}

#form-container.builder-side-panel .block-settings-container .block-shadow-row > div:last-child,
#form-container.builder-side-panel .block-settings-container .block-borders-row > .d-flex:last-child {
    transform: translateY(4.5px);
}

#form-container.builder-side-panel .block-settings-container .block-borders-row {
    border-bottom: 0 !important;
    min-height: 219.8px;
    padding-top: 4px;
}

#form-container.builder-side-panel .block-settings-container .builder-side-panel-action-row {
    height: 73px;
}

.builder-side-panel-action-row {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), #ffffff 12px);
    border-top: 1px solid #d2d5da;
    bottom: 0;
    margin: 16px 0 0;
    padding: 12px 0 16px;
    position: sticky;
    z-index: 5;
}

.builder-side-panel-action-row button,
.bb-sticky-actions button,
.bb-standard-btn {
    align-items: center;
    background: #db3a57 !important;
    border: 1px solid #db3a57 !important;
    border-radius: 4px;
    color: #ffffff !important;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 800;
    height: 44px;
    justify-content: center;
    width: 100% !important;
}

#form-container.builder-side-panel:not(.is-expanded) .bb-v2-structural-v1-background-panel .builder-side-panel-action-row .upload-image-btn,
#form-container.builder-side-panel .bb-v2-structural-v1-background-panel .builder-side-panel-action-row .regenerate-ai-background-image-btn {
    background: #ffffff !important;
    border-color: #db3a57 !important;
    color: #db3a57 !important;
    font-weight: 400;
}

.bb-sticky-actions {
    background: #ffffff;
    border-top: 1px solid #d2d5da;
    bottom: 0;
    padding: 16px 0;
    position: sticky;
    z-index: 5;
}

.component-settings-container.is-saving .file-label,
.block-settings-container.is-saving .file-label {
    opacity: 0.75;
    pointer-events: none;
}

.builder-side-panel-action-row button:disabled,
.bb-sticky-actions button:disabled,
.bb-standard-btn:disabled {
    cursor: default;
    opacity: 0.9;
}

#wtm-form-design-modal .modal-footer .bb-standard-btn {
    flex: 0 0 110px;
    height: 36px;
    line-height: 33.6px;
    min-width: 110px;
    padding: 0 14.4px;
    width: 110px !important;
}

.bb-save-loader {
    height: 16px;
    margin-right: 8px;
    width: 16px;
}

.bb-v2-editor-root [data-bb-inline-edit]:hover {
    background: transparent;
}

/* Long file names must not blow out the image rows. */
.builder-panel-modal .file-label,
.bb-v2-modal-shell .file-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Layout pickers: compact panel width fits 3 options per row. */
.builder-panel-modal .layout-select-box {
    width: 1.75rem;
}

.builder-panel-modal .layout-select-box.long {
    height: 2.5rem;
}

.builder-panel-modal .layout-select-box.medium {
    height: 1.75rem;
}

.builder-panel-modal .layout-select-box.short {
    height: 1rem;
}

.builder-panel-modal .layout-select-box-cont {
    padding: 0.3rem;
}

/* Image rows: let the file label shrink so the ellipsis can engage. */
.builder-panel-modal .form-row .w-100,
.bb-v2-modal-shell .form-row .w-100 {
    min-width: 0;
}

/* Layout pickers: fixed 3-per-row grid in the compact panel. */
.builder-panel-modal .form-row:has(> .layout-select-btn) {
    display: grid !important;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.builder-panel-modal .layout-select-btn {
    min-width: 0;
    width: 100%;
}

.builder-panel-modal .layout-select-box-cont {
    justify-content: center;
}

.builder-panel-modal .layout-select-box {
    width: 1.25rem;
}

.builder-panel-modal .layout-select-box + .layout-select-box {
    margin-left: 0.25rem;
}

/* Drag & drop upload zone (V1 Upload Documents dropzone replica). */
.bb-v2-dropzone {
    background: #ffffff;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    cursor: pointer;
    padding: 28px 12px;
    text-align: center;
}

.bb-v2-dropzone.is-dragover {
    background: #fdf1f4;
    border-color: #db3a57;
}

.bb-v2-dropzone .dz-button {
    background: none;
    border: 0;
    color: #4a4f57;
    cursor: pointer;
    display: block;
    font-size: 14px;
    margin: 8px auto 0;
    padding: 0;
}

.bb-v2-dropzone .font-weight-bold {
    color: #2f3237;
    font-size: 13px;
}

/* Template image library inside side panels (exact V1 dropzone-modal rules). */
.builder-side-panel .bb-template-image-library-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: 220px;
    overflow-y: auto;
}

.builder-side-panel .bb-template-image-library-item {
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
}

.builder-side-panel .bb-template-image-library-item img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.builder-side-panel .bb-template-image-library-item:hover,
.builder-side-panel .bb-template-image-library-item:focus {
    border-color: #db3a57;
    box-shadow: 0 0 0 1px #db3a57;
}

.builder-side-panel .bb-template-image-library-preview-image-wrap {
    align-items: center;
    background: #f8f8f8;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    max-height: 280px;
    overflow: hidden;
}

.builder-side-panel .bb-template-image-library-preview-image-wrap img {
    display: block;
    max-height: 280px;
    max-width: 100%;
    object-fit: contain;
}

/* Footer "Links to Pages" panel: each link editor is separated by a rule and
   the delete control looks like a real button instead of a bare "x". */
.builder-side-panel .link-row {
    border-bottom: 1px solid #e3e3e3;
    padding-bottom: 1.25rem;
}

.builder-side-panel .link-row > .form-row:first-child {
    align-items: center;
    font-weight: 600;
}

.builder-side-panel .link-row .delete-row {
    align-items: center;
    border: 1px solid #e3e3e3;
    border-radius: 50%;
    color: #db3a57;
    display: inline-flex;
    font-size: 14px;
    height: 22px;
    justify-content: center;
    line-height: 1;
    width: 22px;
}

.builder-side-panel .link-row .delete-row:hover {
    background: #db3a57;
    border-color: #db3a57;
    color: #ffffff;
}

/* Locked (BizBaby Connected) inputs must LOOK disabled, like V1. */
.builder-side-panel input:disabled,
.builder-side-panel select:disabled,
.builder-side-panel textarea:disabled {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed;
    opacity: 1;
}

/* Navigation manager: per-row reorder controls next to the delete button. */
.builder-side-panel .nav-row-actions {
    align-items: center;
    display: inline-flex;
    gap: 4px;
}

.builder-side-panel .nav-move-btn {
    align-items: center;
    background: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    color: #db3a57;
    cursor: pointer;
    display: inline-flex;
    font-size: 9px;
    height: 22px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 22px;
}

.builder-side-panel .nav-move-btn:hover {
    background: #db3a57;
    border-color: #db3a57;
    color: #ffffff;
}


/* Panel tabs are plain stacked containers. Something (V1 CSS/loader) can
   leave them flex-row, which shreds the gallery Images tab layout — force
   block; inner .form-row elements do their own flexing. */
.builder-side-panel .settings-tab {
    display: block !important;
}

.builder-side-panel .settings-tab.d-none {
    display: none !important;
}

/* Confirmation side panel: match V1's look - bordered Close, filled Accept. */
#form-container.builder-side-panel .bb-confirm-close {
    border: 1px solid #db3a57;
    color: #db3a57;
}

#form-container.builder-side-panel .bb-confirm-close:hover {
    background: #fdf2f4;
}

/* Owner: layout icons + alignment buttons must be compact enough to share
   one line (keep the V1 look, just smaller). */
#form-container.builder-side-panel .bb-layout-select-row {
    column-gap: 8px;
    flex-wrap: nowrap;
}

#form-container.builder-side-panel .bb-layout-select-row .layout-select-btn {
    min-width: 0;
}

#form-container.builder-side-panel .bb-layout-select-row .layout-select-box-cont {
    padding: 6px 4px;
}

#form-container.builder-side-panel .bb-layout-select-row .layout-select-box-cont img {
    max-height: 34px;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

/* Section-level eye off: grey out everything the eye controls, keeping the
   heading + eye itself usable. */
#form-container.builder-side-panel .bb-hidden-section-dim > *:not(.contnent-part-name) {
    opacity: 0.45;
}

/* The shadow section spaces its rows with the flex gap alone - stray
   utility margins created uneven bands (owner report). */
#form-container.builder-side-panel .block-shadow-row > div {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

@keyframes bb-v2-panel-focus-pulse {
    0%, 100% { box-shadow: none; }
    35% { box-shadow: 0 0 0 3px rgba(219, 58, 87, .16); }
}

.builder-side-panel .bb-v2-panel-focus-target {
    animation: bb-v2-panel-focus-pulse 1.2s ease-out;
    border-radius: 6px;
}

/* The standalone builder does not load bb-components.css. Keep its shared
   side panel on the canonical .bb-switch contract without importing the
   dashboard component bundle into the website canvas. */

#form-container.builder-side-panel .bb-switch {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    position: relative;
    user-select: none;
    vertical-align: middle;
}

.builder-side-panel .bb-switch input {
    height: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    width: 0;
}

.builder-side-panel .bb-switch__track {
    background: var(--bb-border-strong, #c8c8c8);
    border-radius: 34px;
    display: block;
    flex: none;
    height: 22px;
    position: relative;
    transition: background .2s;
    width: 40px;
}

.builder-side-panel .bb-switch__track::before {
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    content: "";
    height: 16px;
    left: 3px;
    position: absolute;
    top: 3px;
    transition: transform .2s;
    width: 16px;
}

.builder-side-panel .bb-switch input:checked + .bb-switch__track { background: var(--bb-primary, #db3a57); }
.builder-side-panel .bb-switch input:checked + .bb-switch__track::before { transform: translateX(18px); }
.builder-side-panel .bb-switch input:focus-visible + .bb-switch__track { box-shadow: 0 0 0 3px var(--bb-primary-soft, rgba(219, 58, 87, .18)); }