.litnotify-widget {
    --litnotify-fb-surface: #ffffff;
    --litnotify-fb-surface-soft: #f3f4f6;
    --litnotify-fb-body-color: #1f2937;
    --litnotify-fb-text-secondary: #6b7280;
    --litnotify-fb-border: #e5e7eb;
    --litnotify-fb-divider: #e5e7eb;
    --litnotify-fb-primary: #ff5317;
    --litnotify-fb-danger: #ef4444;
    --litnotify-fb-success: #22c55e;
    --litnotify-fb-radius: .5rem;
    --litnotify-fb-radius-sm: .35rem;
    --litnotify-fb-radius-lg: .75rem;
    --litnotify-fb-shadow-card: 0 16px 48px rgba(15, 23, 42, .12);

    --litnotify-close-body: #ff5317;
    --litnotify-close-text: #fff;
    /* --icms-surface-soft: #ff5317; */


    position: fixed;
    bottom: var(--litnotify-offset-bottom, 20px);
    z-index: 98;
    font-family: inherit;
    font-size: 14px;
}

body.black-theme .litnotify-widget {
    --litnotify-fb-surface: #000000;
    --litnotify-fb-surface-soft: #161616;
    --litnotify-fb-border: 1px solid rgb(255 255 255 / 15%);
    --litnotify-fb-divider: 1px solid rgb(255 255 255 / 15%);
    --litnotify-fb-body-color: #fff;
    --litnotify-fb-text-secondary: #fff;
}


.litnotify-widget.is-open {
    z-index: 2000;
}

.litnotify-widget--right {
    right: var(--litnotify-offset-side, 20px);
}

.litnotify-widget--left {
    left: var(--litnotify-offset-side, 20px);
}

.litnotify-widget--left .litnotify-widget__panel {
    right: auto;
    left: 0;
}

.litnotify-widget__toggle {
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: 320px;
    padding: .75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--icms-border, var(--litnotify-fb-border)) 50%, var(--icms-body-color, var(--litnotify-fb-body-color)) 50%);
    border-radius: var(--icms-radius-lg, var(--litnotify-fb-radius-lg));
    background: var(--icms-surface, var(--litnotify-fb-surface));
    color: var(--icms-body-color, var(--litnotify-fb-body-color));
    /* box-shadow: 0 6px 20px color-mix(in srgb, var(--icms-body-color, var(--litnotify-fb-body-color)) 16%, transparent), var(--icms-shadow-card, var(--litnotify-fb-shadow-card)); */
    cursor: pointer;
    text-align: left;
}

.litnotify-widget.is-open .litnotify-widget__toggle {
    display: none;
}

.litnotify-widget--blur .litnotify-widget__toggle {
    background: color-mix(in srgb, var(--icms-surface, var(--litnotify-fb-surface)) 82%, transparent);
    backdrop-filter: blur(var(--litnotify-blur-intensity, 12px));
    -webkit-backdrop-filter: blur(var(--litnotify-blur-intensity, 12px));
}

.litnotify-widget__hide {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -.4rem;
    left: -.4rem;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border: 1px solid var(--icms-border, var(--litnotify-fb-border));
    border-radius: 50%;
    background: var(--icms-surface-soft, var(--litnotify-fb-surface-soft));
    color: var(--icms-text-secondary, var(--litnotify-fb-text-secondary));
    cursor: pointer;
    z-index: 1;
}

.litnotify-widget__hide svg {
    width: .6rem;
    height: .6rem;
    fill: currentColor;
}

.litnotify-widget.is-open .litnotify-widget__hide {
    display: none;
}

.litnotify-widget.is-temp-hidden {
    display: none;
}

.litnotify-widget__toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--icms-radius, var(--litnotify-fb-radius));
    background: var(--icms-primary, var(--litnotify-fb-primary));
    color: #fff;
    flex-shrink: 0;
}

.litnotify-widget__toggle-icon svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

.litnotify-widget__toggle-icon--animated svg {
    transform-origin: 50% 20%;
    animation: litnotify-bell-ring var(--litnotify-bell-interval, 6s) ease-in-out infinite;
}

@keyframes litnotify-bell-ring {
    0%, 85%, 100% {
        transform: rotate(0deg);
    }
    87% {
        transform: rotate(calc(-1 * var(--litnotify-bell-intensity, 12deg)));
    }
    89% {
        transform: rotate(var(--litnotify-bell-intensity, 12deg));
    }
    91% {
        transform: rotate(calc(-.7 * var(--litnotify-bell-intensity, 12deg)));
    }
    93% {
        transform: rotate(calc(.7 * var(--litnotify-bell-intensity, 12deg)));
    }
    95% {
        transform: rotate(calc(-.4 * var(--litnotify-bell-intensity, 12deg)));
    }
    97% {
        transform: rotate(calc(.4 * var(--litnotify-bell-intensity, 12deg)));
    }
}

.litnotify-widget__toggle-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.litnotify-widget__toggle-title {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.litnotify-widget__toggle-desc {
    font-size: 12px;
    color: var(--icms-text-secondary, var(--litnotify-fb-text-secondary));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.litnotify-widget__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 .35rem;
    border-radius: var(--icms-radius, var(--litnotify-fb-radius));
    background: var(--litnotify-badge-color, var(--icms-danger, var(--litnotify-fb-danger)));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.litnotify-widget__panel {
    display: none;
    flex-direction: column;
    position: absolute;
    right: 0;
    bottom: calc(100% + .75rem);
    width: min(560px, calc(100vw - 2.5rem));
    max-height: min(720px, calc(100vh - 4rem));
    background: var(--icms-surface, var(--litnotify-fb-surface));
    color: var(--icms-body-color, var(--litnotify-fb-body-color));
    border: 1px solid color-mix(in srgb, var(--icms-border, var(--litnotify-fb-border)) 50%, var(--icms-body-color, var(--litnotify-fb-body-color)) 50%);
    border-radius: var(--icms-radius-lg, var(--litnotify-fb-radius-lg));
    /* box-shadow: 0 6px 20px color-mix(in srgb, var(--icms-body-color, var(--litnotify-fb-body-color)) 16%, transparent), var(--icms-shadow-card, var(--litnotify-fb-shadow-card)); */
    overflow: hidden;
}

.litnotify-widget.is-open .litnotify-widget__panel {
    display: flex;
}

.litnotify-widget--blur .litnotify-widget__panel {
    background: color-mix(in srgb, var(--icms-surface, var(--litnotify-fb-surface)) 82%, transparent);
    backdrop-filter: blur(var(--litnotify-blur-intensity, 12px));
    -webkit-backdrop-filter: blur(var(--litnotify-blur-intensity, 12px));
}



.litnotify-widget__head {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.25rem 1.25rem 0;
    flex-shrink: 0;
}

.litnotify-widget__head-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--icms-radius, var(--litnotify-fb-radius));
    background: color-mix(in srgb, var(--icms-primary, var(--litnotify-fb-primary)) 16%, transparent);
    color: var(--icms-primary, var(--litnotify-fb-primary));
    flex-shrink: 0;
}

.litnotify-widget__head-icon svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: currentColor;
}

.litnotify-widget__head-text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    flex: 1 1 auto;
}

.litnotify-widget__head-title {
    font-size: 16px;
    font-weight: 800;
}

.litnotify-widget__head-desc {
    font-size: 14px;
    color: var(--icms-text-secondary, var(--litnotify-fb-text-secondary));
}

.litnotify-widget__collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--icms-radius-sm, var(--litnotify-fb-radius-sm));
    background: var(--icms-surface-soft, var(--litnotify-close-body));
    color: var(--icms-body-color, var(--litnotify-close-text));
    cursor: pointer;
    flex-shrink: 0;
}

.litnotify-widget__collapse svg {
    width: .8rem;
    height: .8rem;
    fill: currentColor;
}

.litnotify-widget__summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1rem 1.25rem 0;
    padding: .85rem 1rem;
    border-radius: var(--icms-radius, var(--litnotify-fb-radius));
    background: var(--icms-surface-soft, var(--litnotify-fb-surface-soft));
    border: 1px solid var(--icms-border, var(--litnotify-fb-border));
    flex-shrink: 0;
}

.litnotify-widget__summary-stat {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 1 1 0;
}

.litnotify-widget__summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--icms-radius-sm, var(--litnotify-fb-radius-sm));
    flex-shrink: 0;
}

.litnotify-widget__summary-icon svg {
    width: .8rem;
    height: .8rem;
    fill: currentColor;
}

.litnotify-widget__summary-icon--count {
    background: color-mix(in srgb, var(--icms-primary, var(--litnotify-fb-primary)) 16%, transparent);
    color: var(--icms-primary, var(--litnotify-fb-primary));
}

.litnotify-widget__summary-icon--important {
    background: color-mix(in srgb, var(--icms-danger, var(--litnotify-fb-danger)) 16%, transparent);
    color: var(--icms-danger, var(--litnotify-fb-danger));
}

.litnotify-widget__summary-icon--auto {
    background: color-mix(in srgb, var(--icms-success, var(--litnotify-fb-success)) 16%, transparent);
    color: var(--icms-success, var(--litnotify-fb-success));
}

.litnotify-widget__summary-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
    overflow-wrap: break-word;
}

.litnotify-widget__summary-num {
    font-size: 16px;
    font-weight: 800;
    overflow-wrap: break-word;
}

.litnotify-widget__summary-num--auto {
    font-size: 14px;
    line-height: 1.15;
}

.litnotify-widget__summary-label {
    font-size: 11px;
    color: var(--icms-text-secondary, var(--litnotify-fb-text-secondary));
}

.litnotify-widget__filters {
    display: flex;
    flex-wrap: nowrap;
    gap: .4rem;
    margin: 1rem 1.25rem 0;
    padding-bottom: .4rem;
    flex-shrink: 0;
    overflow-x: auto;

    scrollbar-width: thin;
    scrollbar-color: var(--icms-border, var(--litnotify-fb-border)) transparent;
}

.litnotify-widget__filters::-webkit-scrollbar {
    height: 6px;
}

.litnotify-widget__filters::-webkit-scrollbar-track {
    background: transparent;
}

.litnotify-widget__filters::-webkit-scrollbar-thumb {
    background: var(--icms-border, var(--litnotify-fb-border));
    border-radius: var(--icms-radius-sm, var(--litnotify-fb-radius-sm));
}

.litnotify-widget__filters::-webkit-scrollbar-thumb:hover {
    background: var(--icms-text-secondary, var(--litnotify-fb-text-secondary));
}

.litnotify-widget__filter {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border: 1px solid var(--icms-border, var(--litnotify-fb-border));
    border-radius: var(--icms-radius, var(--litnotify-fb-radius));
    background: var(--icms-surface-soft, var(--litnotify-fb-surface-soft));
    color: var(--icms-body-color, var(--litnotify-fb-body-color));
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.litnotify-widget__filter span {
    padding: 0 .35rem;
    border-radius: var(--icms-radius-sm, var(--litnotify-fb-radius-sm));
    background: rgba(127, 127, 127, .25);
    font-size: 11px;
}

.litnotify-widget__filter.is-active {
    background: var(--icms-primary, var(--litnotify-fb-primary));
    border-color: var(--icms-primary, var(--litnotify-fb-primary));
    color: #fff;
}

.litnotify-widget__filter.is-active span {
    background: rgba(255, 255, 255, .25);
}

.litnotify-widget__list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: 1rem;
    padding: 0 1.25rem .75rem;
    overflow-y: auto;

        scrollbar-width: thin;
    scrollbar-color: var(--icms-border, var(--litnotify-fb-border)) transparent;
}

.litnotify-widget__list::-webkit-scrollbar {
    width: 6px;
}

.litnotify-widget__list::-webkit-scrollbar-track {
    background: transparent;
}

.litnotify-widget__list::-webkit-scrollbar-thumb {
    background: var(--icms-border, var(--litnotify-fb-border));
    border-radius: var(--icms-radius-sm, var(--litnotify-fb-radius-sm));
}

.litnotify-widget__list::-webkit-scrollbar-thumb:hover {
    background: var(--icms-text-secondary, var(--litnotify-fb-text-secondary));
}

.litnotify-widget__item {
    display: flex;
    gap: .75rem;
    padding: .9rem .9rem .9rem 1rem;
    border: 1px solid var(--icms-border, var(--litnotify-fb-border));
    border-left: 3px solid var(--litnotify-type-color, var(--icms-primary, var(--litnotify-fb-primary)));
    border-radius: var(--icms-radius, var(--litnotify-fb-radius));
    background: var(--icms-surface-soft, var(--litnotify-fb-surface-soft));
}

.litnotify-widget__item.is-hidden {
    display: none;
}

.litnotify-widget__item-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
    padding-right: .85rem;
    border-right: 1px solid var(--icms-divider, var(--litnotify-fb-divider));
}

.litnotify-widget__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--icms-radius-sm, var(--litnotify-fb-radius-sm));
    flex-shrink: 0;
    background: color-mix(in srgb, var(--litnotify-type-color, var(--icms-primary, var(--litnotify-fb-primary))) 16%, transparent);
    color: var(--litnotify-type-color, var(--icms-primary, var(--litnotify-fb-primary)));
}

.litnotify-widget__item-icon svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.litnotify-widget__item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.litnotify-widget__item-top {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.litnotify-widget__item-type {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--litnotify-type-color, var(--icms-primary, var(--litnotify-fb-primary)));
}

.litnotify-widget__item-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.25;
    font-size: 11px;
    color: var(--icms-text-secondary, var(--litnotify-fb-text-secondary));
    white-space: nowrap;
    text-align: center;
}

.litnotify-widget__item-date span:first-child {
    font-weight: 700;
    color: var(--icms-body-color, var(--litnotify-fb-body-color));
    font-size: 12px;
}

.litnotify-widget__item-title {
    margin-top: .15rem;
    font-weight: 700;
    font-size: 14px;
}

.litnotify-widget__item-desc {
    margin: .25rem 0 0;
    font-size: 12px;
    color: var(--icms-text-secondary, var(--litnotify-fb-text-secondary));
}

.litnotify-widget__item-desc p,
.litnotify-widget__item-desc ul,
.litnotify-widget__item-desc ol {
    margin: 0;
}

.litnotify-widget__item-desc p + p,
.litnotify-widget__item-desc ul + p,
.litnotify-widget__item-desc p + ul {
    margin-top: .5em;
}

.litnotify-widget__item-desc img {
    max-width: 100%;
    height: auto;
}

.litnotify-widget__item-desc a {
    color: var(--litnotify-type-color, var(--icms-primary, var(--litnotify-fb-primary)));
}

.litnotify-widget__item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .6rem;
}

.litnotify-widget__item-status {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: 12px;
    font-weight: 600;
    color: var(--litnotify-status-color, var(--icms-text-secondary, var(--litnotify-fb-text-secondary)));
}

.litnotify-widget__item-status-dot {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--litnotify-status-color, var(--icms-text-secondary, var(--litnotify-fb-text-secondary)));
    flex-shrink: 0;
}

.litnotify-widget__item-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .7rem;
    border-radius: var(--icms-radius-sm, var(--litnotify-fb-radius-sm));
    background: var(--litnotify-type-color, var(--icms-primary, var(--litnotify-fb-primary)));
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    margin-left: auto;
}

.litnotify-widget__item-btn svg {
    width: .65rem;
    height: .65rem;
    fill: currentColor;
}

.litnotify-widget__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--icms-divider, var(--litnotify-fb-divider));
    background: var(--icms-surface-soft, var(--litnotify-fb-surface-soft));
    flex-shrink: 0;
}

.litnotify-widget__foot-text {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    font-size: 12px;
    color: var(--icms-text-secondary, var(--litnotify-fb-text-secondary));
}

.litnotify-widget__foot-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--icms-radius-sm, var(--litnotify-fb-radius-sm));
    background: color-mix(in srgb, var(--icms-primary, var(--litnotify-fb-primary)) 16%, transparent);
    color: var(--icms-primary, var(--litnotify-fb-primary));
    flex-shrink: 0;
}

.litnotify-widget__foot-icon svg {
    width: .85rem;
    height: .85rem;
    fill: currentColor;
}

.litnotify-widget__foot-lines {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.litnotify-widget__foot-title {
    display: block;
    color: var(--icms-body-color, var(--litnotify-fb-body-color));
    font-size: 12px;
}

.litnotify-widget__foot-desc {
    display: block;
}

.litnotify-widget__foot-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    color: var(--icms-primary, var(--litnotify-fb-primary));
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.litnotify-widget__foot-btn svg {
    width: .65rem;
    height: .65rem;
    fill: currentColor;
}

@media (max-width: 480px) {

    .litnotify-widget__toggle {
        border-radius: 28px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 -2px 12px rgba(255, 83, 23, 0.15);
        border: 0px;
        backdrop-filter: unset;
        background: #ff5317 !important;
    }
    .litnotify-widget__toggle-icon {
        background:unset;
    }

    .litnotify-widget--right {
        right: .75rem;
        bottom: 75px;

    }

    .litnotify-widget--left {
        left: .75rem;
    }

    .litnotify-widget__toggle {
        position: relative;
        max-width: none;
        gap: 0;
        padding: .6rem;
    }

    .litnotify-widget__toggle-text {
        display: none;
    }

    .litnotify-widget__badge {
        position: absolute;
        top: -.3rem;
        right: -.3rem;
        min-width: 1.3rem;
        height: 1.3rem;
        padding: 0 .3rem;
        font-size: 11px;
        /* border: 2px solid var(--icms-surface, var(--litnotify-fb-surface)); */
    }

    .litnotify-widget__panel {
        left: 0;
        right: 0;
        width: auto;
    }

    .litnotify-widget--left .litnotify-widget__panel {
        left: 0;
        right: 0;
    }

    .litnotify-widget.is-open .litnotify-widget__panel {
        position: fixed;
        inset: 0;
        bottom: 0;
        width: 100%;
        max-height: none;
        height: 100%;
        height: 100dvh;
        border-radius: 0;
    }
}

@media (max-width: 768px) {
    .litnotify-widget--peek:not(.is-open) {
        bottom: calc(var(--litnotify-offset-bottom, 20px) + var(--litnotify-peek-lift, 70px));
    }

    .litnotify-widget--peek.litnotify-widget--right:not(.is-open) {
        right: .35rem;
        transition: right .25s ease, bottom .25s ease;
    }

    .litnotify-widget--peek.litnotify-widget--right:not(.is-open):focus-within {
        right: var(--litnotify-offset-side, 20px);
    }

    .litnotify-widget--peek.litnotify-widget--left:not(.is-open) {
        left: .35rem;
        transition: left .25s ease, bottom .25s ease;
    }

    .litnotify-widget--peek.litnotify-widget--left:not(.is-open):focus-within {
        left: var(--litnotify-offset-side, 20px);
    }

    .litnotify-widget--peek:not(.is-open) .litnotify-widget__toggle {
        position: relative;
        max-width: none;
        padding: .6rem;
        gap: 0;
    }

    .litnotify-widget--peek:not(.is-open) .litnotify-widget__toggle-text {
        display: none;
    }

    .litnotify-widget--peek:not(.is-open) .litnotify-widget__badge {
        position: absolute;
        top: -.3rem;
        right: -.3rem;
        min-width: 1.3rem;
        height: 1.3rem;
        padding: 0 .3rem;
        font-size: 11px;
        border: 2px solid var(--icms-surface, var(--litnotify-fb-surface));
    }
}