@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap');

.bss-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 100px;
    font-family: 'Rokh', 'Vazirmatn', sans-serif;
    font-size: 14px;
    font-weight: 500;
    direction: rtl;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    cursor: default;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -1px 0 rgba(0,0,0,0.12),
        0 4px 20px rgba(0,0,0,0.18),
        0 1px 4px rgba(0,0,0,0.1);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bss-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 100px;
    background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 50%, rgba(0,0,0,0.04) 100%);
    pointer-events: none;
}

.bss-badge:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -1px 0 rgba(0,0,0,0.12),
        0 8px 28px rgba(0,0,0,0.22),
        0 2px 6px rgba(0,0,0,0.12);
}

.bss-badge--open   { background: rgba(16,120,70,0.4); color: #bbf7d0; border-color: rgba(74,222,128,0.25); }
.bss-badge--closed { background: rgba(160,30,30,0.4); color: #fecaca; border-color: rgba(248,113,113,0.25); }
.bss-badge--rest   { background: rgba(180,100,10,0.4); color: #fde68a; border-color: rgba(251,146,60,0.25); }

@media (prefers-color-scheme: light) {
    .bss-badge--open   { background: rgba(220,252,231,0.88); color: #166534; border-color: rgba(74,222,128,0.45); box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 4px 20px rgba(16,185,129,0.15); }
    .bss-badge--closed { background: rgba(254,226,226,0.88); color: #991b1b; border-color: rgba(248,113,113,0.45); box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 4px 20px rgba(239,68,68,0.12); }
    .bss-badge--rest   { background: rgba(255,237,213,0.88); color: #9a3412; border-color: rgba(251,146,60,0.45); box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 4px 20px rgba(249,115,22,0.12); }
    .bss-dot--open   { background: #16a34a !important; box-shadow: 0 0 5px #16a34a !important; }
    .bss-dot--rest   { background: #ea580c !important; box-shadow: 0 0 5px #ea580c !important; }
    .bss-dot--closed { background: #dc2626 !important; }
}

.bss-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; position: relative; z-index: 1; }
.bss-dot--open   { background: #4ade80; box-shadow: 0 0 6px #4ade80; animation: bss-beep-green 1.4s ease-in-out infinite; }
.bss-dot--closed { background: #f87171; }
.bss-dot--rest   { background: #fb923c; box-shadow: 0 0 6px #fb923c; animation: bss-beep-orange 2s ease-in-out infinite; }

@keyframes bss-beep-green {
    0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.85); transform: scale(1); }
    30%  { box-shadow: 0 0 0 7px rgba(74,222,128,0); transform: scale(1.2); }
    60%  { box-shadow: 0 0 0 0 rgba(74,222,128,0); transform: scale(1); }
    80%  { box-shadow: 0 0 0 4px rgba(74,222,128,0.35); transform: scale(1.1); }
    100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); transform: scale(1); }
}

@keyframes bss-beep-orange {
    0%   { box-shadow: 0 0 0 0 rgba(251,146,60,0.85); transform: scale(1); }
    40%  { box-shadow: 0 0 0 7px rgba(251,146,60,0); transform: scale(1.2); }
    100% { box-shadow: 0 0 0 0 rgba(251,146,60,0); transform: scale(1); }
}

.bss-label { position: relative; z-index: 1; letter-spacing: 0.01em; }
.bss-time  { font-size: 12px; opacity: 0.72; margin-right: 3px; font-weight: 400; position: relative; z-index: 1; }
.bss-error { color: #9ca3af; font-size: 12px; }