.fun {

}

.fun--simple {
    /* height: 323px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
    padding: 0;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    display: flex;
}

.fun--simple-background {
    display: block;
    position: relative;
    max-height: 323px;
    max-width: 393px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--radius);
    aspect-ratio: 393 / 323;
}

.fun--simple-link {
    display: block;
    height: 100%;
    width: 100%;
}

.fun--beyond-limits {
    position: relative;
}

.fun .close_cross {
    margin: 0;
    padding: 0;
    top: 10px;
    right: 10px;
    height: 25px;
    width: 25px;
    line-height: 0;

    position: absolute;
    z-index: 2;
}

.fun .close_cross::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 250%;
    left: -50%;
    top: -75%;
    /* z-index: -1; */
    /* pointer-events: none; */
}

.fun--placeholder {
    border-radius: var(--radius);
    margin-top: 20px;
    position: relative;

    /* background: rgba(11, 0, 12, .7); */
    height: 285px;
    display: flex;
}

.col-big .fun--placeholder,
.swiper-mob-wrap .fun--placeholder,
.col-big .fun,
.swiper-mob-wrap .fun {
    display: none;
}

.fun--placeholder.loading:not(.btn-accent.shadow)::before {
    width: 25px;
    height: 25px;
}
@media (max-width: 1199.98px) { 
    .fun,
    .fun--placeholder {
        margin-top: 10px;
    }
}

@media (max-width: 767.98px) {
    .fun,
    .fun--placeholder {
        margin-bottom: 20px;
        margin-top: 0px;
        font-size: 20px;
    }

    .fun:last-child,
    .fun--placeholder:last-child {
        margin-bottom: 0px;
        margin-top: 20px;
    }

    .col-small .fun--placeholder,
    .col-small .fun {
        display: none;
    }

    .col-big .fun--placeholder,
    .col-big .fun {
        display: flex;
    }

    .col-big:not(.block-swiper) .fun--placeholder,
    .col-big:not(.block-swiper) .fun {
        margin: 5px;
        width: calc(100% - 10px);
    }

    .fun--beyond-limits {
        border: 1px solid var(--accent-background);

        margin-left: 20px;
        margin-right: 20px;
        margin-top: 20px;
        width: calc(100% - 40px);
    }

    .fun .close_cross {
        font-size: 24px;
        margin: 0.2em;
    }
    
}

/* 1 win */

.fun--1-win {
    /* padding: 20px; */
}

.fun--1-win .fun--a-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-right: 60px;
    min-height: 270px;
    width: 100%;
}

.fun--1-win .victory-top {
    /* margin-left: 10px; */
    margin-bottom: -20px;
    flex-direction: row;
}

.fun--1-win .victory-title {
    font-size: 36px;
    margin-right: 9px;
}

.fun--1-win .victory-title::before, .fun--1-win .victory-title::after {
    height: 4px;
    width: 20px;
    right: -40px;
    bottom: unset;
    left: unset;
}

.fun--1-win .victory-title::before {
    top: 60%;
}

.fun--1-win .victory-title::after {
    top: 40%;
}

.fun--1-win .victory-top img {
    width: 190px;
    margin: -20px;
    height: unset;
}

.fun--1-win .countdown {
    background: linear-gradient(140deg, #f26a24 20%, #f8bf1f 40%, #e73f0d 50%, #f8bf1f 70%, #f26a24);
    filter: drop-shadow(0px 3px 2px #000);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shimmers 9s ease infinite;
    background-size: 400% 400%;
}

.fun--1-win .countdown-title {
    display: flex;
    flex-direction: column;
}

.fun--1-win .victory-images-item {
    right: -80px;
    bottom: 0;
    max-height: 335px;
    height: unset;
    opacity: unset;
    left: unset;
    z-index: 0;
}

@media (max-width: 767.98px) {
    .fun--1-win {
        padding: 15px;
    }

    .fun--1-win .victory-title {
        font-size: 30px;
    }

    .fun--1-win .victory-top img {
        width: 150px;
        margin-left: -10px;
        margin-right: -30px;
    }

    .fun--1-win .fun--a-wrap {
        padding-right: 40px;
        margin-right: 30px;
    }
    
}

/* fun with shortcut */

.fun--with-shortcut {
    padding: 10px;    
}


.fun--with-shortcut .fun--a-wrap {
    display: flex;
    /* flex-direction: column; */
    align-items: stretch;
    justify-content: space-between;
    /* padding-right: 60px; */
    /* min-height: 270px; */
    width: 100%;
}

.fun-shortcut {
    width: 100px;
    height: 100px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.fun-shortcut-img {
    width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    filter: var(--white-color-filter);
}

.fun--with-shortcut .fun-text {
    margin: 0 auto;
    max-width: calc(100% - 110px);
    /* flex-grow: 1; */
    /* padding: 20px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--important-color);
}

.fun-text--italic {
    font-style: italic;
    font-weight: bold;
    align-self: flex-start;
    font-size: 18px;
}

.fun--with-shortcut .fun-text--italic {
    margin-left: 3px;
}

.fun-text--main {
    font-weight: bold;
    align-self: center;
    font-size: 24px;
}

.fun-text--sub {
    font-weight: 200;
    align-self: flex-end;
    font-size: 18px;
    margin-top: -5px;
}

@media (max-width: 767.98px) {
    .fun--with-shortcut {
        border: 1px solid var(--accent-background);
    }
    
}

/* telegram */

.fun--telegram .fun-shortcut {
    background: linear-gradient(45deg, #1264b8, #2298db);
}

/* vk */

.fun--vk .fun-shortcut {
    background: linear-gradient(45deg, #0077ff, #447bba);
}

/* facebook */

.fun--fb .fun-shortcut {
    background: linear-gradient(45deg, #0866ff, #4867aa);
}

/* fun feedback */

.fun--feedback {
    padding: 0;
}

.fun--feedback .fun--a-wrap {
    width: calc(100% - 60px);
    min-height: 180px;
    padding: 20px;
    margin: 0 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.fun--feedback .fun-shortcut {
    width: 200px;
    height: 75px;
    background-color: var(--white-color);
}

.fun--feedback .fun-shortcut-img {
    filter: none;
}

.fun--feedback .fun-text {
    color: var(--white-color);
    /* display: flex;
    flex-direction: column; */
}

.fun--feedback .fun-text span:not(:last-child)::after {
    content: ' ';
}

.fun--feedback .close-icon::after {
    background-color: var(--important-color);
}

.fun--feedback .close-icon:not(.btn):hover::after {
    background-color: var(--main-color);
}

/* trustpilot */

.fun--feedback.fun--trustpilot {
    background-image: url(../../images/widget/trustpilot_bg_big.jpg);
    background-position: right bottom;
    background-size: cover;
}

/* ya */

.fun--feedback.fun--ya-feedback {
    background: linear-gradient(45deg, #ffce0b, #ffb50e);
}


/* referral */

.fun--referral {
    background-image: url(../../images/widget/cutted_referral.webp);
    background-position-x: calc(100% + 1px);
    background-position-y: calc(100% + 88px);
    /* background-position-y: calc(100% + 272px); */
    /* background-position: -766px -200px; */
    color: var(--white-color);
}

.fun--referral .fun--a-wrap {
    width: 100%;
    height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 50px;
    filter: drop-shadow(1px 0px 5px #00000080);
}

.fun--referral .fun-top {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fun--referral .fun-top .fun-text{
    display: flex;
    flex-direction: column;
}

.fun--referral .fun-shortcut {
    width: 80px;
    height: 80px;
}

.fun--referral .fun-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.fun--referral .fun-title {
    font-size: 18px;
    font-weight: bold;
}

.fun-stats {
    width: calc(100% - 60px);
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fun-stats-line {
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-top: 15px; */
    min-height: 30px;
    border-radius: var(--radius);
    background-color: var(--white-color);
    /* border: 1px solid transparent; */
    width: 100%;
    gap: 5px;
    color: var(--dark-important-background);
    font-size: 14px;
}

.fun-stats-line img {
    filter: var(--dark-contrasting-filter);
}

.fun-stats-value {
    color: var(--money-color);
    font-weight: bold;
}