.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;
    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;
}

.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-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 {
    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[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__poster-probe {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ubd-scene__layers {
    z-index: 3;
    pointer-events: none;
}

.ubd-layer {
    position: absolute;
    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%;
    color: var(--element-text, #fff);
}

.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: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 {
    background: transparent;
}

.ubd-hotspot {
    position: relative;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .24);
}

.ubd-hotspot::before,
.ubd-hotspot span {
    width: 9px;
    height: 9px;
    border-radius: inherit;
    background: var(--element-accent, #111);
}

.ubd-hotspot::before {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    background: rgba(255, 255, 255, .45);
    animation: ubd-hotspot-pulse 1.8s infinite;
}

.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;
}

.ubd-scene.is-crop-editing .ubd-crop-box { display: block; }
.ubd-scene.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 {
    color: var(--element-text, #fff);
}

.ubd-slider .swiper-pagination-bullet {
    background: var(--element-text, #fff);
}

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

.preview-mode-edit .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__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: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
}

.preview-mode-edit .ubd-layer {
    outline: 1px dashed rgba(255, 255, 255, .8);
    touch-action: none;
}

.preview-mode-edit .ubd-layer__drag-handle {
    position: absolute;
    top: -13px;
    right: -13px;
    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;
}

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

@media (max-width: 991.98px) {
    .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__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%, 100% { opacity: .2; transform: scale(.7); }
    50% { opacity: 0; transform: scale(1.8); }
}

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

    .ubd-scene__placeholder,
    .ubd-scene__media-asset,
    .ubd-button {
        transition: none;
    }
}