/* Shared Featured Ad package glow, intensity, and corner label. */
.raovat1-featured-effect-card,
.raovat1-featured-effect-option,
[data-active-featured-package-tone],
[data-featured-package-tone] {
    --raovat1-featured-effect-accent: #a955ff;
    --raovat1-featured-effect-accent-strong: #c06bff;
    --raovat1-featured-effect-border-mix: 42%;
    --raovat1-featured-effect-glow-mix: 12%;
    --raovat1-featured-effect-glow-size: 18px;
    --raovat1-featured-effect-corner-size: 18px;
    --raovat1-featured-effect-icon-size: 6px;
    --raovat1-featured-effect-control-glow: 12%;
    --raovat1-featured-active-accent: var(--raovat1-featured-effect-accent);
    --raovat1-featured-active-accent-strong: var(--raovat1-featured-effect-accent-strong);
    --raovat1-featured-active-border-mix: var(--raovat1-featured-effect-border-mix);
    --raovat1-featured-active-glow-mix: var(--raovat1-featured-effect-glow-mix);
    --raovat1-featured-corner-size: var(--raovat1-featured-effect-corner-size);
    --raovat1-featured-star-size: var(--raovat1-featured-effect-icon-size);
    --raovat1-user-featured-tone-accent: var(--raovat1-featured-effect-accent);
    --raovat1-user-featured-tone-strong: var(--raovat1-featured-effect-accent-strong);
    --raovat1-user-featured-tone-border-mix: var(--raovat1-featured-effect-border-mix);
    --raovat1-user-featured-tone-glow-mix: var(--raovat1-featured-effect-glow-mix);
    --raovat1-user-featured-tone-corner-size: var(--raovat1-featured-effect-corner-size);
    --raovat1-user-featured-tone-mark-size: var(--raovat1-featured-effect-icon-size);
}

[data-active-featured-package-tone="basic"],
[data-featured-package-tone="basic"] {
    --raovat1-featured-effect-accent: #a955ff;
    --raovat1-featured-effect-accent-strong: #c06bff;
    --raovat1-featured-effect-border-mix: 42%;
    --raovat1-featured-effect-glow-mix: 12%;
    --raovat1-featured-effect-glow-size: 18px;
    --raovat1-featured-effect-corner-size: 18px;
    --raovat1-featured-effect-icon-size: 6px;
    --raovat1-featured-effect-control-glow: 12%;
}

[data-active-featured-package-tone="premium"],
[data-featured-package-tone="premium"] {
    --raovat1-featured-effect-accent: #b25cff;
    --raovat1-featured-effect-accent-strong: #d166ff;
    --raovat1-featured-effect-border-mix: 60%;
    --raovat1-featured-effect-glow-mix: 24%;
    --raovat1-featured-effect-glow-size: 24px;
    --raovat1-featured-effect-corner-size: 36px;
    --raovat1-featured-effect-icon-size: 8px;
    --raovat1-featured-effect-control-glow: 22%;
}

[data-active-featured-package-tone="vip"],
[data-featured-package-tone="vip"] {
    --raovat1-featured-effect-accent: #d84fff;
    --raovat1-featured-effect-accent-strong: #ff5bff;
    --raovat1-featured-effect-border-mix: 78%;
    --raovat1-featured-effect-glow-mix: 38%;
    --raovat1-featured-effect-glow-size: 32px;
    --raovat1-featured-effect-corner-size: 36px;
    --raovat1-featured-effect-icon-size: 11px;
    --raovat1-featured-effect-control-glow: 34%;
}

.raovat1-featured-effect-card {
    position: relative;
    isolation: isolate;
}

body.raovat1-user-panel-list .raovat1-user-ad-card.raovat1-featured-effect-card--active,
body.raovat1-browse-listings .listivo-listing-card-v4.raovat1-featured-effect-card--active,
body.raovat1-listing-single .raovat1-single-related-grid-source .raovat1-custom-wiget-card.raovat1-featured-effect-card--active,
body.wp-child-theme-raovat1.woocommerce-checkout .raovat1-flux-featured-upsell.raovat1-featured-effect-card--active {
    border-color: color-mix(in srgb, var(--raovat1-featured-effect-accent) var(--raovat1-featured-effect-border-mix), rgba(128, 137, 166, 0.48)) !important;
    box-shadow:
        var(--raovat1-featured-effect-base-shadow, 0 16px 32px rgba(0, 0, 0, 0.28)),
        0 0 0 1px color-mix(in srgb, var(--raovat1-featured-effect-accent) 18%, transparent),
        0 0 var(--raovat1-featured-effect-glow-size) color-mix(in srgb, var(--raovat1-featured-effect-accent) var(--raovat1-featured-effect-glow-mix), transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent) !important;
}

body.raovat1-user-panel-list .raovat1-user-ad-card.raovat1-featured-effect-card--active {
    --raovat1-featured-effect-base-shadow: var(--raovat1-user-inner-shadow), 0 18px 44px rgba(0, 0, 0, 0.28);
}

body.raovat1-user-panel-list .raovat1-user-ad-card.raovat1-featured-effect-card--active::after {
    opacity: 0 !important;
}

body.raovat1-browse-listings .listivo-listing-card-v4.raovat1-featured-effect-card--active {
    --raovat1-featured-effect-base-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

body.raovat1-listing-single .raovat1-single-related-grid-source .raovat1-custom-wiget-card.raovat1-featured-effect-card--active {
    --raovat1-featured-effect-base-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

body.wp-child-theme-raovat1.woocommerce-checkout .raovat1-flux-featured-upsell.raovat1-featured-effect-card--active {
    --raovat1-featured-effect-base-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.raovat1-featured-effect-corner {
    position: absolute !important;
    top: -1px !important;
    right: -1px !important;
    z-index: 8 !important;
    display: block !important;
    width: var(--raovat1-featured-effect-corner-size) !important;
    height: var(--raovat1-featured-effect-corner-size) !important;
    overflow: hidden !important;
    color: #fff !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.9) !important;
    transform-origin: top right !important;
    transition: opacity 160ms ease, transform 160ms ease !important;
}

.raovat1-featured-effect-card--active > .raovat1-featured-effect-corner,
.raovat1-featured-effect-card--active .raovat1-featured-effect-corner {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.raovat1-featured-effect-corner::before,
.raovat1-featured-effect-corner::after {
    content: "" !important;
    position: absolute !important;
    pointer-events: none !important;
}

.raovat1-featured-effect-corner::before {
    inset: 0 !important;
    width: var(--raovat1-featured-effect-corner-size) !important;
    height: var(--raovat1-featured-effect-corner-size) !important;
    background: linear-gradient(
        135deg,
        var(--raovat1-featured-effect-accent-strong),
        color-mix(in srgb, var(--raovat1-featured-effect-accent) 56%, transparent)
    ) !important;
    clip-path: polygon(100% 0, 0 0, 100% 100%) !important;
    filter: drop-shadow(-5px 6px 12px color-mix(in srgb, var(--raovat1-featured-effect-accent) 32%, transparent)) !important;
}

.raovat1-featured-effect-corner::after {
    top: calc(var(--raovat1-featured-effect-corner-size) * 0.16) !important;
    right: calc(var(--raovat1-featured-effect-corner-size) * 0.16) !important;
    width: var(--raovat1-featured-effect-icon-size) !important;
    height: var(--raovat1-featured-effect-icon-size) !important;
    background: #fff !important;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%) !important;
    filter:
        drop-shadow(0 1px 2px color-mix(in srgb, #fff 34%, transparent))
        drop-shadow(0 0 5px color-mix(in srgb, var(--raovat1-featured-effect-accent) 50%, transparent)) !important;
    opacity: 0 !important;
}

.raovat1-featured-effect-card--active[data-active-featured-package-tone="vip"] > .raovat1-featured-effect-corner::after,
.raovat1-featured-effect-card--active[data-active-featured-package-tone="vip"] .raovat1-featured-effect-corner::after {
    opacity: 1 !important;
}

.raovat1-featured-effect-corner > svg {
    display: none !important;
}

.raovat1-featured-effect-option {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.raovat1-featured-effect-option[data-featured-package-tone].is-active,
.raovat1-featured-effect-option[data-featured-package-tone].raovat1-user-ad-card__featured-package--active {
    color: var(--raovat1-featured-effect-accent-strong) !important;
    -webkit-text-fill-color: var(--raovat1-featured-effect-accent-strong) !important;
    border-color: color-mix(in srgb, var(--raovat1-featured-effect-accent) var(--raovat1-featured-effect-border-mix), transparent) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
        0 0 14px color-mix(in srgb, var(--raovat1-featured-effect-accent) var(--raovat1-featured-effect-control-glow), transparent) !important;
}

body.raovat1-user-panel-list .raovat1-user-ad-card__featured-details[open] .raovat1-user-ad-card__featured-form {
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.raovat1-user-panel-list .raovat1-user-ad-card__featured-details[open] .raovat1-user-ad-card__featured-form::before,
body.raovat1-user-panel-list .raovat1-user-ad-card__featured-details[open] .raovat1-user-ad-card__featured-form::after {
    content: none !important;
    display: none !important;
}

body.raovat1-user-panel-list .raovat1-user-ad-card__featured-package.raovat1-featured-effect-option::before {
    content: none !important;
    display: none !important;
}

body.raovat1-user-panel-list .raovat1-user-ad-card__featured-form[data-active-featured-package-tone] .raovat1-user-ad-card__featured-price,
body.raovat1-user-panel-list .raovat1-user-ad-card__featured-form[data-active-featured-package-tone] .raovat1-user-ad-card__featured-go,
body.wp-child-theme-raovat1.woocommerce-checkout .raovat1-flux-featured-upsell__price,
body.wp-child-theme-raovat1.woocommerce-checkout .raovat1-flux-featured-upsell__add-button {
    border-color: color-mix(in srgb, var(--raovat1-featured-effect-accent) 58%, transparent) !important;
    box-shadow: 0 0 12px color-mix(in srgb, var(--raovat1-featured-effect-accent) 18%, transparent) !important;
}

@media (min-width: 768px) {
    [data-active-featured-package-tone="basic"],
    [data-featured-package-tone="basic"] {
        --raovat1-featured-effect-corner-size: 22px;
        --raovat1-featured-effect-icon-size: 7px;
    }

    [data-active-featured-package-tone="premium"],
    [data-featured-package-tone="premium"] {
        --raovat1-featured-effect-corner-size: 44px;
        --raovat1-featured-effect-icon-size: 10px;
    }

    [data-active-featured-package-tone="vip"],
    [data-featured-package-tone="vip"] {
        --raovat1-featured-effect-corner-size: 44px;
        --raovat1-featured-effect-icon-size: 13px;
    }
}