/* =========================================================
       TOASTS
       ========================================================= */

    #toast-container {
        z-index: 999999 !important;
    }

    #toast-container.toast-top-right {
        top: 4.25rem;
        right: 1rem;
    }

    #toast-container > .toast {
        width: 24rem;
        max-width: calc(100vw - 1.25rem);
        min-height: 0;
        margin: 0 0 .75rem 0;
        padding: 0;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 1rem;
        background: rgba(11,18,32,.92) !important;
        background-image: none !important;
        backdrop-filter: blur(.375rem);
        -webkit-backdrop-filter: blur(.375rem);
        box-shadow: 0 .875rem 2rem rgba(0,0,0,.38);
        color: #fff;
        opacity: 1 !important;
        overflow: hidden;
    }

    #toast-container > .toast:hover {
        box-shadow: 0 1rem 2.5rem rgba(0,0,0,.44);
    }

    #toast-container > .toast.toast-success,
    #toast-container > .toast.toast-error,
    #toast-container > .toast.toast-info,
    #toast-container > .toast.toast-warning {
        border-left: 0 !important;
    }

    #toast-container > .toast .toast-progress {
        display: none !important;
    }

    #toast-container > .toast .toast-close-button {
        position: absolute;
        top: .625rem;
        right: .75rem;
        font-size: 1.125rem;
        line-height: 1.125rem;
        font-weight: 400;
        color: rgba(255,255,255,.82);
        opacity: 1;
        text-shadow: none;
    }

    #toast-container > .toast .toast-close-button:hover {
        color: #fff;
    }

    #toast-container > .toast .toast-title,
    #toast-container > .toast .toast-message {
        margin: 0;
    }

    .user-toast-openable {
        cursor: pointer;
    }

    .user-toast-inner {
        display: flex;
        align-items: flex-start;
        gap: .75rem;
        padding: .875rem 1rem;
    }

    .user-toast-icon {
        width: 1.5rem;
        height: 1.5rem;
        min-width: 1.5rem;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: .125rem;
        font-size: .75rem;
        line-height: 1;
        background: #1f2937;
        color: #fff;
    }

    .user-toast-icon i {
        font-size: .75rem;
        line-height: 1;
    }

    .user-toast-icon.color-success {
        background: #22c55e;
        color: #04110a;
    }

    .user-toast-icon.color-danger {
        background: #ef4444;
        color: #190606;
    }

    .user-toast-icon.color-warning {
        background: #f59e0b;
        color: #1a1203;
    }

    .user-toast-icon.color-info {
        background: #14b8a6;
        color: #041311;
    }

    .user-toast-body {
        flex: 1;
        min-width: 0;
        padding-right: 1rem;
    }

    .user-toast-body .toast-title {
        display: block;
        margin: 0 0 .375rem 0;
        font-size: .875rem;
        line-height: 1.3;
        font-weight: 800;
        color: #f8fafc;
        white-space: normal;
    }

    .user-toast-message {
        font-size: .8125rem;
        line-height: 1.45;
        font-weight: 500;
        color: rgba(226,232,240,.82);
        white-space: normal;
        word-break: break-word;
    }

    .user-toast-meta {
        display: none;
    }

    @media (max-width: 40rem) {
        #toast-container.toast-top-right {
            top: 4rem;
            right: .625rem;
            left: .625rem;
        }

        #toast-container > .toast {
            width: auto;
            max-width: none;
            border-radius: .9375rem;
        }

        .user-toast-inner {
            padding: .8125rem .875rem;
        }

        .user-toast-body .toast-title {
            font-size: .8125rem;
        }

        .user-toast-message {
            font-size: .75rem;
        }
    }

    /* =========================================================
       NOTIFICATIONS DRAWER
       ========================================================= */

    .notifications-drawer-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.34);
        backdrop-filter: blur(.1875rem);
        opacity: 0;
        visibility: hidden;
        transition: opacity .22s ease, visibility .22s ease;
        z-index: 10060;
    }

    .notifications-drawer-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }

    .notifications-drawer {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(27rem, 92vw);
        background:
                linear-gradient(
                        180deg,
                        color-mix(in srgb, var(--color4) 88%, black 12%) 0%,
                        color-mix(in srgb, var(--color4) 95%, black 5%) 100%
                );
        border-left: 1px solid rgba(255,255,255,.08);
        box-shadow: -1rem 0 2.5rem rgba(0,0,0,.32);
        transform: translateX(100%);
        transition: transform .24s ease;
        z-index: 10070;
        overflow: hidden;
    }

    .notifications-drawer.is-open {
        transform: translateX(0);
    }

    .notifications-drawer-inner {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .notifications-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 4.25rem;
        padding: .875rem 1rem;
        background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .notifications-drawer-back,
    .notifications-drawer-head-spacer {
        width: 2.5rem;
        height: 2.5rem;
        flex: 0 0 2.5rem;
    }

    .notifications-drawer-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: .75rem;
        background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%);
        color: var(--color2);
        font-size: 1.125rem;
        cursor: pointer;
        box-shadow:
                inset 0 1px 0 rgba(255,255,255,.05),
                0 .5rem 1rem rgba(0,0,0,.14);
    }

    .notifications-drawer-title {
        flex: 1 1 auto;
        text-align: center;
        color: var(--color2);
        font-size: 1rem;
        font-weight: 900;
        letter-spacing: -.01em;
    }

    .notifications-drawer-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .875rem 1rem;
        border-bottom: 1px solid rgba(255,255,255,.06);
        background: rgba(255,255,255,.02);
    }

    .notifications-unread-toggle {
        display: inline-flex;
        align-items: center;
        gap: .625rem;
        color: color-mix(in srgb, var(--color2) 90%, white 10%);
        font-size: .8125rem;
        font-weight: 700;
        margin: 0;
        cursor: pointer;
    }

    .notifications-unread-toggle input {
        display: none;
    }

    .notifications-unread-toggle-slider {
        position: relative;
        width: 2.625rem;
        height: 1.5rem;
        border-radius: 62.4375rem;
        background: rgba(255,255,255,.10);
        transition: background .18s ease;
        box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
    }

    .notifications-unread-toggle-slider::after {
        content: "";
        position: absolute;
        top: .1875rem;
        left: .1875rem;
        width: 1.125rem;
        height: 1.125rem;
        border-radius: 50%;
        background: rgba(255,255,255,.78);
        transition: left .18s ease, background .18s ease;
    }

    .notifications-unread-toggle input:checked + .notifications-unread-toggle-slider {
        background: var(--color1);
    }

    .notifications-unread-toggle input:checked + .notifications-unread-toggle-slider::after {
        left: 1.3125rem;
        background: var(--color5, #111);
    }

    .notifications-mark-all-btn {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        min-height: 2.375rem;
        padding: 0 .875rem;
        border: 1px solid color-mix(in srgb, var(--color1) 35%, transparent);
        border-radius: .75rem;
        background: linear-gradient(180deg, color-mix(in srgb, var(--color1) 18%, transparent) 0%, color-mix(in srgb, var(--color1) 10%, transparent) 100%);
        color: var(--color1);
        font-size: .8125rem;
        font-weight: 800;
        cursor: pointer;
        box-shadow:
                inset 0 1px 0 rgba(255,255,255,.04),
                0 .5rem 1rem rgba(0,0,0,.10);
    }

    .notifications-mark-all-btn:hover {
        filter: brightness(1.04);
    }

    .notifications-drawer-body {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: .875rem 1rem 1.25rem;
    }

    .notifications-drawer-loading,
    .notifications-drawer-empty {
        padding: 1.75rem 1rem;
        text-align: center;
        color: rgba(255,255,255,.70);
        font-size: .8125rem;
    }

    .notifications-list {
        display: flex;
        flex-direction: column;
        gap: .875rem;
    }

    .notifications-card {
        position: relative;
        border-radius: 1rem;
        padding: .875rem .875rem 1rem;
        background:
                radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--color1, #2fd477) 12%, transparent), transparent 34%),
                linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.03) 100%);
        border: 1px solid rgba(255,255,255,.06);
        box-shadow:
                inset 0 1px 0 rgba(255,255,255,.04),
                0 .625rem 1.5rem rgba(0,0,0,.16);
    }

    .notifications-card.is-unread {
        border-color: color-mix(in srgb, var(--color1) 38%, rgba(255,255,255,.06));
        box-shadow:
                inset 0 1px 0 rgba(255,255,255,.04),
                0 .625rem 1.5rem rgba(0,0,0,.16),
                0 0 0 1px color-mix(in srgb, var(--color1) 12%, transparent);
    }

    .notifications-card-top {
        display: flex;
        align-items: center;
        gap: .625rem;
        margin-bottom: .625rem;
    }

    .notifications-card-date {
        color: color-mix(in srgb, var(--color2) 72%, transparent);
        font-size: .75rem;
        font-weight: 700;
    }

    .notifications-card-dot {
        width: .625rem;
        height: .625rem;
        border-radius: 50%;
        background: var(--color1);
        box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--color1) 12%, transparent);
        flex: 0 0 .625rem;
    }

    .notifications-card-title {
        color: var(--color2);
        font-size: .9375rem;
        font-weight: 900;
        line-height: 1.25;
        margin-bottom: .45rem;
    }

    .notifications-card-message {
        color: color-mix(in srgb, var(--color2) 82%, transparent);
        font-size: .8125rem;
        font-weight: 600;
        line-height: 1.55;
        word-break: break-word;
    }

    .notifications-card-badges {
        display: flex;
        align-items: center;
        gap: .45rem;
        flex-wrap: wrap;
        margin-bottom: .5rem;
    }

    .notifications-card-badge,
    .notifications-card-reward {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        min-height: 1.7rem;
        padding: 0 .7rem;
        border-radius: 999rem;
        font-size: .6875rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .notifications-card-badge {
        color: color-mix(in srgb, var(--color1, #2fd477) 82%, #ffffff 18%);
        background: color-mix(in srgb, var(--color1, #2fd477) 13%, transparent);
        border: 1px solid color-mix(in srgb, var(--color1, #2fd477) 18%, transparent);
    }

    .notifications-card-reward {
        color: #1a1400;
        background: linear-gradient(180deg, color-mix(in srgb, var(--color3, #f5d742) 88%, #ffffff 12%) 0%, color-mix(in srgb, var(--color3, #f5d742) 70%, var(--color1, #2fd477) 30%) 100%);
        box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.14);
    }

    .notifications-card-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .625rem;
        margin-top: .875rem;
    }

    .notifications-card-open {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.5rem;
        padding: 0 1rem;
        border-radius: .75rem;
        border: 1px solid color-mix(in srgb, var(--color1) 38%, transparent);
        background: linear-gradient(180deg, color-mix(in srgb, var(--color1) 16%, transparent) 0%, color-mix(in srgb, var(--color1) 10%, transparent) 100%);
        color: var(--color1);
        font-size: .8125rem;
        font-weight: 800;
        text-decoration: none !important;
        box-shadow: 0 .7rem 1.4rem color-mix(in srgb, var(--color1, #2fd477) 12%, transparent);
    }

    .notifications-card-open:hover {
        color: var(--color1);
        text-decoration: none !important;
        filter: brightness(1.05);
    }

    .notifications-card-delete {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.375rem;
        height: 2.375rem;
        border: 1px solid rgba(255,255,255,.06);
        border-radius: .75rem;
        background: rgba(255,255,255,.05);
        color: color-mix(in srgb, var(--color2) 68%, transparent);
        cursor: pointer;
        transition: .16s ease;
    }

    .notifications-card-delete:hover {
        color: var(--color2);
        background: rgba(255,255,255,.10);
        border-color: rgba(255,255,255,.10);
    }

    body.notifications-drawer-open {
        overflow: hidden;
    }

    @media (min-width: 48rem) {
        .notifications-drawer {
            width: min(27rem, 38vw);
        }
    }

    @media (max-width: 47.9375rem) {
        .notifications-drawer {
            width: 100vw;
            border-left: 0;
        }

        .notifications-drawer-head {
            min-height: 4rem;
            padding: .75rem .875rem;
        }

        .notifications-drawer-toolbar {
            padding: .75rem .875rem;
            flex-wrap: wrap;
        }

        .notifications-drawer-body {
            padding: .75rem .875rem 1.125rem;
        }

        .notifications-card {
            border-radius: .9375rem;
        }
    }

    /* =========================================================
       BONUS TOP MINI STRIP
       ========================================================= */

    .bonus-page-hero-compact {
        margin-bottom: 1rem;
    }

    .bonus-top-mini-strip {
        display: grid;
        grid-template-columns: 18rem 1fr;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .bonus-top-mini-balance,
    .bonus-top-mini-strip-right {
        border-radius: 1.5rem;
        background:
                radial-gradient(circle at top left, rgba(255,255,255,.04), transparent 34%),
                linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
        border: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 1.125rem 3.125rem rgba(0,0,0,.18);
    }

    .bonus-top-mini-balance {
        min-height: 100%;
        padding: 1.125rem 1.25rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .bonus-top-mini-label {
        display: block;
        font-size: .75rem;
        line-height: 1.35;
        color: rgba(255,255,255,.62);
        margin-bottom: .5rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .bonus-top-mini-value {
        display: block;
        font-size: 1.375rem;
        line-height: 1.08;
        color: var(--color2);
        font-weight: 900;
        letter-spacing: -.02em;
    }

    .bonus-top-mini-strip-right {
        padding: 1.125rem 1.25rem;
    }

    .bonus-top-mini-progress-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        margin-bottom: .375rem;
    }

    .bonus-top-mini-progress-title {
        font-size: .9375rem;
        font-weight: 900;
        color: var(--color2);
        line-height: 1.2;
    }

    .bonus-top-mini-progress-percentage {
        font-size: .9375rem;
        font-weight: 900;
        color: var(--color1);
        line-height: 1;
    }

    .bonus-top-mini-progress-subtitle {
        font-size: .8125rem;
        line-height: 1.45;
        color: rgba(255,255,255,.72);
        margin-bottom: .625rem;
    }

    @media screen and (max-width: 61.9375rem) {
        .bonus-top-mini-strip {
            grid-template-columns: 1fr;
            gap: .875rem;
        }

        .bonus-top-mini-balance,
        .bonus-top-mini-strip-right {
            padding: 1rem;
        }

        .bonus-top-mini-value {
            font-size: 1.25rem;
        }
    }

    /* =========================================================
       BONUS MOBILE FIXES
       ========================================================= */

    .bonus-card-modern-badges {
        position: relative;
        z-index: 2;
    }

    @media screen and (max-width: 47.9375rem) {
        .bonus-card-modern-inner {
            padding-right: .875rem !important;
        }

        .bonus-card-modern-head-mobilefix {
            display: block;
        }

        .bonus-card-modern-image-mobilefix {
            position: relative;
            width: 100%;
            min-width: 100%;
            height: 11.5rem;
            border-radius: 1rem;
            overflow: hidden;
            margin-bottom: .875rem;
        }

        .bonus-card-modern-image-mobilefix img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .bonus-promo-info-btn-mobilefix {
            position: absolute;
            top: .625rem;
            right: .625rem;
            z-index: 3;
            width: 2.125rem;
            height: 2.125rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .875rem;
            font-weight: 600;
            color: #fff;
            background: linear-gradient(135deg, rgba(0,0,0,.65), rgba(0,0,0,.35));
            border: 1px solid rgba(255,255,255,.30);
            box-shadow:
                    0 .375rem 1rem rgba(0,0,0,.45),
                    inset 0 1px 0 rgba(255,255,255,.25);
        }

        .bonus-card-modern-image-mobilefix::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 3.75rem;
            height: 3.75rem;
            background: radial-gradient(circle at top right, rgba(0,0,0,.45), transparent 70%);
            pointer-events: none;
        }

        .bonus-card-modern-badges-mobilefix {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            align-items: center;
            margin: .625rem 0 .75rem 0;
        }

        .bonus-card-modern-badges-mobilefix .bonus-badge {
            margin: 0;
        }
    }

    /* =========================================================
       DATEPICKER VELTRANO SMALL OVERRIDE
       ========================================================= */