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

/* Defensive compatibility for already-compiled views that still emit the
   legacy visibility marker. Device visibility is resolved before this view
   is rendered, so the universal banner root must never remain display:none. */
.ubd[data-ubd-root].el-hidden {
    display: block;
}

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

.ubd--contained .ubd__container {
    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%;
}

.ubd-region {
    position: relative;
    /* Ratios size the grid tracks, but a taller neighbouring region can grow
       those tracks. Fill the allocated slot instead of leaving space below.
       An explicit width prevents the ratio from widening a stretched item. */
    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);
    /* The Scene owns the selected media background. Keeping the clipping
       Region transparent prevents the site theme from bleeding through the
       anti-aliased edge of rounded transparent Scenes. */
    background: transparent;
    color: var(--element-text, #151515);
    isolation: isolate;
}

/* Editing gives each region its own centered work surface. Public/interact
   mode continues to use the saved page grid. */
.preview-mode-edit .ubd__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.preview-mode-edit .ubd--contained .ubd__container { max-width: none; padding-inline: 12px; box-sizing: border-box; }
.preview-mode-edit .ubd-region { flex: none; width: 100%; max-width: 100%; }
.preview-mode-edit.ubd-editor-single-scene [data-ubd-region]:not(.ubd-editor-active-region),
.preview-mode-edit.ubd-editor-single-scene [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;
    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 {
    /* The shared media-frame stylesheet loads later and defaults frames to
       relative/auto sizing. A Scene already owns geometry through its Region,
       so this layer must stay pinned to that ratio-controlled frame. */
    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__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(10, 15, 24, .18);
    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);
}

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

/*
 * Live-edit overlays may add an inline positioning hint to their host. The
 * crop frame is still owned by the Region and must always fill it; neither an
 * overlay nor intrinsic image/video dimensions may change this geometry.
 */
.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(--media-frame-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;
}

.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%));
    pointer-events: auto;
}

.ubd-layer__text {
    width: 100%;
    /* Rich text starts with the normal document color, not the banner's
       contrasting foreground. Explicit editor colors still take precedence. */
    color: var(--bs-body-color, #212529);
}

/* A banner link uses the entire scene, independently of layer placement.
   Keep breakpoint visibility, but do not let responsive geometry shrink it. */
.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. */
.ubd-layer--image-layer { min-width: 0; min-height: 0; }
.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;
    border: 1px solid var(--element-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;
}

.ubd-button:not(.is-preview-normal):is(:hover, .is-preview-hover) {
    border-color: var(--element-hover-border, var(--element-border));
    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 .15rem;
    border-radius: 9px;
    background: color-mix(in srgb, var(--element-text) 9%, transparent);
}

.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;
    z-index: 90;
    display: var(--ubd-d-display, block);
    border-radius: inherit;
}
.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-radius, 0px); }
.ubd-layer { border-radius: var(--ubd-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: 36px; height: 36px; border: 2px solid #fff; border-radius: 50%; background: #b42332; color: #fff; font-size: 24px; cursor: pointer; }
.ubd-delete-confirm { position: fixed; z-index: 2147483645; display: flex; flex-wrap: wrap; box-sizing: border-box; gap: 10px; padding: 12px; background: #fff; color: #222; border: 1px solid #ddd; border-radius: 8px; direction: rtl; }
.ubd-delete-confirm button { min-height: 36px; padding: 4px 12px; }
.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; }

/* هات‌اسپات یک مختصات نقطه‌ای است؛ اندازهٔ درصدی wrapper باعث اختلاف مرکز
   نشانگر میان قاب پیش‌نمایش و قاب سایت می‌شد. */
.ubd-layer.ubd-layer--hotspot-layer {
    width: 72px;
    height: 72px;
}

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

.ubd-hotspot span {
    position: relative;
    z-index: 2;
    width: 12px;
    height: 12px;
    border-radius: inherit;
    background: 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(--element-accent, #111) 45%, transparent);
}

.ubd-hotspot::before,
.ubd-hotspot::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 30px;
    height: 30px;
    border: 3px solid color-mix(in srgb, var(--element-accent, #111) 88%, white 12%);
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 14px color-mix(in srgb, var(--element-accent, #111) 48%, 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:has(.ubd-layer--hotspot-layer:hover) {
        --ubd-hotspot-spread-level: 7;
        --ubd-hotspot-glow-blur: 28px;
        --ubd-hotspot-glow-spread: 8px;
        --ubd-hotspot-pulse-scale: 3.1;
    }

    .ubd[data-ubd-root] .ubd-scene:has(.ubd-layer--hotspot-hover-focus:hover) .ubd-scene__media-asset {
        filter: blur(2px) brightness(.78) saturate(.9);
    }

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

.ubd-scene--has-hotspots:has(.ubd-layer--hotspot-layer:focus-within) {
    --ubd-hotspot-spread-level: 7;
    --ubd-hotspot-glow-blur: 28px;
    --ubd-hotspot-glow-spread: 8px;
    --ubd-hotspot-pulse-scale: 3.1;
}

.ubd[data-ubd-root] .ubd-scene:has(.ubd-layer--hotspot-hover-focus:focus-within) .ubd-scene__media-asset {
    filter: blur(2px) brightness(.78) saturate(.9);
}

.ubd-scene:has(.ubd-layer--hotspot-hover-focus:focus-within) > .ubd-scene__media::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); }

.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: 8px; padding: 8px;
    box-sizing: border-box; direction: rtl; height: auto; overflow: visible;
    font-size: 13px; line-height: 1.5;
}
.ubd-media-tool-group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ubd-media-tool-group + .ubd-media-tool-group { border-inline-start: 1px solid #ffffff55; padding-inline-start: 8px; }
.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: 8px 12px; border-radius: 6px; background: #17202e; color: #fff;
    direction: rtl; font-size: 13px; line-height: 1.7; 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; padding: 6px; background: #fff; color: #202530; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 20px #0003; direction: rtl; }
.ubd-canvas-menu button { border: 0; background: transparent; color: inherit; padding: 10px 24px; cursor: pointer; font: inherit; }
.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 {
    place-items: center;
    width: 30px;
    height: 30px;
    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);
}

@media (pointer: coarse) {
    .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-layer__text.has-background { width: 100%; height: 100%; padding: .65rem .8rem; border-radius: inherit; background: var(--ubd-text-box-bg, #fff); }
.ubd-button { background: var(--ubd-button-bg, var(--ubd-default-button-bg, var(--element-bg, #fff))); color: var(--ubd-button-text, var(--element-text, #151515)); border-color: var(--ubd-button-border, var(--element-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-button-icon, currentColor); background: var(--ubd-button-icon-bg, var(--ubd-default-icon-bg, transparent)); }
.ubd-button:not(.is-preview-normal):is(:hover, .is-preview-hover) { background: var(--ubd-button-hover-bg, var(--element-hover-bg, var(--ubd-button-bg, var(--element-bg)))); color: var(--ubd-button-hover-text, var(--element-hover-text, var(--ubd-button-text, var(--element-text)))); border-color: var(--ubd-button-hover-border, var(--element-hover-border, var(--ubd-button-border, var(--element-border)))); }
.ubd-button:not(.is-preview-normal):is(:hover, .is-preview-hover) > i { color: var(--ubd-button-hover-icon, var(--ubd-button-icon, currentColor)); background: var(--ubd-button-hover-icon-bg, var(--ubd-button-icon-bg, var(--ubd-default-icon-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-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)));
    }

    .ubd-scene__media-asset {
        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));
    }

    .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-scene-link-overlay { display: var(--ubd-m-display, var(--ubd-t-display, var(--ubd-d-display, block))); }
    .ubd__grid {
        --ubd-columns: var(--ubd-columns-m, var(--ubd-columns-t, var(--ubd-columns-d, 1)));
        --ubd-rows: var(--ubd-rows-m, var(--ubd-rows-t, var(--ubd-rows-d, 1)));
        --ubd-gap: var(--ubd-gap-m, var(--ubd-gap-t, var(--ubd-gap-d, 12px)));
    }

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

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

    .ubd-layer {
        left: var(--ubd-m-left, var(--ubd-t-left, var(--ubd-d-left)));
        right: var(--ubd-m-right, var(--ubd-t-right, var(--ubd-d-right)));
        top: var(--ubd-m-top, var(--ubd-t-top, var(--ubd-d-top)));
        bottom: var(--ubd-m-bottom, var(--ubd-t-bottom, var(--ubd-d-bottom)));
        width: var(--ubd-m-width, var(--ubd-t-width, var(--ubd-d-width)));
        height: var(--ubd-m-height, var(--ubd-t-height, var(--ubd-d-height)));
        z-index: var(--ubd-m-z, var(--ubd-t-z, var(--ubd-d-z)));
        display: var(--ubd-m-display, var(--ubd-t-display, var(--ubd-d-display)));
        transform: translate(var(--ubd-m-tx, var(--ubd-t-tx, var(--ubd-d-tx))), var(--ubd-m-ty, var(--ubd-t-ty, var(--ubd-d-ty))));
    }

    .ubd-scene__media-asset {
        object-position: var(--ubd-focus-x-m, var(--ubd-focus-x-t)) var(--ubd-focus-y-m, var(--ubd-focus-y-t));
        transform: scale(var(--ubd-zoom-m, var(--ubd-zoom-t)));
        transform-origin: var(--ubd-focus-x-m, var(--ubd-focus-x-t)) var(--ubd-focus-y-m, var(--ubd-focus-y-t));
    }

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

@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__media::after,
    .ubd-button {
        transition: none;
    }
}