/* Serviu — PDV para Restaurantes | Design System
   Paleta oficial (manual da marca):
   - Laranja Serviu #FF6A00 (energia, agilidade, apetite)
   - Preto #141416 (sofisticação, confiança)
   - Off White #FFFBF5 (equilíbrio, clareza)
   - Cinza #6B7280 (suporte, neutralidade)
   Tipografia: Poppins
   Slogan: Pediu. Lançou. Serviu.
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
  --serviu-orange: #FF6A00;
  --serviu-orange-dark: #D95700;
  --serviu-orange-light: #FF8A33;
  --serviu-orange-soft: rgba(255, 106, 0, 0.12);
  --serviu-black: #141416;
  --serviu-black-soft: #1D1D21;
  --serviu-offwhite: #FFFBF5;
  --serviu-cream: #FFF4E8;
  --serviu-gray: #6B7280;
  --serviu-success: #16A34A;
  --serviu-radius: 1rem;
  --bs-primary: var(--serviu-orange);
}

html, body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}

/* Remapeia Bootstrap primary para laranja Serviu (modo claro) */
.btn-primary {
  background: linear-gradient(135deg, var(--serviu-orange), var(--serviu-orange-dark)) !important;
  border-color: var(--serviu-orange-dark) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
}
.btn-primary:hover {
  background: var(--serviu-orange-dark) !important;
  border-color: var(--serviu-orange-dark) !important;
  box-shadow: 0 8px 24px rgba(255,106,0,.35);
}
.btn-outline-primary {
  color: var(--serviu-orange-dark);
  border-color: var(--serviu-orange);
}
.btn-outline-primary:hover {
  background: var(--serviu-orange);
  border-color: var(--serviu-orange);
  color: #fff;
}
.bg-primary { background-color: var(--serviu-orange) !important; }
.text-primary { color: var(--serviu-orange-dark) !important; }
a:not(.btn):not(.nav-link):not(.dropdown-item) { color: var(--serviu-orange-dark); }

/* Navbar Serviu — sempre preta com detalhe laranja */
.serviu-navbar {
  background: var(--serviu-black) !important;
  border-bottom: 3px solid var(--serviu-orange);
}
.serviu-brand {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.5rem;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.serviu-brand .brand-u { color: var(--serviu-orange); }
.serviu-brand small {
  display: block;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .22em;
  color: rgba(255,255,255,.65);
}
.serviu-logo-mark {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--serviu-orange);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.1rem; flex-shrink: 0;
}

/* Cards / superfícies */
.serviu-card {
  border-radius: var(--serviu-radius);
  border: 1px solid var(--app-border);
}
.serviu-hero-dark {
  background: radial-gradient(ellipse at 80% 20%, rgba(255,106,0,.22) 0%, transparent 55%),
    linear-gradient(135deg, #0c0c0e 0%, var(--serviu-black) 60%, #241107 100%);
  color: #fff;
}
.serviu-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--serviu-orange-light);
}
.serviu-eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 99px; background: var(--serviu-orange); display: inline-block; }

/* Login */
.serviu-login-wrap {
  min-height: 70vh;
  display: flex; align-items: center; justify-content: center;
}
.serviu-login-card { overflow: hidden; border-radius: 1.25rem; }
.serviu-login-side {
  background: linear-gradient(160deg, #0c0c0e, #241107 70%, #3a1a05);
  color: #fff;
  padding: 2.5rem 2rem;
}
.serviu-login-side h3 { font-weight: 800; }
.serviu-login-side h3 span { color: var(--serviu-orange-light); }

/* Ajustes dark mode: mantém laranja como acento */
[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, var(--serviu-orange), var(--serviu-orange-dark)) !important;
  border-color: var(--serviu-orange) !important;
}
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
  color: #fff !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  border-color: var(--serviu-orange) !important;
  box-shadow: 0 0 0 .2rem rgba(255,106,0,.25) !important;
}
#htmx-loading {
  background: linear-gradient(90deg, var(--serviu-orange), var(--serviu-orange-light), var(--serviu-orange)) !important;
}