.card-our-recommendation{
    border: 1px solid #C51B2A;
    box-shadow: 0 15px 40px rgba(197, 27, 42, 0.1);
    z-index: 1;
}

.card-our-recommendation:before{
    content: 'Nasza rekomendacja';
    width: fit-content;
    height: 22px;
    position: absolute;
    display: flex;
    align-items: center;
    margin-top: -11px;
    right: 24px;
    padding: 0px 8px;
    font-size: 10px;
    background-color: #C51B2A;
    color: #FFFFFF;
    border-radius: 50px;
}

/* ***************** */
/* SCREEN            */
/* ***************** */
.screen-area {
    position: relative;
    width: fit-content;
    margin-inline: auto;
}
.screen > img:not(.screen-info) { display: block; }
.screen-circle { position: absolute; }

.screen-circle{
    width: 12%;
    aspect-ratio: 1/1;
    background-color: #C51B2A;
    color: #FFF;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.screen-circle:before,
.screen-circle:after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.3;
    background-color: #C51B2A;
    animation: big-update-pulse 2s infinite linear;
    z-index: -1;
}

.screen-circle:after{ animation-delay: 1s; }

@keyframes big-update-pulse{
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
}

.card-circle{
    width: 24px;
    height: 24px;
    background-color: #C51B2A;
    color: #FFF;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.screen-info {
    position: absolute;
    scale: .7;
}

.anim-ready .screen-info { opacity: 0; }

.anim-ready .is-visible .screen-info {
    animation: arrowIn .6s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: var(--d, 0s);
}

@keyframes arrowIn {
    from { opacity: 0; translate: var(--tx, 40px) 0; }
    to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .anim-ready .is-visible .screen-info { animation: none; }
    .anim-ready .screen-info { opacity: 1; }
}

/* SCREEN 1 */
.screen-1 .screen-info-0 { top:-16%; right:-33%; width:319px; --tx: 48px; --d:.00s; }
.screen-1 .screen-info-2 { top: 27%; right:-36%; width:290px; --tx: 48px; --d:.12s; }
.screen-1 .screen-info-1 { top: 36%; left: -39%; width:314px; --tx:-48px; --d:.24s; }
.screen-1 .screen-info-3 { top: 68%; right:-42%; width:372px; --tx: 48px; --d:.36s; }

.screen-1 .screen-circle-1 { top: 31%; left: -4%; }
.screen-1 .screen-circle-2 { top: 20%; right: -4%; }
.screen-1 .screen-circle-3 { top: 84%; right: 28%; }

/* SCREEN 2 */
.screen-2 .screen-info-0 { top:-15%; right:-33%; width:306px; --tx: 48px; --d:.00s; }
.screen-2 .screen-info-1 { top: 22%; left: -32%; width:264px; --tx:-48px; --d:.12s; }
.screen-2 .screen-info-2 { top: 42%; right:-42%; width:332px; --tx: 48px; --d:.24s; }
.screen-2 .screen-info-3 { top: 68%; right:-42%; width:327px; --tx: 48px; --d:.36s; }

.screen-2 .screen-circle-1 { top: 31%; left: -4%; }
.screen-2 .screen-circle-2 { top: 74%; right: -5%; }
.screen-2 .screen-circle-3 { top: 86%; right: -5%; }

/* SCREEN 3 */
.screen-3 .screen-info-0 { top:-16%; right:-33%; width:339px; --tx: 48px; --d:.00s; }
.screen-3 .screen-info-3 { top: 46%; right:-30%; width:247px; --tx: 48px; --d:.12s; }
.screen-3 .screen-info-1 { top: 66%; left: -3%;  width:336px; --tx:-48px; --d:.24s; }
.screen-3 .screen-info-2 { top: 71%; left: -18%; width:444px; --tx:-48px; --d:.36s; }

.screen-3 .screen-circle-1 { top: 64%; left: -7%; }
.screen-3 .screen-circle-2 { top: 76%; left: -7%; }
.screen-3 .screen-circle-3 { top: 76%; right: -7%; }

/* PILL SWITCHER */
.nav.nav-pills{
    background-color: #f2f3f5;
    border-radius: 50px;
    padding: 6px;
    width: fit-content;
    margin: 0 auto;
}

.nav.nav-pills button{
    font-weight: 500;
    border-radius: 50px;
}

.nav.nav-pills button.active{
    background-color: #212529;
    color: #FFFFFF;
}

.nav.nav-pills button:not(.active){ color: #6C757D; }
.nav.nav-pills button:not(.active):hover{ color: #212529; }


/* ***************** */
/* CARD RATY         */
/* ***************** */
.card-raty{ background: url('/themes/przelewy24/assets/v2/img/raty/card-raty-bg-dark.webp') center / cover no-repeat; }