/* Vuavia clone – shared styles (v1) */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap');

:root {
  --brand: #fd5900;
  --brand-2: #ff8c38;
  --brand-3: #ffb347;
}

* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #18181b;
  background: #fff;
}
.font-mono { font-family: "Geist Mono", ui-monospace, monospace; }

/* Brand helpers (in case Tailwind arbitrary values fail to compile) */
.text-brand { color: var(--brand); }
.bg-brand { background-color: var(--brand); }
.border-brand { border-color: var(--brand); }
.brand-gradient { background-image: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand-3)); }

/* Scrollbar */
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

/* Dropdown / mega menu */
.nav-group > .nav-panel {
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  pointer-events: none;
}
.nav-group:hover > .nav-panel,
.nav-group.open > .nav-panel {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* Card hover */
.product-card { transition: all .3s ease; }
.product-card:hover { transform: translateY(-4px); border-color: rgba(253,89,0,.2); box-shadow: 0 8px 30px rgba(253,89,0,.12); }

/* Line clamp */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px);} to { opacity: 1; transform: translateY(0);} }
.animate-fade-up { animation: fadeInUp .5s ease both; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

/* Toast */
#toast-wrap { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: #18181b; color: #fff; padding: 12px 16px; border-radius: 12px;
  font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); display: flex; align-items: center; gap: 10px;
  animation: fadeInUp .25s ease both; max-width: 340px;
}
.toast.success { background: #16a34a; }
.toast.error { background: #dc2626; }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(9,9,11,.55); backdrop-filter: blur(2px); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-card { background: #fff; border-radius: 24px; width: 100%; max-width: 440px; box-shadow: 0 24px 60px rgba(0,0,0,.3); animation: fadeInUp .25s ease both; }

/* Utility for mobile drawer */
body.no-scroll { overflow: hidden; }