.sidebar-template-banner {
    --pointer-x: 50%;
    --pointer-y: 50%;
    --banner-tilt-x: 0deg;
    --banner-tilt-y: 0deg;
    background: #071a3a;
    border: 1px solid rgba(96, 165, 250, .34);
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .24);
    color: #fff;
    isolation: isolate;
    overflow: hidden;
    position: relative;
    transform: perspective(720px) rotateX(var(--banner-tilt-x)) rotateY(var(--banner-tilt-y)) translateZ(0);
    transform-style: preserve-3d;
    transition: box-shadow .24s ease, transform .24s ease;
}

.sidebar-template-banner:hover,
.sidebar-template-banner:focus-within {
    box-shadow: 0 18px 42px rgba(37, 99, 235, .32), 0 0 0 2px rgba(96, 165, 250, .18);
    transform: perspective(720px) rotateX(var(--banner-tilt-x)) rotateY(var(--banner-tilt-y)) translateY(-5px) scale(1.012);
}

.sidebar-template-banner--inquiry {
    background: linear-gradient(150deg, #3b0764 0%, #6d174f 52%, #9a3412 100%);
    border-color: rgba(251, 146, 60, .42);
}

.sidebar-template-banner__media {
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.sidebar-template-banner__media img {
    display: block;
    height: auto;
    max-width: 100%;
    transition: filter .3s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
    width: 100%;
}

.sidebar-template-banner:hover .sidebar-template-banner__media img,
.sidebar-template-banner:focus-within .sidebar-template-banner__media img {
    filter: saturate(1.08) contrast(1.03);
    transform: scale(1.025);
}

.sidebar-template-banner__shine {
    background: linear-gradient(112deg, transparent 28%, rgba(255, 255, 255, .32) 47%, transparent 66%);
    inset: 0;
    pointer-events: none;
    position: absolute;
    transform: translateX(-120%);
}

.sidebar-template-banner:hover .sidebar-template-banner__shine,
.sidebar-template-banner:focus-within .sidebar-template-banner__shine {
    animation: sidebar-banner-shine 1.05s ease-out;
}

.sidebar-template-banner__body {
    background: linear-gradient(180deg, rgba(7, 26, 58, .96), rgba(3, 12, 31, .99));
    padding: 15px;
    position: relative;
    text-align: left;
    z-index: 4;
}

.sidebar-template-banner--inquiry .sidebar-template-banner__body {
    background: linear-gradient(180deg, rgba(76, 5, 72, .96), rgba(38, 4, 44, .99));
}

.sidebar-template-banner__badge {
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    color: #bfdbfe;
    display: inline-block;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .09em;
    margin-bottom: 8px;
    padding: 4px 8px;
}

.sidebar-template-banner--inquiry .sidebar-template-banner__badge { color: #fed7aa; }

.sidebar-template-banner__body h3 {
    color: #fff;
    font-size: 1.03rem;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 6px;
}

.sidebar-template-banner__body p {
    color: rgba(226, 232, 240, .86);
    font-size: .78rem;
    line-height: 1.55;
    margin: 0 0 12px;
}

.sidebar-template-banner__protected-form { margin: 0; }

.sidebar-template-banner__protected-action {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    min-height: 44px;
    outline: none;
    overflow: hidden;
}

.sidebar-template-banner__protected-action:focus-visible {
    box-shadow: 0 0 0 3px rgba(125, 211, 252, .28);
}

.sidebar-template-banner__protected-default,
.sidebar-template-banner__protected-loading,
.sidebar-template-banner__protected-error {
    align-items: center;
    color: rgba(226, 232, 240, .9);
    display: flex;
    font-size: .72rem;
    gap: 8px;
    justify-content: center;
    line-height: 1.35;
    min-height: 42px;
    padding: 8px 10px;
    text-align: center;
}

.sidebar-template-banner__protected-loading { color: #bfdbfe; }
.sidebar-template-banner__protected-error { color: #fecaca; }
.sidebar-template-banner__protected-action.is-loading .sidebar-template-banner__protected-default,
.sidebar-template-banner__protected-action.is-prepared .sidebar-template-banner__protected-default,
.sidebar-template-banner__protected-action.is-error .sidebar-template-banner__protected-default { display: none; }

.sidebar-template-banner__cta {
    align-items: center;
    appearance: none;
    background: linear-gradient(100deg, #2563eb, #7c3aed);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .3);
    color: #fff !important;
    cursor: pointer;
    display: flex;
    font-size: .82rem;
    font-weight: 800;
    gap: 7px;
    justify-content: center;
    line-height: 1.2;
    min-height: 42px;
    padding: 10px 12px;
    text-decoration: none !important;
    transition: box-shadow .2s ease, filter .2s ease, transform .2s ease;
    width: 100%;
}

.sidebar-template-banner--inquiry .sidebar-template-banner__cta {
    background: linear-gradient(100deg, #f97316, #ec4899);
    box-shadow: 0 8px 18px rgba(236, 72, 153, .28);
}

.sidebar-template-banner__cta:hover,
.sidebar-template-banner__cta:focus-visible {
    box-shadow: 0 10px 24px rgba(96, 165, 250, .42);
    filter: brightness(1.08);
    outline: none;
    transform: translateY(-1px) scale(1.015);
}

.sidebar-template-banner__cta--disabled {
    background: #475569;
    box-shadow: none;
    cursor: not-allowed;
    opacity: .72;
}

.sidebar-template-banner__lock {
    background: #86efac;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(134, 239, 172, .9);
    color: transparent;
    height: 7px;
    width: 7px;
}

.sidebar-template-banner__effect-layer {
    background: transparent;
    inset: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    mix-blend-mode: normal;
    transition: opacity .16s ease;
    z-index: 6;
}

[data-banner-effect].is-pointer-active .sidebar-template-banner__effect-layer { opacity: 1; }

[data-banner-effect]:not([data-banner-effect="none"])::after {
    border: 2px solid rgba(125, 211, 252, .72);
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26);
    content: "";
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity .16s ease, border-color .2s ease, box-shadow .2s ease;
    z-index: 9;
}

[data-banner-effect]:not([data-banner-effect="none"]).is-pointer-active::after {
    opacity: .88;
}

.sidebar-effect--sparkle .sidebar-template-banner__effect-layer {
    background:
        radial-gradient(circle at var(--pointer-x) var(--pointer-y), #fff 0 2px, #67e8f9 2.5px 3.5px, transparent 4px),
        radial-gradient(circle at 18% 24%, #fff 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 78% 38%, #fde047 0 2px, transparent 3px),
        radial-gradient(circle at 62% 76%, #f9a8d4 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 31% 58%, #7dd3fc 0 1.5px, transparent 2.5px);
}
.sidebar-effect--sparkle.is-pointer-active .sidebar-template-banner__effect-layer {
    animation: sidebar-banner-sparkle-layer .8s ease-in-out infinite alternate;
}
.sidebar-effect--sparkle.is-pointer-active::after {
    border-color: rgba(103, 232, 249, .88);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 0 12px rgba(56, 189, 248, .3);
}

.sidebar-effect--confetti .sidebar-template-banner__effect-layer {
    background: transparent;
}
.sidebar-effect--confetti.is-pointer-active::after {
    animation: sidebar-banner-confetti-border .65s steps(2, end) infinite alternate;
    border-color: #fb923c;
    box-shadow: inset 0 0 0 1px rgba(253, 224, 71, .38), 0 0 13px rgba(236, 72, 153, .28);
}

.sidebar-effect--glow.is-pointer-active {
    animation: sidebar-banner-glow 1.15s ease-in-out infinite;
}
.sidebar-effect--glow .sidebar-template-banner__effect-layer {
    background: linear-gradient(135deg, rgba(59, 130, 246, .08), rgba(168, 85, 247, .14));
    box-shadow: inset 0 0 36px rgba(96, 165, 250, .3), inset 0 0 18px rgba(192, 132, 252, .22);
}
.sidebar-effect--glow .sidebar-template-banner__effect-layer::before,
.sidebar-effect--glow .sidebar-template-banner__effect-layer::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), rgba(103, 232, 249, .7), transparent);
    content: "";
    height: 180%;
    left: -65%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: -40%;
    transform: rotate(18deg);
    width: 34%;
}
.sidebar-effect--glow .sidebar-template-banner__effect-layer::after {
    animation-delay: .48s;
    width: 16%;
}
.sidebar-effect--glow.is-pointer-active .sidebar-template-banner__effect-layer::before,
.sidebar-effect--glow.is-pointer-active .sidebar-template-banner__effect-layer::after {
    animation: sidebar-banner-neon-scan 1.35s ease-in-out infinite;
}
.sidebar-effect--glow.is-pointer-active::after {
    animation: sidebar-banner-border-flow .9s ease-in-out infinite alternate;
}

.sidebar-effect--pulse.is-pointer-active .sidebar-template-banner__effect-layer {
    animation: sidebar-banner-surface-pulse .72s ease-in-out infinite alternate;
    background: linear-gradient(135deg, rgba(96, 165, 250, .1), rgba(255, 255, 255, .035));
    box-shadow: inset 0 0 26px rgba(96, 165, 250, .18);
}
.sidebar-effect--pulse .sidebar-template-banner__effect-layer::before,
.sidebar-effect--pulse .sidebar-template-banner__effect-layer::after {
    border: 2px solid rgba(147, 197, 253, .9);
    border-radius: 14px;
    content: "";
    inset: 10px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
}
.sidebar-effect--pulse .sidebar-template-banner__effect-layer::after {
    border-color: rgba(255, 255, 255, .88);
    inset: 24px;
}
.sidebar-effect--pulse.is-pointer-active .sidebar-template-banner__effect-layer::before {
    animation: sidebar-banner-ring-pulse 1.05s ease-out infinite;
}
.sidebar-effect--pulse.is-pointer-active .sidebar-template-banner__effect-layer::after {
    animation: sidebar-banner-ring-pulse 1.05s .28s ease-out infinite;
}
.sidebar-effect--pulse.is-pointer-active::after {
    animation: sidebar-banner-pulse-border .8s ease-in-out infinite alternate;
}

.sidebar-banner-particle {
    --dx: 0px;
    --dy: -30px;
    --particle-color: #fff;
    --particle-size: 6px;
    background: var(--particle-color);
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(255, 255, 255, .9), 0 0 7px var(--particle-color);
    height: var(--particle-size);
    left: var(--particle-x);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: var(--particle-y);
    transform: translate(-50%, -50%);
    width: var(--particle-size);
    z-index: 12;
    animation: sidebar-banner-particle var(--particle-duration, 1s) cubic-bezier(.18, .68, .27, 1) forwards;
}

.sidebar-banner-particle--confetti {
    border-radius: 2px;
    box-shadow: none;
    height: calc(var(--particle-size) * 1.8);
    outline: 1px solid rgba(255, 255, 255, .28);
    width: calc(var(--particle-size) * .68);
    animation-name: sidebar-banner-confetti;
    animation-duration: var(--particle-duration, 1.25s);
}

.sidebar-banner-particle--sparkle {
    border-radius: 0;
    clip-path: polygon(50% 0, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 36%);
    filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px var(--particle-color));
}

@keyframes sidebar-banner-shine {
    from { transform: translateX(-120%); }
    to { transform: translateX(120%); }
}

@keyframes sidebar-banner-pulse {
    0%, 100% { box-shadow: 0 14px 34px rgba(37, 99, 235, .25); transform: scale(1); }
    50% { box-shadow: 0 20px 54px rgba(96, 165, 250, .62), 0 0 0 5px rgba(96, 165, 250, .16); transform: scale(1.014); }
}

@keyframes sidebar-banner-surface-pulse {
    from { filter: brightness(1); opacity: .64; }
    to { filter: brightness(1.32) saturate(1.25); opacity: 1; }
}

@keyframes sidebar-banner-neon-scan {
    0% { left: -65%; opacity: 0; }
    18% { opacity: .95; }
    70% { opacity: .78; }
    100% { left: 130%; opacity: 0; }
}

@keyframes sidebar-banner-ring-pulse {
    0% { opacity: 0; transform: scale(.82); }
    18% { opacity: 1; }
    72% { opacity: .72; }
    100% { opacity: 0; transform: scale(1.1); }
}

@keyframes sidebar-banner-glow {
    0%, 100% { box-shadow: 0 15px 38px rgba(37, 99, 235, .28), 0 0 0 1px rgba(96, 165, 250, .14); }
    50% { box-shadow: 0 22px 58px rgba(59, 130, 246, .58), 0 0 30px rgba(168, 85, 247, .42), 0 0 0 3px rgba(125, 211, 252, .2); }
}

@keyframes sidebar-banner-sparkle-layer {
    from { filter: brightness(.9); opacity: .72; }
    to { filter: brightness(1.35); opacity: 1; }
}

@keyframes sidebar-banner-confetti-border {
    from { border-color: #fb923c; }
    to { border-color: #f472b6; }
}

@keyframes sidebar-banner-pulse-border {
    from { border-color: rgba(147, 197, 253, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
    to { border-color: rgba(255, 255, 255, .95); box-shadow: inset 0 0 18px rgba(96, 165, 250, .22), 0 0 18px rgba(96, 165, 250, .35); }
}

@keyframes sidebar-banner-border-flow {
    from {
        border-color: rgba(103, 232, 249, .75);
        box-shadow: inset 0 0 18px rgba(103, 232, 249, .2), 0 0 18px rgba(59, 130, 246, .34);
    }
    to {
        border-color: rgba(249, 168, 212, .95);
        box-shadow: inset 0 0 34px rgba(168, 85, 247, .3), 0 0 34px rgba(236, 72, 153, .48);
    }
}

@keyframes sidebar-banner-particle {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(.1); }
    12% { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1.35); }
    62% { opacity: 1; transform: translate(calc(-50% + var(--dx-mid)), calc(-50% + var(--dy-mid))) rotate(135deg) scale(.9); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--particle-rotate)) scale(.18); }
}

@keyframes sidebar-banner-confetti {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(.55); }
    8% { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
    78% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--particle-rotate)) scale(.92); }
}

@media (prefers-reduced-motion: reduce) {
    [data-banner-effect],
    [data-banner-effect] *,
    [data-banner-effect] *::before,
    [data-banner-effect] *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
    .sidebar-template-banner:hover,
    .sidebar-template-banner:focus-within { transform: none; }
    .sidebar-template-banner:hover .sidebar-template-banner__media img,
    .sidebar-template-banner:focus-within .sidebar-template-banner__media img { transform: none; }
    [data-banner-effect].is-pointer-active .sidebar-template-banner__effect-layer { opacity: .55; }
    [data-banner-effect]:not([data-banner-effect="none"]).is-pointer-active::after {
        animation: none !important;
        opacity: .8;
    }
    [data-banner-effect] .sidebar-banner-particle {
        animation: none !important;
        opacity: 1 !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }
    .sidebar-effect--glow.is-pointer-active .sidebar-template-banner__effect-layer::before {
        animation: none !important;
        left: 18%;
        opacity: .78;
    }
    .sidebar-effect--glow.is-pointer-active .sidebar-template-banner__effect-layer::after {
        animation: none !important;
        left: 62%;
        opacity: .58;
    }
    .sidebar-effect--pulse.is-pointer-active .sidebar-template-banner__effect-layer::before,
    .sidebar-effect--pulse.is-pointer-active .sidebar-template-banner__effect-layer::after {
        animation: none !important;
        opacity: .86;
        transform: none !important;
    }
}
