/* peleng_inactive.css — pulsing badge + dots + banner styling.
 * New file, additive only. Does not override existing selectors.
 */

@keyframes peleng-pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(211,47,47,.6); }
    50%      { box-shadow: 0 0 0 9px rgba(211,47,47,0); }
}
@keyframes peleng-pulse-yellow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249,168,37,.6); }
    50%      { box-shadow: 0 0 0 9px rgba(249,168,37,0); }
}

/* Make the parent <li> position-relative so we can absolute-position the badge over the icon */
li.billing-btn { position: relative; }

#peleng_inactive_badge {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    background: #d32f2f;
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    min-width: 18px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
    animation: peleng-pulse-red 1.6s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(211,47,47,.6);
}
#peleng_inactive_badge.warning {
    background: #f9a825;
    animation: peleng-pulse-yellow 1.8s ease-in-out infinite;
}
#peleng_inactive_badge:hover { transform: scale(1.08); }

.peleng-inactive-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d32f2f;
    margin-right: 6px;
    vertical-align: middle;
    animation: peleng-pulse-red 2s ease-in-out infinite;
}
.peleng-inactive-dot.warning {
    background: #f9a825;
    animation: peleng-pulse-yellow 2s ease-in-out infinite;
}

/* Banner inside billing dialog */
.peleng-inactive-banner {
    background: linear-gradient(180deg, #fff5f5 0%, #ffebee 100%);
    border: 1px solid #ef9a9a;
    border-left: 4px solid #d32f2f;
    border-radius: 6px;
    padding: 10px 14px;
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #424242;
}
.peleng-inactive-banner-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c62828;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 14px;
}
.peleng-inactive-banner-head i { font-size: 16px; }
.peleng-inactive-banner-title { flex: 1; }
.peleng-inactive-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(198, 40, 40, .08);
    color: #c62828;
    border: 1px solid rgba(198, 40, 40, .25);
    border-radius: 14px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.peleng-inactive-toggle:hover {
    background: rgba(198, 40, 40, .16);
}
.peleng-inactive-toggle i { font-size: 11px; }

.peleng-inactive-banner-sub {
    color: #b71c1c;
    opacity: .82;
    margin-bottom: 8px;
}
.peleng-inactive-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 8px;
    padding-right: 4px;
    transition: max-height .25s ease, opacity .2s ease, margin-bottom .2s ease;
}
/* Collapsed state — list is hidden, banner stays compact */
.peleng-inactive-banner.peleng-collapsed .peleng-inactive-list {
    max-height: 0;
    overflow: hidden;
    margin-bottom: 0;
    opacity: 0;
    padding-bottom: 0;
    padding-top: 0;
}
.peleng-inactive-banner.peleng-collapsed .peleng-inactive-banner-sub {
    margin-bottom: 6px;
}
.peleng-inactive-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px dashed #ffcdd2;
}
.peleng-inactive-row:first-child { border-top: none; }
.peleng-inactive-name {
    flex: 1;
    color: #2c3e50;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.peleng-inactive-sub {
    color: #757575;
    font-size: 11px;
    flex-shrink: 0;
}
.peleng-inactive-banner-foot {
    text-align: right;
    margin-top: 4px;
}
.peleng-inactive-buyall {
    cursor: pointer;
}

/* Brief flash highlight when scrolled to plan list after Buy-all */
@keyframes peleng-flash {
    0%   { box-shadow: 0 0 0 3px rgba(255,193,7,.7); }
    100% { box-shadow: 0 0 0 0 rgba(255,193,7,0); }
}
.peleng-flash { animation: peleng-flash 1.5s ease-out; }