/**
 * 
 * Module bonuses
 * @author - HILER
 * 
 * @link HLMod:   https://hlmod.net/members/hiler.77403/
 * @link CsDevs:  https://csdevs.net/members/hiler.52/
 * @link Discord: https://discordapp.com/users/252040667361050625 / hiler / HILER#3959
 * 
 */
 
 .bonuses-title1 {
    text-align: center;
    margin-bottom: 25px;
}

.bonuses-title1 h3 {
    gap: 8px;
    display: flex;
    align-items: center;
    font-size: 25px;
    text-align: center;
    font-weight: 600;
    justify-content: center;
}

.bonuses-subtitle {
    opacity: .7;
    font-size: 14px;
}


.bonuses-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.bonuses-block {
    width: 100%;
    padding: 20px;
    height: 178px;
    min-width: 340px;
}

.bonuses-block-inline-3 {
    flex: 1 1 calc(33.333% - 8px);
}

.bonuses-block-inline-2 {
    flex: 1 1 calc(50% - 8px);
}

.bonuses-block-inline-1 {
    flex: 1 1 100%;
}

.bonuses-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 1;
}

.bonuses-title {
    font-size: 20px;
    font-weight: 700;
}

.bonuses-desc {
    color: var(--text-custom);
    font-size: 14px;
    max-width: 300px;
}

.bonuses-reward {
	color: var(--text-default);
    cursor: auto;
    font-weight: 600;
}

.bonuses-reward:hover {
    background-color: var(--button);
    color: var(--text-custom);
}

.bonuses-reward:focus {
    border: 1px solid transparent;
}

.bonuses-execute {
    background-color: var(--span);
    color: var(--text-default);
}

.bonuses-execute:hover {
    background-color: color-mix(in srgb, var(--span) 70%, var(--card));;
}

.bonuses-block img {
    position: absolute;
    right: 0;
    width: 144px;
    height: 144px;
    pointer-events: none;
    transform: rotate(15deg);
}

.bonuses-actions {
    display: grid;
    grid-template-rows: 1fr 0fr;
    transition: grid-template-rows .35s ease;
    margin-top: 12px;
}

.bonuses-button {
    display: flex;
    gap: 6px;
    overflow: hidden;
    transition: opacity .35s ease, transform .35s ease;
}

.bonuses-start {
    opacity: 1;
    transform: translateY(0);
}

.bonuses-action {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.bonuses-block.active .bonuses-actions {
    grid-template-rows: 0fr 1fr;
}

.bonuses-block.active .bonuses-start {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.bonuses-block.active .bonuses-action {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.admin_nav {
    margin-bottom: 12px;
}

/* нужно, чтобы слой корректно позиционировался */
.bonuses-block {
    position: relative;
    overflow: hidden;
}

/* слой блюра на всю карточку */
.bonuses-block::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;

    /* блюр всего, что под слоем */
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(10px);

    /* лёгкое затемнение (иначе блюр иногда почти незаметен) */
    background: rgba(0, 0, 0, .10);

    z-index: 2;
}

/* включаем блюр */
.bonuses-block.active::after {
    opacity: 1;
}

/* важное: контент должен быть выше слоя блюра */
.bonuses-main,
.bonuses-actions {
    position: relative;
    z-index: 3;
}

/* лого можно оставить под блюром (чтобы тоже размывалось) */
.bonuses-block img {
    z-index: 1;
}