.ubd {
    width: 100%;
    color: var(--element-text);
}

/* The slot participates in grid/Swiper layout; its child is a design plane. */
.ubd-scene.ubd-scene--design-plane {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--ubd-plane-width) !important;
    height: var(--ubd-plane-height) !important;
    transform-origin: top left;
    transform: scale(var(--ubd-plane-scale));
}
.ubd-layer {
    --ubd-content-scale: var(--ubd-d-content-scale, 1);
    --ubd-active-button-font-size: var(--ubd-d-button-font-size, 16px);
}
.ubd-layer__text { zoom: var(--ubd-content-scale, 1); }
.ubd-scene--design-plane .ubd-layer__text-placeholder {
    min-height: var(--ubd-editor-min-height, 44px);
}
.ubd-scene--design-plane .ubd-layer__text {
    --ubd-text-unit: var(--ubd-d-text-plane-unit, 1px);
    padding: var(--ubd-active-text-padding, var(--ubd-d-text-padding, 0));
}
.ubd-scene--design-plane .ubd-scene__video-toggle {
    width: clamp(54px, 6cqi, 72px);
    height: clamp(54px, 6cqi, 72px);
    font-size: clamp(20px, 2.2cqi, 28px);
}
.ubd-scene--design-plane .ubd-scene__skeleton { gap: clamp(8px, 1.4cqi, 16px); }
.ubd-scene--design-plane .ubd-scene__skeleton-title { height: clamp(18px, 3cqi, 34px); }
.ubd-scene--design-plane .ubd-scene__skeleton-text { height: clamp(10px, 1.5cqi, 16px); }
.ubd-scene--design-plane .ubd-scene__skeleton-button { height: clamp(32px, 4cqi, 46px); }
@media (min-width: 768px) and (max-width: 991.98px) {
    .ubd-scene--design-plane .ubd-layer__text { --ubd-text-unit: var(--ubd-t-text-plane-unit, var(--ubd-d-text-plane-unit, 1px)); }
    .ubd-layer { --ubd-content-scale: var(--ubd-t-content-scale, var(--ubd-d-content-scale, 1)); }
    .ubd-layer { --ubd-active-button-font-size: var(--ubd-t-button-font-size, var(--ubd-d-button-font-size, 16px)); }
    .ubd-scene--design-plane { --ubd-active-text-padding: var(--ubd-t-text-padding, var(--ubd-d-text-padding, 0)); }
}
@media (max-width: 767.98px) {
    .ubd-scene--design-plane .ubd-layer__text { --ubd-text-unit: var(--ubd-m-text-plane-unit, var(--ubd-d-text-plane-unit, 1px)); }
    .ubd-layer { --ubd-content-scale: var(--ubd-m-content-scale, var(--ubd-d-content-scale, 1)); }
    .ubd-layer { --ubd-active-button-font-size: var(--ubd-m-button-font-size, var(--ubd-d-button-font-size, 16px)); }
    .ubd-scene--design-plane { --ubd-active-text-padding: var(--ubd-m-text-padding, var(--ubd-d-text-padding, 0)); }
}

/* Keep banners visible when compiled views still emit the legacy el-hidden class. */
.ubd[data-ubd-root].el-hidden {
    display: block;
}

.ubd__container {
    width: 100%;
    margin-inline: auto;
}

.ubd--full > .ubd__container {
    box-sizing: border-box;
    max-width: none;
    padding-inline: var(--ubd-side-spacing, 0px);
}

.ubd-scene__hover-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}
.ubd-scene[data-ubd-hover-overlay="true"].is-banner-active > .ubd-scene__hover-overlay {
    opacity: var(--ubd-hover-opacity, .4);
}
.ubd-layer[data-ubd-button-visibility="hover"] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}
.ubd-layer[data-ubd-button-visibility="hover"] > * { pointer-events: none; }
.ubd-scene.is-banner-active .ubd-layer[data-ubd-button-visibility="hover"],
.preview-mode-edit .ubd-layer[data-ubd-button-visibility="hover"] {
    opacity: 1;
    pointer-events: auto;
}
.ubd-scene.is-banner-active .ubd-layer[data-ubd-button-visibility="hover"] > *,
.preview-mode-edit .ubd-layer[data-ubd-button-visibility="hover"] > * { pointer-events: auto; }
.preview-mode-edit .ubd-scene > .ubd-scene__hover-overlay { opacity: 0 !important; }
@media (hover: none), (pointer: coarse) {
    .ubd-scene[data-ubd-mobile-tap="false"][data-ubd-hover-overlay="true"] > .ubd-scene__hover-overlay {
        opacity: var(--ubd-hover-opacity, .4);
    }
    .ubd-scene[data-ubd-mobile-tap="false"] .ubd-layer[data-ubd-button-visibility="hover"],
    .ubd-scene[data-ubd-mobile-tap="false"] .ubd-layer[data-ubd-button-visibility="hover"] > * {
        opacity: 1;
        pointer-events: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ubd-scene__hover-overlay,
    .ubd-layer[data-ubd-button-visibility="hover"] { transition: none; }
}

.ubd--contained .ubd__container {
    box-sizing: border-box;
    max-width: var(--ubd-max-width, 1440px);
    padding-inline: 12px;
}

.ubd__grid {
    --ubd-columns: var(--ubd-columns-d, 1);
    --ubd-rows: var(--ubd-rows-d, 1);
    --ubd-gap: var(--ubd-gap-d, 12px);
    display: grid;
    grid-template-columns: repeat(var(--ubd-columns, 1), minmax(0, 1fr));
    grid-template-rows: repeat(var(--ubd-rows, 1), minmax(0, auto));
    gap: var(--ubd-gap, 12px);
    width: 100%;
    /* Grid line 1 is the right-most column in the RTL designer. */
    direction: rtl;
}

.ubd-region { position: relative; /* Stretch each region to fill its allocated grid tracks. */ width: 100%; align-self: stretch; min-width: 0; min-height: 0; grid-column: var(--ubd-column-d, auto); grid-row: var(--ubd-row-d, auto); aspect-ratio: var(--ubd-ratio-d, 1 / 1); overflow: hidden; border-radius: var(--ubd-radius, 16px); /* Clip scene media without painting over its configured background. */ background: transparent; color: var(--element-text, #151515); isolation: isolate; }

/* Preserve the saved grid while editing. */
.preview-mode-edit .ubd-region { outline: 1px dashed #64748b; outline-offset: -1px; }
.ubd-region-edit {
    display: none;
}
.preview-mode-edit .ubd-region-edit {
    display: flex; align-items: center; gap: 8px; position: absolute;
    top: 8px; right: 8px; z-index: 60; max-width: calc(100% - 16px);
    padding: 6px 10px; border: 1px solid #93b4ff; border-radius: 8px;
    background: #f0f5ff; color: #174ea6; cursor: pointer; font: inherit;
}
.ubd-region-edit span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-mode-edit.ubd-editor-single-scene .ubd-editor-active-region [data-ubd-scene]:not(.ubd-editor-active-scene) {
    display: none !important;
}
.preview-mode-edit.ubd-editor-single-scene .ubd-editor-active-region { outline: 2px solid #3b82f6; outline-offset: -2px; }
.preview-mode-edit.ubd-editor-single-scene .ubd-slider > .swiper-button-next,
.preview-mode-edit.ubd-editor-single-scene .ubd-slider > .swiper-button-prev,
.preview-mode-edit.ubd-editor-single-scene .ubd-slider > .swiper-pagination {
    display: none !important;
}

.ubd-region > .ubd-scene,
.ubd-region > .ubd-slider,
.ubd-slider,
.ubd-slider > .swiper-wrapper,
.ubd-slider > .swiper-wrapper > .swiper-slide {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.ubd-region__empty,
.ubd-scene__empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 0;
    color: color-mix(in srgb, var(--element-text, #151515) 55%, transparent);
    background: color-mix(in srgb, var(--element-bg, #f3f4f6) 92%, #fff);
}

.ubd-scene {
    position: relative;
    container-type: inline-size;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--element-bg, #f3f4f6);
}

.ubd-scene.is-video-clickable {
    cursor: pointer;
}

.ubd-scene.is-layer-drop-target::after {
    content: "اینجا رها کنید";
    position: absolute;
    inset: 10px;
    z-index: 80;
    display: grid;
    place-items: center;
    border: 2px dashed #0d6efd;
    border-radius: calc(var(--ubd-radius, 16px) - 4px);
    color: #0d6efd;
    font-weight: 700;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(3px);
    pointer-events: none;
}

.ubd-scene__placeholder {
    position: absolute;
    inset: 0;
    z-index: 20;
    overflow: hidden;
    pointer-events: none;
    background: color-mix(in srgb, var(--element-bg, #eceff3) 88%, #fff);
    opacity: 1;
    transition: opacity 220ms ease, visibility 220ms ease;
}

.ubd-scene__shimmer {
    position: absolute;
    inset: 0;
    display: block;
    transform: translateX(-110%);
    background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .55) 48%, transparent 72%);
    animation: ubd-shimmer 1.35s infinite;
}

.ubd-scene__skeleton {
    position: absolute;
    top: 14%;
    right: 8%;
    left: 8%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(8px, 1.4vw, 16px);
    opacity: .58;
}

.ubd-scene__skeleton-title,
.ubd-scene__skeleton-text,
.ubd-scene__skeleton-button {
    display: block;
    border-radius: 999px;
    background: color-mix(in srgb, var(--element-text, #64748b) 17%, transparent);
}
.ubd-scene__skeleton-title { width: min(54%, 420px); height: clamp(18px, 3vw, 34px); }
.ubd-scene__skeleton-text { width: min(38%, 320px); height: clamp(10px, 1.5vw, 16px); }
.ubd-scene__skeleton-button { width: clamp(72px, 15%, 150px); height: clamp(32px, 4vw, 46px); margin-top: 4%; border-radius: 12px; }

.ubd[data-ubd-loading="solid"] .ubd-scene__shimmer {
    display: none;
}
.ubd[data-ubd-loading="solid"] .ubd-scene__placeholder {
    background: var(--element-bg, #eceff3);
}
.ubd[data-ubd-loading="shimmer"] .ubd-scene__placeholder {
    background: color-mix(in srgb, var(--element-bg, #eceff3) 88%, #fff);
}
.ubd[data-ubd-loading="blur-shimmer"] .ubd-scene__placeholder {
    background: color-mix(in srgb, var(--element-bg, #eceff3) 35%, transparent);
    backdrop-filter: blur(5px);
}
.ubd[data-ubd-loading="blur-shimmer"] .ubd-scene:not(.is-media-ready):not(.is-media-error) .ubd-scene__media-asset {
    filter: blur(14px) saturate(.8);
    opacity: .72;
}
.ubd[data-ubd-loading="blur-shimmer"] .ubd-scene.is-media-ready .ubd-scene__media-asset {
    filter: none;
    opacity: 1;
}

.ubd-scene.is-media-ready .ubd-scene__placeholder {
    visibility: hidden;
    opacity: 0;
}

.ubd-scene.is-media-error .ubd-scene__placeholder { /* A failed/slow image must not keep a skeleton over editable content. */ visibility: hidden; opacity: 0; }

.ubd[data-ubd-loading="blur-shimmer"] .ubd-scene.is-media-error .ubd-scene__media-asset {
    filter: none;
    opacity: 1;
}

.preview-mode-edit .ubd-scene__placeholder {
    display: none;
}

.preview-mode-edit .ubd[data-ubd-loading="blur-shimmer"] .ubd-scene:not(.is-media-ready):not(.is-media-error) .ubd-scene__media-asset {
    filter: none;
    opacity: 1;
}

.ubd-scene.is-media-error .ubd-scene__shimmer {
    animation: none;
    opacity: .2;
}

.ubd-scene > .ubd-scene__media,
.ubd-scene__layers {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ubd-scene > .ubd-scene__media { /* Override the shared media-frame geometry for banner scenes. */ position: absolute; inset: 0; inline-size: 100%; block-size: 100%; aspect-ratio: auto; z-index: 1; overflow: hidden; background: var(--element-bg, #f3f4f6); }

.ubd-scene--has-hotspots {
    --ubd-hotspot-spread-level: 4;
    --ubd-hotspot-glow-blur: 18px;
    --ubd-hotspot-glow-spread: 5px;
    --ubd-hotspot-pulse-scale: 2.35;
}

.ubd-scene--has-hotspots:has(.ubd-layer--hotspot-hover-focus) > .ubd-scene__layers::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Above content and inactive hotspots; the active hotspot alone uses 102. */
    z-index: 101;
    /* A translucent overlay keeps the active point clear without re-rasterizing
       the entire banner image on every hover frame. */
    background: rgba(10, 15, 24, .48);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.ubd-scene[data-media-background="transparent"],
.ubd-scene[data-media-background="transparent"] .ubd-scene__media {
    background: transparent;
}

.ubd-scene__media-backdrop {
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    object-fit: cover;
    filter: blur(24px) saturate(.85);
    opacity: .58;
    transform: scale(1.04);
    display: var(--ubd-d-media-backdrop-display, none);
}
.ubd-scene__media, .ubd-floating-image__frame { background: var(--ubd-d-media-bg, transparent); }

.ubd-scene__media-crop {
    position: absolute !important;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

/* Override positioning hints added by live-edit overlays. */
.ubd-scene__media-crop > .live-empty-placeholder {
    display: none !important;
}

.ubd-scene__media-crop > picture {
    display: contents;
}

.ubd-scene__media-asset {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--ubd-d-media-fit, cover);
    object-position: var(--ubd-focus-x-d, 50%) var(--ubd-focus-y-d, 50%);
    transform: scale(var(--ubd-zoom-d, 1));
    transform-origin: var(--ubd-focus-x-d, 50%) var(--ubd-focus-y-d, 50%);
    transition: opacity 220ms ease, filter 220ms ease;
    z-index: 1;
}

.ubd-scene__media-crop.is-cropped .ubd-scene__media-asset {
    max-width: none;
    max-height: none;
    object-fit: fill;
    object-position: center;
    transform: none;
    transform-origin: center;
}

.ubd-scene__video-toggle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    align-items: center;
    justify-content: center;
    width: clamp(54px, 6vw, 72px);
    height: clamp(54px, 6vw, 72px);
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    color: #fff;
    font-size: clamp(20px, 2.2vw, 28px);
    background: rgba(0, 0, 0, .56);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .34);
    cursor: pointer;
    transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.ubd-scene.has-cropped-video .ubd-scene__video-toggle:not([hidden]),
.ubd-scene__video-toggle[data-videofile]:not([hidden]) {
    display: inline-flex;
}

.ubd-scene__video-toggle[data-videofile]:hover,
.ubd-scene__video-toggle[data-videofile]:focus-visible {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(0, 0, 0, .72);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .44);
}

.ubd-scene__layers {
    z-index: 3;
    pointer-events: none;
}
.preview-mode-edit .ubd-layout-assist { position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden; }
.preview-mode-edit .ubd-layout-assist__grid { position:absolute; inset:0; opacity:.62; }
.preview-mode-edit .ubd-layout-assist__grid-line { position:absolute; display:block; box-sizing:border-box; }
.preview-mode-edit .ubd-layout-assist__grid-line--v { top:0; bottom:0; border-left:1px dashed rgba(47,128,237,.48); }
.preview-mode-edit .ubd-layout-assist__grid-line--h { left:0; right:0; border-top:1px dashed rgba(47,128,237,.48); }
.preview-mode-edit .ubd-layout-assist__ghost { position:absolute; box-sizing:border-box; border:2px dashed #a855f7; background:rgba(168,85,247,.08); box-shadow:0 0 0 1px rgba(255,255,255,.8) inset; }
.preview-mode-edit .ubd-layout-guide { position:absolute; z-index:5; background:#f97316; box-shadow:0 0 0 1px rgba(255,255,255,.75); }
.preview-mode-edit .ubd-layout-guide--x { top:0; bottom:0; width:1px; }
.preview-mode-edit .ubd-layout-guide--y { left:0; right:0; height:1px; }
.preview-mode-edit .ubd-layout-guide__label { position:absolute; padding:2px 5px; border-radius:4px; background:#f97316; color:#fff; font:11px/1.3 sans-serif; white-space:nowrap; }
.preview-mode-edit .ubd-layout-guide--x .ubd-layout-guide__label { top:4px; left:4px; }
.preview-mode-edit .ubd-layout-guide--y .ubd-layout-guide__label { top:4px; left:4px; }

.ubd-layer {
    /* Preview's generic [data-live-child-id] rule must not put layers back in flow. */
    position: absolute !important;
    left: var(--ubd-d-left, 50%);
    right: var(--ubd-d-right, auto);
    top: var(--ubd-d-top, 50%);
    bottom: var(--ubd-d-bottom, auto);
    width: var(--ubd-d-width, max-content);
    height: var(--ubd-d-height, auto);
    z-index: var(--ubd-d-z, 2);
    display: var(--ubd-d-display, block);
    max-width: 100%;
    transform: translate(var(--ubd-d-tx, -50%), var(--ubd-d-ty, -50%)) rotate(var(--ubd-d-rotation, 0deg));
    pointer-events: auto;
    border-radius: var(--ubd-d-radius, 0px);
}

.ubd-layer--text-layer,
.ubd-layer--overlay-layer {
    box-sizing: border-box;
    border-style: solid;
    border-color: var(--ubd-d-border-color, transparent);
    border-width: var(--ubd-d-border-width, 0);
}

.ubd-layer__text { position: relative; display: flex; flex-direction: column; justify-content: var(--ubd-d-text-vertical-align, flex-start); width: 100%; height: 100%; min-width: 0; min-height: 0; overflow-wrap: anywhere; box-sizing: border-box; padding: var(--ubd-d-text-padding, 0); border-radius: inherit; background: var(--ubd-d-text-box-bg, transparent); color: var(--ubd-d-text-color, var(--bs-body-color, #212529)); font-family: var(--ubd-d-font-family, inherit); font-size: var(--ubd-d-font-size, inherit); font-weight: var(--ubd-d-font-weight, inherit); line-height: var(--ubd-d-line-height, normal); text-align: var(--ubd-d-text-align, inherit); direction: var(--ubd-d-text-direction, inherit); }
.ubd-layer__title > :first-child,
.ubd-layer__description > :first-child { margin-block-start: 0; }
.ubd-layer__title > :last-child,
.ubd-layer__description > :last-child { margin-block-end: 0; }
.ubd-layer--text-layer:is([style*="--ubd-d-text-align"],[style*="--ubd-t-text-align"],[style*="--ubd-m-text-align"]) .ubd-layer__text :is(p,h1,h2,h3,h4,h5,h6,div) { text-align: inherit !important; }

.ubd-border-editor { padding: .75rem; border: 1px solid rgba(100, 116, 139, .25); border-radius: .65rem; background: rgba(248, 250, 252, .7); }
.ubd-border-sides { display: flex; flex-wrap: wrap; gap: .45rem; }
.ubd-border-sides label { display: inline-flex; align-items: center; gap: .35rem; min-height: 34px; margin: 0; padding: .35rem .65rem; border: 1px solid rgba(100, 116, 139, .3); border-radius: .5rem; background: #fff; font-size: .78rem; cursor: pointer; }
.ubd-border-sides input { margin: 0; }

/* Banner links cover the full scene at each visible breakpoint. */
.ubd-layer.ubd-layer--banner-link { inset: 0; width: 100%; height: 100%; max-width: none; transform: none; z-index: 100; }

.ubd-layer--banner-link > .ubd-button--banner-link,
.ubd-layer--banner-link > .ubd-button--banner-link:hover { display: block; position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; }

.ubd-layer--banner-link > .ubd-button--banner-link:focus-visible {
    outline: 3px solid var(--element-text, #151515);
    outline-offset: -3px;
}

/* A floating image is an absolutely positioned, pre-sized frame, never layout content. */
/* Decorative images must not intercept public hotspot clicks. */
.ubd-layer--image-layer {
    min-width: 0;
    min-height: 0;
    pointer-events: none;
}
.preview-mode-edit .ubd-layer--image-layer { pointer-events: auto; }
.ubd-layer--overlay-layer {
    min-width: 0;
    min-height: 0;
    pointer-events: none;
}
.ubd-overlay-layer__surface {
    position: absolute;
    inset: 0;
    display: block;
    background: var(--ubd-d-overlay-color, #00000066);
    opacity: var(--ubd-d-overlay-opacity, 1);
    /* The wrapper resolves the active desktop/tablet/mobile radius. Keeping
       the painted surface in sync also makes live radius edits visible. */
    border-radius: inherit;
}
.ubd-layer--shadow-layer {
    container-type: inline-size;
    pointer-events: none;
    --ubd-free-shadow-paint: var(--ubd-d-free-shadow-paint);
    --ubd-free-shadow-opacity: var(--ubd-d-free-shadow-opacity);
    --ubd-free-shadow-blur: var(--ubd-d-free-shadow-blur);
    --ubd-free-shadow-angle: var(--ubd-d-free-shadow-angle);
    --ubd-free-shadow-skew: var(--ubd-d-free-shadow-skew);
    --ubd-free-shadow-blend: var(--ubd-d-free-shadow-blend);
    mix-blend-mode: var(--ubd-free-shadow-blend, normal);
}
.preview-mode-edit .ubd-layer--shadow-layer { pointer-events: auto; }
.ubd-shadow-layer__surface {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
    border-radius: inherit;
    background: var(--ubd-free-shadow-paint);
    opacity: var(--ubd-free-shadow-opacity, .35);
    filter: blur(var(--ubd-free-shadow-blur, 2cqw));
    transform: rotate(var(--ubd-free-shadow-angle, 0deg)) skewX(var(--ubd-free-shadow-skew, 0deg));
}
.ubd-layer--text-layer { box-shadow: var(--ubd-d-shadow, none); }
.preview-mode-edit .ubd-layer--overlay-layer { pointer-events: auto; }
.ubd-floating-image__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.ubd-layer--image-layer[data-media-background="transparent"] .ubd-floating-image__frame {
    background: transparent;
}
.ubd-floating-image__placeholder { position: absolute; inset: 0; z-index: 2; overflow: hidden; background: var(--element-bg, #f3f4f6); pointer-events: none; }
.ubd-layer--image-layer.is-media-ready .ubd-floating-image__placeholder {
    display: none;
}
.ubd-layer--image-layer.is-media-error .ubd-scene__media-asset { visibility: hidden; }
.ubd-layer--image-layer.is-media-error .ubd-scene__shimmer { animation: none; display: none; }
.ubd-layer--image-layer .ubd-scene__visual-tools { z-index: 6; }

.ubd-layer__title :is(h1, h2, h3, h4, h5, h6, p),
.ubd-layer__description :is(h1, h2, h3, h4, h5, h6, p) {
    margin: 0;
}

.ubd-layer__description {
    margin-top: .5rem;
    opacity: .9;
}

.ubd-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 42px;
    padding: .7rem 1.1rem;
    /* Button borders are opt-in. Falling back to the page element border made
       rounded buttons acquire an unrelated dark rim around their curved edge. */
    border: 1px solid var(--ubd-d-button-border, transparent);
    border-radius: 12px;
    background: var(--element-bg, #fff);
    color: var(--element-text, #151515);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

/* The layer rectangle is the button's visual rectangle. Resizing the layer must
   resize the clickable face too, and canvas radius handles must affect it. */
.ubd-layer > .ubd-button {
    box-sizing: border-box;
    /* Responsive variant selectors below have higher specificity. The variant
       controls the contents; the saved layer rectangle owns the button width. */
    width: 100% !important;
    height: 100%;
    border-radius: var(--ubd-d-radius, 12px) !important;
    box-shadow: var(--ubd-d-shadow, none);
}

/* Button layers own an explicit canvas rectangle. Their face must be allowed
   below the generic 42px control size, while its contents follow the saved
   resize scale instead of overflowing the smaller rectangle. */
.ubd-layer--button-layer > .ubd-button {
    --ubd-button-content-scale: var(--ubd-content-scale, 1);
    min-height: 0;
    min-width: 0;
    gap: calc(10px * var(--ubd-button-content-scale));
    padding: calc(6px * var(--ubd-button-content-scale)) calc(14px * var(--ubd-button-content-scale)) !important;
    font-family: inherit;
    font-size: calc(var(--ubd-active-button-font-size, 16px) * var(--ubd-button-content-scale));
    font-weight: 500;
    line-height: 1.2;
}

.ubd-layer--button-layer > .ubd-button > span {
    min-width: 0;
    overflow: hidden;
    font: inherit;
    line-height: inherit;
    text-overflow: ellipsis;
}

.ubd-layer--button-layer > .ubd-button > i {
    flex: 0 0 auto;
    font-size: calc(14px * var(--ubd-button-content-scale));
    line-height: 1;
}

.ubd-button:not(.is-preview-normal):is(:hover, .is-preview-hover) {
    border-color: var(--ubd-d-button-hover-border, var(--ubd-d-button-border, transparent));
    background: var(--element-hover-bg, var(--element-bg));
    color: var(--element-hover-text, var(--element-text));
}

.ubd-button--split-arrow i {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: -.45rem -.65rem -.45rem -.25rem;
    border-radius: 9px;
    background: color-mix(in srgb, var(--element-text) 9%, transparent);
}

/* The public button uses device-specific data attributes, not the preview card's
   variant class. Keep the arrow at the visual end of the saved button rectangle. */
.ubd-layer[data-ubd-button-variant-d="split-arrow"] > .ubd-button {
    --ubd-default-icon-bg: color-mix(in srgb, var(--element-text, #151515) 9%, transparent);
    justify-content: space-between;
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .ubd-layer[data-ubd-button-variant-t] > .ubd-button {
        --ubd-default-icon-bg: transparent;
        justify-content: center;
    }
    .ubd-layer[data-ubd-button-variant-t="split-arrow"] > .ubd-button {
        --ubd-default-icon-bg: color-mix(in srgb, var(--element-text, #151515) 9%, transparent);
        justify-content: space-between;
    }
}
@media (max-width: 767.98px) {
    .ubd-layer[data-ubd-button-variant-m] > .ubd-button {
        --ubd-default-icon-bg: transparent;
        justify-content: center;
    }
    .ubd-layer[data-ubd-button-variant-m="split-arrow"] > .ubd-button {
        --ubd-default-icon-bg: color-mix(in srgb, var(--element-text, #151515) 9%, transparent);
        justify-content: space-between;
    }
}

.ubd-button--arrow-only {
    width: 44px;
    min-width: 44px;
    padding-inline: 0;
}

.ubd-button--outline { --ubd-default-button-bg: transparent; background: transparent; }

.ubd-hotspot {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.ubd-scene-link-overlay {
    position: absolute;
    inset: 0;
    /* The whole-banner link catches empty space below independently ordered layers. */
    z-index: -1;
    display: var(--ubd-d-display, block);
    border-radius: inherit;
    /* The layers plane intentionally ignores empty-space pointer events. A
       banner-wide link is the exception and must explicitly opt back in. */
    pointer-events: auto;
}
.ubd-scene-link-overlay:focus-visible {
    outline: 3px solid var(--element-text, #151515);
    outline-offset: -3px;
}
.preview-mode-edit .ubd-scene-link-overlay { pointer-events: none; }
.ubd-layer--banner-click-visual > .ubd-button { pointer-events: none; }
.preview-mode-edit .ubd-layer--banner-click-visual > .ubd-button { pointer-events: auto; }

.ubd-scene { border-radius: var(--ubd-d-radius, 0px); }
.ubd-layer > .ubd-layer__text,
.ubd-layer > .ubd-floating-image__frame { border-radius: inherit; overflow: hidden; }
.ubd-layer > .ubd-button { border-radius: var(--ubd-radius, 12px); }
.ubd-radius-handle {
    display: none;
}
.ubd-layer__delete-handle {
    display: none;
}
.preview-mode-edit .ubd-layer__delete-handle.ubd-canvas-portal-tool { width: 34px; height: 34px; padding: 0; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #b42332; color: #fff; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .28); }
.ubd-layer__delete-handle::before,
.ubd-layer__delete-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.ubd-layer__delete-handle::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ubd-delete-confirm {
    position: fixed;
    z-index: 2147483645;
    display: grid;
    box-sizing: border-box;
    width: min(280px, calc(100vw - 16px));
    gap: 8px;
    padding: 16px;
    background: #fff;
    color: #172033;
    border: 1px solid #e2e6ed;
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(22, 31, 51, .24), 0 3px 10px rgba(22, 31, 51, .12);
    direction: rtl;
    text-align: right;
    font-family: inherit;
}
.ubd-delete-confirm__title { font-size: 15px; font-weight: 800; line-height: 1.5; }
.ubd-delete-confirm__message { color: #596273; font-size: 13px; line-height: 1.7; }
.ubd-delete-confirm__actions { display: flex; gap: 8px; margin-top: 4px; }
.ubd-delete-confirm__button {
    min-height: 38px;
    padding: 6px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.ubd-delete-confirm__button--danger { background: #b42332; color: #fff; }
.ubd-delete-confirm__button--danger:hover,
.ubd-delete-confirm__button--danger:focus-visible { background: #921c29; }
.ubd-delete-confirm__button--cancel { background: #f2f4f7; color: #344054; border-color: #d0d5dd; }
.ubd-delete-confirm__button--cancel:hover,
.ubd-delete-confirm__button--cancel:focus-visible { background: #e4e7ec; }
.ubd-delete-confirm__button:focus-visible { outline: 3px solid rgba(76, 120, 221, .35); outline-offset: 2px; }
.preview-mode-edit .ubd-radius-handle.ubd-canvas-portal-tool {
    width: 16px; height: 16px; padding: 0; border-radius: 50%;
    border: 2px solid #fff; background: #16836b; box-shadow: 0 0 0 1px #16836b;
    cursor: move; touch-action: none; overflow: visible;
}
.ubd-radius-value {
    position: absolute; top: 22px; left: 0; white-space: nowrap;
    padding: 4px 8px; background: #153b34; color: #fff; border-radius: 4px;
    pointer-events: none; font: 12px sans-serif;
}
.ubd-layer__resize-handle[data-ubd-resize-corner="nw"],
.ubd-layer__resize-handle[data-ubd-resize-corner="se"] { cursor: nwse-resize !important; }
.ubd-layer__resize-handle[data-ubd-resize-corner="ne"],
.ubd-layer__resize-handle[data-ubd-resize-corner="sw"] { cursor: nesw-resize !important; }
.ubd-layer__resize-handle[data-ubd-resize-corner="n"],
.ubd-layer__resize-handle[data-ubd-resize-corner="s"] { cursor: ns-resize !important; }
.ubd-layer__resize-handle[data-ubd-resize-corner="e"],
.ubd-layer__resize-handle[data-ubd-resize-corner="w"] { cursor: ew-resize !important; }

/* هات‌اسپات یک مختصات نقطه‌ای است؛ اندازهٔ درصدی wrapper باعث اختلاف مرکز
   نشانگر میان قاب پیش‌نمایش و قاب سایت می‌شد. */
.ubd-layer.ubd-layer--hotspot-layer {
    width: 72px;
    height: 72px;
    /* Use the same saved device order as every other layer. The whole-banner
       link is below the content plane; focus raises only the active hotspot. */
}

.ubd-button--disabled {
    cursor: default;
    pointer-events: none;
}

.ubd-layer--button-layer > .ubd-button--split-arrow i {
    width: calc(32px * var(--ubd-button-content-scale));
    height: calc(32px * var(--ubd-button-content-scale));
    margin: calc(-6px * var(--ubd-button-content-scale)) calc(-10px * var(--ubd-button-content-scale))
        calc(-6px * var(--ubd-button-content-scale)) calc(-6px * var(--ubd-button-content-scale));
    border-radius: calc(9px * var(--ubd-button-content-scale));
}

.ubd-layer--hotspot-layer > .ubd-layer__resize-handle {
    display: none !important;
}

.ubd-hotspot:not([data-ubd-hotspot-visual]) span {
    position: relative;
    z-index: 2;
    width: 12px;
    height: 12px;
    border-radius: inherit;
    background: var(--ubd-hotspot-dot-color, var(--element-accent, #111));
    box-shadow:
        0 3px 12px rgba(0, 0, 0, .38),
        0 0 var(--ubd-hotspot-glow-blur) var(--ubd-hotspot-glow-spread)
        color-mix(in srgb, var(--ubd-hotspot-wave-color, var(--element-accent, #111)) 45%, transparent);
}

.ubd-hotspot::before,
.ubd-hotspot::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 34px;
    height: 34px;
    border: 3px solid var(--ubd-hotspot-wave-color, color-mix(in srgb, var(--element-accent, #111) 88%, white 12%));
    border-radius: 50%;
    background: transparent;
    animation: ubd-hotspot-pulse 2s cubic-bezier(.2, .65, .35, 1) infinite;
}

.ubd-hotspot::after { animation-delay: 1s; }

@media (hover: hover) and (pointer: fine) {
    .ubd-scene--has-hotspots > .ubd-scene__layers > .ubd-layer--hotspot-layer:hover {
        --ubd-hotspot-spread-level: 7;
        --ubd-hotspot-glow-blur: 20px;
        --ubd-hotspot-glow-spread: 5px;
        --ubd-hotspot-pulse-scale: 2.35;
    }

    .ubd-scene > .ubd-scene__layers > .ubd-layer--hotspot-hover-focus:hover {
        z-index: 102;
    }

    .ubd-scene:has(.ubd-layer--hotspot-hover-focus:hover) > .ubd-scene__layers::after {
        opacity: 1;
    }
}

/* Hover takes precedence over a previously focused hotspot. */
.ubd-scene--has-hotspots:not(:has(.ubd-layer--hotspot-layer:hover)) > .ubd-scene__layers > .ubd-layer--hotspot-layer:focus-within {
    --ubd-hotspot-spread-level: 7;
    --ubd-hotspot-glow-blur: 20px;
    --ubd-hotspot-glow-spread: 5px;
    --ubd-hotspot-pulse-scale: 2.35;
}

.ubd-scene:not(:has(.ubd-layer--hotspot-layer:hover)) > .ubd-scene__layers > .ubd-layer--hotspot-hover-focus:focus-within {
    z-index: 102;
}

.ubd-scene:not(:has(.ubd-layer--hotspot-layer:hover)):has(.ubd-layer--hotspot-hover-focus:focus-within) > .ubd-scene__layers::after {
    opacity: 1;
}

.ubd-crop-box {
    position: absolute;
    z-index: 44;
    display: none;
    cursor: move;
    border: 2px solid #38bdf8;
    background: rgba(14, 165, 233, .08);
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, .42);
    touch-action: none;
}

.preview-mode-edit .ubd-scene.ubd-selected.is-crop-editing > .ubd-crop-box,
.preview-mode-edit .ubd-layer--image-layer.ubd-selected.is-crop-editing > .ubd-crop-box {
    display: block;
}
.ubd-scene.is-crop-editing > .ubd-focus-handle,
.ubd-layer--image-layer.is-crop-editing > .ubd-focus-handle {
    display: none;
}

.ubd-crop-box__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to right, transparent 33.1%, rgba(255,255,255,.55) 33.3%, rgba(255,255,255,.55) 33.7%, transparent 33.9%, transparent 66.1%, rgba(255,255,255,.55) 66.3%, rgba(255,255,255,.55) 66.7%, transparent 66.9%),
        linear-gradient(to bottom, transparent 33.1%, rgba(255,255,255,.55) 33.3%, rgba(255,255,255,.55) 33.7%, transparent 33.9%, transparent 66.1%, rgba(255,255,255,.55) 66.3%, rgba(255,255,255,.55) 66.7%, transparent 66.9%);
}

.ubd-crop-box__handle {
    position: absolute;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #0284c7;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    touch-action: none;
}
.ubd-crop-box__handle--nw { top: 0; left: 0; cursor: nwse-resize; }
.ubd-crop-box__handle--ne { top: 0; right: 0; cursor: nesw-resize; }
.ubd-crop-box__handle--sw { bottom: 0; left: 0; cursor: nesw-resize; }
.ubd-crop-box__handle--se { right: 0; bottom: 0; cursor: nwse-resize; }

.ubd-scene__visual-tools [data-ubd-crop-toggle].is-active {
    color: #fff;
    background: #0284c7;
}

.ubd-slider .swiper-button-prev,
.ubd-slider .swiper-button-next { /* استایل عمومی سایت برای این خصوصیت‌ها !important دارد. */ position: absolute; color: #fff; width: 44px !important; height: 44px !important; max-width: none; padding: 0 !important; top: 50%; margin-top: -22px; border: 1px solid rgba(255,255,255,.35) !important; border-radius: 50% !important; background: rgba(15,23,42,.55) !important; backdrop-filter: blur(12px); box-shadow: 0 3px 14px rgba(0,0,0,.18); transition: background .25s ease, transform .25s ease !important; }

.ubd-slider .swiper-button-prev::after,
.ubd-slider .swiper-button-next::after { content: '' !important; display: block; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.ubd-slider .swiper-button-prev::after { transform: rotate(-135deg); }
.ubd-slider.swiper-rtl .swiper-button-prev::after { transform: rotate(45deg); }
.ubd-slider.swiper-rtl .swiper-button-next::after { transform: rotate(-135deg); }

/* Match Swiper's eventual navigation placement using computed CSS direction,
   including public layouts without a dir attribute (the grid itself is RTL). */
.ubd-slider:not(.swiper-initialized) .swiper-button-next {
    right: auto;
    left: auto;
    inset-inline-end: var(--swiper-navigation-sides-offset, 10px);
}
.ubd-slider:not(.swiper-initialized) .swiper-button-prev {
    right: auto;
    left: auto;
    inset-inline-start: var(--swiper-navigation-sides-offset, 10px);
}
[dir="rtl"] .ubd-slider:not(.swiper-initialized) .swiper-button-next::after { transform: rotate(-135deg); }
[dir="rtl"] .ubd-slider:not(.swiper-initialized) .swiper-button-prev::after { transform: rotate(45deg); }

.ubd-slider > .swiper-pagination { position: absolute; inset: auto auto 12px 12px; bottom: 12px !important; left: 12px !important; width: max-content !important; max-width: calc(100% - 24px); display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 8px; border: 1px solid rgba(255,255,255,.3); border-radius: 24px; background: rgba(15,23,42,.55); backdrop-filter: blur(12px); transform: none !important; z-index: 10; }

.ubd-slider .swiper-pagination .swiper-pagination-bullet { width: 24px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 14px; background: transparent; opacity: 1; display: grid; place-items: center; }

.ubd-slider .swiper-pagination-bullet::before { content: ''; width: 7px; height: 7px; border-radius: 8px; background: rgba(255,255,255,.55); transition: width .3s cubic-bezier(.22,1,.36,1), background .3s ease; }

.ubd-slider .swiper-pagination-bullet-active::before { width: 22px; background: #fff; }

.ubd-slider .swiper-button-prev:hover,
.ubd-slider .swiper-button-next:hover { background: rgba(15,23,42,.8) !important; }

.ubd-slider button:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }

.ubd-slider > .swiper-pagination-lock,
.ubd-slider > .swiper-button-lock {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .ubd-slider .swiper-pagination-bullet::before,
    .ubd-slider .swiper-button-prev,
    .ubd-slider .swiper-button-next { transition: none !important; }
}

.ubd-focus-handle,
.ubd-scene__visual-tools,
.ubd-layer__drag-handle,
.ubd-layer__edit-handle,
.ubd-layer__resize-handle {
    display: none;
}

.preview-mode-edit .ubd-scene.ubd-selected > .ubd-focus-handle,
.preview-mode-edit .ubd-layer--image-layer.ubd-selected .ubd-focus-handle {
    position: absolute;
    z-index: 30;
    left: var(--ubd-focus-x-d, 50%);
    top: var(--ubd-focus-y-d, 50%);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #4c78dd;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
    transform: translate(-50%, -50%);
    cursor: crosshair;
    touch-action: none;
}

.preview-mode-edit .ubd-focus-handle span {
    width: 6px;
    height: 6px;
    border: 1px solid #fff;
    border-radius: 50%;
}

.preview-mode-edit .ubd-scene.ubd-selected > .ubd-scene__visual-tools,
.preview-mode-edit .ubd-layer--image-layer.ubd-selected .ubd-scene__visual-tools {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 31;
    display: inline-flex;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 9px;
    background: rgba(20, 26, 36, .78);
}

.preview-mode-edit .ubd-scene__visual-tools button {
    width: auto;
    min-width: 36px;
    min-height: 36px;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    color: #fff;
}

.preview-mode-edit .ubd-scene__visual-tools.ubd-canvas-portal-tool {
    display: flex !important; flex-wrap: wrap; gap: 6px; padding: 6px;
    box-sizing: border-box; direction: rtl; height: auto; overflow: visible;
    font-size: 12px; line-height: 1.45;
}
.ubd-media-tool-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ubd-media-tool-group + .ubd-media-tool-group { border-inline-start: 1px solid #ffffff55; padding-inline-start: 6px; }
.ubd-media-tool-group output { color: #fff; min-width: 48px; text-align: center; }
.ubd-scene__visual-tools button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ubd-scene__visual-tools button:hover:not(:disabled) { background: #ffffff22; border-radius: 5px; }
.ubd-scene__visual-tools button:disabled,
.ubd-scene__visual-tools button[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.ubd-media-tooltip {
    position: fixed; z-index: 2147483646; max-width: min(280px, 85vw);
    padding: 7px 10px; border-radius: 6px; background: #17202e; color: #fff;
    direction: rtl; font-size: 12px; line-height: 1.55; pointer-events: none;
    box-shadow: 0 3px 12px #0005;
}

.preview-mode-edit .ubd-layer { touch-action: none; }

.preview-mode-edit .ubd-layer.ubd-selected,
.preview-mode-edit .ubd-scene.ubd-selected { outline: 2px solid #2f80ed; outline-offset: 3px; box-shadow: 0 0 0 3px rgba(47, 128, 237, .2); }

.preview-mode-edit .ubd-layer.is-canvas-dragging { cursor: grabbing; outline: 2px solid #4c78dd; }
.preview-mode-edit [data-ubd-scene] { user-select: none; -webkit-touch-callout: none; }
.preview-mode-edit .ubd-layer:focus-visible { outline: 2px solid #4c78dd; }
.ubd-canvas-menu { position: fixed; z-index: 2147483000; display: grid; min-width: 190px; padding: 6px; background: #fff; color: #202530; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 20px #0003; direction: rtl; }
.ubd-canvas-menu__heading { padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid #e4e7ec; color: #344054; font-size: .82rem; font-weight: 700; }
.ubd-canvas-menu button { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; border-radius: 6px; background: transparent; color: inherit; padding: 9px 12px; cursor: pointer; font: inherit; text-align: right; }
.ubd-canvas-menu button:hover { background: #f0f5ff; color: #174ea6; }
.ubd-canvas-menu button i { width: 18px; text-align: center; color: #4c78dd; }
.ubd-canvas-menu button:focus-visible { outline: 2px solid #4c78dd; }

.preview-mode-edit .ubd-layer--banner-link,
.preview-mode-edit .ubd-layer--banner-link * { pointer-events: none; }

.ubd-layer__text-placeholder { min-height: 44px; padding: 10px; color: #151515; background: rgba(255, 255, 255, .85); border: 1px dashed #4c78dd; }

.preview-mode-edit .ubd-layer.ubd-selected > .ubd-layer__drag-handle,
.preview-mode-edit .ubd-layer.ubd-selected > .ubd-layer__edit-handle { position: absolute; top: -34px; right: 0; z-index: 5; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #4c78dd; color: #fff; cursor: grab; touch-action: none; }

.preview-mode-edit .ubd-layer.ubd-selected > .ubd-layer__edit-handle { right: 32px; cursor: pointer; }

.preview-mode-edit .ubd-layer.ubd-selected > .ubd-layer__resize-handle { position: absolute; right: -8px; bottom: -8px; z-index: 5; display: block; width: 15px; height: 15px; padding: 0; border: 2px solid #fff; border-radius: 4px; background: #4c78dd; cursor: nesw-resize; touch-action: none; }

.preview-mode-edit .ubd-canvas-portal-tool {
    position: fixed !important;
    z-index: 2147482990 !important;
    display: grid !important;
    margin: 0 !important;
}

.preview-mode-edit .ubd-layer__drag-handle.ubd-canvas-portal-tool,
.preview-mode-edit .ubd-layer__edit-handle.ubd-canvas-portal-tool {
    box-sizing: border-box;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #4c78dd;
    color: #fff;
    cursor: grab;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
    touch-action: none;
}

.preview-mode-edit .ubd-layer__edit-handle.ubd-canvas-portal-tool {
    cursor: pointer;
}

.preview-mode-edit .ubd-layer__resize-handle.ubd-canvas-portal-tool {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 4px;
    background: #4c78dd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    cursor: nesw-resize;
    touch-action: none;
}

.preview-mode-edit .ubd-scene__visual-tools.ubd-canvas-portal-tool {
    display: inline-flex !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 9px;
    background: rgba(20, 26, 36, .82);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}

.ubd-shadow-tools { display: none; }
.preview-mode-edit .ubd-shadow-tools.ubd-canvas-portal-tool {
    display: block !important;
    width: min(440px, calc(100vw - 16px));
    color: #fff;
    direction: rtl;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.45;
}
.ubd-shadow-tools details {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 10px;
    background: rgba(20, 26, 36, .96);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .34);
}
.ubd-shadow-tools summary {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 11px;
    box-sizing: border-box;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.ubd-shadow-tools summary::-webkit-details-marker { display: none; }
.ubd-shadow-tools summary::after {
    content: "";
    margin-inline-start: auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .16s ease;
}

.preview-mode-edit .ubd-layer__delete-handle.ubd-canvas-portal-tool,
.preview-mode-edit .ubd-shadow-tools:not(.ubd-shadow-tools--independent).ubd-canvas-portal-tool,
.preview-mode-edit .ubd-rotation-tools.ubd-canvas-portal-tool {
    box-sizing: border-box;
}
.ubd-shadow-tools details[open] summary::after { transform: rotate(225deg); }
.preview-mode-edit .ubd-shadow-tools:not(.ubd-shadow-tools--independent).ubd-canvas-portal-tool {
    width: 34px;
}
.ubd-shadow-tools:not(.ubd-shadow-tools--independent) details {
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border-width: 2px;
}
.ubd-shadow-tools:not(.ubd-shadow-tools--independent) summary {
    width: 100%;
    min-height: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}
.ubd-shadow-tools:not(.ubd-shadow-tools--independent) summary :is(span, output),
.ubd-shadow-tools:not(.ubd-shadow-tools--independent) summary::after {
    display: none;
}
.ubd-shadow-tools:not(.ubd-shadow-tools--independent) .ubd-shadow-tools__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(420px, calc(100vw - 16px));
    box-sizing: border-box;
    border: 1px solid #526174;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .34);
}
.ubd-shadow-tools summary output {
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #d0d5dd;
    font-size: 11px;
}
.ubd-shadow-tools.is-enabled summary output { background: #0b725c; color: #fff; }
.ubd-shadow-tools__panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    background: #202938;
}
.ubd-shadow-tools__panel > label:not(.ubd-shadow-tools__switch):not(.ubd-shadow-tools__color) {
    display: grid;
    grid-template-columns: 44px minmax(70px, 1fr) 38px;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.ubd-shadow-tools__panel input[type="range"] { width: 100%; min-width: 0; accent-color: #5b8def; }
.ubd-shadow-tools__panel label > output { direction: ltr; color: #b9c7e8; text-align: left; font-variant-numeric: tabular-nums; }
.ubd-shadow-tools__switch,
.ubd-shadow-tools__color {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 7px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .06);
}
.ubd-shadow-tools__switch input { width: 17px; height: 17px; accent-color: #4c78dd; }
.ubd-shadow-tools__color input {
    width: 32px;
    height: 25px;
    margin-inline-start: auto;
    padding: 1px;
    border: 1px solid #667085;
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
}
.ubd-shadow-tools__panel button {
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid #667085;
    border-radius: 7px;
    background: transparent;
    color: #fff;
    cursor: pointer;
}
.ubd-shadow-tools__panel button:hover { background: rgba(255, 255, 255, .1); }
.ubd-shadow-tools :is(summary, input, button):focus-visible { outline: 2px solid #8eb0ff; outline-offset: 2px; }
.ubd-shadow-tools--independent .ubd-shadow-tools__panel { max-height: 56vh; overflow-y: auto; }
.ubd-shadow-presets { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ubd-shadow-presets button { position: relative; display: grid; justify-items: center; gap: 3px; background: #3b4658; font: inherit; }
.ubd-shadow-presets button[aria-pressed="true"] { outline: 2px solid #8eb0ff; background: #314f7c; }
.ubd-shadow-preset-sample { display: block; width: 75%; height: 20px; border-radius: 4px; }
.ubd-shadow-tools__panel > .ubd-shadow-select { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; }
.ubd-shadow-select select { min-width: 0; flex: 1; border: 1px solid #667085; border-radius: 5px; padding: 5px; background: #283446; color: #fff; font: inherit; }
.ubd-shadow-tools__panel > .ubd-shadow-range { grid-column: 1 / -1; grid-template-columns: 44px minmax(70px, 1fr) 65px !important; }
.ubd-shadow-range input[type="number"] { width: 100%; box-sizing: border-box; background: #283446; color: #fff; border: 1px solid #667085; border-radius: 4px; padding: 4px; direction: ltr; }
.ubd-shadow-help { grid-column: 1 / -1; color: #d0d5dd; margin: 0; font-size: 11px; }
.ubd-shadow-tools button:disabled { opacity: .45; cursor: default; }
.ubd-shadow-tools select:focus-visible { outline: 2px solid #8eb0ff; outline-offset: 2px; }

@media (max-width: 560px) {
    .ubd-shadow-tools__panel { grid-template-columns: 1fr; max-height: 52vh; overflow-y: auto; }
}

@media (pointer: coarse) {
    .ubd-shadow-tools :is(button, select, input[type="number"], input[type="range"]) { min-height: 44px; }
    .preview-mode-edit .ubd-layer__delete-handle.ubd-canvas-portal-tool {
        width: 44px;
        height: 44px;
    }
    .ubd-delete-confirm button {
        min-width: 44px;
        min-height: 44px;
    }
    .preview-mode-edit .ubd-layer__drag-handle.ubd-canvas-portal-tool,
    .preview-mode-edit .ubd-layer__edit-handle.ubd-canvas-portal-tool {
        width: 44px;
        height: 44px;
    }
    .preview-mode-edit .ubd-layer__resize-handle.ubd-canvas-portal-tool {
        width: 44px;
        height: 44px;
        border-radius: 9px;
    }
    .preview-mode-edit .ubd-scene__visual-tools.ubd-canvas-portal-tool button {
        min-width: 44px;
        min-height: 44px;
    }
}

.ubd-button { background: var(--ubd-d-button-bg, var(--ubd-default-button-bg, var(--element-bg, #fff))); color: var(--ubd-d-button-text, var(--element-text, #151515)); border-color: var(--ubd-d-button-border, transparent); }
.ubd-button--split-arrow { --ubd-default-icon-bg: color-mix(in srgb, var(--element-text) 9%, transparent); }
.ubd-button > i { color: var(--ubd-d-button-icon, currentColor); background: var(--ubd-d-button-icon-bg, var(--ubd-default-icon-bg, transparent)); }
.ubd-button:not(.is-preview-normal):is(:hover, .is-preview-hover) { background: var(--ubd-d-button-hover-bg, var(--element-hover-bg, var(--ubd-d-button-bg, var(--element-bg)))); color: var(--ubd-d-button-hover-text, var(--element-hover-text, var(--ubd-d-button-text, var(--element-text)))); border-color: var(--ubd-d-button-hover-border, var(--ubd-d-button-border, transparent)); }
.ubd-button:not(.is-preview-normal):is(:hover, .is-preview-hover) > i { color: var(--ubd-d-button-hover-icon, var(--ubd-d-button-icon, currentColor)); background: var(--ubd-d-button-hover-icon-bg, var(--ubd-d-button-icon-bg, var(--ubd-default-icon-bg, transparent))); }

.ubd-layer[data-ubd-button-variant-d="text-only"] .ubd-button > i { display: none; }
.ubd-layer[data-ubd-button-variant-d="arrow-only"] .ubd-button > span { display: none; }
.ubd-layer[data-ubd-button-variant-d="arrow-only"] .ubd-button { min-width: 0; padding-inline: 0 !important; }
.ubd-layer[data-ubd-button-variant-d="split-arrow"] .ubd-button > i { display: inline-grid; place-items: center; width: calc(32px * var(--ubd-button-content-scale)); height: calc(32px * var(--ubd-button-content-scale)); margin: calc(-6px * var(--ubd-button-content-scale)) calc(-10px * var(--ubd-button-content-scale)) calc(-6px * var(--ubd-button-content-scale)) calc(-6px * var(--ubd-button-content-scale)); border-radius: calc(9px * var(--ubd-button-content-scale)); }
.ubd-layer[data-ubd-button-variant-d="outline"] .ubd-button { --ubd-default-button-bg: transparent; }

/* Element 59 owns selection tools; legacy field pencils must never appear on hover. */
.preview-mode-edit [data-ubd-root] [data-live-field] > .live-edit-btn,
.preview-mode-edit [data-ubd-root] [data-live-child-id] > .live-child-edit-btn {
    display: none !important;
}

@media (max-width: 991.98px) {
    .ubd-layer--shadow-layer {
        --ubd-free-shadow-paint: var(--ubd-t-free-shadow-paint);
        --ubd-free-shadow-opacity: var(--ubd-t-free-shadow-opacity);
        --ubd-free-shadow-blur: var(--ubd-t-free-shadow-blur);
        --ubd-free-shadow-angle: var(--ubd-t-free-shadow-angle);
        --ubd-free-shadow-skew: var(--ubd-t-free-shadow-skew);
        --ubd-free-shadow-blend: var(--ubd-t-free-shadow-blend);
    }
    .ubd-layer > .ubd-button { border-radius: var(--ubd-t-radius, var(--ubd-d-radius, 12px)) !important; }
    .ubd-layer--text-layer { box-shadow: var(--ubd-t-shadow, var(--ubd-d-shadow, none)); }
    .ubd-layer > .ubd-button { box-shadow: var(--ubd-t-shadow, var(--ubd-d-shadow, none)); }
    .ubd-scene-link-overlay { display: var(--ubd-t-display, var(--ubd-d-display, block)); }
    .ubd__grid {
        --ubd-columns: var(--ubd-columns-t, var(--ubd-columns-d, 1));
        --ubd-rows: var(--ubd-rows-t, var(--ubd-rows-d, 1));
        --ubd-gap: var(--ubd-gap-t, var(--ubd-gap-d, 12px));
    }

    .ubd-region {
        grid-column: var(--ubd-column-t, var(--ubd-column-d, auto));
        grid-row: var(--ubd-row-t, var(--ubd-row-d, auto));
        aspect-ratio: var(--ubd-ratio-t, var(--ubd-ratio-d, 1 / 1));
    }

    .ubd-layer {
        left: var(--ubd-t-left, var(--ubd-d-left));
        right: var(--ubd-t-right, var(--ubd-d-right));
        top: var(--ubd-t-top, var(--ubd-d-top));
        bottom: var(--ubd-t-bottom, var(--ubd-d-bottom));
        width: var(--ubd-t-width, var(--ubd-d-width));
        height: var(--ubd-t-height, var(--ubd-d-height));
        z-index: var(--ubd-t-z, var(--ubd-d-z));
        display: var(--ubd-t-display, var(--ubd-d-display));
        transform: translate(var(--ubd-t-tx, var(--ubd-d-tx)), var(--ubd-t-ty, var(--ubd-d-ty))) rotate(var(--ubd-t-rotation, var(--ubd-d-rotation, 0deg)));
        border-radius: var(--ubd-t-radius, var(--ubd-d-radius, 0px));
    }

    .ubd-layer--text-layer,
    .ubd-layer--overlay-layer {
        border-color: var(--ubd-t-border-color, var(--ubd-d-border-color, transparent));
        border-width: var(--ubd-t-border-width, var(--ubd-d-border-width, 0));
    }

    .ubd-scene__media-asset {
        object-fit: var(--ubd-t-media-fit, var(--ubd-d-media-fit, cover));
        object-position: var(--ubd-focus-x-t, var(--ubd-focus-x-d)) var(--ubd-focus-y-t, var(--ubd-focus-y-d));
        transform: scale(var(--ubd-zoom-t, var(--ubd-zoom-d)));
        transform-origin: var(--ubd-focus-x-t, var(--ubd-focus-x-d)) var(--ubd-focus-y-t, var(--ubd-focus-y-d));
    }
    .ubd-layer__text { padding: var(--ubd-t-text-padding, var(--ubd-d-text-padding, 0)); background: var(--ubd-t-text-box-bg, var(--ubd-d-text-box-bg, transparent)); color: var(--ubd-t-text-color, var(--ubd-d-text-color, var(--bs-body-color, #212529))); font-family: var(--ubd-t-font-family, var(--ubd-d-font-family, inherit)); font-size: var(--ubd-t-font-size, var(--ubd-d-font-size, inherit)); font-weight: var(--ubd-t-font-weight, var(--ubd-d-font-weight, inherit)); line-height: var(--ubd-t-line-height, var(--ubd-d-line-height, normal)); text-align: var(--ubd-t-text-align, var(--ubd-d-text-align, inherit)); direction: var(--ubd-t-text-direction, var(--ubd-d-text-direction, inherit)); }
    .ubd-overlay-layer__surface { background: var(--ubd-t-overlay-color, var(--ubd-d-overlay-color, #00000066)); opacity: var(--ubd-t-overlay-opacity, var(--ubd-d-overlay-opacity, 1)); }
    .ubd-button { background: var(--ubd-t-button-bg, var(--ubd-d-button-bg, var(--element-bg, #fff))); color: var(--ubd-t-button-text, var(--ubd-d-button-text, var(--element-text, #151515))); border-color: var(--ubd-t-button-border, var(--ubd-d-button-border, transparent)); }
    .ubd-button > i { color: var(--ubd-t-button-icon, var(--ubd-d-button-icon, currentColor)); background: var(--ubd-t-button-icon-bg, var(--ubd-d-button-icon-bg, var(--ubd-default-icon-bg, transparent))); }
    .ubd-button:not(.is-preview-normal):is(:hover, .is-preview-hover) { background: var(--ubd-t-button-hover-bg, var(--ubd-d-button-hover-bg, var(--element-hover-bg))); color: var(--ubd-t-button-hover-text, var(--ubd-d-button-hover-text, var(--element-hover-text))); border-color: var(--ubd-t-button-hover-border, var(--ubd-d-button-hover-border, transparent)); }
    .ubd-button:not(.is-preview-normal):is(:hover, .is-preview-hover) > i { color: var(--ubd-t-button-hover-icon, var(--ubd-d-button-hover-icon, currentColor)); background: var(--ubd-t-button-hover-icon-bg, var(--ubd-d-button-hover-icon-bg, var(--ubd-default-icon-bg, transparent))); }
    .ubd-scene__media, .ubd-floating-image__frame { background: var(--ubd-t-media-bg, var(--ubd-d-media-bg, transparent)); }
    .ubd-scene__media-backdrop { display: var(--ubd-t-media-backdrop-display, var(--ubd-d-media-backdrop-display, none)); }
    @media (min-width: 768px) {
    .ubd-layer[data-ubd-button-variant-t="text-only"] .ubd-button > i { display: none; }
    .ubd-layer[data-ubd-button-variant-t="arrow-only"] .ubd-button > span { display: none; }
    .ubd-layer[data-ubd-button-variant-t]:not([data-ubd-button-variant-t="text-only"]):not([data-ubd-button-variant-t="arrow-only"]):not([data-ubd-button-variant-t="split-arrow"]) .ubd-button > :is(span,i) { display: inline; }
    .ubd-layer[data-ubd-button-variant-t]:not([data-ubd-button-variant-t="arrow-only"]) .ubd-button { min-width: 0; }
    .ubd-layer[data-ubd-button-variant-t="arrow-only"] .ubd-button { min-width: 0; padding-inline: 0 !important; }
    .ubd-layer[data-ubd-button-variant-t="split-arrow"] .ubd-button > i { display: inline-grid; place-items: center; width: calc(32px * var(--ubd-button-content-scale)); height: calc(32px * var(--ubd-button-content-scale)); margin: calc(-6px * var(--ubd-button-content-scale)) calc(-10px * var(--ubd-button-content-scale)) calc(-6px * var(--ubd-button-content-scale)) calc(-6px * var(--ubd-button-content-scale)); border-radius: calc(9px * var(--ubd-button-content-scale)); }
    .ubd-layer[data-ubd-button-variant-t="split-arrow"] .ubd-button > span { display: inline; }
    .ubd-layer[data-ubd-button-variant-t="outline"] .ubd-button { --ubd-default-button-bg: transparent; }
    .ubd-layer[data-ubd-button-variant-t]:not([data-ubd-button-variant-t="outline"]) .ubd-button { --ubd-default-button-bg: var(--element-bg, #fff); }
    }

    .preview-mode-edit .ubd-focus-handle {
        left: var(--ubd-focus-x-t, var(--ubd-focus-x-d));
        top: var(--ubd-focus-y-t, var(--ubd-focus-y-d));
    }
}

@media (max-width: 767.98px) {
    .ubd-layer--shadow-layer {
        --ubd-free-shadow-paint: var(--ubd-m-free-shadow-paint);
        --ubd-free-shadow-opacity: var(--ubd-m-free-shadow-opacity);
        --ubd-free-shadow-blur: var(--ubd-m-free-shadow-blur);
        --ubd-free-shadow-angle: var(--ubd-m-free-shadow-angle);
        --ubd-free-shadow-skew: var(--ubd-m-free-shadow-skew);
        --ubd-free-shadow-blend: var(--ubd-m-free-shadow-blend);
    }
    .ubd-layer > .ubd-button { border-radius: var(--ubd-m-radius, var(--ubd-d-radius, 12px)) !important; }
    .ubd-layer--text-layer { box-shadow: var(--ubd-m-shadow, var(--ubd-d-shadow, none)); }
    .ubd-layer > .ubd-button { box-shadow: var(--ubd-m-shadow, var(--ubd-d-shadow, none)); }
    .ubd-scene-link-overlay { display: var(--ubd-m-display, var(--ubd-d-display, block)); }
    .ubd__grid {
        --ubd-columns: var(--ubd-columns-m, var(--ubd-columns-d, 1));
        --ubd-rows: var(--ubd-rows-m, var(--ubd-rows-d, 1));
        --ubd-gap: var(--ubd-gap-m, var(--ubd-gap-d, 12px));
    }

    .ubd-region {
        grid-column: var(--ubd-column-m, var(--ubd-column-d, auto));
        grid-row: var(--ubd-row-m, var(--ubd-row-d, auto));
        aspect-ratio: var(--ubd-ratio-m, var(--ubd-ratio-d, 1 / 1));
    }

    .ubd--contained .ubd__container {
        padding-inline: 8px;
    }

    .ubd-layer {
        left: var(--ubd-m-left, var(--ubd-d-left)); right: var(--ubd-m-right, var(--ubd-d-right)); top: var(--ubd-m-top, var(--ubd-d-top)); bottom: var(--ubd-m-bottom, var(--ubd-d-bottom)); width: var(--ubd-m-width, var(--ubd-d-width)); height: var(--ubd-m-height, var(--ubd-d-height)); z-index: var(--ubd-m-z, var(--ubd-d-z)); display: var(--ubd-m-display, var(--ubd-d-display)); transform: translate(var(--ubd-m-tx, var(--ubd-d-tx)), var(--ubd-m-ty, var(--ubd-d-ty))) rotate(var(--ubd-m-rotation, var(--ubd-d-rotation, 0deg))); border-radius: var(--ubd-m-radius, var(--ubd-d-radius, 0px));
    }

    .ubd-layer--text-layer,
    .ubd-layer--overlay-layer {
        border-color: var(--ubd-m-border-color, var(--ubd-d-border-color, transparent));
        border-width: var(--ubd-m-border-width, var(--ubd-d-border-width, 0));
    }

    .ubd-scene__media-asset {
        object-fit: var(--ubd-m-media-fit, var(--ubd-d-media-fit, cover));
        object-position: var(--ubd-focus-x-m, var(--ubd-focus-x-d)) var(--ubd-focus-y-m, var(--ubd-focus-y-d));
        transform: scale(var(--ubd-zoom-m, var(--ubd-zoom-d)));
        transform-origin: var(--ubd-focus-x-m, var(--ubd-focus-x-d)) var(--ubd-focus-y-m, var(--ubd-focus-y-d));
    }
    .ubd-layer__text { padding: clamp(0px, var(--ubd-m-text-padding-fluid, var(--ubd-m-text-padding, var(--ubd-d-text-padding, 0))), var(--ubd-m-text-padding, var(--ubd-d-text-padding, 0px))); background: var(--ubd-m-text-box-bg, var(--ubd-d-text-box-bg, transparent)); color: var(--ubd-m-text-color, var(--ubd-d-text-color, var(--bs-body-color, #212529))); font-family: var(--ubd-m-font-family, var(--ubd-d-font-family, inherit)); font-size: clamp(8px, var(--ubd-m-font-size-fluid, var(--ubd-m-font-size, var(--ubd-d-font-size, 8px))), var(--ubd-m-font-size, var(--ubd-d-font-size, 200px))); font-weight: var(--ubd-m-font-weight, var(--ubd-d-font-weight, inherit)); line-height: var(--ubd-m-line-height, var(--ubd-d-line-height, normal)); text-align: var(--ubd-m-text-align, var(--ubd-d-text-align, inherit)); direction: var(--ubd-m-text-direction, var(--ubd-d-text-direction, inherit)); }
    .ubd-overlay-layer__surface { background: var(--ubd-m-overlay-color, var(--ubd-d-overlay-color, #00000066)); opacity: var(--ubd-m-overlay-opacity, var(--ubd-d-overlay-opacity, 1)); }
    .ubd-button { background: var(--ubd-m-button-bg, var(--ubd-d-button-bg, var(--element-bg, #fff))); color: var(--ubd-m-button-text, var(--ubd-d-button-text, var(--element-text, #151515))); border-color: var(--ubd-m-button-border, var(--ubd-d-button-border, transparent)); }
    .ubd-button > i { color: var(--ubd-m-button-icon, var(--ubd-d-button-icon, currentColor)); background: var(--ubd-m-button-icon-bg, var(--ubd-d-button-icon-bg, var(--ubd-default-icon-bg, transparent))); }
    .ubd-button:not(.is-preview-normal):is(:hover, .is-preview-hover) { background: var(--ubd-m-button-hover-bg, var(--ubd-d-button-hover-bg, var(--element-hover-bg))); color: var(--ubd-m-button-hover-text, var(--ubd-d-button-hover-text, var(--element-hover-text))); border-color: var(--ubd-m-button-hover-border, var(--ubd-d-button-hover-border, transparent)); }
    .ubd-button:not(.is-preview-normal):is(:hover, .is-preview-hover) > i { color: var(--ubd-m-button-hover-icon, var(--ubd-d-button-hover-icon, currentColor)); background: var(--ubd-m-button-hover-icon-bg, var(--ubd-d-button-hover-icon-bg, var(--ubd-default-icon-bg, transparent))); }
    .ubd-scene__media, .ubd-floating-image__frame { background: var(--ubd-m-media-bg, var(--ubd-d-media-bg, transparent)); }
    .ubd-scene__media-backdrop { display: var(--ubd-m-media-backdrop-display, var(--ubd-d-media-backdrop-display, none)); }
    .ubd-layer[data-ubd-button-variant-m="text-only"] .ubd-button > i { display: none; }
    .ubd-layer[data-ubd-button-variant-m="arrow-only"] .ubd-button > span { display: none; }
    .ubd-layer[data-ubd-button-variant-m]:not([data-ubd-button-variant-m="text-only"]):not([data-ubd-button-variant-m="arrow-only"]):not([data-ubd-button-variant-m="split-arrow"]) .ubd-button > :is(span,i) { display: inline; }
    .ubd-layer[data-ubd-button-variant-m]:not([data-ubd-button-variant-m="arrow-only"]) .ubd-button { min-width: 0; }
    .ubd-layer[data-ubd-button-variant-m="arrow-only"] .ubd-button { min-width: 0; padding-inline: 0 !important; }
    .ubd-layer[data-ubd-button-variant-m="split-arrow"] .ubd-button > i { display: inline-grid; place-items: center; width: calc(32px * var(--ubd-button-content-scale)); height: calc(32px * var(--ubd-button-content-scale)); margin: calc(-6px * var(--ubd-button-content-scale)) calc(-10px * var(--ubd-button-content-scale)) calc(-6px * var(--ubd-button-content-scale)) calc(-6px * var(--ubd-button-content-scale)); border-radius: calc(9px * var(--ubd-button-content-scale)); }
    .ubd-layer[data-ubd-button-variant-m="split-arrow"] .ubd-button > span { display: inline; }
    .ubd-layer[data-ubd-button-variant-m="outline"] .ubd-button { --ubd-default-button-bg: transparent; }
    .ubd-layer[data-ubd-button-variant-m]:not([data-ubd-button-variant-m="outline"]) .ubd-button { --ubd-default-button-bg: var(--element-bg, #fff); }

    .preview-mode-edit .ubd-focus-handle {
        left: var(--ubd-focus-x-m, var(--ubd-focus-x-d));
        top: var(--ubd-focus-y-m, var(--ubd-focus-y-d));
    }
}

@keyframes ubd-shimmer {
    to { transform: translateX(110%); }
}

@keyframes ubd-hotspot-pulse {
    0% { opacity: .95; transform: scale(.5); }
    72%, 100% { opacity: 0; transform: scale(var(--ubd-hotspot-pulse-scale, 2.35)); }
}

@media (prefers-reduced-motion: reduce) {
    .ubd-scene__shimmer,
    .ubd-hotspot::before,
    .ubd-hotspot::after {
        animation: none;
    }

    .ubd-scene__placeholder,
    .ubd-scene__media-asset,
    .ubd-scene--has-hotspots > .ubd-scene__layers::after,
    .ubd-button {
        transition: none;
    }
}

/* The grid item supplies intrinsic height for auto frames and fills explicit frames. */
.ubd-layer--text-layer { display: grid; container-type: inline-size; }
.ubd-layer--text-layer[style] { display: var(--ubd-d-display, grid); }
.ubd-layer__text { --ubd-text-unit: var(--ubd-d-text-unit, 1px); font-size: calc(var(--ubd-d-text-base-size, 16) * var(--ubd-text-unit)); }
.ubd-layer--link-area { background: transparent; border: 0; padding: 0; pointer-events: none; }
.ubd-link-area { position: absolute; inset: 0; display: block; background: transparent; border: 0; padding: 0; pointer-events: auto; }
.ubd-link-area:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.preview-mode-edit .ubd-layer--link-area { outline: 1px dashed #4c78dd; pointer-events: auto; }
.preview-mode-edit .ubd-layer--link-area::before { content: 'ناحیهٔ لینک'; position: absolute; inset-block-start: 0; inset-inline-start: 0; background: #ffffffcc; color: #24335b; font-size: 12px; pointer-events: none; }
@media (max-width: 991.98px) {
    .ubd-layer--text-layer[style] { display: var(--ubd-t-display, var(--ubd-d-display, grid)); }
    .ubd-layer__text { --ubd-text-unit: var(--ubd-t-text-unit, var(--ubd-d-text-unit, 1px)); justify-content: var(--ubd-t-text-vertical-align, var(--ubd-d-text-vertical-align, flex-start)); font-size: calc(var(--ubd-t-text-base-size, var(--ubd-d-text-base-size, 16)) * var(--ubd-text-unit)); }
}
@media (max-width: 767.98px) {
    .ubd-layer--text-layer[style] { display: var(--ubd-m-display, var(--ubd-d-display, grid)); }
    .ubd-layer__text { --ubd-text-unit: var(--ubd-m-text-unit, var(--ubd-d-text-unit, 1px)); justify-content: var(--ubd-m-text-vertical-align, var(--ubd-d-text-vertical-align, flex-start)); font-size: calc(var(--ubd-m-text-base-size, var(--ubd-d-text-base-size, 16)) * var(--ubd-text-unit)); }
}

.ubd-layer__text :is(p, span):not([style*="font-size"]) { font-size: inherit; }

.ubd-rotation-tools { display: none; }
.preview-mode-edit .ubd-rotation-tools.ubd-canvas-portal-tool { display: block !important; width: 34px; height: 34px; direction: rtl; font: 12px/1.5 Tahoma, sans-serif; }
.ubd-rotation-tools details { position: relative; width: 34px; height: 34px; color: #fff; }
.ubd-rotation-tools summary { display: grid; box-sizing: border-box; width: 34px; height: 34px; place-items: center; list-style: none; border: 2px solid #fff; border-radius: 50%; background: #4c78dd; color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .28); cursor: pointer; }
.ubd-rotation-tools summary:hover { background: #315fb8; }
.ubd-rotation-tools summary::-webkit-details-marker { display: none; }
.ubd-rotation-tools summary:focus-visible { outline: 3px solid rgba(76, 120, 221, .4); outline-offset: 2px; }
.ubd-rotation-tools__panel { position: absolute; top: calc(100% + 8px); right: 0; display: grid; box-sizing: border-box; width: min(260px, calc(100vw - 16px)); gap: 10px; padding: 12px; border: 1px solid #c9d5e7; border-radius: 10px; background: #fff; color: #24335b; box-shadow: 0 8px 28px rgba(20, 32, 52, .25); }
.ubd-rotation-tools__panel header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #e2e8f0; }
.ubd-rotation-tools__panel header strong { font-size: 13px; }
.ubd-rotation-tools__panel header output { padding: 2px 7px; border-radius: 999px; background: #eaf0ff; color: #315fb8; direction: ltr; font-variant-numeric: tabular-nums; }
.ubd-rotation-tools__panel label { display: grid; gap: 5px; color: #52617a; }
.ubd-rotation-tools__panel input { box-sizing: border-box; width: 100%; }
.ubd-rotation-tools__panel input[type="number"] { min-height: 36px; padding: 6px 9px; border: 1px solid #b9c5d6; border-radius: 7px; background: #fff; color: #172b4d; direction: ltr; text-align: center; font: inherit; font-variant-numeric: tabular-nums; }
.ubd-rotation-tools__panel input[type="range"] { height: 24px; margin: 0; accent-color: #4c78dd; cursor: ew-resize; }
.ubd-rotation-tools__panel button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 6px 10px; border: 1px solid #9eb4de; border-radius: 7px; background: #eef4ff; color: #234f9b; font: inherit; cursor: pointer; }
.ubd-rotation-tools__panel button:hover { border-color: #4c78dd; background: #dfe9ff; }
.ubd-rotation-tools__panel :is(input, button):focus-visible { outline: 2px solid #4c78dd; outline-offset: 2px; }