.rp-vip-membership-card {
    --rp-vip-membership-card-ratio-h: clamp(164px, 44.8vw, 188px);
    --rp-vip-membership-card-frame-pad: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ow_dnd_widget.dashboard-MEMBERSHIP_CMP_MyMembershipWidget,
.ow_dnd_widget.profile-MEMBERSHIP_CMP_UserMembershipWidget,
.owm_dnd_widget.dashboard-MEMBERSHIP_CMP_MyMembershipWidget,
.owm_dnd_widget.profile-MEMBERSHIP_CMP_UserMembershipWidget {
    margin: 0 0 12px !important;
    box-sizing: border-box !important;
}

@media (max-width: 900px) {
    .owm_dnd_widget.dashboard-MEMBERSHIP_CMP_MyMembershipWidget {
        margin-bottom: 18px !important;
    }

    .ow_dnd_widget.dashboard-MEMBERSHIP_CMP_MyMembershipWidget .rp-vip-membership-card,
    .ow_dnd_widget.profile-MEMBERSHIP_CMP_UserMembershipWidget .rp-vip-membership-card,
    .owm_dnd_widget.dashboard-MEMBERSHIP_CMP_MyMembershipWidget .rp-vip-membership-card,
    .owm_dnd_widget.profile-MEMBERSHIP_CMP_UserMembershipWidget .rp-vip-membership-card {
        --rp-vip-membership-card-ratio-h: clamp(162px, 42vw, 176px);
        --rp-vip-membership-card-frame-pad: 10px;
    }

    .ow_dnd_widget.dashboard-MEMBERSHIP_CMP_MyMembershipWidget .rp-vip-membership-card__content,
    .ow_dnd_widget.profile-MEMBERSHIP_CMP_UserMembershipWidget .rp-vip-membership-card__content,
    .owm_dnd_widget.dashboard-MEMBERSHIP_CMP_MyMembershipWidget .rp-vip-membership-card__content,
    .owm_dnd_widget.profile-MEMBERSHIP_CMP_UserMembershipWidget .rp-vip-membership-card__content {
        padding-top: 15px;
        padding-bottom: 13px;
    }

    .ow_dnd_widget.dashboard-MEMBERSHIP_CMP_MyMembershipWidget .rp-vip-membership-card__title,
    .ow_dnd_widget.profile-MEMBERSHIP_CMP_UserMembershipWidget .rp-vip-membership-card__title,
    .owm_dnd_widget.dashboard-MEMBERSHIP_CMP_MyMembershipWidget .rp-vip-membership-card__title,
    .owm_dnd_widget.profile-MEMBERSHIP_CMP_UserMembershipWidget .rp-vip-membership-card__title {
        margin-top: 7px;
        padding-bottom: 2px;
    }

    .ow_dnd_widget.dashboard-MEMBERSHIP_CMP_MyMembershipWidget .rp-vip-membership-card__expires,
    .ow_dnd_widget.profile-MEMBERSHIP_CMP_UserMembershipWidget .rp-vip-membership-card__expires,
    .owm_dnd_widget.dashboard-MEMBERSHIP_CMP_MyMembershipWidget .rp-vip-membership-card__expires,
    .owm_dnd_widget.profile-MEMBERSHIP_CMP_UserMembershipWidget .rp-vip-membership-card__expires {
        margin-top: 13px;
    }

    .owm_dnd_widget.profile-MEMBERSHIP_CMP_UserMembershipWidget {
        margin-top: 14px !important;
    }
}

/* Legacy global card rules still use !important on .ow_box/.owm_box; this reset is scoped only to the VIP membership wrappers. */
.ow_box.dashboard-MEMBERSHIP_CMP_MyMembershipWidget,
.ow_box.profile-MEMBERSHIP_CMP_UserMembershipWidget,
.owm_box.dashboard-MEMBERSHIP_CMP_MyMembershipWidget,
.owm_box.profile-MEMBERSHIP_CMP_UserMembershipWidget {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ow_box_cap:has(+ .ow_box.dashboard-MEMBERSHIP_CMP_MyMembershipWidget),
.ow_dnd_widget.profile-MEMBERSHIP_CMP_UserMembershipWidget > .ow_box_cap,
.ow_dnd_widget.profile-MEMBERSHIP_CMP_UserMembershipWidget > .ow_box_cap_empty {
    display: none !important;
}

.ow_box.dashboard-MEMBERSHIP_CMP_MyMembershipWidget .ow_box_body,
.ow_box.profile-MEMBERSHIP_CMP_UserMembershipWidget .ow_box_body,
.owm_box.dashboard-MEMBERSHIP_CMP_MyMembershipWidget .owm_box_body,
.owm_box.profile-MEMBERSHIP_CMP_UserMembershipWidget .owm_box_body,
.ow_box.dashboard-MEMBERSHIP_CMP_MyMembershipWidget .ow_box_body_cont,
.ow_box.profile-MEMBERSHIP_CMP_UserMembershipWidget .ow_box_body_cont,
.owm_box.dashboard-MEMBERSHIP_CMP_MyMembershipWidget .owm_box_body_cont,
.owm_box.profile-MEMBERSHIP_CMP_UserMembershipWidget .owm_box_body_cont,
.ow_box.dashboard-MEMBERSHIP_CMP_MyMembershipWidget .ow_box_padding,
.ow_box.profile-MEMBERSHIP_CMP_UserMembershipWidget .ow_box_padding,
.owm_box.dashboard-MEMBERSHIP_CMP_MyMembershipWidget .owm_box_padding,
.owm_box.profile-MEMBERSHIP_CMP_UserMembershipWidget .owm_box_padding {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.rp-vip-membership-card__frame {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    height: var(--rp-vip-membership-card-ratio-h);
    min-height: 0;
    padding: var(--rp-vip-membership-card-frame-pad);
    overflow: hidden;
    border: 1px solid rgba(218, 178, 104, 0.68);
    border-radius: 26px;
    background:
        linear-gradient(118deg, rgba(219, 183, 108, 0.12) 0%, transparent 18%, transparent 69%, rgba(146, 91, 28, 0.11) 100%),
        radial-gradient(ellipse 118% 86% at 50% -36%, rgba(218, 171, 88, 0.22) 0%, rgba(149, 92, 28, 0.11) 36%, transparent 74%),
        radial-gradient(ellipse 96% 62% at 50% 118%, rgba(126, 78, 26, 0.16) 0%, transparent 68%),
        linear-gradient(168deg, rgba(32, 26, 17, 0.99) 0%, rgba(7, 7, 7, 1) 46%, rgba(22, 17, 11, 0.99) 100%);
    box-shadow:
        0 0 0 1px rgba(91, 50, 9, 0.92) inset,
        0 0 0 2px rgba(221, 178, 98, 0.13) inset,
        0 0 22px rgba(160, 104, 38, 0.10),
        0 28px 52px rgba(0, 0, 0, 0.52);
    background-size: 220% 100%, 120% 100%, 120% 100%, 100% 100%;
}

.rp-vip-membership-card__frame::before,
.rp-vip-membership-card__frame::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.rp-vip-membership-card__frame::before {
    inset: 10px;
    z-index: 0;
    border: 1px solid rgba(218, 178, 104, 0.30);
    border-radius: 18px;
    background:
        linear-gradient(103deg, transparent 0%, rgba(218, 176, 98, 0.09) 28%, rgba(232, 194, 118, 0.23) 50%, rgba(151, 92, 31, 0.08) 72%, transparent 100%),
        linear-gradient(90deg, transparent 0%, rgba(225, 187, 112, 0.11) 12%, transparent 22%, transparent 78%, rgba(225, 187, 112, 0.11) 88%, transparent 100%),
        radial-gradient(ellipse 74% 48% at 50% 0%, rgba(218, 170, 86, 0.07) 0%, transparent 70%);
    box-shadow:
        0 0 40px rgba(143, 92, 31, 0.11) inset,
        0 1px 0 rgba(231, 198, 133, 0.16) inset;
    opacity: 0.82;
    background-size: 260% 100%, 100% 100%, 120% 100%;
}

.rp-vip-membership-card__frame::after {
    top: 20px;
    left: 50%;
    z-index: 0;
    width: min(62%, 360px);
    height: 1px;
    transform: translateX(-50%) scaleX(0.9);
    transform-origin: 50% 50%;
    background: linear-gradient(90deg, transparent 0%, rgba(198, 151, 78, 0.42) 22%, rgba(230, 195, 120, 0.58) 50%, rgba(198, 151, 78, 0.42) 78%, transparent 100%);
    box-shadow:
        0 0 14px rgba(156, 104, 42, 0.18),
        0 0 22px rgba(218, 178, 104, 0.07);
    opacity: 0.62;
}

.rp-vip-membership-card__content::before,
.rp-vip-membership-card__content::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.rp-vip-membership-card__content::before {
    inset: 0;
    z-index: 0;
    border: 1px solid rgba(220, 178, 104, 0.24);
    border-radius: inherit;
    background:
        linear-gradient(115deg, transparent 0%, rgba(225, 187, 112, 0.09) 16%, transparent 30%, transparent 70%, rgba(176, 111, 38, 0.08) 84%, transparent 100%),
        linear-gradient(90deg, rgba(205, 158, 82, 0.14) 0%, transparent 11%, transparent 89%, rgba(205, 158, 82, 0.14) 100%);
    background-size: 260% 100%, 100% 100%;
    box-shadow:
        inset 0 0 0 1px rgba(86, 58, 24, 0.58),
        inset 0 0 22px rgba(151, 94, 31, 0.10),
        0 0 18px rgba(151, 94, 31, 0.06);
    opacity: 0.72;
    animation: rpVipMembershipFrameGlimmer 24s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.rp-vip-membership-card__content::after {
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background:
        linear-gradient(108deg, transparent 0%, transparent 34%, rgba(255, 236, 184, 0.00) 41%, rgba(255, 236, 184, 0.20) 48%, rgba(174, 116, 48, 0.075) 54%, transparent 64%, transparent 100%),
        linear-gradient(128deg, transparent 0%, transparent 48%, rgba(236, 203, 139, 0.00) 52%, rgba(236, 203, 139, 0.115) 58%, rgba(255, 242, 205, 0.16) 61%, transparent 70%, transparent 100%),
        radial-gradient(ellipse 62% 46% at 50% 54%, rgba(221, 173, 95, 0.040) 0%, rgba(221, 173, 95, 0.020) 34%, transparent 74%),
        linear-gradient(112deg, transparent 0%, rgba(225, 196, 135, 0.00) 24%, rgba(225, 196, 135, 0.105) 46%, rgba(172, 112, 44, 0.045) 56%, transparent 78%, transparent 100%),
        radial-gradient(ellipse 72% 58% at 50% 56%, rgba(194, 139, 62, 0.024) 0%, transparent 74%);
    background-size: 270% 100%, 230% 100%, 128% 128%, 320% 100%, 130% 130%;
    background-position: -170% 50%, 135% 50%, 48% 53%, -90% 50%, 48% 52%;
    background-repeat: no-repeat;
    opacity: 0.76;
    animation: rpVipMembershipCardSurfaceShimmer 18s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.rp-vip-membership-card__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    padding: 18px 16px 16px;
    text-align: center;
    border: 1px solid rgba(255, 221, 143, 0.25);
    border-radius: 18px;
    background:
        radial-gradient(ellipse 82% 72% at 50% 0%, rgba(218, 170, 86, 0.10) 0%, rgba(139, 89, 31, 0.035) 40%, transparent 66%),
        radial-gradient(ellipse 70% 58% at 50% 54%, rgba(184, 125, 50, 0.020) 0%, rgba(114, 72, 25, 0.014) 46%, transparent 76%),
        linear-gradient(110deg, rgba(224, 194, 131, 0.025) 0%, transparent 22%, transparent 74%, rgba(139, 84, 29, 0.028) 100%),
        linear-gradient(180deg, rgba(23, 19, 13, 0.92) 0%, rgba(6, 6, 6, 0.97) 100%);
    box-shadow:
        inset 0 1px 0 rgba(225, 196, 135, 0.15),
        inset 0 -18px 34px rgba(0, 0, 0, 0.30),
        inset 0 0 34px rgba(139, 84, 29, 0.045),
        0 0 24px rgba(139, 84, 29, 0.07);
    background-size: 120% 120%, 130% 130%, 220% 100%, 100% 100%;
    animation: rpVipMembershipInnerPulse 13s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.rp-vip-membership-card__label,
.rp-vip-membership-card__title,
.rp-vip-membership-card__divider,
.rp-vip-membership-card__expires {
    position: relative;
    z-index: 1;
}

.rp-vip-membership-card__label {
    display: block;
    width: 100%;
    margin: 0;
    padding-left: 0.12em;
    color: rgba(255, 232, 172, 0.86);
    font-size: 12px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-align: center;
    text-transform: uppercase;
    text-shadow:
        0 0 10px rgba(232, 184, 92, 0.10),
        0 1px 4px rgba(0, 0, 0, 0.55);
}

.rp-vip-membership-card__title {
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    margin: 10px auto 0;
    padding: 0 0 14px 0.075em;
    box-sizing: border-box;
    color: transparent;
    font-family: Impact, "Arial Black", "Helvetica Neue Condensed Black", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(50px, 13.4vw, 66px);
    font-stretch: condensed;
    font-weight: 900;
    line-height: 0.82;
    letter-spacing: 0.075em;
    text-align: center;
    text-transform: uppercase;
    background:
        linear-gradient(
            180deg,
            #b87922 0%,
            #e4b94f 7%,
            #c8942f 14%,
            #74400f 28%,
            #4a2508 34%,
            #b87a20 43%,
            #dfb64c 50%,
            #8f5214 58%,
            #2d1706 64%,
            #a96b1c 74%,
            #d39b36 84%,
            #66370c 100%
        ),
        linear-gradient(
            90deg,
            #3f2108 0%,
            #70400f 8%,
            #9a5a18 17%,
            #c98b2c 27%,
            #d8ad48 33%,
            #71380d 42%,
            #4d2105 48%,
            #b97922 56%,
            #ddb34a 64%,
            #69360c 74%,
            #b87620 86%,
            #4c2708 100%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(218, 176, 98, 0.16) 0,
            rgba(204, 151, 62, 0.06) 4px,
            rgba(61, 36, 13, 0.22) 8px,
            rgba(172, 112, 44, 0.10) 13px
        );
    background-blend-mode: normal, soft-light, overlay;
    background-size: 100% 100%, 320% 100%, 100% 100%;
    background-position: 50% 50%, 18% 50%, 50% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px rgba(73, 38, 7, 0.86);
    text-shadow:
        0 1px 0 rgba(225, 190, 104, 0.42),
        0 -1px 0 rgba(65, 34, 8, 0.65),
        1px 1px 0 rgba(151, 86, 13, 0.95),
        2px 2px 0 rgba(78, 39, 7, 0.94),
        3px 3px 0 rgba(32, 19, 8, 0.86),
        0 0 4px rgba(201, 151, 70, 0.16),
        0 0 8px rgba(132, 82, 28, 0.12),
        0 8px 16px rgba(0, 0, 0, 0.72);
    filter:
        drop-shadow(0 0 3px rgba(201, 151, 70, 0.16))
        drop-shadow(0 0 7px rgba(132, 82, 28, 0.12))
        drop-shadow(0 5px 12px rgba(0, 0, 0, 0.64));
    animation: rpVipMembershipTitleMetal 18s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.rp-vip-membership-card__title::before,
.rp-vip-membership-card__title::after {
    content: attr(data-rp-vip-title);
    position: absolute;
    inset: 0 0 14px 0.075em;
    pointer-events: none;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-align: inherit;
    text-transform: inherit;
}

.rp-vip-membership-card__title::before {
    z-index: -1;
    color: rgba(31, 18, 7, 0.96);
    -webkit-text-stroke: 2px rgba(17, 10, 4, 0.95);
    text-shadow:
        2px 2px 0 rgba(151, 91, 18, 0.82),
        4px 4px 0 rgba(66, 34, 8, 0.92),
        6px 6px 0 rgba(7, 6, 5, 0.92),
        0 12px 16px rgba(0, 0, 0, 0.62);
    transform: translate(2px, 3px);
}

.rp-vip-membership-card__title::after {
    z-index: 1;
    color: transparent;
    background:
        linear-gradient(180deg, rgba(225, 190, 104, 0.70) 0%, rgba(204, 139, 42, 0.26) 16%, transparent 34%),
        linear-gradient(90deg, transparent 0%, rgba(218, 169, 82, 0.58) 46%, rgba(232, 204, 128, 0.46) 51%, transparent 66%);
    background-size: 100% 100%, 360% 100%;
    background-position: center, -110% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.30;
    mix-blend-mode: screen;
    animation: rpVipMembershipTitleShine 12.5s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

/* VIP: pseudo-3D-extruderingen (::before) ersätts av en synlig guldhalo bakom ordet (djup/lyft),
   och ::after ger ett eget, tydligt ljussvep over bokstaverna.
   Egen keyframe med KONSTANT opacitet (basens rpVipMembershipTitleShine dampade opaciteten till 0.12-0.36).
   Storlekar i em -> skalar proportionellt mot titelns clamp() pa bade mobil och desktop. */
.rp-vip-membership-card__title--vip::before {
    content: "";
    inset: -0.34em -0.55em -0.18em;
    z-index: -1;
    -webkit-text-stroke: 0;
    text-shadow: none;
    transform: none;
    border-radius: 50%;
    background: radial-gradient(
        ellipse 76% 120% at 50% 46%,
        rgba(240, 196, 112, 0.42) 0%,
        rgba(206, 143, 58, 0.18) 42%,
        transparent 74%
    );
    filter: blur(0.14em);
    opacity: 1;
}

.rp-vip-membership-card__title--vip::after {
    content: attr(data-rp-vip-title);
    z-index: 2;
    /* background-image (INTE kortformen background) sa att background-clip: text inte nollstalls.
       Klipp-egenskaperna deklareras dessutom om explicit -> glimten klipps till bokstaverna. */
    background-image: linear-gradient(
        100deg,
        transparent 40%,
        rgba(255, 240, 200, 0.42) 47%,
        rgba(255, 250, 236, 0.82) 50%,
        rgba(255, 240, 200, 0.42) 53%,
        transparent 60%
    );
    background-size: 300% 100%;
    background-position: -120% 50%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: normal;
    text-shadow: none;
    opacity: 0.95;
    animation: rpVipTitleSheen 5.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes rpVipTitleSheen {
    0%,
    16% {
        background-position: -120% 50%;
    }

    38% {
        background-position: 130% 50%;
    }

    100% {
        background-position: 130% 50%;
    }
}

.rp-vip-membership-card__divider {
    display: block;
    width: min(60%, 210px);
    height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent 0%, rgba(174, 123, 58, 0.42) 24%, rgba(218, 178, 104, 0.58) 50%, rgba(174, 123, 58, 0.42) 76%, transparent 100%);
    box-shadow: 0 0 12px rgba(139, 92, 36, 0.16);
    opacity: 0.78;
}

.rp-vip-membership-card__expires {
    align-self: center;
    margin: 14px auto 0;
    padding: 7px 17px 8px;
    border: 1px solid rgba(218, 178, 104, 0.34);
    border-radius: 999px;
    color: rgba(255, 246, 224, 0.92);
    background:
        radial-gradient(ellipse 80% 140% at 50% 0%, rgba(218, 170, 86, 0.10) 0%, transparent 62%),
        linear-gradient(180deg, rgba(45, 34, 19, 0.70) 0%, rgba(18, 14, 8, 0.88) 100%);
    box-shadow:
        0 1px 0 rgba(218, 178, 104, 0.14) inset,
        0 0 16px rgba(139, 89, 31, 0.11) inset,
        0 8px 18px rgba(0, 0, 0, 0.18);
    font-size: 14px;
    line-height: 1.25;
}

.rp-vip-membership-card__expires-label {
    color: rgba(232, 200, 140, 0.76);
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.rp-vip-membership-card__date {
    color: #fff4d4;
    font-weight: 400;
    letter-spacing: 0.035em;
}

@keyframes rpVipMembershipTitleShine {
    0% {
        background-position: center, -115% 50%;
        opacity: 0.12;
    }

    18% {
        background-position: center, -90% 50%;
        opacity: 0.14;
    }

    44% {
        background-position: center, 48% 50%;
        opacity: 0.36;
    }

    62% {
        background-position: center, 122% 50%;
        opacity: 0.16;
    }

    100% {
        background-position: center, 132% 50%;
        opacity: 0.12;
    }
}

@keyframes rpVipMembershipTitleMetal {
    0%,
    100% {
        background-position: 50% 50%, 18% 50%, 50% 50%;
        filter:
            drop-shadow(0 0 3px rgba(201, 151, 70, 0.14))
            drop-shadow(0 0 7px rgba(132, 82, 28, 0.10))
            drop-shadow(0 5px 12px rgba(0, 0, 0, 0.64));
    }

    46% {
        background-position: 50% 50%, 78% 50%, 50% 50%;
        filter:
            drop-shadow(0 0 4px rgba(201, 151, 70, 0.18))
            drop-shadow(0 0 8px rgba(132, 82, 28, 0.14))
            drop-shadow(0 5px 12px rgba(0, 0, 0, 0.64));
    }

    76% {
        background-position: 50% 50%, 52% 50%, 50% 50%;
    }
}

@keyframes rpVipMembershipFrameGlimmer {
    0%,
    100% {
        background-position: 10% 50%, center;
        opacity: 0.62;
    }

    46% {
        background-position: 90% 50%, center;
        opacity: 0.82;
    }

    72% {
        background-position: 56% 50%, center;
        opacity: 0.70;
    }
}

@keyframes rpVipMembershipCardSurfaceShimmer {
    0%,
    100% {
        background-position: -170% 50%, 135% 50%, 48% 53%, -95% 50%, 48% 52%;
        opacity: 0.46;
    }

    24% {
        background-position: -58% 50%, 116% 50%, 52% 51%, -42% 50%, 50% 53%;
        opacity: 0.72;
    }

    48% {
        background-position: 44% 50%, 78% 50%, 54% 50%, 38% 50%, 52% 50%;
        opacity: 0.86;
    }

    72% {
        background-position: 132% 50%, 38% 50%, 50% 55%, 112% 50%, 50% 54%;
        opacity: 0.68;
    }

    88% {
        background-position: 170% 50%, -28% 50%, 48% 53%, 142% 50%, 48% 52%;
        opacity: 0.50;
    }
}

@keyframes rpVipMembershipInnerPulse {
    0%,
    100% {
        background-position: 48% 0, 50% 54%, 18% 50%, center;
        box-shadow:
            inset 0 1px 0 rgba(225, 196, 135, 0.15),
            inset 0 -18px 34px rgba(0, 0, 0, 0.30),
            inset 0 0 34px rgba(139, 84, 29, 0.060),
            0 0 24px rgba(139, 84, 29, 0.075);
    }

    48% {
        background-position: 52% 2%, 54% 50%, 82% 50%, center;
        box-shadow:
            inset 0 1px 0 rgba(225, 196, 135, 0.18),
            inset 0 -18px 34px rgba(0, 0, 0, 0.30),
            inset 0 0 58px rgba(174, 112, 42, 0.155),
            0 0 38px rgba(174, 112, 42, 0.15);
    }

    76% {
        background-position: 50% 0, 48% 56%, 46% 50%, center;
        box-shadow:
            inset 0 1px 0 rgba(225, 196, 135, 0.16),
            inset 0 -18px 34px rgba(0, 0, 0, 0.30),
            inset 0 0 42px rgba(139, 84, 29, 0.085),
            0 0 28px rgba(139, 84, 29, 0.095);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rp-vip-membership-card__content,
    .rp-vip-membership-card__content::after,
    .rp-vip-membership-card__title,
    .rp-vip-membership-card__title::after,
    .rp-vip-membership-card__content::before {
        animation: none;
    }
}

@media (min-width: 901px) {
    .rp-vip-membership-card__frame {
        height: 214px;
    }

    /* Full sektionsbredd som grannkorten. Tvingar hela kedjan (widget -> box -> card -> frame)
       till full bredd; slar aven ev. inline-bredd/marginal som desktop-DnD-JS kan satta. */
    body.base_user_dashboard .ow_dnd_widget.dashboard-MEMBERSHIP_CMP_MyMembershipWidget,
    body.base_user_dashboard .ow_box.dashboard-MEMBERSHIP_CMP_MyMembershipWidget,
    body.base_user_dashboard .ow_box.dashboard-MEMBERSHIP_CMP_MyMembershipWidget > .rp-vip-membership-card,
    body.base_user_dashboard .ow_box.dashboard-MEMBERSHIP_CMP_MyMembershipWidget > .rp-vip-membership-card > .rp-vip-membership-card__frame {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* En generell dashboard-padding (14px) skot in guldramen. Nollstall boxens/widgetens padding. */
    body.base_user_dashboard #place_sections .ow_dnd_widget.dashboard-MEMBERSHIP_CMP_MyMembershipWidget,
    body.base_user_dashboard #place_sections .ow_box.dashboard-MEMBERSHIP_CMP_MyMembershipWidget {
        padding: 0 !important;
    }

    /* Kort-sektionen ar en ren wrapper (ingen egen bakgrund/kant). En generell/last regel la 14px
       padding pa den och skot in guldramen 28px totalt. display:contents tar bort sektionens layout-box
       helt -> guldramen blir layout-barn direkt till boxen (1228.5px) och fyller full bredd,
       oavsett padding/margin/bredd pa sektionen. CSS-variabler (t.ex. frame-pad) arvs anda via DOM. */
    body.base_user_dashboard #place_sections .ow_box.dashboard-MEMBERSHIP_CMP_MyMembershipWidget > .rp-vip-membership-card {
        display: contents !important;
    }
}