/* Sunset Bar Loyalty — Common Styles v1.0 (2026-04-12) */

/* ── CSS Variables ── */
:root {
    /* Brand */
    --sunset-orange: #F97316;
    --sunset-orange-dark: #ea580c;
    --gold: #C9A84C;
    --gold-light: #e8c76a;

    /* Backgrounds */
    --bg-dark: #0a0f1e;
    --bg-card: rgba(255,255,255,0.04);
    --bg-card-hover: rgba(255,255,255,0.07);

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* Borders */
    --border-subtle: rgba(255,255,255,0.07);
    --border-accent: rgba(249,115,22,0.3);

    /* Status */
    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;

    /* Spacing */
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --nav-height: 60px;

    /* Fonts */
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Base ── */
body {
    font-family: var(--font-body);
    background: var(--bg-dark);
    color: var(--text-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ── Loading & Empty States ── */
.loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}
.loading::after {
    content: '';
    display: block;
    width: 24px; height: 24px;
    margin: 0.75rem auto 0;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--sunset-orange);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

/* ── Spinner ── */
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Alerts ── */
.alert {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}
.alert-success { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.2); }
.alert-error   { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
.alert-warning { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.2); }
.alert-info    { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.2); }

/* ── Cards ── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    padding: 1.25rem;
}
.card:hover {
    background: var(--bg-card-hover);
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border-radius: 0.5rem;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    text-decoration: none;
    color: white;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: linear-gradient(135deg, var(--sunset-orange), var(--sunset-orange-dark)); }
.btn-success { background: var(--success); }
.btn-danger  { background: var(--danger); }
.btn-ghost   { background: transparent; border: 1px solid var(--border-subtle); color: var(--text-secondary); }

/* ── Bottom Nav Padding ── */
.page-content {
    padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 1rem);
}

/* ── Utility ── */
.text-center { text-align: center; }
.text-muted  { color: var(--text-muted); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }

/* ── Responsive Container ── */
.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ── Dialog & Toast (in-page, no native popup) ── */
.sb-dlg-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.85); backdrop-filter:blur(6px);
    z-index:5000; display:none; align-items:center; justify-content:center; padding:1.5rem;
}
.sb-dlg-overlay.show { display:flex; }
.sb-dlg-box {
    background:linear-gradient(135deg,#1e0a3c,#0f1420);
    border:1.5px solid rgba(168,85,247,.4);
    padding:1.8rem; border-radius:1.5rem;
    max-width:340px; width:100%; text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
    color:#e2e8f0; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.sb-dlg-icon { font-size:3.2rem; margin-bottom:.7rem; }
.sb-dlg-title { font-size:1.3rem; font-weight:800; color:#f1f5f9; margin-bottom:.4rem; }
.sb-dlg-msg { color:#94a3b8; margin:0 0 1rem; font-size:.92rem; line-height:1.45; white-space:pre-wrap; }
.sb-dlg-actions { display:flex; gap:.6rem; }
.sb-dlg-btn { flex:1; padding:.85rem; border:none; border-radius:.75rem; font-weight:800; font-size:.95rem; cursor:pointer; transition:transform .15s; font-family:inherit; }
.sb-dlg-btn:active { transform:scale(.97); }
.sb-dlg-cancel { background:rgba(255,255,255,.08); color:#cbd5e1; }
.sb-dlg-ok { background:linear-gradient(135deg,#ea580c,#f97316); color:#fff; box-shadow:0 4px 14px rgba(249,115,22,.3); }

.sb-toast {
    position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(20px);
    background:#0f1420; color:#e2e8f0; padding:.85rem 1.2rem; border-radius:.8rem;
    border:1.5px solid rgba(249,115,22,.4); box-shadow:0 10px 30px rgba(0,0,0,.5);
    font-weight:700; font-size:.9rem; opacity:0; pointer-events:none; transition:all .3s; z-index:5500;
    max-width:90vw; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.sb-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.sb-toast.error { border-color:#dc2626; color:#fca5a5; }
.sb-toast.success { border-color:#16a34a; color:#86efac; }