/**
 * ==========================================================
 * deutsch-weg - Custom Styles
 * ==========================================================
 *
 * Only styles Tailwind CDN can't handle: vars, animations, scrollbar, base resets.
 *
 * @package    deutsch-weg
 * @author     Muhammad Zaigham
 * @copyright  MZift.com (@itsmzift) All rights reserved.
 * @license    Proprietary
 *
 * ==========================================================
 */

/* ── Theme Variables ─────────────────────────────────── */
:root {
  --mzift-bg: #131F24;
  --mzift-surface: #1B2B33;
  --mzift-border: #2A3F4A;
  --mzift-accent: #10B981;
  --mzift-accent-glow: rgba(16, 185, 129, 0.3);
  --mzift-danger: #EF4444;
  --mzift-amber: #F59E0B;
  --mzift-orange: #F97316;
  --mzift-purple: #8B5CF6;
}

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

body {
  font-family: 'Nunito', sans-serif;
  background: var(--mzift-bg);
  color: #fff;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--mzift-bg); }
::-webkit-scrollbar-thumb { background: var(--mzift-border); border-radius: 4px; }

/* ── Loading Animation ────────────────────────────────── */
@keyframes mzift-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.mzift-bounce { animation: mzift-bounce 1s ease-in-out infinite; }

/* ── Pressed State for Buttons ────────────────────────── */
.mzift-press { transition: transform 0.1s ease; }
.mzift-press:active { transform: scale(0.97); }

/* ── Progress Bar Transition ──────────────────────────── */
.mzift-bar-fill { transition: width 0.5s ease; }

/* ── Safe Area (PWA notch handling) ───────────────────── */
#mzift-app {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}