<!-- Fonte Inter (peso 400/500/600/700) -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">


/* ====== Reset básico + Fonte Global ====== */
html, body { height: 100%; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: #0F172A;                /* azul-ardósia escuro */
  background: #F5F7FB;          /* cinza muito claro do app */
}

/* ====== Tokens de cor ====== */
:root{
  --brand:#2AA9FF;              /* azul principal informado */
  --brand-700:#168bd6;
  --brand-100:#E6F6FF;
  --ink:#0F172A;
  --muted:#64748B;
  --line:#E5E7EB;
  --bg:#F5F7FB;
  --surface:#FFFFFF;
}

/* ====== Shell ====== */
.app-shell{ display:flex; min-height:100vh; width:100%; overflow-x:hidden; }
.app-sidebar{
  position: fixed; inset: 0 auto 0 0; width: 248px; height: 100vh; z-index: 1040;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-700) 100%);
  color:#fff; border-right: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transition: width .25s ease, transform .25s ease;
}
.app-sidebar .sidebar-inner{ display:flex; flex-direction:column; height:100%; padding:16px 12px; }
.app-sidebar .brand{ display:flex; align-items:center; gap:10px; padding:8px 10px; margin-bottom:10px; }
.app-sidebar .brand img{ max-height:28px; filter: drop-shadow(0 1px 0 rgba(0,0,0,.05)); }
.app-sidebar .brand .name{ font-weight:700; letter-spacing:.2px; font-size:15px; opacity:.95; color:#fff; }
.sidebar-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12); color:#fff; cursor:pointer;
}

.sidebar-card{
  margin: 10px 4px 14px; padding: 12px; border-radius: 14px;
  background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
}
.sidebar-card .label{ font-size:11px; opacity:.9; }
.sidebar-card .value{ font-size:18px; font-weight:700; margin-top:2px; }

.sidebar-section-title{ padding: 10px 14px; font-size:11px; text-transform:uppercase; letter-spacing:.12em; opacity:.9; }
.sidebar-menu, .sidebar-account{ list-style:none; margin:0; padding:6px 0; }
.sidebar-item > a{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff;
  padding: 10px 12px; margin: 4px 4px; border-radius: 12px; border:1px solid transparent;
  transition: background .2s ease, border-color .2s ease, transform .05s ease;
}
.sidebar-item > a:hover,
.sidebar-item.active > a{
  background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.28);
}
.sidebar-footer{ margin-top:auto; padding:12px 4px 0; border-top:1px dashed rgba(255,255,255,.35); }

/* ====== Main/topbar/conteúdo (tema claro) ====== */
.app-main{ flex:1 1 auto; margin-left:248px; min-width:0; background: var(--bg); }
.app-topbar.navbar{
  position: sticky; top:0; z-index:1030; background: var(--surface);
  border:none; border-bottom:1px solid var(--line);
  box-shadow: 0 2px 10px rgba(15,23,42,.04);
}
.app-topbar .navbar-brand img{ max-height:24px; }

.navbar-default.app-topbar .navbar-nav>li>a,
.navbar-default.app-topbar .navbar-brand,
.navbar-default.app-topbar .navbar-toggle{ color: var(--ink); }
.navbar-default.app-topbar .badge{
  background: var(--brand); color:#fff; font-weight:700;
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
}

/* Esconde o menu ESQUERDO da navbar quando logado (evita duplicidade) */
body.is-auth .app-topbar .navbar-left-block{ display:none !important; }

/* Conteúdo */
.app-content{
  padding: 20px;               /* espaçamento externo */
}
.panel, .card, .box, .well{ border-radius:14px; border-color: var(--line); }
.form-control{ border-radius:10px; }

/* ====== Colapso desktop ====== */
body.sidebar-collapsed .app-sidebar{ width: 84px; }
body.sidebar-collapsed .app-main{ margin-left: 84px; }
body.sidebar-collapsed .hide-when-collapsed{ display:none !important; }
body.sidebar-collapsed .sidebar-item > a{ justify-content:center; }

/* ====== Mobile ====== */
@media (max-width: 991px){
  .app-sidebar{ transform: translateX(-100%); }
  body.sidebar-open .app-sidebar{ transform: translateX(0); }
  .app-main{ margin-left:0; }
  .app-overlay{ position:fixed; inset:0; background: rgba(15,23,42,.35); z-index:1035; display:none; }
  body.sidebar-open .app-overlay{ display:block; }
  .app-topbar .navbar-toggle{ display:inline-block; }
}

/* ====== Suporte RTL (se necessário) ====== */
.rtl-navbar ~ .app-shell .app-sidebar{ left:auto; right:0; }
.rtl-navbar ~ .app-shell .app-main{ margin-left:0; margin-right:248px; }
body.sidebar-collapsed .rtl-navbar ~ .app-shell .app-main{ margin-right:84px; }
@media (max-width:991px){
  .rtl-navbar ~ .app-shell .app-sidebar{ transform: translateX(100%); }
  body.sidebar-open .rtl-navbar ~ .app-shell .app-sidebar{ transform: translateX(0); }
}

/* Topbar: esconder a marca quando logado para não duplicar a logo */
body.is-auth .app-topbar .navbar-brand { display: none !important; }

/* Sidebar brand: não exibir o nome */
.app-sidebar .brand .name { display: none !important; }

/* Ícones no menu (tamanho fixo, centralizados) */
.sidebar-item > a i.navbar-icon,
.sidebar-item > a .nav-svg-icon{
  width: 20px; min-width: 20px; height: 20px;
  display: inline-block; text-align: center;
  vertical-align: middle;
}

/* Em modo colapsado, mostrar só ícones */
body.sidebar-collapsed .hide-when-collapsed { display: none !important; }
body.sidebar-collapsed .sidebar-item > a { justify-content: center; gap: 0; }

/* Botão que colapsa/expande */
.sidebar-toggle{ cursor:pointer; }

/* Ajuste visual do link ativo/hover (tema claro) */
.sidebar-item > a:hover,
.sidebar-item.active > a{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
}

/* === Esconder logo e card de saldo no modo minimizado === */
body.sidebar-collapsed .app-sidebar .brand a { display: none !important; }
body.sidebar-collapsed .sidebar-card { display: none !important; }

/* Item “só no minimizado” (ícone de dinheiro) */
.only-when-collapsed { display: none; }
body.sidebar-collapsed .only-when-collapsed { display: block; }

/* Tooltip (balaozinho) ao passar o mouse nos itens quando minimizado */
.sidebar-item > a { position: relative; }
body.sidebar-collapsed .sidebar-item > a::after{
  content: attr(data-tip);
  position: absolute;
  left: 92px;                      /* afasta do menu (84px) */
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: #111827;
  color: #fff;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 1050;
}
body.sidebar-collapsed .sidebar-item > a::before{
  content: "";
  position: absolute;
  left: 84px;                      /* borda do menu minimizado */
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #111827;     /* setinha apontando pro item */
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 1050;
}
body.sidebar-collapsed .sidebar-item > a:hover::after,
body.sidebar-collapsed .sidebar-item > a:hover::before{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Mantém apenas ícones no minimizado */
body.sidebar-collapsed .sidebar-item > a { justify-content: center; gap: 0; }

/* Sidebar ícones */
.sidebar-item > a i {
  font-size: 18px;
  line-height: 1;
}
body.sidebar-collapsed .sidebar-item > a i {
  margin: 0 auto;
}

/* Ícone collapse/expand da sidebar */
.sidebar-toggle i {
  font-size: 18px;
  line-height: 1;
}

/* Só aparece em desktop (≥992px) */
@media (max-width: 991px){
  .sidebar-toggle { display: none !important; }
}

/* Ajustes no card de saldo da sidebar */
.sidebar-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* ou center para centralizar tudo */
  justify-content: center;
  text-align: left;          /* ou center */
}

.sidebar-card .label {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
  opacity: .9;
}

.sidebar-card .value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
/* Card de saldo em linha */
.sidebar-card {
  display: flex;
  align-items: center;   /* centraliza verticalmente */
  justify-content: flex-start;
  gap: 8px;              /* espaço entre label e valor */
  text-align: left;
}

.sidebar-card .label {
  font-size: 13px;
  font-weight: 500;
  opacity: .9;
  margin: 0;
}

.sidebar-card .value {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

/* ===== New Order – Widgets e Form ===== */
.neworder-container { margin-top: 10px; }

/* Cards base */
.wo-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 6px 22px rgba(15,23,42,.06);
}
.wo-card .wo-card-body{ padding:18px; }

/* Hero (boas-vindas) */
.wo-card-hero{
  background: linear-gradient(180deg,#ffffff 0%, #F3F9FF 100%);
  border-color:#E6F1FF;
}
.wo-hero-icon{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:#E9F6FF;border:1px solid #DDF0FF;margin-right:12px;flex:0 0 auto;
}
.wo-hero-icon i{ font-size:22px;color:#168bd6; }
.wo-card-hero .wo-card-body{ display:flex; align-items:center; gap:12px; }
.wo-hero-eyebrow{ font-size:12px;color:#64748B;text-transform:uppercase;letter-spacing:.08em; }
.wo-hero-title{ margin:2px 0 2px; font-size:20px; font-weight:700; color:#0F172A; }
.wo-hero-sub{ margin:0; color:#64748B; }

/* Balance */
.wo-card-balance{
  background: linear-gradient(180deg,#2AA9FF 0%, #168bd6 100%);
  color:#fff; border-color: rgba(255,255,255,.35);
}
.wo-card-balance .wo-card-body{ padding:16px; }
.wo-balance-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wo-balance-eyebrow{ font-size:13px; opacity:.95; }
.wo-balance-value{ font-size:22px; font-weight:800; line-height:1; }
.btn-brand{
  background:#fff; color:#168bd6; border:1px solid rgba(255,255,255,.6);
  font-weight:700; border-radius:12px; padding:10px 14px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.btn-brand i{ margin-right:6px; }
.btn-brand:hover{ background:#F5FBFF; color:#0F6DA3; }

/* Form card suavizado */
.wo-form-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 6px 22px rgba(15,23,42,.05);
}

/* Descrição: pontilhado, cor suave */
#service_description .panel-body,
.dashed-note{
  border:2px dashed #BFE4FF;
  background:#F6FBFF;
  color:#0F172A;
  border-radius:14px;
  padding:14px 16px;
}

/* Botão submit maior */
.wo-submit{ border-radius:12px; font-weight:700; padding:10px 18px; }
.wo-submit i{ margin-right:6px; }

/* Responsivo */
@media (max-width: 991px){
  .wo-card .wo-card-body{ padding:16px; }
  .wo-hero-title{ font-size:18px; }
  .wo-balance-row{ flex-direction:column; align-items:flex-start; }
  .btn-brand{ width:100%; }
}

/* ===== New Order – layout/gaps ===== */
.neworder-container { margin-top: 14px; }
.neworder-widgets { margin-bottom: 18px; }
.wo-card { margin-bottom: 16px; }

/* ===== Cards base ===== */
.wo-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 8px 26px rgba(15,23,42,.06);
}
.wo-card .wo-card-body{ padding:18px; }

/* ===== Hero card ===== */
.wo-card-hero{ background:linear-gradient(180deg,#fff 0%, #F3F9FF 100%); border-color:#E6F1FF; }
.wo-card-hero .wo-card-body{ display:flex; align-items:center; gap:14px; }
.wo-hero-icon{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:#E9F6FF;border:1px solid #DDF0FF; color:#168bd6; flex:0 0 auto;
}
.wo-hero-icon i{ font-size:22px; }
.wo-hero-eyebrow{ font-size:12px;color:#64748B;text-transform:uppercase;letter-spacing:.08em; }
.wo-hero-title{ margin:2px 0 2px; font-size:20px; font-weight:700; color:#0F172A; }
.wo-hero-sub{ margin:0; color:#64748B; }

/* ===== Balance widget ===== */
.wo-card-balance{ background:linear-gradient(180deg,#2AA9FF 0%, #168bd6 100%); color:#fff; border-color:rgba(255,255,255,.35); }
.wo-card-balance .wo-card-body{ padding:16px 16px; }
.wo-balance-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wo-balance-eyebrow{ font-size:13px; opacity:.95; }
.wo-balance-value{ font-size:22px; font-weight:800; line-height:1; }
.btn-brand{
  background:#fff; color:#168bd6; border:1px solid rgba(255,255,255,.6);
  font-weight:700; border-radius:12px; padding:10px 14px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.btn-brand i{ margin-right:6px; }
.btn-brand:hover{ background:#F5FBFF; color:#0F6DA3; }

/* ===== Form card ===== */
.wo-form-card{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:0 8px 26px rgba(15,23,42,.05);
  padding-bottom: 4px;
}
.wo-step{ margin-bottom:14px; }
.wo-step-head{
  display:flex; align-items:center; gap:8px;
  font-weight:700; color:#0F172A; margin:6px 0 8px;
}
.wo-step-num{
  width:22px;height:22px;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#E9F6FF;border:1px solid #DDF0FF;color:#0F6DA3;font-size:12px;
}

/* ===== Descrição pontilhada ===== */
.wo-desc-label{ margin-bottom:6px; }
#service_description .panel-body,
.dashed-note{
  border:2px dashed #BFE4FF;
  background:#F6FBFF;
  color:#0F172A;
  border-radius:14px;
  padding:14px 16px;
}

/* ===== Submit ===== */
.wo-submit{ border-radius:12px; font-weight:700; padding:10px 18px; }
.wo-submit i{ margin-right:6px; }

/* ===== Responsivo ===== */
@media (max-width:991px){
  .wo-card .wo-card-body{ padding:16px; }
  .wo-hero-title{ font-size:18px; }
  .wo-balance-row{ flex-direction:column; align-items:flex-start; }
  .btn-brand{ width:100%; }
}

:root{ --brand:#2AA9FF; --ink:#0F172A; --line:#E6EAF2; }

/* escopo para não afetar outros selects do painel */
.gp-override .select2-dropdown,
.gp-override .select2-results__options,
.gp-override .select2-results__option{
  background:#fff !important;
}

/* remove “cinza” do item marcado como selecionado na lista (default + classic) */
.gp-override .select2-container--default .select2-results__option[aria-selected=true],
.gp-override .select2-container--classic .select2-results__option[aria-selected=true]{
  background:#fff !important;
  color:var(--ink) !important;
}

/* hover/teclado – nosso azul claro; neutraliza azul escuro do tema classic */
.gp-override .select2-container--default .select2-results__option--highlighted[aria-selected],
.gp-override .select2-container--classic .select2-results__option--highlighted[aria-selected]{
  background:#F4FAFF !important;
  color:var(--ink) !important;
}

/* bordas/linhas e padding do dropdown */
.gp-override .select2-dropdown{
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  box-shadow:0 6px 20px rgba(0,0,0,.06) !important;
}
.gp-override .select2-container--default .select2-results__option{
  padding:10px 12px !important;
}
.gp-override .select2-container--default .select2-results__option:not(.select2-results__message)+
.select2-results__option{
  border-top:1px dashed var(--line) !important;
}

/* seleção (campo fechado) – branco e sem cinza do classic */
.gp-override .select2-container--default .select2-selection--single,
.gp-override .select2-container--classic .select2-selection--single{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  min-height:44px !important;
}
.gp-override .select2-container--default .select2-selection--single .select2-selection__rendered{
  display:flex !important; align-items:center !important; gap:6px !important;
  padding:8px 36px 8px 12px !important; color:var(--ink) !important;
}
.gp-override .select2-container--default .select2-selection--single .select2-selection__arrow{
  right:10px !important;
}

/* nossos componentes dentro do item (id + badges) */
.gp-override .svc-title{ font-weight:700; color:var(--ink); }
.gp-override .select2-results__option--highlighted .svc-title{ color:var(--brand) !important; }
.gp-override .svc-id{
  background:#EEF6FF !important; border:1px solid #CFE7FF !important; color:#0F6DA3 !important;
  border-radius:8px !important; padding:2px 6px !important; font-size:12px !important; font-weight:700 !important;
}
.gp-override .badge-mini{
  border:1px solid var(--line) !important; background:#FBFDFF !important; color:var(--ink) !important;
  border-radius:999px !important; padding:3px 8px !important; font-size:12px !important; white-space:nowrap !important;
}
.gp-override .badge-mini.price{ background:var(--brand) !important; border-color:var(--brand) !important; color:#fff !important; }

/* previne qualquer gradiente do tema classic */
.gp-override .select2-container--classic .select2-selection--single,
.gp-override .select2-container--classic .select2-selection--single .select2-selection__arrow,
.gp-override .select2-container--classic .select2-dropdown{
  background-image:none !important;
}
/* =========================
   THEME CONSISTENTE
   (cole este bloco ao FINAL do seu CSS)
========================= */
:root{
  /* Paleta de marca unificada */
  --brand-700:#177FD6;
  --brand-600:#1E98EA;
  --brand-500:#2AA9FF;  /* cor principal */
  --brand-300:#7EC7FF;
  --brand-200:#CFE7FF;  /* bordas suaves */
  --brand-100:#EAF4FF;  /* fundo sutil */
  --brand-50: #F5FAFF;  /* fundo mais claro */

  /* Neutros */
  --ink:#0F172A;
  --muted:#64748B;
  --muted-400:#7D8AA3;

  /* Controles */
  --control-bg:#FFFFFF;
  --control-border:#DCE6F3;
  --control-radius:14px;
  --focus-ring:0 0 0 3px rgba(42,169,255,.16);
}

/* ====== Campos (inputs/selects) ====== */
.wo-form .form-control,
body .select2-container--default .select2-selection--single{
  background:var(--control-bg)!important;
  border:1px solid var(--control-border)!important;
  border-radius:var(--control-radius)!important;
  color:var(--ink)!important;
}
.wo-form .form-control:hover,
body .select2-container--default .select2-selection--single:hover{
  border-color:var(--brand-200)!important;
}
.wo-form .form-control:focus{
  border-color:var(--brand-500)!important;
  box-shadow:var(--focus-ring)!important;
}
body .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--ink)!important;
  font-weight:400!important;
  padding-left:12px!important;
  padding-right:38px!important;
}

/* Dropdown do Select2 com a mesma linguagem visual */
body .select2-container--default .select2-dropdown{
  border:1px solid var(--control-border)!important;
  border-radius:12px!important;
  box-shadow:0 6px 20px rgba(15,23,42,.06)!important;
}
body .select2-container--default .select2-results__option{
  background:#fff!important;
}
body .select2-container--default .select2-results__option--highlighted{
  background:var(--brand-50)!important;
  color:var(--ink)!important;
}

/* ====== Step-badge, ID chip e mini-badges ====== */
.step-badge,
.svc-id,
.badge-mini,
.minmax-pill{
  background:var(--brand-50);
  border:1px solid var(--brand-200);
  color:var(--brand-700);
}
.step-badge{ font-weight:700; }
.svc-id{ color:var(--brand-700) !important; }
#select2-orderform-service-container > .svc-id{ margin-right:8px!important; }

/* ====== Placeholders e hints (um tom padrão) ====== */
.ph-input::placeholder{ color:var(--brand-300); opacity:1; }
.ph-input:focus::placeholder{ color:#68B7FF; }
.hint{ color:var(--muted-400); }

/* ====== Pills de Min/Max (mesmo padrão em todo lugar) ====== */
.minmax{ display:flex; gap:12px; margin-top:8px; align-items:center; }
.minmax .minmax-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  font-weight:700; line-height:1; white-space:nowrap;
}
.minmax .minmax-pill i{ font-size:16px; color:var(--brand-600); }

/* Se o texto estiver como “Min: X – Max: Y”, esconda-o quando as pills existirem */
.minmax + .qty-hint, .qty-hint:has(.minmax){ display:none; }

/* ====== Charge – card grande, mesmo tom da marca ====== */
.charge-card{
  background:var(--brand-50);
  border:1px solid var(--brand-200);
  border-radius:16px;
  padding:18px 20px;
}
.charge-card .title{
  font-weight:700; color:var(--ink); text-align:center; opacity:.8;
}
.charge-card .value{
  margin-top:8px; text-align:center;
  font-size:28px; font-weight:800; 
  color:var(--brand-700);
  font-variant-numeric:tabular-nums;
}
.charge-card .divider{
  width:36px; height:4px; border-radius:2px;
  margin:10px auto 0; background:rgba(15,23,42,.9);
  opacity:.85;
}

/* ====== Botão primário coerente ====== */
#order-form .btn-primary{
  background:var(--brand-500);
  border-color:var(--brand-500);
}
#order-form .btn-primary:hover{ background:var(--brand-600); border-color:var(--brand-600); }
#order-form .btn-primary:focus{ box-shadow:var(--focus-ring); }

/* ====== Painel lateral — mesma família de tons ====== */
.svc{
  background:linear-gradient(180deg, var(--brand-50), var(--brand-100));
  border:1px solid var(--brand-200);
}
.svc-ico{ border:1px solid var(--brand-200); color:var(--brand-600); }