/**
 * 
 * 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-admin-toolbar.hide {
    display: none;
}

#bonuses-admin-actions button {
    flex: 1;
}

.bonus-integration-fields.hide {
    display: none;
}

#bonusIntegrationProviderWrap.is-locked .adaptive-select {
    pointer-events: none;
    opacity: 0.7;
}

#bonusIntegrationDesc {
    min-height: 84px;
    resize: vertical;
}

.bonus-integration-fields .flex-group > .inputs-inline {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 576px) {
    .bonus-integration-fields .flex-group {
        flex-direction: column;
        gap: 0;
    }
}

.bonuses-integration__provider {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bonuses-integration__provider img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.page-filter__title {
    font-weight: 600;
    margin-right: auto;
}

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

.bonuses-block {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    width: 100%;
    padding: 20px;
    height: 178px;
    min-width: 340px;
    background: var(--card);
}

.bonuses-block::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 110% 105% at 88% 48%, color-mix(in srgb, var(--bonus-accent, transparent) 24%, transparent) 0%, color-mix(in srgb, var(--bonus-accent, transparent) 11%, transparent) 48%, transparent 92%),
        linear-gradient(105deg, transparent 0%, color-mix(in srgb, var(--bonus-accent, transparent) 6%, transparent) 35%, color-mix(in srgb, var(--bonus-accent, transparent) 16%, transparent) 78%, color-mix(in srgb, var(--bonus-accent, transparent) 10%, transparent) 95%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.bonuses-block::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, var(--card) 0%, color-mix(in srgb, var(--card) 55%, transparent) 3%, transparent 8%);
    pointer-events: none;
    z-index: 0;
}

.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;
    position: relative;
    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 {
    cursor: auto;
    font-weight: 600;
    border-radius: 0;
    background: var(--span-10);
    color: var(--span);
}

.bonuses-reward:focus,
.bonuses-reward:nth-child(1) {
    border-right: 1.5px solid var(--span-middle) !important;
}

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

.bonuses-reward:hover {
    background-color: var(--span-10);
    color: var(--span);
}

.bonuses-execute,
.bonuses-cancel {
    background-color: var(--span);
    color: var(--text-default);
    border-radius: 0;
}

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

.bonuses-block img {
    position: absolute;
    right: 0;
    width: 9rem;
    height: 9rem;
    pointer-events: none;
    transform: rotate(6deg);
    z-index: 0;
}

.bonuses-actions {
    position: relative;
    margin-top: 12px;
    min-height: var(--input-height, 40px);
}

.bonuses-button {
    display: flex;
    align-items: center;
    will-change: opacity;
    transition: opacity .35s ease;
}

.bonuses-start {
    position: relative;
    opacity: 1;
    border: 1.5px solid var(--span);
    border-radius: var(--br-8);
    width: max-content;
    overflow: hidden;
}

.bonuses-start--claimed {
    border: 1.5px solid var(--span-middle);
}

.bonuses-action {
    position: absolute;
    inset: 0 auto auto 0;
    opacity: 0;
    pointer-events: none;
    border: 1.5px solid var(--span);
    border-radius: var(--br-8);
    overflow: hidden;
}

.bonus-check {
    position: relative;
}

.bonuses-subscribe {
    position: relative;
}

.bonuses-subscribe:before,
.bonuses-subscribe:after {
    content: "";
    position: absolute;
    width: 1px;
    height: 65%;
    background: var(--text-default);
}

.bonuses-subscribe:before {
    left: -1px;
}

.bonuses-subscribe:after {
    right: -1px;
}

.bonuses-block.active .bonuses-start {
    opacity: 0;
    pointer-events: none;
}

.bonuses-block.active .bonuses-action {
    opacity: 1;
    pointer-events: auto;
}

.admin_nav {
    margin-bottom: 12px;
}

.bonus-logs-progress {
    padding: .5rem .6rem;
    border-radius: var(--br-8);
    border: 1px solid var(--transparent-5-w);
}

.bonus-logs-progress.hide {
    display: none;
}

.bonus-logs-progress__label {
    font-size: .85rem;
    color: var(--text-secondary);
    margin-bottom: .35rem;
}

.bonus-logs-progress__bar {
    height: .35rem;
    border-radius: var(--br-4);
    background: color-mix(in srgb, var(--text-secondary) 15%, transparent);
    overflow: hidden;
}

.bonus-logs-progress__fill {
    height: 100%;
    border-radius: inherit;
    background: var(--green);
    transition: width .25s ease;
}

.bonus-logs-unsubscribed,
.bonus-logs-unsubscribed:hover,
.bonus-logs-unsubscribed:disabled:hover {
    background-color: var(--button);
    color: var(--text-custom);
    cursor: auto;
}