/* ==============================
   SHEGER RESTAURANT — GLOBAL ALERT POPUP
   Single shared design system for every success / error / warning /
   info / confirmation popup across the whole site.
   Included directly by pages that don't already load style.css
   (e.g. customer/menu.php); style.css imports it for admin/kitchen/pos.
   ============================== */

/* ===== GLOBAL ALERT POPUP (matches reference design system) ===== */
body.sg-alert-open { overflow: hidden; }

.sg-alert-overlay {
    position: fixed; inset: 0; z-index: 100000;
    background: #eeeeee;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0;
    animation: sgAlertFade 0.25s ease forwards;
}
@keyframes sgAlertFade { to { opacity: 1; } }
.sg-alert-overlay.removing { animation: sgAlertFadeOut 0.2s ease forwards; }
@keyframes sgAlertFadeOut { to { opacity: 0; } }

.sg-alert-card {
    background: #fff;
    border-radius: 14px;
    width: 100%; max-width: 280px;
    padding: 32px 24px 24px;
    text-align: center;
    box-shadow: 0 20px 45px rgba(0,0,0,0.14);
    transform: scale(0.92) translateY(8px);
    animation: sgAlertPop 0.28s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes sgAlertPop { to { transform: scale(1) translateY(0); } }
.sg-alert-overlay.removing .sg-alert-card { animation: sgAlertPopOut 0.2s ease forwards; }
@keyframes sgAlertPopOut { to { transform: scale(0.92) translateY(6px); opacity: 0; } }

.sg-alert-icon-wrap {
    width: 60px; height: 60px; border-radius: 50%;
    margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    animation: sgAlertIconPop 0.35s cubic-bezier(0.34,1.56,0.64,1) 0.05s both;
}
@keyframes sgAlertIconPop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sg-alert-icon-wrap::before {
    content: ''; position: absolute; inset: -8px; border-radius: 50%;
    opacity: 0.45;
}
.sg-alert-icon-wrap svg { position: relative; z-index: 1; display: block; }

.sg-alert-card.success .sg-alert-icon-wrap { background: #22c55e; }
.sg-alert-card.success .sg-alert-icon-wrap::before { background: #86efac; }
.sg-alert-card.error .sg-alert-icon-wrap,
.sg-alert-card.danger .sg-alert-icon-wrap { background: #f97316; }
.sg-alert-card.error .sg-alert-icon-wrap::before,
.sg-alert-card.danger .sg-alert-icon-wrap::before { background: #fed7aa; }
.sg-alert-card.warning .sg-alert-icon-wrap { background: #f59e0b; }
.sg-alert-card.warning .sg-alert-icon-wrap::before { background: #fde68a; }
.sg-alert-card.info .sg-alert-icon-wrap { background: #3b82f6; }
.sg-alert-card.info .sg-alert-icon-wrap::before { background: #bfdbfe; }

.sg-alert-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem; font-weight: 800;
    color: var(--text);
    margin-bottom: 10px;
}
.sg-alert-msg {
    font-size: 0.88rem; line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 22px;
}
.sg-alert-btn {
    display: block; width: 100%;
    border: none; border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.9rem; font-weight: 700;
    color: #fff; cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: filter 0.2s, transform 0.15s;
}
.sg-alert-btn:hover { filter: brightness(0.94); }
.sg-alert-btn:active,
.sg-alert-btn.pressed { transform: scale(0.98); }
.sg-alert-btn:focus-visible { outline: 2px solid #240609; outline-offset: 2px; }
.sg-alert-card.success .sg-alert-btn { background: #22c55e; }
.sg-alert-card.error .sg-alert-btn,
.sg-alert-card.danger .sg-alert-btn { background: #f97316; }
.sg-alert-card.warning .sg-alert-btn { background: #f59e0b; }
.sg-alert-card.info .sg-alert-btn { background: #3b82f6; }

.sg-alert-btn-row { display: flex; gap: 10px; }
.sg-alert-btn-row .sg-alert-btn { width: auto; flex: 1; }
.sg-alert-btn-secondary { background: #E5E7EB !important; color: #374151 !important; }
.sg-alert-btn-danger { background: #f97316 !important; }

@media (max-width: 480px) {
    .sg-alert-card { width: calc(100vw - 32px); max-width: calc(100vw - 32px); padding: 28px 20px 20px; }
}