/* ============================================================
   NINJA SERVER — CSS CONSOLIDADO (sem duplicatas)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ============================
   VARIÁVEIS GLOBAIS
============================ */
:root {
  --lava:        #f27020;                    /* laranja principal (acentos) */
  --ember:       #ffb442;                    /* âmbar quente (glow secundário) */
  --flame-hi:    #ffcc70;                    /* highlight pontual */
  --flame-dp:    #8b2a08;                    /* deep pra sombras/glows */
  --border-nj:   rgba(242, 112, 32, 0.32);
  --text-nj:     #eaeaea;                    /* branco off neutro */
  --muted-nj:    #7a7a7a;                    /* cinza neutro */
  --pjg-bg:      #060606;                    /* preto quase puro */
  --pjg-bg2:     #111111;                    /* segunda camada dark */
  --pjg-primary: #f27020;
  --pjg-accent:  #ffb442;
}

/* ============================
   BODY / FUNDO
============================ */
body {
  background:
    radial-gradient(ellipse at 20% 0%,  rgba(242, 112, 32, 0.06) 0, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(242, 112, 32, 0.05) 0, transparent 50%),
    #060606 !important;
  color: var(--text-nj) !important;
  font-family: 'Inter', sans-serif !important;
  position: relative;
}

/* Halos discretos de laranja só nas bordas (evita fundo "quente") */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at -5%  15%,  rgba(242, 112, 32, 0.05) 0, transparent 45%),
    radial-gradient(circle at 105% 85%,  rgba(242, 112, 32, 0.04) 0, transparent 45%);
  pointer-events: none;
  z-index: 0;
}

/* ============================
   CANVAS PARTÍCULAS
============================ */
#frp-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: transparent;
  opacity: 0.45 !important;
  pointer-events: none;
}

/* ============================
   TIPOGRAFIA GERAL
============================ */
h4, h5, h6  { color: #fff !important; }
p, small, span { color: var(--text-nj); }
.text-muted  { color: var(--muted-nj) !important; }
.text-white  { color: #fff !important; }

/* ============================
   HEADER / NAV
============================ */
.gsm-header {
  background: linear-gradient(90deg, #000 0%, #111111 50%, #181818 100%) !important;
  box-shadow: 0 4px 20px rgba(242, 112, 32, 0.15) !important;
  border-bottom: 1px solid rgba(242, 112, 32, 0.2) !important;
}

.gsm-theme-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Links da nav */
.nav-links a {
  color: #eaeaea !important;
  padding: 8px 16px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.nav-links a:hover {
  background: linear-gradient(135deg, #7a3010, #f27020) !important;
  color: #000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(242, 112, 32, 0.4) !important;
}

/* Botão auth do header */
.customer-header-auth .btn {
  background: linear-gradient(135deg, #1a1a1a, #7a3010, #f27020) !important;
  border: 1px solid rgba(242, 112, 32, 0.4) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(242, 112, 32, 0.2) !important;
}

.customer-name {
  color: #ffb442 !important;
  text-shadow: 0 0 8px rgba(242, 112, 32, 0.5) !important;
  font-weight: 700 !important;
}

.customer-header-auth .border.rounded-circle {
  background: rgba(242, 112, 32, 0.2) !important;
  border: 2px solid #ffb442 !important;
}

.customer-header-auth .d-flex.align-items-center.gap-1 {
  color: #22c55e !important;
  background: rgba(34, 197, 94, 0.1) !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  font-weight: 700 !important;
}

.nav-arrow {
  background: rgba(242, 112, 32, 0.15) !important;
  color: #ffb442 !important;
  border: 1px solid rgba(242, 112, 32, 0.2) !important;
  border-radius: 8px !important;
}

.nav-arrow:hover {
  background: rgba(242, 112, 32, 0.3) !important;
  color: #fff !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(242, 112, 32, 0.3) !important;
}

/* Hamburger */
.navbar-toggler {
  background: linear-gradient(135deg, rgba(242, 112, 32, 0.2), rgba(242, 112, 32, 0.2)) !important;
  border: 2px solid rgba(242, 112, 32, 0.4) !important;
  border-radius: 16px !important;
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(242, 112, 32, 0.2) !important;
}

.navbar-toggler:hover {
  background: linear-gradient(135deg, #f27020, #ffb442) !important;
  border-color: #ffb442 !important;
  transform: scale(1.1) rotate(90deg) !important;
  box-shadow: 0 8px 25px rgba(242, 112, 32, 0.4) !important;
}

.navbar-toggler .bi-list {
  font-size: 24px !important;
  color: #ffb442 !important;
  text-shadow: 0 0 8px rgba(242, 112, 32, 0.5) !important;
}

.navbar-toggler:hover .bi-list {
  color: #fff !important;
  filter: drop-shadow(0 0 10px #ffb442) !important;
}

.navbar-toggler:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* ============================
   DROPDOWN — LISTA DE SERVIÇOS
============================ */
li.has-drop.is-open[data-drop="drop-down-2"] a {
  background: linear-gradient(135deg, rgba(242, 112, 32, 0.2), rgba(242, 112, 32, 0.2)) !important;
  border: 1px solid rgba(242, 112, 32, 0.4) !important;
  border-radius: 12px 12px 0 0 !important;
  color: #ffb442 !important;
  box-shadow: 0 4px 15px rgba(242, 112, 32, 0.15) !important;
}

li.has-drop.is-open .chevron {
  stroke: #ffb442 !important;
  transform: rotate(180deg) !important;
  transition: all 0.3s ease !important;
}

.gsm-dropdown#drop-down-2 {
  background: linear-gradient(145deg, #111111, #181818) !important;
  border: 1px solid rgba(242, 112, 32, 0.3) !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 10px 30px rgba(242, 112, 32, 0.25) !important;
  backdrop-filter: blur(15px) !important;
  padding: 8px 0 !important;
}

.gsm-dropdown#drop-down-2 a {
  color: #eaeaea !important;
  padding: 12px 20px !important;
  margin: 0 8px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  border-right: 2px solid transparent !important;
}

.gsm-dropdown#drop-down-2 a:hover {
  background: linear-gradient(90deg, rgba(242, 112, 32, 0.3), rgba(242, 112, 32, 0.3)) !important;
  color: #ffb442 !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 12px rgba(242, 112, 32, 0.2) !important;
  border-right-color: #ffb442 !important;
}

/* ============================
   DROPDOWN — CLIENTE / PAINEL
============================ */
.dropdown-menu.customer-auth-menu {
  background: linear-gradient(145deg, #111111, #181818) !important;
  border: 1px solid rgba(242, 112, 32, 0.3) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 35px rgba(242, 112, 32, 0.25) !important;
  backdrop-filter: blur(15px) !important;
  padding: 12px !important;
}

.dropdown-menu.customer-auth-menu.show {
  animation: dropdownSlide 0.25s ease-out !important;
}

@keyframes dropdownSlide {
  from { opacity: 0; transform: translateY(-10px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.dropdown-menu.customer-auth-menu .dropdown-item {
  color: #eaeaea !important;
  padding: 10px 16px !important;
  margin: 4px 0 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  border-left: 3px solid transparent !important;
  transition: all 0.25s ease !important;
}

.dropdown-menu.customer-auth-menu .dropdown-item:hover {
  background: linear-gradient(90deg, rgba(242, 112, 32, 0.25), rgba(242, 112, 32, 0.25)) !important;
  color: #ffb442 !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 12px rgba(242, 112, 32, 0.15) !important;
  border-left-color: #ffb442 !important;
}

.dropdown-menu.customer-auth-menu .dropdown-item i {
  color: #ffb442 !important;
  margin-right: 10px !important;
  font-size: 16px !important;
}

.dashed-bottom {
  border-bottom: 1px dashed rgba(242, 112, 32, 0.3) !important;
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
}

.dropdown-item.bg-light-danger {
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.2), rgba(239, 68, 68, 0.2)) !important;
  border-left-color: #dc2626 !important;
  color: #fca5a5 !important;
}

.dropdown-item.bg-light-danger:hover {
  background: linear-gradient(90deg, #dc2626, #ef4444) !important;
  color: #fff !important;
  border-left-color: #ef4444 !important;
}

/* ============================
   OFFCANVAS MENU
============================ */
#menuOffcanvas {
  background: linear-gradient(135deg, rgba(15, 5, 5, 0.98), rgba(35, 15, 10, 0.98)) !important;
  backdrop-filter: blur(15px) !important;
  border-right: 1px solid rgba(242, 112, 32, 0.3) !important;
}

.offcanvas-header {
  background: linear-gradient(135deg, rgba(50, 15, 10, 0.95), rgba(70, 30, 15, 0.95)) !important;
  border-bottom: 1px solid rgba(242, 112, 32, 0.3) !important;
  border-radius: 20px 0 0 0 !important;
  padding: 20px !important;
}

.bi-chevron-left {
  color: #ffb442 !important;
  font-size: 24px !important;
}

.bi-chevron-left:hover {
  color: #ffcc70 !important;
  transform: scale(1.2) !important;
}

.navbar-brand img {
  filter: drop-shadow(0 0 10px rgba(242, 112, 32, 0.5)) !important;
}

.offcanvas-body h5 {
  color: #ffb442 !important;
  font-weight: 800 !important;
  text-shadow: 0 0 8px rgba(242, 112, 32, 0.5) !important;
  border-bottom: 2px solid rgba(242, 112, 32, 0.2) !important;
  padding-bottom: 12px !important;
  margin-bottom: 20px !important;
}

.offcanvas-body a.text-reset {
  color: #eaeaea !important;
  font-weight: 600 !important;
  padding: 16px 20px !important;
  border-radius: 12px !important;
  border-bottom: 1px solid rgba(242, 112, 32, 0.1) !important;
  margin-bottom: 12px !important;
  transition: all 0.3s ease !important;
}

.offcanvas-body a.text-reset:hover {
  background: rgba(242, 112, 32, 0.15) !important;
  color: #ffb442 !important;
  transform: translateX(8px) !important;
  box-shadow: 0 4px 15px rgba(242, 112, 32, 0.2) !important;
  border-left: 4px solid #ffb442 !important;
}

.offcanvas-body i            { color: #ffb442 !important; font-size: 18px !important; }
.float-end.text-muted i      { color: #ffb442 !important; }

.btn-danger.rounded {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  border: none !important;
  border-radius: 16px !important;
  font-weight: 700 !important;
  padding: 16px !important;
  margin-top: 24px !important;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3) !important;
}

.btn-danger:hover {
  background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4) !important;
}

/* ============================
   POPUP TERMOS
============================ */
.popup-overlay-rc {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  overflow-y: auto;
}

.popup-box-rc {
  background: #060606;
  border: 2px solid rgba(242, 112, 32, 0.5);
  border-radius: 16px;
  max-width: 680px;
  width: 92%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(0.92);
  transition: all 0.4s ease;
  color: #eaeaea;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
}

.popup-box-rc.show { opacity: 1; transform: scale(1); }

.popup-header-warning {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  padding: 20px;
  border-radius: 14px 14px 0 0;
  text-align: center;
  color: #fff;
}

.icon-warning {
  font-size: 2.5rem;
  display: inline-block;
  animation: shake 0.5s ease-in-out infinite alternate;
}

@keyframes shake {
  from { transform: rotate(-5deg); }
  to   { transform: translateX(5px) rotate(5deg); }
}

.popup-header-warning h2 { margin: 10px 0 0; font-size: 1.4rem; color: #fff; }

.popup-content-scroll {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(90vh - 200px);
  line-height: 1.6;
}

.popup-content-scroll h3        { color: #ffb442; margin: 20px 0 12px; }
.popup-content-scroll p,
.popup-content-scroll li        { color: #c0c0c0; }
.popup-content-scroll ul        { padding-left: 20px; margin: 10px 0; }
.popup-content-scroll li        { margin-bottom: 8px; }
.popup-content-scroll hr        { border: none; border-top: 1px solid rgba(255,255,255,.08); margin: 20px 0; }

.warning-box {
  padding: 16px;
  border-radius: 10px;
  margin: 16px 0;
  border-left: 5px solid;
}

.warning-box.critical { background: rgba(220, 38, 38, 0.10); border-color: #dc2626; }
.warning-box.danger   { background: rgba(242, 112, 32, 0.08); border-color: #8a3812; }
.warning-box h3       { margin-top: 0; color: #fca5a5; }

.highlight-red {
  color: #f87171;
  font-weight: 700;
  text-align: center;
  display: block;
  margin-top: 12px;
}

.acceptance-box {
  background: rgba(255, 255, 255, 0.03);
  padding: 20px;
  border-radius: 10px;
  border: 2px dashed rgba(242, 112, 32, 0.4);
  margin-top: 20px;
}

.acceptance-text { font-weight: 600; color: #eaeaea; margin: 0; text-align: center; }

.popup-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  background: #060606;
  border-top: 1px solid rgba(242, 112, 32, 0.2);
  border-radius: 0 0 14px 14px;
}

/* Checkbox customizado */
.terms-check-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  cursor: pointer;
}

.terms-check-wrapper input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }

.terms-check-custom {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #5a5a5a;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111111;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.terms-check-icon {
  font-size: 14px;
  color: #22c55e;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
}

.terms-check-text { color: #eaeaea; }

.terms-check-wrapper input:checked + .terms-check-custom {
  border-color: #22c55e;
  background: #16a34a;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.terms-check-wrapper input:checked + .terms-check-custom .terms-check-icon {
  opacity: 1;
  transform: scale(1);
}

/* Botão aceitar */
.btn-accept-rc {
  padding: 14px 36px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  transition: all 0.3s ease;
}

.btn-accept-rc:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(22, 163, 74, 0.4);
}

.btn-accept-rc:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================
   MODAL SOCIAL (NINJA SERVER)
============================ */
#pjg-social-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.97);
  backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  z-index: 200000;
}

#pjg-social-modal {
  background: linear-gradient(145deg, #060606, #0e0e0e);
  border-radius: 20px;
  overflow: hidden;
  max-width: 400px;
  width: 92%;
  box-shadow: 0 25px 80px rgba(0,0,0,0.95), 0 0 50px rgba(242, 112, 32, 0.12);
  border: 1px solid rgba(242, 112, 32, 0.25);
}

#pjg-social-modal.animating {
  animation: socialFadeIn 0.5s ease forwards;
}

@keyframes socialFadeIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1);   }
}

/* Cards do modal social */
.frp-social-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #050505;
  border: 1px solid rgba(180, 180, 180, 0.25);
  box-shadow: 0 14px 35px rgba(0,0,0,0.9);
  position: relative;
  overflow: hidden;
  transition: all .25s ease-out;
  text-decoration: none;
}

.frp-sc-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: #060606;
  display: flex;
  align-items: center;
  justify-content: center;
}

.frp-sc-icon img { width: 22px; height: 22px; }
.frp-sc-text     { flex: 1; text-align: left; }
.frp-sc-title    { font-weight: 700; font-size: 15px; color: #eaeaea; }
.frp-sc-sub      { font-size: 12px; color: #7a7a7a; }
.frp-sc-arrow    { font-size: 18px; color: #5a5a5a; }

.frp-social-card::before {
  content: '';
  position: absolute;
  inset: -40%;
  opacity: 0;
  filter: blur(26px);
  transition: opacity .25s ease-out;
  z-index: -1;
}

/* Telegram */
.frp-social-card.frp-tg::before  { background: radial-gradient(circle, #38bdf8 0, #0e0e0e 55%, transparent 70%); }
.frp-social-card.frp-tg:hover    { box-shadow: 0 0 0 1px rgba(56,189,248,.6), 0 0 40px rgba(56,189,248,.7); }
.frp-social-card.frp-tg:hover::before { opacity: 1; }

/* WhatsApp */
.frp-social-card.frp-wp::before  { background: radial-gradient(circle, #22c55e 0, #0e0e0e 55%, transparent 70%); }
.frp-social-card.frp-wp:hover    { box-shadow: 0 0 0 1px rgba(34,197,94,.6), 0 0 40px rgba(34,197,94,.7); }
.frp-social-card.frp-wp:hover::before { opacity: 1; }
.frp-social-card.frp-wp .frp-sc-icon  { background: #011a0a; }
.frp-social-card.frp-wp .frp-sc-arrow { color: #22c55e; }

/* YouTube */
.frp-social-card.frp-yt::before  { background: radial-gradient(circle, #f97373 0, #0e0e0e 55%, transparent 70%); }
.frp-social-card.frp-yt:hover    { box-shadow: 0 0 0 1px rgba(248,113,113,.7), 0 0 40px rgba(248,113,113,.8); }
.frp-social-card.frp-yt:hover::before { opacity: 1; }
.frp-social-card.frp-yt .frp-sc-icon  { background: #060606; }
.frp-social-card.frp-yt .frp-sc-arrow { color: #fb7185; }

/* Botão fechar social */
#social-close {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 14px 18px;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: #eaeaea;
  cursor: pointer;
  background: linear-gradient(90deg, #f27020, #ec4899, #3b82f6);
  box-shadow: 0 18px 40px rgba(6, 6, 6, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .25s ease-out;
}

#social-close:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 0 1px rgba(242, 112, 32, .7), 0 0 30px rgba(242, 112, 32, .6);
  filter: brightness(1.08);
}

/* ============================
   SIDEBAR FLUTUANTE
============================ */
.nj-sidebar {
  position: fixed;
  right: 20px;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10000;
}

.pjg-btn-side {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.7);
  transition: all 0.3s ease;
  border: 1px solid rgba(242, 112, 32, 0.3);
  cursor: pointer;
  color: #fff !important;
  font-size: 20px;
  text-decoration: none;
}

.pjg-btn-side:hover  { transform: translateY(-4px); filter: brightness(1.2); }
.bg-tlg              { background: linear-gradient(135deg, #0d2d4a, #1a3a5c); }
.bg-wpp              { background: linear-gradient(135deg, #0d2d1a, #1a3d2b); }

/* ============================
   FAQ FLUTUANTE
============================ */
.nj-faq-btn-float {
  position: fixed;
  bottom: 30px;
  right: 20px;
  z-index: 100002 !important;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7a3010, #f27020);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(242, 112, 32, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.nj-faq-btn-float:hover {
  transform: scale(1.1) rotate(15deg);
  box-shadow: 0 0 35px rgba(242, 112, 32, 0.8);
}

.nj-faq-box-float {
  display: none;
  position: fixed;
  bottom: 100px;
  right: 20px;
  z-index: 100002 !important;
  width: 320px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(8, 0, 0, 0.97);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(242, 112, 32, 0.3);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9);
}

@keyframes fadeInUp {
  from { opacity: 0; transform: scale(0.8) translateY(20px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);    }
}

#nj-faq-toggle:checked ~ .nj-faq-box-float {
  display: block;
  animation: fadeInUp .4s ease forwards;
}

.nj-faq-header {
  background: rgba(242, 112, 32, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 20px;
  position: relative;
}

.nj-faq-header h4 { margin: 0; font-size: 16px; font-weight: 800; color: #fff; text-transform: uppercase; }
.nj-faq-header p  { margin: 5px 0 0; font-size: 12px; color: #ffb442; }

.nj-faq-badge {
  font-size: 10px;
  background: rgba(242, 112, 32, 0.2);
  color: #ffcc70;
  padding: 4px 10px;
  border-radius: 4px;
  margin-top: 8px;
  display: inline-block;
  border: 1px solid rgba(242, 112, 32, 0.4);
  font-weight: bold;
}

.nj-faq-close {
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
  font-size: 12px;
  color: #fff;
  background: rgba(0,0,0,0.6);
  padding: 5px 8px;
  border-radius: 5px;
  transition: .2s;
}

.nj-faq-close:hover { background: #7a3010; }

.nj-faq-content { padding: 15px; max-height: 350px; overflow-y: auto; }

.nj-question-label {
  display: block;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: #eaeaea;
  transition: all 0.2s ease;
}

.nj-question-label:hover {
  background: rgba(242, 112, 32, 0.15);
  border-color: rgba(242, 112, 32, 0.5);
  transform: translateX(4px);
}

.nj-answer {
  display: none;
  margin-top: -5px;
  margin-bottom: 15px;
  padding: 10px 15px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
  color: #7a7a7a;
  line-height: 1.5;
  background: rgba(0,0,0,0.5);
  border-radius: 0 0 12px 12px;
}

.nj-q-toggle:checked + .nj-question-label {
  background: rgba(242, 112, 32, 0.15);
  border-color: #7a3010;
  border-radius: 12px 12px 0 0;
}

.nj-q-toggle:checked + .nj-question-label + .nj-answer {
  display: block;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ============================
   CARDS — HOVER GERAL
============================ */
.card,
.list-group-item,
.service-item,
.table tbody tr,
.category-item {
  transition: all 0.3s ease !important;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255,255,255,0.04);
}

.card:hover,
.list-group-item:hover,
.service-item:hover,
.category-item:hover,
.table tbody tr:hover {
  transform: translateY(-2px) !important;
  z-index: 10 !important;
  box-shadow: 0 4px 16px rgba(242, 112, 32, 0.18) !important;
  border-color: rgba(242, 112, 32, 0.5) !important;
  background-color: rgba(242, 112, 32, 0.03) !important;
  cursor: pointer;
}

.card:hover *,
.list-group-item:hover * { color: #fff !important; }
.card:hover i,
.list-group-item:hover i { color: #ffb442 !important; transform: scale(1.1); }

/* Card principal */
.card.rounded-0 {
  background: rgba(15, 5, 0, 0.97) !important;
  border: 1px solid var(--border-nj) !important;
  border-radius: 16px !important;
}

/* ============================
   PAGE TOP INFO
============================ */
.page-top-info {
  background: linear-gradient(135deg, rgba(30,10,10,.92), rgba(50,20,10,.92)) !important;
  border: 1px solid rgba(255,120,40,.35) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 40px rgba(255,80,20,.18), inset 0 1px 0 rgba(255,150,60,.2) !important;
  backdrop-filter: blur(15px) !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
  color: #fff !important;
}

.page-top-info *                    { color: #fff !important; }
.page-top-info h5                   { color: #ffcc70 !important; text-shadow: 0 0 12px rgba(255,170,96,.6) !important; }
.page-top-info .breadcrumb-item,
.page-top-info .breadcrumb-item a   { color: #eaeaea !important; }
.page-top-info .breadcrumb-item a:hover { color: #ffb442 !important; }
.page-top-info #search-input::placeholder { color: rgba(255,255,255,.6) !important; }
.page-top-info #search-input        { color: #fff !important; background: rgba(255,255,255,.08) !important; }

/* ============================
   CARDS DE SERVIÇO (LISTAGEM)
============================ */
.col-xxl-4.col-xl-6.col-sm-12 .card {
  background: rgba(10,0,0,.95) !important;
  border: 1px solid rgba(242, 112, 32, .2) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 25px rgba(242, 112, 32, .15) !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
}

.col-xxl-4.col-xl-6.col-sm-12 .card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(242, 112, 32, .25) !important;
  border-color: rgba(242, 112, 32, .4) !important;
}

.card-body {
  background: linear-gradient(145deg, rgba(26,0,0,.8), rgba(42,0,0,.8)) !important;
  padding: 16px !important;
}

.card img.rounded.border {
  border: 2px solid rgba(242, 112, 32, .4) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(242, 112, 32, .2) !important;
  transition: all 0.3s ease !important;
}

.card:hover img.rounded.border {
  transform: scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(242, 112, 32, .3) !important;
  border-color: #ffb442 !important;
}

.card .text-muted { color: #eaeaea !important; font-weight: 600 !important; }
.card p.mb-2      { font-size: 14px !important; line-height: 1.4 !important; margin-bottom: 12px !important; }

/* Badges preço/tempo */
.badge.bg-light-primary,
.badge.bg-light-warning {
  background: linear-gradient(135deg, rgba(242, 112, 32, .2), rgba(255,170,96,.2)) !important;
  border: 1px solid rgba(242, 112, 32, .4) !important;
  color: #ffb442 !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
}

.badge.bg-light-primary:hover,
.badge.bg-light-warning:hover {
  background: linear-gradient(135deg, #ffb442, #ffcc70) !important;
  color: #000 !important;
  transform: scale(1.05) !important;
}

/* ============================
   BREADCRUMB
============================ */
.breadcrumb {
  background: #181818 !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
}

.breadcrumb-item a      { color: #ffb442 !important; }
.breadcrumb-item.active { color: #fff !important; }

/* ============================
   TABELA — ORDER HISTORY
============================ */
.container .card.rounded-0 {
  background: linear-gradient(135deg, rgba(20,5,5,.95), rgba(40,15,10,.95)) !important;
  border: 1px solid rgba(255,110,30,.3) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 40px rgba(255,70,20,.18) !important;
  overflow: hidden !important;
  color: #fff !important;
}

.container .card-header.service-card-header {
  background: linear-gradient(135deg, rgba(35,10,10,.95), rgba(55,25,15,.95)) !important;
  border: none !important;
  border-radius: 20px 20px 0 0 !important;
  color: #fff !important;
}

.container .card-header *         { color: #fff !important; }
.container h5.mb-sm-0             { color: #ffcc70 !important; text-shadow: 0 0 12px rgba(255,170,96,.6) !important; font-weight: 800 !important; }
.container .breadcrumb-item,
.container .breadcrumb-item a     { color: #fff !important; }
.container .breadcrumb-item a:hover { color: #ffb442 !important; }

#order-search {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(242, 112, 32, .4) !important;
  border-radius: 12px !important;
}

#order-search::placeholder { color: rgba(255,255,255,.5) !important; }

#order-history-table { background: rgba(15,5,5,.9) !important; border-radius: 0 0 20px 20px !important; color: #eaeaea !important; }

#order-history-table th {
  background: linear-gradient(90deg, rgba(242, 112, 32, .15), rgba(242, 112, 32, .1)) !important;
  color: #ffb442 !important;
  font-weight: 700 !important;
  border: none !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  padding: 16px 12px !important;
}

#order-history-table td {
  color: #eaeaea !important;
  padding: 14px 12px !important;
  border: none !important;
  border-bottom: 1px solid rgba(242, 112, 32, .1) !important;
}

/* ============================
   BADGES DE STATUS
============================ */
/* Success */
.bg-success {
  background: linear-gradient(135deg, rgba(34,197,94,.2), rgba(74,222,128,.2)) !important;
  border: 1px solid rgba(34,197,94,.4) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
  width: 130px !important;
}

/* Rejected */
.bg-danger.fs-6 {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  border: 2px solid rgba(220,38,38,.6) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 25px !important;
  padding: 10px 18px !important;
  width: 130px !important;
  box-shadow: 0 4px 12px rgba(220,38,38,.3) !important;
}

/* Waiting */
.bg-secondary.fs-6 {
  background: linear-gradient(135deg, rgba(180, 180, 180, .25), rgba(180, 180, 180, .25)) !important;
  border: 1px solid rgba(180, 180, 180, .5) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
  width: 130px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bg-secondary.fs-6 i    { color: #fff !important; margin-right: 6px !important; font-size: 14px !important; }
.bg-secondary.fs-6 span { font-size: 11px !important; white-space: nowrap !important; }
.bg-danger i             { color: #fff !important; margin-right: 6px !important; }

/* Paid (tabela invoice) */
.badge.bg-success {
  background: #22c55e !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  padding: 5px 12px !important;
  box-shadow: none !important;
}

/* ============================
   STAT CARDS (dashboard)
============================ */
a[href*="order=waiting-action"] .card { background: #666666 !important; }
a[href*="order=inprocess"]      .card { background: #f59e0b !important; }
a[href*="order=success"]        .card { background: #22c55e !important; }
a[href*="order=rejected"]       .card { background: #ef4444 !important; }

a[href*="order=waiting-action"] .card,
a[href*="order=inprocess"]      .card,
a[href*="order=success"]        .card,
a[href*="order=rejected"]       .card {
  border: none !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: all 0.2s !important;
}

a[href*="order="]:focus .card,
a[href*="order="]:active .card,
a[href*="order="]:focus-visible .card { outline: none !important; box-shadow: none !important; border: none !important; }

a[href*="order=waiting-action"]:hover .card,
a[href*="order=inprocess"]:hover      .card,
a[href*="order=success"]:hover        .card,
a[href*="order=rejected"]:hover       .card {
  transform: translateY(-3px) !important;
  filter: brightness(1.1) !important;
}

a[href*="order="] .card .avtar {
  background: rgba(255,255,255,.2) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
}

a[href*="order="] .card h6,
a[href*="order="] .card h4,
a[href*="order="] .card span { color: #fff !important; }

/* Corrige texto cortado nos mini-cards (Waiting/In Process/Success/Rejected
   e Total Orders Placed): garante que o card ocupe toda a largura da
   coluna e que o texto quebre por palavra (nunca letra a letra). */
a[href*="order="],
a[href="/my/order-history"] {
  display: block !important;
}

a[href*="order="] .card,
a[href="/my/order-history"].card {
  width: 100% !important;
}

a[href*="order="] .card h6,
a[href="/my/order-history"].card h6 {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  -webkit-line-clamp: unset !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}

a[href*="order="] .card .avtar,
a[href="/my/order-history"].card .avtar {
  flex-shrink: 0 !important;
}

/* Total Orders */
a[href="/my/order-history"].card {
  background: linear-gradient(135deg, rgba(255,68,0,.15), rgba(242, 112, 32, .08)) !important;
  border: 1px solid rgba(242, 112, 32, .35) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: all 0.2s !important;
}

a[href="/my/order-history"].card:hover {
  border-color: rgba(242, 112, 32, .6) !important;
  transform: translateY(-1px) !important;
}

a[href="/my/order-history"].card .btn-icon {
  background: rgba(242, 112, 32, .15) !important;
  border: 1px solid var(--border-nj) !important;
  color: var(--ember) !important;
  border-radius: 8px !important;
}

/* ============================
   MENU LATERAL (customer-m-menu)
============================ */
.customer-m-menu {
  background: linear-gradient(180deg, rgba(20,5,0,.98), rgba(10,2,0,.98)) !important;
  border-right: 1px solid var(--border-nj) !important;
  min-width: 200px !important;
}

.customer-m-menu .btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: none !important;
  background: transparent !important;
  color: var(--muted-nj) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  width: 100% !important;
  text-align: left !important;
  margin-bottom: 4px !important;
  transition: all 0.2s !important;
}

.customer-m-menu .btn:hover {
  background: rgba(255,68,0,.1) !important;
  color: var(--ember) !important;
  transform: translateX(3px) !important;
}

.customer-m-menu .btn.active {
  background: linear-gradient(90deg, rgba(255,68,0,.2), rgba(242, 112, 32, .1)) !important;
  color: var(--ember) !important;
  border-left: 3px solid var(--lava) !important;
  padding-left: 9px !important;
}

.customer-m-menu .btn i { font-size: 15px !important; width: 18px !important; text-align: center !important; }

/* ============================
   BALANCE CARD
============================ */
.balance-card {
  background: linear-gradient(135deg, #111111, #181818, #111111) !important;
  border: 1px solid rgba(242, 112, 32, .35) !important;
  border-radius: 16px !important;
  position: relative !important;
  overflow: hidden !important;
}

.balance-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(242, 112, 32, .12), transparent 60%);
  pointer-events: none;
}

.balance-card h6 { color: var(--muted-nj) !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
.balance-card h2 { font-family: 'Rajdhani', sans-serif !important; font-size: 34px !important; font-weight: 700 !important; color: #fff !important; text-shadow: 0 0 20px rgba(242, 112, 32, .4) !important; }

.balance-card .balance-sub { background: rgba(255,255,255,.04) !important; border: 1px solid var(--border-nj) !important; border-radius: 10px !important; }
.balance-card .balance-sub small { color: var(--muted-nj) !important; font-size: 11px !important; }
.balance-card .balance-sub h5    { color: #fff !important; font-size: 16px !important; font-weight: 600 !important; }

.balance-card .btn {
  background: linear-gradient(135deg, #1a1a1a, #7a3010, #f27020) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px rgba(255,68,0,.3) !important;
  transition: all 0.2s !important;
}

.balance-card .btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255,68,0,.5) !important;
  filter: brightness(1.1) !important;
}

/* ============================
   FORMULÁRIOS
============================ */
.form-label {
  color: var(--muted-nj) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.form-control {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--border-nj) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 14px !important;
  transition: all 0.2s !important;
}

.form-control:focus {
  border-color: var(--ember) !important;
  background: rgba(242, 112, 32, .06) !important;
  box-shadow: 0 0 0 3px rgba(242, 112, 32, .1) !important;
  color: #fff !important;
}

.form-control[readonly],
.form-control.bg-gray-200 { background: rgba(255,255,255,.03) !important; color: var(--muted-nj) !important; cursor: not-allowed !important; }

.form-control::placeholder { color: rgba(255,255,255,.3) !important; }

/* Botão primário */
.btn.btn-primary {
  background: linear-gradient(135deg, #7a3010, #f27020) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
}

.btn.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(255,68,0,.4) !important;
  filter: brightness(1.1) !important;
}

/* Switches */
.form-check-input[type="checkbox"] { background-color: rgba(255,255,255,.1) !important; border-color: var(--border-nj) !important; cursor: pointer !important; }
.form-check-input:checked { background-color: var(--lava) !important; border-color: var(--lava) !important; }
.form-check-input:focus   { box-shadow: 0 0 0 3px rgba(255,68,0,.2) !important; }
.col-form-label           { color: var(--text-nj) !important; font-size: 14px !important; }

/* ============================
   API — INPUT GROUP
============================ */
.input-group .form-control { border-radius: 10px 0 0 10px !important; }

.input-group .btn.btn-outline-secondary {
  background: rgba(255,68,0,.12) !important;
  border: 1px solid var(--border-nj) !important;
  border-left: none !important;
  border-radius: 0 10px 10px 0 !important;
  color: var(--ember) !important;
  transition: all 0.2s !important;
}

.input-group .btn.btn-outline-secondary:hover { background: rgba(255,68,0,.28) !important; color: #fff !important; }

.api-docs-content .btn.btn-primary { background: linear-gradient(135deg, #7a3010, #f27020) !important; border-radius: 8px !important; font-size: 13px !important; }
.api-docs-content .fw-medium       { color: #fff !important; }
.api-docs-content small            { color: var(--muted-nj) !important; }
.api-docs-content .border-bottom   { border-color: var(--border-nj) !important; }
.col-form-label.border-bottom      { border-color: var(--border-nj) !important; color: var(--text-nj) !important; }

.changeAccessKey {
  background: linear-gradient(135deg, #7a3010, #f27020) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
}

.changeAccessKey:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(255,68,0,.4) !important; }

/* ============================
   MODAL ORDER DETAILS
============================ */
#orderDetailsModal { background: rgba(0,0,0,.92) !important; backdrop-filter: blur(15px) !important; }

#orderDetailsModal .modal-content {
  background: linear-gradient(135deg, rgba(20,5,5,.98), rgba(40,15,10,.98)) !important;
  border: 1px solid rgba(242, 112, 32, .3) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 60px rgba(242, 112, 32, .25) !important;
  overflow: hidden !important;
}

#orderDetailsModal .modal-header {
  background: linear-gradient(135deg, rgba(35,10,10,.95), rgba(55,25,15,.95)) !important;
  border: none !important;
  padding: 24px !important;
}

.modal-top-header {
  background: rgba(242, 112, 32, .1) !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  border: 1px solid rgba(242, 112, 32, .3) !important;
}

#modal-order-id { color: #ffb442 !important; font-weight: 800 !important; text-shadow: 0 0 12px rgba(242, 112, 32, .5) !important; }

.order-modal-close {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

.order-modal-close:hover { background: linear-gradient(135deg, #b91c1c, #dc2626) !important; transform: scale(1.1) !important; }
.order-modal-title { color: #fff !important; font-weight: 700 !important; font-size: 20px !important; line-height: 1.5 !important; text-shadow: 0 1px 3px rgba(0,0,0,.5) !important; }

#orderDetailsModal .modal-body { background: rgba(25,15,10,.97) !important; border: none !important; color: #fff !important; padding: 28px !important; }

.o-history-sec1           { color: #ffcc70 !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 12px !important; letter-spacing: .5px !important; }
.o-history-sec1.fs-5      { color: #fff !important; font-weight: 800 !important; font-size: 22px !important; margin-top: 4px !important; }
.o-history-sec1.text-muted { color: rgba(255,255,255,.85) !important; }

#orderDetailsModal .text-muted.mt-4  { color: #fff !important; font-weight: 600 !important; font-size: 14px !important; margin-bottom: 8px !important; }
#orderDetailsModal .text-muted.float-end { color: #ffb442 !important; font-weight: 600 !important; }
#orderDetailsModal .text-muted.float-end:hover { color: #ffcc70 !important; text-shadow: 0 0 8px rgba(242, 112, 32, .5) !important; }
#orderDetailsModal .border-bottom    { border-color: rgba(242, 112, 32, .2) !important; }
#orderDetailsModal .text-muted       { color: rgba(255,255,255,.95) !important; }

#current-ststus-badge .bg-success {
  background: linear-gradient(135deg, rgba(34,197,94,.25), rgba(74,222,128,.25)) !important;
  border: 1px solid rgba(34,197,94,.5) !important;
  color: #fff !important;
}

.order-comments-section {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(242, 112, 32, .4) !important;
  border-radius: 16px !important;
  color: #eaeaea !important;
  padding: 24px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.order-comments-section font[color="red"] { color: #f87171 !important; font-weight: 700 !important; }
.fw-medium.pb-1 { color: #ffb442 !important; font-weight: 700 !important; font-size: 15px !important; }

/* ============================
   MODAL ORDER (orderModal / historyHtml)
============================ */
#orderModal { background: rgba(0,0,0,.92) !important; backdrop-filter: blur(15px) !important; }

#orderModal .modal-content {
  background: linear-gradient(135deg, rgba(20,5,5,.98), rgba(40,15,10,.98)) !important;
  border: 1px solid rgba(242, 112, 32, .3) !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 60px rgba(242, 112, 32, .25) !important;
  overflow: hidden !important;
}

/* Modal body / header backgrounds (sobrescreve bg-white e bg-primary do Bootstrap) */
#orderModal .modal-body,
#orderModal .modal-body.bg-white,
#orderModal .bg-white {
  background: transparent !important;
  color: #fff !important;
}

#orderModal .bg-primary {
  background: linear-gradient(135deg, rgba(35,10,10,.95), rgba(55,25,15,.95)) !important;
  border-bottom: 1px solid rgba(242, 112, 32, .2) !important;
}

/* Header (ORDER ID + badge de status) */
#orderModal .bg-light-secondary,
#orderModal .bg-light-success,
#orderModal .bg-light-danger,
#orderModal .bg-light-warning {
  background: linear-gradient(135deg, rgba(35,10,10,.95), rgba(55,25,15,.95)) !important;
  border-bottom: 1px solid rgba(242, 112, 32, .2) !important;
}

#orderModal #modalLabel {
  color: #ffcc70 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(242, 112, 32, .4) !important;
}

#orderModal #modalLabel .fw-bold { color: #ffb442 !important; }

#orderModal .btn-close {
  filter: invert(1) brightness(1.6);
  opacity: .75;
}
#orderModal .btn-close:hover { opacity: 1; }

#orderModal h1.h5 {
  color: #fff !important;
  background: rgba(255,255,255,.02) !important;
  border-top: 1px solid rgba(242, 112, 32, .1) !important;
}

/* Badges de status dentro do orderModal */
#orderModal .badge.bg-secondary {
  background: linear-gradient(135deg, rgba(180, 180, 180, .25), rgba(180, 180, 180, .25)) !important;
  border: 1px solid rgba(180, 180, 180, .5) !important;
  color: #fff !important;
}
#orderModal .badge.bg-success {
  background: linear-gradient(135deg, rgba(34,197,94,.2), rgba(74,222,128,.2)) !important;
  border: 1px solid rgba(34,197,94,.4) !important;
  color: #fff !important;
}
#orderModal .badge.bg-danger {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  border: 1px solid rgba(220,38,38,.6) !important;
  color: #fff !important;
}
#orderModal .badge i { margin-right: 4px; }

/* Caixas internas (Amount/Quantity, Timeline, Order Inputs, Reply) */
#orderModal .border,
#orderModal .border-end,
#orderModal .border-bottom {
  border-color: rgba(242, 112, 32, .18) !important;
}

#orderModal .bg-light {
  background: rgba(255,255,255,.03) !important;
}

#orderModal .text-dark { color: #fff !important; }
#orderModal .text-muted { color: #7a7a7a !important; }
#orderModal .text-secondary { color: #c0c0c0 !important; }
#orderModal .text-success { color: #34d399 !important; }

#orderModal h2.text-uppercase {
  color: #ffb442 !important;
  letter-spacing: .08em !important;
}

#orderModal dt { color: #7a7a7a !important; }
#orderModal dd { color: #fff !important; }

/* Botão Copy */
#orderModal .btn-outline-primary {
  background: rgba(242, 112, 32, .1) !important;
  border: 1px solid rgba(242, 112, 32, .4) !important;
  color: #ffb442 !important;
  border-radius: 8px !important;
  transition: all .2s ease !important;
}
#orderModal .btn-outline-primary:hover {
  background: linear-gradient(135deg, #7a3010, #f27020) !important;
  border-color: #f27020 !important;
  color: #fff !important;
}

/* ============================
   MODAL LOGIN / CADASTRO (authFormScroll)
============================ */
.modal:has(#authFormScroll) {
  background: rgba(0,0,0,.92) !important;
  backdrop-filter: blur(15px) !important;
}

#authFormScroll,
#authFormScroll ~ * ,
.auth-illus-panel {
  background: transparent !important;
}

/* Modal content + painel da ilustração */
.modal-content:has(#authFormScroll) {
  background: linear-gradient(135deg, rgba(20,5,5,.98), rgba(40,15,10,.98)) !important;
  border: 1px solid rgba(242, 112, 32, .3) !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 60px rgba(242, 112, 32, .25) !important;
}

.auth-illus-panel {
  border-color: rgba(242, 112, 32, .2) !important;
  background: rgba(255,255,255,.02) !important;
}

.auth-illus-panel img { filter: drop-shadow(0 0 20px rgba(242, 112, 32, .25)); }

.modal-content:has(#authFormScroll) .btn-close {
  filter: invert(1) brightness(1.6);
  opacity: .75;
}
.modal-content:has(#authFormScroll) .btn-close:hover { opacity: 1; }

/* Títulos e textos */
#authFormScroll h1.h5 { color: #fff !important; font-weight: 700 !important; }
#authFormScroll .text-body-secondary,
#authFormScroll .text-secondary,
#authFormScroll .pwd-rule-text { color: #7a7a7a !important; }
#authFormScroll .text-body { color: #fff !important; }

/* Labels e inputs */
#authFormScroll .form-label {
  color: #7a7a7a !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

#authFormScroll .form-control,
#authFormScroll .form-select,
#authFormScroll .select2-selection {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(242, 112, 32, .3) !important;
  border-radius: 10px !important;
  color: #fff !important;
}

#authFormScroll .form-control:focus,
#authFormScroll .form-select:focus {
  border-color: #ffb442 !important;
  box-shadow: 0 0 0 3px rgba(242, 112, 32, .12) !important;
  background: rgba(242, 112, 32, .05) !important;
  color: #fff !important;
}

#authFormScroll .form-control::placeholder { color: rgba(255,255,255,.25) !important; }
#authFormScroll .select2-selection__rendered { color: #fff !important; }

#authFormScroll .toggle-password { color: #7a7a7a !important; }
#authFormScroll .toggle-password:hover { color: #ffb442 !important; }

/* Checkbox "Trust this device" / "I agree" */
#authFormScroll .form-check-input {
  background-color: rgba(255,255,255,.08) !important;
  border-color: rgba(242, 112, 32, .4) !important;
}
#authFormScroll .form-check-input:checked {
  background-color: #f27020 !important;
  border-color: #f27020 !important;
}
#authFormScroll .form-check-label { color: #c0c0c0 !important; }

/* Links (Forgot? / Terms / Back to Log In) */
#authFormScroll a.text-decoration-none {
  color: #ffb442 !important;
  font-weight: 600 !important;
}
#authFormScroll a.text-decoration-none:hover { color: #ffcc70 !important; }

/* Divisor "or" */
#authFormScroll hr { border-color: rgba(242, 112, 32, .2) !important; }
#authFormScroll .bg-white {
  background: #0e0e0e !important;
  color: #7a7a7a !important;
}

/* Badge "Step 1/3" */
#authFormScroll .badge.text-bg-light {
  background: rgba(242, 112, 32, .12) !important;
  color: #ffb442 !important;
}

/* Botões */
#authFormScroll .btn-primary {
  background: linear-gradient(135deg, #7a3010, #f27020) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
#authFormScroll .btn-primary:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(255,68,0,.4) !important;
}
#authFormScroll .btn-primary:disabled { opacity: .5 !important; }

#authFormScroll .btn-outline-primary {
  background: rgba(242, 112, 32, .08) !important;
  border: 1px solid rgba(242, 112, 32, .4) !important;
  color: #ffb442 !important;
  border-radius: 10px !important;
}
#authFormScroll .btn-outline-primary:hover {
  background: linear-gradient(135deg, #7a3010, #f27020) !important;
  border-color: #f27020 !important;
  color: #fff !important;
}

/* Painel de força de senha */
#authFormScroll #regPasswordRulesPanel {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(242, 112, 32, .2) !important;
}
#authFormScroll #regPasswordRulesPanel .fw-semibold { color: #fff !important; }
#authFormScroll .progress { background: rgba(255,255,255,.08) !important; }

/* Tela "Check your inbox" (verificação de email) dentro do auth modal */
#authFormScroll .auth-swal-view h5,
#authFormScroll .auth-swal-view .text-dark { color: #fff !important; }
#authFormScroll .auth-swal-view .text-secondary { color: #7a7a7a !important; }
#authFormScroll .auth-swal-view [style*="border:1.5px dashed"] {
  border-color: rgba(242, 112, 32, .5) !important;
  background: rgba(242, 112, 32, .06) !important;
}
#authFormScroll .auth-swal-view .text-primary { color: #ffb442 !important; }
#authFormScroll .auth-swal-view .bg-primary {
  background: linear-gradient(135deg, #7a3010, #f27020) !important;
}
#authFormScroll .auth-swal-view [style*="background:#fffbeb"] {
  background: rgba(255,180,0,.08) !important;
  border-left-color: #f59e0b !important;
}
#authFormScroll .auth-swal-view [style*="color:#78350f"] { color: #ffd280 !important; }

/* ============================
   SELECT2 DROPDOWN (injetado no <body>, fora do modal)
============================ */
.select2-dropdown {
  background: linear-gradient(135deg, #111111, #181818) !important;
  border: 1px solid rgba(242, 112, 32, .35) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 35px rgba(0,0,0,.6) !important;
  overflow: hidden !important;
}

.select2-search--dropdown {
  background: transparent !important;
  padding: 8px !important;
}

.select2-search__field {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(242, 112, 32, .3) !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 6px 10px !important;
}
.select2-search__field::placeholder { color: rgba(255,255,255,.3) !important; }
.select2-search__field:focus {
  outline: none !important;
  border-color: #ffb442 !important;
  box-shadow: 0 0 0 2px rgba(242, 112, 32, .15) !important;
}

.select2-results__options {
  background: transparent !important;
  max-height: 280px !important;
}

.select2-results__option {
  color: #c0c0c0 !important;
  padding: 8px 14px !important;
}

.select2-results__option--highlighted {
  background: linear-gradient(90deg, rgba(242, 112, 32, .35), rgba(242, 112, 32, .35)) !important;
  color: #fff !important;
}

.select2-results__option[aria-selected="true"] {
  background: rgba(242, 112, 32, .15) !important;
  color: #ffb442 !important;
}

.select2-results__option span,
.select2-results__option img { vertical-align: middle !important; }

/* scrollbar discreta dentro do dropdown */
.select2-results__options::-webkit-scrollbar { width: 6px; }
.select2-results__options::-webkit-scrollbar-thumb {
  background: rgba(242, 112, 32, .4);
  border-radius: 3px;
}

/* ============================
   MODAL SUCCESS ORDER
============================ */
#orderSuccess { background: rgba(26,10,10,.95) !important; backdrop-filter: blur(12px) !important; }

#orderSuccess .modal-content {
  background: linear-gradient(145deg, #111111, #181818) !important;
  border: 1px solid #ffb442 !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 60px rgba(242, 112, 32, .3) !important;
}

.success-circle .circle-bg { stroke: #ffb442 !important; stroke-width: 5 !important; }

.success-circle .check {
  stroke: #f27020 !important;
  stroke-width: 5 !important;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw-check 0.8s ease-out forwards !important;
}

@keyframes draw-check { to { stroke-dashoffset: 0; } }

#orderSuccess h5 { color: #fff !important; font-weight: 700 !important; font-size: 22px !important; text-shadow: 0 2px 8px rgba(0,0,0,.8) !important; }

.btn-light-success {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid #ffb442 !important;
  color: #ffb442 !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
}

.btn-light-success:hover { background: rgba(242, 112, 32, .2) !important; color: #fff !important; }

.btn-success {
  background: linear-gradient(135deg, #f27020, #ffa640) !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 20px rgba(255,107,53,.3) !important;
}

.btn-success:hover { background: linear-gradient(135deg, #ffa640, #ffb442) !important; transform: translateY(-2px) !important; }

/* ============================
   BOTÃO FAZER PEDIDO
============================ */
.place-order {
  position: relative !important;
  overflow: visible !important;
  margin-top: 85px !important;
  background: linear-gradient(135deg, #7a3010, #f27020, #ffb442) !important;
  border: none !important;
  border-radius: 14px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 16px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 24px rgba(255, 68, 0, 0.35) !important;
  transition: all 0.25s ease !important;
}

/* Aviso acima do botão */
.place-order::before {
  content: "📌 Antes de realizar o pedido: leia a descrição do serviço Abaixo (prazos, requisitos, itens e etc..). Isso evita erros no pedido. ✅" !important;
  position: absolute !important;
  bottom: calc(100% + 10px) !important;  /* ← era 125%, agora com gap fixo */
  left: 0 !important;
  right: 0 !important;
  background: #060606 !important;
  border: 1px solid rgba(242, 112, 32, 0.3) !important;
  border-left: 5px solid #f27020 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  color: #ffd280 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  pointer-events: none !important;
  white-space: normal !important;
  z-index: 10 !important;
}

/* Remove override de texto */
.place-order::after {
  content: none !important; /* remove o "FAZER PEDIDO" que sobrescrevia o texto */
}

.place-order:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 32px rgba(255, 68, 0, 0.5) !important;
  filter: brightness(1.08) !important;
}

/* Traducao agora e feita via JS (ninja-translate.js) - dicionario EN->PT
   com MutationObserver pra pegar modais, dropdowns e conteudo dinamico. */

/* ============================
   OCULTAR FOOTER (mantem os 4 cards de features .top-footer visiveis)
============================ */
footer,
.gt-footer,
.gt-footer-widgets,
.gt-footer-bottom,
.footer-area,
.site-footer,
div[class*="footer-"]:not(.top-footer):not([class*="top-footer"]),
.copyright-area,
.shape, .shape-1, .shape-2, .shape-3 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: -9999 !important;
  top: -99999px !important;
  overflow: hidden !important;
}

/* Sticky footer: empurra os 4 cards de features pro bottom */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > div:first-of-type {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.top-footer {
  margin-top: auto;
}

/* ============================
   RESPONSIVO
============================ */
@media (max-width: 768px) {
  .nj-faq-box-float { right: 10px; left: 10px; width: auto; bottom: 100px; }

  .customer-m-menu {
    border-right: none !important;
    border-bottom: 1px solid var(--border-nj) !important;
  }

  .customer-m-menu .btn { width: auto !important; }

  .col-xxl-4.col-xl-6.col-sm-12 .card { margin-bottom: 16px !important; border-radius: 12px !important; }
}

/* ============================================================
   NINJA SERVER — SERVICE CARD / PLACE ORDER
   ============================================================ */

/* ============================
   CARD PRINCIPAL
============================ */
.col-lg-8 .card.rounded-0.medium-height {
  background: linear-gradient(145deg, rgba(18, 5, 0, 0.98), rgba(28, 10, 3, 0.98)) !important;
  border: 1px solid rgba(242, 112, 32, 0.25) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 48px rgba(242, 112, 32, 0.12) !important;
}

/* ============================
   SEÇÃO TOPO (imagem + título)
============================ */
.service-top-section {
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
}

/* Imagem do serviço */
.service-img {
  flex-shrink: 0 !important;
}

.service-img img#service-thumbnail {
  border-radius: 12px !important;
  border: 1px solid rgba(242, 112, 32, 0.3) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6) !important;
  object-fit: cover !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  max-width: 100% !important;
}

.service-img img#service-thumbnail:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 10px 32px rgba(242, 112, 32, 0.25) !important;
}

/* Breadcrumb */
.service-title .breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 10px !important;
}

.service-title .breadcrumb-item,
.service-title .breadcrumb-item a {
  color: #666666 !important;
  font-size: 12px !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.service-title .breadcrumb-item a:hover { color: #ffb442 !important; }
.service-title .breadcrumb-item.active  { color: #7a7a7a !important; }

.service-title .breadcrumb-item + .breadcrumb-item::before {
  color: #2a2a2a !important;
}

/* Título do serviço */
.service-title h1.fs-4 {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* ============================
   BARRA DE STATS (Preço / Prazo / Status)
============================ */
.d-flex.gap-2.border-top.border-bottom.px-4 {
  border-color: rgba(242, 112, 32, 0.15) !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.01) !important;
}

/* ============================
   CARROSSEL TOPO — remover borda branca
============================ */
.carousel-inner .carousel-item img.border {
  border: none !important;
}

.stat-cell {
  flex: 1 !important;
  padding: 14px 16px !important;
  border-right: 1px solid rgba(242, 112, 32, 0.1) !important;
  text-align: center !important;
  transition: background 0.2s ease !important;
}

.stat-cell:last-child { border-right: none !important; }

.stat-cell:hover { background: rgba(242, 112, 32, 0.04) !important; }

.stat-lbl {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #666666 !important;
  margin-bottom: 4px !important;
}

.stat-val {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

.stat-val.text-primary { color: #60a5fa !important; }
.stat-val.text-warning { color: #fbbf24 !important; }
.stat-val.text-success { color: #34d399 !important; }

/* ============================
   SEÇÃO DO FORMULÁRIO
============================ */
.col-lg-8 .card .p-4:last-of-type {
  background: rgba(10, 3, 0, 0.4) !important;
}

/* Mensagem de erro */
.show-error-message:not(:empty) {
  background: rgba(220, 38, 38, 0.1) !important;
  border: 1px solid rgba(220, 38, 38, 0.35) !important;
  border-left: 4px solid #ef4444 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  color: #fca5a5 !important;
  font-size: 13px !important;
  margin-bottom: 16px !important;
}

/* Label do campo */
.col-lg-8 .form-label {
  color: #7a7a7a !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 8px !important;
}

.col-lg-8 .form-label b { color: #ffb442 !important; font-weight: 700 !important; }

/* Input de texto */
.col-lg-8 .form-control {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(242, 112, 32, 0.3) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  padding: 13px 16px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.col-lg-8 .form-control:focus {
  background: rgba(242, 112, 32, 0.05) !important;
  border-color: #ffb442 !important;
  box-shadow: 0 0 0 3px rgba(242, 112, 32, 0.12) !important;
  color: #fff !important;
  outline: none !important;
}

.col-lg-8 .form-control::placeholder { color: rgba(255, 255, 255, 0.2) !important; }

/* ============================
   CHECKBOX — TERMOS
============================ */
.form-check { display: flex !important; align-items: center !important; gap: 10px !important; }

.form-check-input#form-check-input {
  width: 18px !important;
  height: 18px !important;
  border-radius: 5px !important;
  border: 2px solid rgba(242, 112, 32, 0.4) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
}

.form-check-input#form-check-input:checked {
  background: linear-gradient(135deg, #7a3010, #f27020) !important;
  border-color: #f27020 !important;
  box-shadow: 0 0 8px rgba(242, 112, 32, 0.4) !important;
}

/* Checkmark via pseudo-elemento */
.form-check-input#form-check-input:checked::after {
  content: '✓' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.form-check-label {
  color: #7a7a7a !important;
  font-size: 13px !important;
  cursor: pointer !important;
}

.form-check-label a {
  color: #ffb442 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color 0.2s !important;
}

.form-check-label a:hover { color: #ffcc70 !important; text-decoration: underline !important; }

.invalid-feedback { color: #f87171 !important; font-size: 12px !important; }

/* ============================
   BOTÃO PLACE AN ORDER
============================ */
#placeOrderBtn.place-order {
  background: linear-gradient(135deg, #7a3010, #f27020, #ffb442) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 24px rgba(255, 68, 0, 0.35) !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  overflow: hidden !important;

  /* Override do aviso genérico do CSS global */
  margin-top: 0 !important;
}

#placeOrderBtn.place-order::before {
  content: "📌 Antes de realizar o pedido: leia a descrição do serviço abaixo (prazos, requisitos, itens etc). Isso evita erros no pedido. ✅" !important;
  position: absolute !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  right: 0 !important;
  background: #060606 !important;
  border: 1px solid rgba(242, 112, 32, 0.3) !important;
  border-left: 5px solid #f27020 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  color: #ffd280 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
  pointer-events: none !important;
  white-space: normal !important;
}

#placeOrderBtn.place-order::after {
  content: '' !important; /* Remove o text override do CSS global */
}

#placeOrderBtn.place-order:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 32px rgba(255, 68, 0, 0.5) !important;
  filter: brightness(1.08) !important;
}

#placeOrderBtn.place-order:active {
  transform: translateY(0) !important;
  filter: brightness(0.95) !important;
}

/* ============================
   BOTÃO LOADER (spinner)
============================ */
.place-order-loader {
  background: rgba(242, 112, 32, 0.2) !important;
  border: 1px solid rgba(242, 112, 32, 0.3) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  color: #ffb442 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: not-allowed !important;
}

.place-order-loader .spinner-border {
  border-color: #ffb442 !important;
  border-right-color: transparent !important;
  width: 16px !important;
  height: 16px !important;
}

/* ============================
   RESPONSIVO
============================ */
@media (max-width: 768px) {
  .service-top-section {
    flex-direction: column !important;
  }

  .service-img img#service-thumbnail {
    width: 100% !important;
    height: auto !important;
  }

  .stat-cell { padding: 12px 8px !important; }
  .stat-val  { font-size: 15px !important; }
}

/* CARD DE ADICIONAR SALDO */
.card {
    background: #0e0e0e;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    overflow: hidden;
}

/* LADO ESQUERDO */
.border-end {
    border-color: rgba(255,255,255,0.05) !important;
}

/* TEXTOS */
.text-secondary {
    color: #7a7a7a !important;
}

/* INPUT DE VALOR */
.amt-group {
    background: #060606;
    border: 1px solid rgba(255,255,255,0.08);
    padding: 14px 16px;
    border-radius: 10px;
    transition: 0.2s;
}

.amt-group:focus-within {
    border-color: #f27020;
    box-shadow: 0 0 0 2px rgba(249,115,22,0.2);
}

.amt-field {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    width: 100%;
}

.amt-sym,
.amt-unit {
    color: #5a5a5a;
    font-weight: 500;
}

/* TEXTO DOS GATEWAYS */
.checkbox-wrapper-16 .checkbox-label,
.checkbox-wrapper .checkbox-label {
    color: #ffffff !important;
    font-size: 15px !important;
}

.checkbox-wrapper-16 .checkbox-tile span.text-muted,
.checkbox-wrapper .checkbox-tile span.text-muted {
    color: #c0c0c0 !important;
    font-size: 13px !important;
}

/* CARD DOS GATEWAYS (especificidade maior pra vencer o CSS claro do tema) */
.checkbox-wrapper-16 .checkbox-tile,
.checkbox-wrapper .checkbox-tile {
    background: #060606 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}

/* HOVER */
.checkbox-wrapper-16 .checkbox-wrapper:hover .checkbox-tile,
.checkbox-wrapper:hover .checkbox-tile {
    border-color: #181818 !important;
    background: #060606 !important;
}

/* SELECIONADO (MUITO MAIS VISÍVEL) */
.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile,
.checkbox-input:checked + .checkbox-tile {
    background: linear-gradient(135deg, #f27020, #c65614) !important;
    border-color: #f27020 !important;
}

/* TEXTO QUANDO SELECIONADO */
.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-label,
.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .text-muted,
.checkbox-input:checked + .checkbox-tile .checkbox-label,
.checkbox-input:checked + .checkbox-tile .text-muted {
    color: #ffffff !important;
}

/* ÍCONE */
.checkbox-wrapper-16 .checkbox-icon img,
.checkbox-icon img {
    background: #fff !important;
    padding: 4px !important;
    border-radius: 6px !important;
}

/* DESATIVADO / NÃO SELECIONADO */
.checkbox-wrapper-16 .checkbox-input:not(:checked) + .checkbox-tile,
.checkbox-input:not(:checked) + .checkbox-tile {
    opacity: 0.85 !important;
}

/* Garante que texto/ícone do gateway fiquem sempre visíveis, sem
   depender de :hover (id="display-gateway-name" duplicado e a
   classe ibm-font não tinham cor própria definida). */
.checkbox-wrapper-16 .checkbox-tile,
.checkbox-wrapper-16 .checkbox-tile * {
    visibility: visible !important;
    opacity: 1 !important;
}

.checkbox-wrapper-16 #display-gateway-name,
.checkbox-wrapper-16 .ibm-font {
    color: #ffffff !important;
    font-size: 15px !important;
    display: block !important;
}

.checkbox-wrapper-16 .checkbox-input:not(:checked) + .checkbox-tile {
    opacity: 1 !important;
}
.checkbox-wrapper-16 .checkbox-input:not(:checked) + .checkbox-tile,
.checkbox-wrapper-16 .checkbox-input:not(:checked) + .checkbox-tile span.text-muted {
    color: #c0c0c0 !important;
}


/* LADO DIREITO */
#paymentForm .col-md-6:last-child,
#paymentForm .col-md-6[style*="--bs-light-primary"] {
    background: #060606 !important;
}

/* Bordas brancas do tema original (var(--bs-light-primary) trazia
   border-white junto, ficava uma linha branca crua no card escuro) */
#paymentForm .border-white {
    border-color: rgba(242, 112, 32, .15) !important;
}

/* Cabeçalhos "Balance Information" / "Payment Information" / "Total Pay" */
#paymentForm h5.text-muted {
    color: #ffb442 !important;
    letter-spacing: .04em !important;
}

/* Linhas de texto (Payment Gateway, Add Fund Amount, Gateway Charge) */
#paymentForm #modalInputs ~ div.border-bottom,
#paymentForm .border-bottom:not(h5) {
    color: #eaeaea !important;
}

#paymentForm #gatewayCharge { color: #7a7a7a !important; }

/* TABELA */
.table td {
    color: #c0c0c0;
    font-size: 14px;
}

.table td.fw-bold {
    color: #fff;
}

/* LINHAS */
.border-bottom {
    border-color: rgba(255,255,255,0.08) !important;
}

/* TOTAL */
#totalPrice {
    color: #22c55e;
    font-size: 20px;
    font-weight: 700;
}

/* BOTÃO */
.btn-primary {
    background: linear-gradient(135deg, #f27020, #c65614);
    border: none;
    font-weight: 600;
    padding: 12px;
    border-radius: 10px;
    transition: 0.2s;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(249,115,22,0.3);
}

/* SSL TEXTO */
#pay-alert {
    color: #5a5a5a;
    font-size: 13px;
}

/* MODAL FUNDO */
.login-content {
    background: #060606;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
}

/* HEADER */
.modal-header {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* TAB NÃO ATIVA */
.nav-tabs .nav-link {
    color: #7a7a7a !important; /* antes tava escuro demais */
    opacity: 0.8;
}

/* HOVER (importante pra UX) */
.nav-tabs .nav-link:hover {
    color: #c0c0c0 !important;
    opacity: 1;
}

/* TAB ATIVA */
.nav-tabs .nav-link.active {
    color: #ffffff !important;
    border-bottom: 2px solid #f27020;
}

/* LABELS */
.form-label {
    color: #7a7a7a;
    font-size: 13px;
    font-weight: 500;
}

/* INPUT WRAPPER */
.form-search {
    position: relative;
}

/* ÍCONE */
.form-search i {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #5a5a5a;
    font-size: 16px;
}

/* INPUT */
.form-control {
    background: #060606;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px 12px 12px 38px;
    color: #fff;
    font-size: 14px;
    transition: all 0.2s ease;
}

/* PLACEHOLDER */
.form-control::placeholder {
    color: #252525;
}

/* FOCUS */
.form-control:focus {
    border-color: #f27020;
    box-shadow: 0 0 0 2px rgba(249,115,22,0.2);
    background: #060606;
    color: #fff;
}

/* SELECT */
select.form-control {
    padding-left: 38px;
    color: #fff;
}

/* LINK */
.forgot-btn {
    color: #7a7a7a;
    text-decoration: none;
    font-size: 13px;
}

.forgot-btn:hover {
    color: #f27020;
}

/* BOTÃO */
.btn-primary {
    background: linear-gradient(135deg, #f27020, #c65614);
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-weight: 600;
    transition: 0.2s;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(249,115,22,0.3);
}

/* FOOTER */
.modal-footer {
    border-top: none;
}

/* BOTÃO CLOSE */
.btn-close {
    filter: invert(1);
    opacity: 0.7;
}

.btn-close:hover {
    opacity: 1;
}

/* ============================
   AVISO DE LOGIN NO MODAL DE PEDIDO
============================ */
#historyHtml .nj-login-warning {
  background: linear-gradient(135deg, rgba(220,38,38,.12), rgba(242,112,32,.12));
  border: 1px solid rgba(242,112,32,.5);
  border-left: 4px solid #dc2626;
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 20px;
  color: #eaeaea;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
#historyHtml .nj-login-warning .nj-lw-icon {
  font-size: 22px;
  flex-shrink: 0;
  color: #ffb442;
  line-height: 1;
}
#historyHtml .nj-login-warning .nj-lw-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
  color: #eaeaea !important;
}
#historyHtml .nj-login-warning .nj-lw-text strong {
  color: #ffcc70 !important;
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 12px;
}
#historyHtml .nj-login-warning .nj-lw-desc {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #eaeaea !important;
}
#historyHtml .nj-login-warning .nj-lw-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}
#historyHtml .nj-login-warning .nj-lw-phone {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 10px;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.35);
  line-height: 1.15;
}
#historyHtml .nj-login-warning .nj-lw-phone-label {
  font-size: 10px;
  color: #7a7a7a !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}
#historyHtml .nj-login-warning .nj-lw-phone-num {
  font-weight: 800;
  color: #4ade80 !important;
  font-size: 16px;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: .03em;
}
#historyHtml .nj-login-warning .nj-lw-wpp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: all .2s ease;
  box-shadow: 0 4px 12px rgba(34,197,94,.25);
}
#historyHtml .nj-login-warning .nj-lw-wpp:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(34,197,94,.45);
  filter: brightness(1.08);
  color: #fff !important;
}

/* ============================================================
   NINJA SERVER — GRAPHITE OVERRIDE (visual calmo)
   Sobrepõe o tema laranja-agressivo original com uma paleta
   grafite neutra. Laranja fica só em CTAs/badges de status.
   ============================================================ */
:root {
  --nj-graphite-0: #0a0a0d;
  --nj-graphite-1: #101014;
  --nj-graphite-2: #16161c;
  --nj-graphite-3: #1e1e26;
  --nj-graphite-4: #2a2a34;
  --nj-border-soft: rgba(255,255,255,.06);
  --nj-border-med:  rgba(255,255,255,.10);
  --nj-text:        #e4e4e7;
  --nj-text-muted:  #8a8a94;
  --nj-accent:      #f27020;
  --nj-accent-soft: rgba(242,112,32,.14);
}

/* Fundo do body — grafite plano sem halos quentes */
body {
  background: var(--nj-graphite-0) !important;
  color: var(--nj-text) !important;
}
/* Zera o overlay de halos laranja original (mantém transparente pra não tampar a logo/conteúdo) */
body::before {
  background: transparent !important;
}

/* Partículas mais discretas */
#frp-particles {
  opacity: 0.18 !important;
}

/* --- HEADER / NAV --- */
.gsm-header,
.gsm-theme-header {
  background: var(--nj-graphite-1) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--nj-border-soft) !important;
}
.nav-links {
  gap: 2px !important;
}
.nav-links a {
  color: var(--nj-text) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 6px 8px !important;
  font-size: 13px !important;
  white-space: nowrap;
}
.nav-links a:hover {
  background: rgba(255,255,255,.04) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}
.customer-header-auth .btn {
  background: var(--nj-graphite-3) !important;
  border: 1px solid var(--nj-border-med) !important;
  box-shadow: none !important;
}
.customer-name {
  color: var(--nj-text) !important;
  text-shadow: none !important;
}
.customer-header-auth .border.rounded-circle {
  background: var(--nj-graphite-4) !important;
  border: 1px solid var(--nj-border-med) !important;
}
.nav-arrow {
  background: var(--nj-graphite-3) !important;
  color: var(--nj-text) !important;
  border: 1px solid var(--nj-border-soft) !important;
}
.nav-arrow:hover {
  background: var(--nj-graphite-4) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}

/* --- HAMBURGER --- */
.navbar-toggler {
  background: var(--nj-graphite-3) !important;
  border: 1px solid var(--nj-border-med) !important;
  box-shadow: none !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
}
.navbar-toggler:hover {
  background: var(--nj-graphite-4) !important;
  border-color: var(--nj-border-med) !important;
  transform: none !important;
  box-shadow: none !important;
}
.navbar-toggler .bi-list,
.navbar-toggler:hover .bi-list {
  color: var(--nj-text) !important;
  text-shadow: none !important;
  filter: none !important;
}

/* --- DROPDOWNS --- */
li.has-drop.is-open[data-drop="drop-down-2"] a {
  background: var(--nj-graphite-2) !important;
  border: 1px solid var(--nj-border-soft) !important;
  color: var(--nj-text) !important;
  box-shadow: none !important;
}
li.has-drop.is-open .chevron { stroke: var(--nj-text) !important; }

.gsm-dropdown#drop-down-2,
.dropdown-menu.customer-auth-menu {
  background: var(--nj-graphite-2) !important;
  border: 1px solid var(--nj-border-soft) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
  backdrop-filter: none !important;
}
.gsm-dropdown#drop-down-2 a,
.dropdown-menu.customer-auth-menu .dropdown-item {
  color: var(--nj-text) !important;
  border-right: none !important;
  border-left: none !important;
}
.gsm-dropdown#drop-down-2 a:hover,
.dropdown-menu.customer-auth-menu .dropdown-item:hover {
  background: rgba(255,255,255,.04) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
  border-right-color: transparent !important;
  border-left-color: transparent !important;
}
.dropdown-menu.customer-auth-menu .dropdown-item i {
  color: var(--nj-text-muted) !important;
}
.dashed-bottom {
  border-bottom: 1px solid var(--nj-border-soft) !important;
}

/* --- OFFCANVAS --- */
#menuOffcanvas {
  background: var(--nj-graphite-1) !important;
  border-right: 1px solid var(--nj-border-soft) !important;
  backdrop-filter: none !important;
}
.offcanvas-header {
  background: var(--nj-graphite-2) !important;
  border-bottom: 1px solid var(--nj-border-soft) !important;
}
.offcanvas-body h5 {
  color: var(--nj-text) !important;
  text-shadow: none !important;
  border-bottom: 1px solid var(--nj-border-soft) !important;
  font-weight: 700 !important;
}
.offcanvas-body a.text-reset {
  color: var(--nj-text) !important;
  border-bottom: 1px solid var(--nj-border-soft) !important;
  padding: 10px 14px !important;
  margin-bottom: 4px !important;
  font-size: 14px !important;
}
.offcanvas-body h5 {
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
  font-size: 14px !important;
}
.offcanvas-header {
  padding: 12px 16px !important;
}
.btn-danger.rounded {
  padding: 12px !important;
  margin-top: 12px !important;
  font-size: 14px !important;
}
.offcanvas-body i,
.float-end.text-muted i {
  font-size: 15px !important;
}
.offcanvas-body a.text-reset:hover {
  background: rgba(255,255,255,.04) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
  border-left: none !important;
}
.offcanvas-body i,
.float-end.text-muted i,
.bi-chevron-left { color: var(--nj-text-muted) !important; }
.navbar-brand img { filter: none !important; }

/* --- BADGES DE STATUS (mantém cor de significado) --- */
.bg-success,
.badge.bg-success {
  background: rgba(34,197,94,.15) !important;
  border: 1px solid rgba(34,197,94,.35) !important;
  color: #4ade80 !important;
  box-shadow: none !important;
}
.bg-danger.fs-6 {
  background: rgba(220,38,38,.15) !important;
  border: 1px solid rgba(220,38,38,.4) !important;
  color: #f87171 !important;
  box-shadow: none !important;
}
.bg-secondary.fs-6 {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--nj-border-med) !important;
  color: var(--nj-text) !important;
}
.badge.bg-light-primary,
.badge.bg-light-warning {
  background: var(--nj-accent-soft) !important;
  border: 1px solid rgba(242,112,32,.3) !important;
  color: var(--nj-accent) !important;
}
.badge.bg-light-primary:hover,
.badge.bg-light-warning:hover {
  background: rgba(242,112,32,.22) !important;
  color: #ffcc70 !important;
  transform: none !important;
}

/* --- CARDS --- */
.card,
.service-item,
.category-item,
.table tbody tr {
  border: 1px solid var(--nj-border-soft) !important;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease !important;
}
.card:hover,
.service-item:hover,
.category-item:hover,
.table tbody tr:hover {
  transform: translateY(-1px) !important;
  background-color: rgba(255,255,255,.02) !important;
  border-color: var(--nj-border-med) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.3) !important;
}

/* Lista de serviços — SEM bordas (nem no item, nem na miniatura) */
.list-group-item,
.list-group-item:hover {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.list-group-item img.rounded.border,
.list-group-item img.border {
  border: none !important;
  box-shadow: none !important;
}
.card:hover *,
.list-group-item:hover * { color: inherit !important; }
.card:hover i,
.list-group-item:hover i { color: var(--nj-accent) !important; transform: none !important; }

/* Blindagem: elementos com fundo claro NUNCA ganham texto branco (mesmo no hover) */
.bg-light, .bg-light *,
.bg-white, .bg-white *,
.btn-light, .btn-light *,
.input-group-text,
.card:hover .bg-light, .card:hover .bg-light *,
.card:hover .bg-white, .card:hover .bg-white *,
.card:hover .btn-light, .card:hover .btn-light *,
.card:hover .input-group-text,
.list-group-item:hover .bg-light, .list-group-item:hover .bg-light *,
.list-group-item:hover .btn-light, .list-group-item:hover .btn-light * {
  color: #1a1a20 !important;
}
/* Escopo do orderModal segue com esquema escuro próprio — não afetar */
#orderModal .bg-light, #orderModal .bg-light *,
#orderModal .bg-white, #orderModal .bg-white * {
  color: var(--nj-text) !important;
}

.card.rounded-0 {
  background: var(--nj-graphite-1) !important;
  border: 1px solid var(--nj-border-soft) !important;
}

/* Cards de serviço (listagem) */
.col-xxl-4.col-xl-6.col-sm-12 .card {
  background: var(--nj-graphite-1) !important;
  border: 1px solid var(--nj-border-soft) !important;
  box-shadow: none !important;
}
.col-xxl-4.col-xl-6.col-sm-12 .card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.35) !important;
  border-color: var(--nj-border-med) !important;
}
.card-body {
  background: transparent !important;
}
.card img.rounded.border {
  border: 1px solid var(--nj-border-soft) !important;
  box-shadow: none !important;
}
.card:hover img.rounded.border {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--nj-border-med) !important;
}

/* --- PAGE TOP INFO --- */
.page-top-info {
  background: var(--nj-graphite-1) !important;
  border: 1px solid var(--nj-border-soft) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.page-top-info h5 {
  color: var(--nj-text) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}
.page-top-info #search-input {
  background: var(--nj-graphite-2) !important;
  border: 1px solid var(--nj-border-soft) !important;
}

/* --- BREADCRUMB --- */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
}
.breadcrumb-item a { color: var(--nj-text-muted) !important; }
.breadcrumb-item.active { color: var(--nj-text) !important; }

/* --- TABELA / ORDER HISTORY --- */
.container .card.rounded-0 {
  background: var(--nj-graphite-1) !important;
  border: 1px solid var(--nj-border-soft) !important;
  box-shadow: none !important;
}
.container .card-header.service-card-header {
  background: var(--nj-graphite-2) !important;
  border-bottom: 1px solid var(--nj-border-soft) !important;
}
.container h5.mb-sm-0 {
  color: var(--nj-text) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}
#order-search {
  background: var(--nj-graphite-2) !important;
  border: 1px solid var(--nj-border-soft) !important;
}
#order-history-table {
  background: transparent !important;
}
#order-history-table th {
  background: var(--nj-graphite-2) !important;
  color: var(--nj-text-muted) !important;
  border: none !important;
}
#order-history-table td {
  color: var(--nj-text) !important;
  border-bottom: 1px solid var(--nj-border-soft) !important;
}

/* --- STAT CARDS (mantém as cores semânticas mas planas) --- */
a[href*="order=waiting-action"] .card { background: #3a3a44 !important; }
a[href*="order=inprocess"]      .card { background: #b06a10 !important; }
a[href*="order=success"]        .card { background: #15803d !important; }
a[href*="order=rejected"]       .card { background: #b91c1c !important; }

a[href*="order=waiting-action"]:hover .card,
a[href*="order=inprocess"]:hover      .card,
a[href*="order=success"]:hover        .card,
a[href*="order=rejected"]:hover       .card {
  transform: translateY(-1px) !important;
  filter: none !important;
}

a[href="/my/order-history"].card {
  background: var(--nj-graphite-1) !important;
  border: 1px solid var(--nj-border-soft) !important;
  box-shadow: none !important;
}
a[href="/my/order-history"].card:hover {
  border-color: var(--nj-border-med) !important;
  transform: translateY(-1px) !important;
}
a[href="/my/order-history"].card .btn-icon {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--nj-border-soft) !important;
  color: var(--nj-text) !important;
}

/* --- MENU LATERAL (customer-m-menu) --- */
.customer-m-menu {
  background: var(--nj-graphite-1) !important;
  border-right: 1px solid var(--nj-border-soft) !important;
}

/* --- SIDEBAR FLUTUANTE --- */
.pjg-btn-side {
  border: 1px solid var(--nj-border-soft) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.4) !important;
}
.bg-tlg { background: var(--nj-graphite-3) !important; }
.bg-wpp { background: var(--nj-graphite-3) !important; }
.pjg-btn-side:hover { transform: translateY(-2px); filter: none !important; }

/* --- FAQ FLUTUANTE --- */
.nj-faq-btn-float {
  background: var(--nj-accent) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.4) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.nj-faq-btn-float:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.5) !important;
}
.nj-faq-box-float {
  background: var(--nj-graphite-1) !important;
  border: 1px solid var(--nj-border-soft) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.5) !important;
  backdrop-filter: none !important;
}
.nj-faq-header {
  background: var(--nj-graphite-2) !important;
  border-bottom: 1px solid var(--nj-border-soft) !important;
}
.nj-faq-header h4 { color: var(--nj-text) !important; }
.nj-faq-header p  { color: var(--nj-text-muted) !important; }
.nj-faq-badge {
  background: var(--nj-accent-soft) !important;
  border: 1px solid rgba(242,112,32,.3) !important;
  color: var(--nj-accent) !important;
}
.nj-question-label {
  background: var(--nj-graphite-2) !important;
  border: 1px solid var(--nj-border-soft) !important;
  color: var(--nj-text) !important;
}
.nj-question-label:hover {
  background: var(--nj-graphite-3) !important;
  border-color: var(--nj-border-med) !important;
  transform: none !important;
}
.nj-q-toggle:checked + .nj-question-label {
  background: var(--nj-graphite-3) !important;
  border-color: var(--nj-border-med) !important;
}

/* --- HEADER MOBILE: hamburger à esquerda, logo em seguida --- */
@media (max-width: 991.98px) {
  .gsm-theme-header {
    padding: 8px 12px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  .gsm-theme-header .nav-container,
  .gsm-theme-header .customer-header-auth,
  .gsm-theme-header .dropdown.d-none.d-lg-block {
    display: none !important;
  }
  .gsm-theme-header .navbar-toggler {
    order: -1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .gsm-theme-header .nav-logo {
    order: 0 !important;
    margin: 0 !important;
  }
  .gsm-theme-header .nav-logo .logo,
  .gsm-theme-header .nav-logo img {
    max-height: 46px !important;
    width: auto !important;
  }
}

/* --- ANIMAÇÃO DA LOGO (float sutil + brilho no hover) --- */
.nav-logo img,
.nav-logo .logo {
  animation: nj-logo-float 4s ease-in-out infinite;
  transition: filter .3s ease, transform .3s ease;
  transform-origin: center;
  will-change: transform, filter;
}
.nav-logo:hover img,
.nav-logo:hover .logo {
  animation-play-state: paused;
  transform: scale(1.05);
  filter: drop-shadow(0 0 8px rgba(242, 112, 32, .55));
}
@keyframes nj-logo-float {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  25%      { transform: translateY(-3px) rotate(-1.2deg); }
  50%      { transform: translateY(0)    rotate(0deg); }
  75%      { transform: translateY(-3px) rotate(1.2deg); }
}

/* --- BUSCA GLOBAL DE SERVIÇOS --- */
#nj-gs-wrap {
  background: transparent;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 999;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
#nj-gs-inner {
  width: 100%;
  max-width: 260px;
  margin: 0 8px;
  position: relative;
}
/* Desktop: barra inline no header, ordem preservada pelo DOM (entre nav e customer-auth) */
@media (min-width: 992px) {
  #nj-gs-wrap {
    order: 0;
    flex: 0 1 260px;
    position: relative;
    transition: flex-basis .25s ease;
  }
  #nj-gs-inner {
    max-width: 260px;
    margin: 0 8px;
    transition: max-width .25s ease, transform .25s ease;
  }
  /* Ao focar, expande in-place cobrindo o card do cliente à direita */
  #nj-gs-wrap:focus-within #nj-gs-inner {
    max-width: 500px;
    position: absolute;
    top: 50%;
    right: 8px;
    left: auto;
    transform: translateY(-50%);
    z-index: 1055;
    width: 500px;
  }
  #nj-gs-wrap:focus-within #nj-gs-input {
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
  }
}
/* Mobile: quebra pra linha nova, full-width abaixo do logo/hamburger */
@media (max-width: 991.98px) {
  .gsm-theme-header { flex-wrap: wrap !important; }
  #nj-gs-wrap {
    flex-basis: 100% !important;
    order: 10 !important;
    padding: 6px 4px !important;
    margin-top: 4px !important;
    border-top: 1px solid var(--nj-border-soft) !important;
  }
  #nj-gs-inner {
    max-width: 100%;
    margin: 0;
  }
}
#nj-gs-input {
  width: 100%;
  padding: 8px 36px 8px 34px;
  background: var(--nj-graphite-2);
  border: 1px solid var(--nj-border-soft);
  border-radius: 8px;
  color: var(--nj-text);
  font-size: 13px;
  outline: none;
  transition: border-color .18s ease, background .18s ease;
  height: 38px;
}
#nj-gs-input::placeholder { color: var(--nj-text-muted); }
#nj-gs-input:focus {
  border-color: rgba(242,112,32,.45);
  background: var(--nj-graphite-3);
}
#nj-gs-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nj-text-muted);
  font-size: 13px;
  pointer-events: none;
}
#nj-gs-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border: none;
  background: transparent;
  color: var(--nj-text-muted);
  cursor: pointer;
  border-radius: 6px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}
#nj-gs-clear:hover { background: rgba(255,255,255,.06); color: var(--nj-text); }
#nj-gs-clear.show { display: flex; }
#nj-gs-status {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--nj-text-muted);
  pointer-events: none;
}
/* Permite dropdown ultrapassar o header */
.gsm-header, .gsm-theme-header { overflow: visible !important; }
#nj-gs-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--nj-graphite-2);
  border: 1px solid var(--nj-border-med);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  max-height: 460px;
  overflow-y: auto;
  display: none;
  z-index: 1050;
  padding: 6px;
}
#nj-gs-results.show { display: block; }
.nj-gs-cat {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--nj-text-muted);
  padding: 8px 10px 4px;
  font-weight: 700;
}
.nj-gs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--nj-text);
  text-decoration: none;
  transition: background .12s ease;
  cursor: pointer;
}
.nj-gs-item:hover,
.nj-gs-item.active {
  background: rgba(255,255,255,.05);
  color: #fff;
}
.nj-gs-thumb {
  width: 40px; height: 40px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--nj-graphite-3);
  flex-shrink: 0;
}
.nj-gs-body {
  flex: 1;
  min-width: 0;
}
.nj-gs-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--nj-text);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nj-gs-meta {
  display: flex;
  gap: 6px;
  margin-top: 3px;
  align-items: center;
  flex-wrap: wrap;
}
.nj-gs-price {
  font-size: 11px;
  font-weight: 700;
  color: var(--nj-accent);
  background: var(--nj-accent-soft);
  border: 1px solid rgba(242,112,32,.25);
  padding: 2px 7px;
  border-radius: 999px;
}
.nj-gs-time {
  font-size: 11px;
  color: var(--nj-text-muted);
}
.nj-gs-badge {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--nj-text-muted);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--nj-border-soft);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}
.nj-gs-empty {
  padding: 20px;
  text-align: center;
  color: var(--nj-text-muted);
  font-size: 13px;
}
.nj-gs-more {
  padding: 8px 10px;
  text-align: center;
  color: var(--nj-text-muted);
  font-size: 11px;
  border-top: 1px solid var(--nj-border-soft);
  margin-top: 4px;
}
@media (max-width: 640px) {
  #nj-gs-wrap { padding: 10px 12px; }
  .nj-gs-title { font-size: 12px; }
}

/* --- MODAL ORDER (orderModal / historyHtml) --- */
#orderModal .modal-content {
  background: var(--nj-graphite-1) !important;
  border: 1px solid var(--nj-border-soft) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.6) !important;
}
#orderModal .bg-primary {
  background: var(--nj-graphite-2) !important;
  border-bottom: 1px solid var(--nj-border-soft) !important;
}
#orderModal #modalLabel {
  color: var(--nj-text) !important;
  text-shadow: none !important;
}
#orderModal #modalLabel .fw-bold { color: var(--nj-accent) !important; }
#orderModal h1.h5 {
  background: transparent !important;
  border-top: 1px solid var(--nj-border-soft) !important;
}
#orderModal .border,
#orderModal .border-end,
#orderModal .border-bottom {
  border-color: var(--nj-border-soft) !important;
}
#orderModal .bg-light {
  background: var(--nj-graphite-2) !important;
}
#orderModal h2.text-uppercase {
  color: var(--nj-text-muted) !important;
}
#orderModal .btn-outline-primary {
  background: transparent !important;
  border: 1px solid var(--nj-border-med) !important;
  color: var(--nj-text) !important;
}
#orderModal .btn-outline-primary:hover {
  background: var(--nj-accent-soft) !important;
  border-color: var(--nj-accent) !important;
  color: var(--nj-accent) !important;
}

/* --- REMOVE GLOWS RESIDUAIS GERAIS --- */
h1, h2, h3, h4, h5, h6 { text-shadow: none !important; }
* { text-shadow: none !important; }