/* ============================================================
   Notification styles — dùng cho cả admin và khách
   ============================================================ */

/* ── Admin order toast ── */
.admin-order-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    background: white;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 0 0 3px var(--red);
    padding: 16px 14px 16px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 340px;
    width: calc(100vw - 48px);
    animation: toastSlideIn .35s cubic-bezier(.34,1.56,.64,1) both;
    transition: opacity .4s, transform .4s;
}

.admin-order-toast.aot-hide {
    opacity: 0;
    transform: translateX(120%);
}

/* stack nhiều toast */
.admin-order-toast:nth-last-child(2) { bottom: calc(24px + 88px + 12px); }
.admin-order-toast:nth-last-child(3) { bottom: calc(24px + 176px + 24px); }

@keyframes toastSlideIn {
    from { opacity:0; transform: translateX(110%); }
    to   { opacity:1; transform: translateX(0); }
}

.aot-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    animation: bellRing .6s ease .1s;
}

@keyframes bellRing {
    0%,100% { transform: rotate(0); }
    20%     { transform: rotate(-20deg); }
    40%     { transform: rotate(20deg); }
    60%     { transform: rotate(-12deg); }
    80%     { transform: rotate(10deg); }
}

.aot-body    { flex: 1; min-width: 0; }
.aot-title   { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--red); margin-bottom: 4px; }
.aot-info    { font-size: .88rem; line-height: 1.5; color: #333; }

.aot-btn {
    flex-shrink: 0;
    background: var(--red);
    color: white;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 700;
    align-self: center;
    white-space: nowrap;
    transition: background .15s;
}
.aot-btn:hover { background: var(--red-dark); }

.aot-close {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: .9rem;
    padding: 2px;
    flex-shrink: 0;
    line-height: 1;
    transition: color .15s;
}
.aot-close:hover { color: #333; }

/* ── Pending badge trên sidebar ── */
.pending-badge {
    background: var(--red);
    color: white;
    border-radius: 50px;
    padding: 1px 8px;
    font-size: .7rem;
    font-weight: 700;
    margin-left: auto;
    display: none;
    align-items: center;
}

/* ── Sound toggle button ── */
.sound-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    color: rgba(255,255,255,.6);
    font-size: .82rem;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: color .15s;
}
.sound-toggle:hover { color: white; }
.sound-toggle .toggle-icon { font-size: 1rem; }

/* ── Notification permission bar ── */
.notif-bar {
    background: #1e40af;
    color: white;
    padding: 10px 20px;
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}
.notif-bar button {
    background: white;
    color: #1e40af;
    border: none;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}
.notif-bar .dismiss {
    background: transparent;
    color: rgba(255,255,255,.7);
    text-decoration: underline;
    font-weight: 400;
}

/* ── Flash overlay (nhấp nháy toàn màn hình khi có đơn mới) ── */
#order-flash-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    pointer-events: none;
    background: rgba(227, 30, 36, 0);
    transition: background .12s;
}
#order-flash-overlay.flash-on {
    background: rgba(227, 30, 36, 0.18);
    box-shadow: inset 0 0 80px rgba(227,30,36,.35);
}

/* ── Toast enhanced: animated border pulse ── */
.admin-order-toast {
    animation: toastSlideIn .35s cubic-bezier(.34,1.56,.64,1) both,
               toastBorderPulse 1.2s ease-in-out 3;
}
@keyframes toastBorderPulse {
    0%,100% { box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 0 0 3px var(--red); }
    50%     { box-shadow: 0 8px 32px rgba(0,0,0,.22), 0 0 0 6px rgba(227,30,36,.5), 0 0 24px rgba(227,30,36,.3); }
}

/* ── Urgent toast (3+ đơn dồn) ── */
.admin-order-toast.aot-urgent {
    border-left: 5px solid #f59e0b;
    animation: toastSlideIn .25s cubic-bezier(.34,1.56,.64,1) both,
               toastBorderUrgent 0.8s ease-in-out 5;
}
@keyframes toastBorderUrgent {
    0%,100% { box-shadow: 0 8px 32px rgba(0,0,0,.2), 0 0 0 3px #f59e0b; }
    50%     { box-shadow: 0 12px 40px rgba(0,0,0,.28), 0 0 0 8px rgba(245,158,11,.45), 0 0 30px rgba(245,158,11,.4); }
}

/* ── Audio unlock bar ── */
.audio-unlock-bar {
    display: none; /* JS sẽ show khi cần */
    align-items: center;
    gap: 14px;
    background: linear-gradient(90deg, #1a1a2e 0%, #16213e 100%);
    border-bottom: 2px solid var(--red);
    padding: 10px 20px;
    flex-wrap: wrap;
}

.aub-pulse {
    font-size: 1.5rem;
    flex-shrink: 0;
    animation: aubBellPulse 1.2s ease-in-out infinite;
}
@keyframes aubBellPulse {
    0%,100% { transform: scale(1) rotate(0deg); }
    20%     { transform: scale(1.15) rotate(-15deg); }
    40%     { transform: scale(1.15) rotate(15deg); }
    60%     { transform: scale(1.1) rotate(-8deg); }
    80%     { transform: scale(1.1) rotate(8deg); }
}

.aub-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.aub-text strong {
    color: white;
    font-size: .88rem;
    font-weight: 700;
}
.aub-text span {
    color: rgba(255,255,255,.6);
    font-size: .78rem;
}

.aub-btn {
    background: var(--red);
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, transform .1s;
    box-shadow: 0 2px 8px rgba(227,30,36,.4);
}
.aub-btn:hover  { background: #c0151b; transform: translateY(-1px); }
.aub-btn:active { transform: translateY(0); }

.aub-dismiss {
    background: none;
    border: none;
    color: rgba(255,255,255,.4);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 6px;
    flex-shrink: 0;
    line-height: 1;
    transition: color .15s;
    border-radius: 4px;
}
.aub-dismiss:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.08); }

/* ── Mobile: toast fullwidth ── */
@media (max-width: 480px) {
    .admin-order-toast {
        bottom: 16px;
        right: 16px;
        left: 16px;
        width: auto;
        max-width: none;
    }
    .admin-order-toast:nth-last-child(2),
    .admin-order-toast:nth-last-child(3) { bottom: 16px; }
}