:root {
    --xy-popup-backdrop: rgba(12, 18, 28, 0.62);
    --xy-popup-panel-bg: linear-gradient(155deg, #fff7eb 0%, #ffffff 42%, #eef5ff 100%);
    --xy-popup-panel-border: rgba(133, 150, 179, 0.28);
    --xy-popup-panel-border-width: 1px;
    --xy-popup-panel-border-style: solid;
    --xy-popup-panel-shadow: 0 30px 80px rgba(16, 28, 44, 0.28);
    --xy-popup-title: #122033;
    --xy-popup-text: #425466;
    --xy-popup-accent-2: #0f5f9a;
    --xy-popup-button-bg: #d35400;
    --xy-popup-button-hover-bg: #ef7d00;
    --xy-popup-button-background: var(--xy-popup-button-bg);
    --xy-popup-button-hover-background: var(--xy-popup-button-hover-bg);
    --xy-popup-button-text: #ffffff;
}

.xycons-animated-popup {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2147483200;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.xycons-animated-popup[data-display="top-banner"] {
    align-items: flex-start;
    padding: 12px;
}

.xycons-animated-popup[data-display="bottom-sheet"] {
    align-items: flex-end;
    padding: 16px;
}

.xycons-animated-popup[data-display="side-left"] {
    justify-content: flex-start;
    padding: 16px;
}

.xycons-animated-popup[data-display="side-right"] {
    justify-content: flex-end;
    padding: 16px;
}

.xycons-animated-popup.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.xycons-animated-popup__backdrop {
    position: absolute;
    inset: 0;
    background: var(--xy-popup-backdrop);
    backdrop-filter: blur(4px);
}

.xycons-animated-popup__panel {
    --xy-popup-hidden-x: 0px;
    --xy-popup-hidden-y: -42px;
    --xy-popup-hidden-scale: 0.96;
    --xy-popup-animation-duration: 560ms;
    --xy-popup-animation-curve: cubic-bezier(0.16, 1, 0.3, 1);
    --xy-popup-opacity-duration-factor: 0.65;
    --xy-popup-hidden-filter: blur(0px);
    --xy-popup-panel-max-width: 760px;
    --xy-popup-panel-max-height: 88vh;
    --xy-popup-panel-radius: 28px;
    --xy-popup-overflow: hidden;
    position: relative;
    width: min(100%, var(--xy-popup-panel-max-width));
    max-height: var(--xy-popup-panel-max-height);
    border-radius: var(--xy-popup-panel-radius);
    border: var(--xy-popup-panel-border-width) var(--xy-popup-panel-border-style) var(--xy-popup-panel-border);
    background: var(--xy-popup-panel-bg);
    box-shadow: var(--xy-popup-panel-shadow);
    padding: 32px 32px 28px;
    overflow: var(--xy-popup-overflow);
    transform: translate3d(var(--xy-popup-hidden-x), var(--xy-popup-hidden-y), 0) scale(var(--xy-popup-hidden-scale));
    opacity: 0;
    filter: var(--xy-popup-hidden-filter);
    transition: transform var(--xy-popup-animation-duration) var(--xy-popup-animation-curve), opacity calc(var(--xy-popup-animation-duration) * var(--xy-popup-opacity-duration-factor)) ease;
}

.xycons-animated-popup[data-display="top-banner"] .xycons-animated-popup__panel {
    width: min(100%, 1180px);
    border-radius: 24px;
}

.xycons-animated-popup[data-display="bottom-sheet"] .xycons-animated-popup__panel {
    width: min(100%, 860px);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.xycons-animated-popup[data-display="side-left"] .xycons-animated-popup__panel,
.xycons-animated-popup[data-display="side-right"] .xycons-animated-popup__panel {
    width: min(100%, 520px);
    min-height: min(82vh, 860px);
}

.xycons-animated-popup[data-size-preset="fullscreen"] {
    padding: 0;
}

.xycons-animated-popup[data-size-preset="fullscreen"] .xycons-animated-popup__panel {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
}

.xycons-animated-popup__panel::before,
.xycons-animated-popup__panel::after {
    content: none;
}

.xycons-animated-popup.is-visible .xycons-animated-popup__panel {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    filter: blur(0px);
}

.xycons-animated-popup[data-animation="drop-top"] .xycons-animated-popup__panel {
    --xy-popup-hidden-x: 0px;
    --xy-popup-hidden-y: -84px;
    --xy-popup-hidden-scale: 0.95;
}

.xycons-animated-popup[data-animation="slide-bottom"] .xycons-animated-popup__panel {
    --xy-popup-hidden-x: 0px;
    --xy-popup-hidden-y: 96px;
    --xy-popup-hidden-scale: 0.97;
}

.xycons-animated-popup[data-animation="slide-left"] .xycons-animated-popup__panel {
    --xy-popup-hidden-x: calc(-100vw - 40px);
    --xy-popup-hidden-y: 0px;
    --xy-popup-hidden-scale: 1;
}

.xycons-animated-popup[data-animation="slide-right"] .xycons-animated-popup__panel {
    --xy-popup-hidden-x: calc(100vw + 40px);
    --xy-popup-hidden-y: 0px;
    --xy-popup-hidden-scale: 1;
}

.xycons-animated-popup[data-animation="fade"] .xycons-animated-popup__panel {
    --xy-popup-hidden-x: 0px;
    --xy-popup-hidden-y: 0px;
    --xy-popup-hidden-scale: 0.98;
}

.xycons-animated-popup[data-animation="zoom-center"] .xycons-animated-popup__panel {
    --xy-popup-hidden-x: 0px;
    --xy-popup-hidden-y: 0px;
    --xy-popup-hidden-scale: 0.01;
    --xy-popup-hidden-filter: blur(6px);
    --xy-popup-animation-curve: cubic-bezier(0.2, 0.75, 0.15, 1);
    --xy-popup-opacity-duration-factor: 1;
    transform-origin: center center;
}

.xycons-animated-popup[data-animation="spin-zoom"] .xycons-animated-popup__panel {
    --xy-popup-hidden-x: 0px;
    --xy-popup-hidden-y: 0px;
    --xy-popup-hidden-scale: 0.06;
    --xy-popup-hidden-filter: blur(4px);
    --xy-popup-animation-curve: cubic-bezier(0.18, 0.82, 0.2, 1);
    --xy-popup-opacity-duration-factor: 1;
    transform-origin: center center;
    transform: translate3d(var(--xy-popup-hidden-x), var(--xy-popup-hidden-y), 0) scale(var(--xy-popup-hidden-scale)) rotate(var(--xy-popup-spin-rotation, -540deg));
}

.xycons-animated-popup.is-visible[data-animation="spin-zoom"] .xycons-animated-popup__panel {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}

.xycons-animated-popup[data-display="top-banner"][data-animation="drop-top"] .xycons-animated-popup__panel,
.xycons-animated-popup[data-display="top-banner"][data-animation="slide-bottom"] .xycons-animated-popup__panel {
    --xy-popup-hidden-x: 0px;
    --xy-popup-hidden-y: -120px;
    --xy-popup-hidden-scale: 0.98;
}

.xycons-animated-popup[data-display="bottom-sheet"][data-animation="slide-bottom"] .xycons-animated-popup__panel,
.xycons-animated-popup[data-display="bottom-sheet"][data-animation="drop-top"] .xycons-animated-popup__panel {
    --xy-popup-hidden-x: 0px;
    --xy-popup-hidden-y: calc(100% + 140px);
    --xy-popup-hidden-scale: 1;
}

.xycons-animated-popup[data-display="side-left"] .xycons-animated-popup__panel {
    --xy-popup-hidden-x: calc(-100% - 64px);
    --xy-popup-hidden-y: 0px;
    --xy-popup-hidden-scale: 1;
}

.xycons-animated-popup[data-display="side-right"] .xycons-animated-popup__panel {
    --xy-popup-hidden-x: calc(100% + 64px);
    --xy-popup-hidden-y: 0px;
    --xy-popup-hidden-scale: 1;
}

.xycons-animated-popup[data-display="side-left"][data-animation="slide-left"] .xycons-animated-popup__panel {
    --xy-popup-hidden-x: calc(-100% - 80px);
}

.xycons-animated-popup[data-display="side-right"][data-animation="slide-right"] .xycons-animated-popup__panel {
    --xy-popup-hidden-x: calc(100% + 80px);
}

.xycons-animated-popup[data-display="modal"][data-animation="slide-left"] .xycons-animated-popup__panel {
    --xy-popup-hidden-x: calc(-100vw - 100%);
}

.xycons-animated-popup[data-display="modal"][data-animation="slide-right"] .xycons-animated-popup__panel {
    --xy-popup-hidden-x: calc(100vw + 100%);
}

.xycons-animated-popup[data-display="modal"][data-animation="slide-bottom"] .xycons-animated-popup__panel {
    --xy-popup-hidden-y: calc(50vh + 100%);
}

.xycons-animated-popup__close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #314152;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.xycons-animated-popup__close:hover,
.xycons-animated-popup__close:focus {
    background: #fff;
    transform: scale(1.05);
}

.xycons-animated-popup__eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--xy-popup-accent-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.xycons-animated-popup__title {
    position: relative;
    margin: 0 48px 14px 0;
    color: var(--xy-popup-title);
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.05;
    font-weight: 800;
}

.xycons-animated-popup__title--left {
    text-align: left;
}

.xycons-animated-popup__title--center {
    text-align: center;
}

.xycons-animated-popup__title--right {
    text-align: right;
}

.xycons-animated-popup__content {
    position: relative;
    color: var(--xy-popup-text);
    font-size: 18px;
    line-height: 1.65;
}

.xycons-animated-popup__content img,
.xycons-animated-popup__content video,
.xycons-animated-popup__content iframe {
    max-width: 100%;
    height: auto;
    border-radius: 18px;
}

.xycons-animated-popup__content iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.xycons-animated-popup__content p:last-child {
    margin-bottom: 0;
}

.xycons-animated-popup__actions {
    position: relative;
    margin-top: 24px;
    display: flex;
}

.xycons-animated-popup__actions--left {
    justify-content: flex-start;
}

.xycons-animated-popup__actions--center {
    justify-content: center;
}

.xycons-animated-popup__actions--right {
    justify-content: flex-end;
}

.xycons-animated-popup__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    padding: 14px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--xy-popup-button-background);
    color: var(--xy-popup-button-text);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 18px 35px rgba(16, 28, 44, 0.24);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.xycons-animated-popup__button:hover,
.xycons-animated-popup__button:focus {
    color: var(--xy-popup-button-text);
    background: var(--xy-popup-button-hover-background);
    transform: translateY(-2px);
    box-shadow: 0 24px 38px rgba(16, 28, 44, 0.30);
}

body.xycons-animated-popup-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .xycons-animated-popup {
        align-items: flex-end;
        padding: 14px;
    }

    .xycons-animated-popup__panel {
        padding: 24px 20px 20px;
        border-radius: 24px;
    }

    .xycons-animated-popup[data-display="top-banner"] .xycons-animated-popup__panel,
    .xycons-animated-popup[data-display="side-left"] .xycons-animated-popup__panel,
    .xycons-animated-popup[data-display="side-right"] .xycons-animated-popup__panel {
        width: 100%;
        min-height: 0;
    }

    .xycons-animated-popup__title {
        margin-right: 38px;
        font-size: 28px;
    }

    .xycons-animated-popup__content {
        font-size: 16px;
        line-height: 1.55;
    }

    .xycons-animated-popup__button {
        width: 100%;
    }

    .xycons-animated-popup[data-display="modal"][data-animation="slide-left"] .xycons-animated-popup__panel,
    .xycons-animated-popup[data-display="modal"][data-animation="slide-right"] .xycons-animated-popup__panel {
        --xy-popup-hidden-x: calc((100vw + 100%) * -1);
    }

    .xycons-animated-popup[data-display="modal"][data-animation="slide-right"] .xycons-animated-popup__panel {
        --xy-popup-hidden-x: calc(100vw + 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .xycons-animated-popup,
    .xycons-animated-popup__panel,
    .xycons-animated-popup__close,
    .xycons-animated-popup__button {
        transition: none;
    }
}