/* Premium Dark UI (cliente) */
:root{
  --pd-bg:#071014;
  --pd-surface:#0b1a20;
  --pd-card:#0f232b;
  --pd-border:rgba(255,255,255,.08);
  --pd-text:#e8f0f2;
  --pd-muted:rgba(232,240,242,.72);
  --pd-gold:#d6b25e;
  --pd-gold-2:#f2d38a;
  --pd-success:#21c07a;
  --pd-danger:#ff5c72;
  --pd-radius:16px;
}

html,body{background:var(--pd-bg) !important;color:var(--pd-text) !important;}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

a{color:var(--pd-gold-2);}
a:hover{color:var(--pd-gold);}

.navbar, .app-header, header{background:linear-gradient(135deg, rgba(214,178,94,.20), rgba(7,16,20,0)) !important;}
.navbar .navbar-brand, .navbar a, .navbar .nav-link{color:var(--pd-text) !important;}
.navbar .nav-link:hover{color:var(--pd-gold-2) !important;}

.container, .container-fluid{color:var(--pd-text);}
.text-muted, .text-secondary{color:var(--pd-muted) !important;}
hr{border-color:var(--pd-border) !important;opacity:1;}

.card, .app-card, .modal-content, .list-group-item{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)) !important;
  border:1px solid var(--pd-border) !important;
  border-radius:var(--pd-radius) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  color:var(--pd-text) !important;
}

.card .card-header, .modal-header{
  border-bottom:1px solid var(--pd-border) !important;
}
.card .card-footer, .modal-footer{
  border-top:1px solid var(--pd-border) !important;
}

.form-control, .form-select, input, textarea{
  background:rgba(255,255,255,.04) !important;
  color:var(--pd-text) !important;
  border:1px solid var(--pd-border) !important;
  border-radius:14px !important;
}
.form-control:focus, .form-select:focus, input:focus, textarea:focus{
  border-color:rgba(214,178,94,.55) !important;
  box-shadow:0 0 0 .20rem rgba(214,178,94,.18) !important;
}

.btn{
  border-radius:14px !important;
  font-weight:700;
  letter-spacing:.2px;
}
.btn-primary{
  background:linear-gradient(135deg, var(--pd-gold), var(--pd-gold-2)) !important;
  border:none !important;
  color:#1b1406 !important;
}
.btn-primary:hover{filter:brightness(1.03);}
.btn-success{
  background:linear-gradient(135deg, #19b06c, var(--pd-success)) !important;
  border:none !important;
}
.btn-danger{
  background:linear-gradient(135deg, #ff3b5c, var(--pd-danger)) !important;
  border:none !important;
}
.btn-outline-primary, .btn-outline-light{
  border-color:rgba(214,178,94,.55) !important;
  color:var(--pd-gold-2) !important;
}
.btn-outline-primary:hover, .btn-outline-light:hover{
  background:rgba(214,178,94,.14) !important;
}

.badge{
  border-radius:999px !important;
  border:1px solid var(--pd-border);
}
.badge.bg-dark{background:rgba(255,255,255,.08) !important;color:var(--pd-text) !important;}
.badge.bg-success{background:rgba(33,192,122,.18) !important;color:#7af0bd !important;}
.badge.bg-danger{background:rgba(255,92,114,.16) !important;color:#ff98a6 !important;}
.badge.bg-warning{background:rgba(242,211,138,.16) !important;color:var(--pd-gold-2) !important;}

.table{color:var(--pd-text) !important;}
.table thead th{border-bottom:1px solid var(--pd-border) !important;}
.table td, .table th{border-top:1px solid var(--pd-border) !important;}

.alert{
  border-radius:var(--pd-radius) !important;
  border:1px solid var(--pd-border) !important;
  background:rgba(255,255,255,.04) !important;
  color:var(--pd-text) !important;
}

#img-qrcode, .qrcode, img.qrcode{
  background:#fff !important;
  border-radius:14px !important;
  padding:10px !important;
  border:1px solid rgba(0,0,0,.12) !important;
}

/* Melhor espaçamento mobile */
@media (max-width: 576px){
  .container, .container-fluid{padding-left:14px;padding-right:14px;}
  .btn{width:100%;}
  .input-group .btn{width:auto;}
}


/* Pedido: barra de progresso */
.order-progress{
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:space-between;
  padding:12px 14px;
  border:1px solid var(--pd-border);
  background:rgba(255,255,255,.02);
  border-radius:14px;
}

.order-progress__step{
  position:relative;
  flex:1 1 0;
  min-width:0;
  text-align:center;
  padding:0 6px;
}

.order-progress__step:not(:last-child)::after{
  content:"";
  position:absolute;
  top:11px;
  left:50%;
  right:-50%;
  height:2px;
  background:rgba(255,255,255,.12);
  transform:translateX(12px);
}

.order-progress__dot{
  width:12px;
  height:12px;
  border-radius:999px;
  margin:0 auto 8px auto;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 0 0 4px rgba(0,0,0,.25);
}

.order-progress__label{
  font-size:12px;
  line-height:1.2;
  color:rgba(255,255,255,.78);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.order-progress__step.is-done .order-progress__dot{
  background:var(--pd-gold);
  border-color:rgba(255,255,255,.35);
}

.order-progress__step.is-done:not(:last-child)::after{
  background:rgba(212,175,55,.55);
}

.order-progress__step.is-active .order-progress__dot{
  background:var(--pd-gold);
  border-color:rgba(255,255,255,.55);
  box-shadow:0 0 0 4px rgba(212,175,55,.10), 0 0 18px rgba(212,175,55,.25);
}

.order-progress__step.is-cancelled .order-progress__dot{
  background:#ff4d4d;
  border-color:rgba(255,255,255,.55);
  box-shadow:0 0 0 4px rgba(255,77,77,.12), 0 0 18px rgba(255,77,77,.22);
}

@media (max-width: 520px){
  .order-progress{gap:6px; padding:10px 10px;}
  .order-progress__label{font-size:11px;}
}



/* Progress (compact) for lists like "Meus bilhetes" */
.order-progress.order-progress--compact{
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.order-progress.order-progress--compact .order-progress__label{
  font-size: 11px;
  opacity: .85;
}
.order-progress.order-progress--compact .order-progress__dot{
  width: 10px;
  height: 10px;
}
@media (max-width: 576px){
  .order-progress.order-progress--compact .order-progress__label{
    font-size: 10px;
  }
}

/* "Aguardando pagamento" highlight on checkout/confirmation (view order) */
.order-waiting{
  background: linear-gradient(180deg, rgba(255, 203, 91, 0.10), rgba(255,255,255,0.02));
  border: 1px solid rgba(255, 203, 91, 0.22);
}
.order-waiting__badge{
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 203, 91, 0.16);
  border: 1px solid rgba(255, 203, 91, 0.35);
  color: #ffcb5b;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1;
  margin-top: 2px;
}
.order-waiting__title{
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  margin-bottom: 4px;
}
.order-waiting__desc{
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  line-height: 1.35;
}
/* ===============================
   CORREÇÃO VISUAL - MEUS NÚMEROS
   =============================== */

/* Números do bilhete - visíveis */
.my-numbers-list .number,
.ticket-number,
.numero,
.numbers span,
.numbers div {
    opacity: 1 !important;
    color: #ffffff !important;
    font-weight: 700;
}

/* Se existir estado desativado (opcional) */
.number.disabled,
.number.inactive {
    opacity: 0.35 !important;
    color: #aaaaaa !important;
}
/* =========================================================
   FIX CONTRASTE - MEUS NÚMEROS / VER NÚMEROS
   (força fundo escuro e texto branco nas caixinhas)
   ========================================================= */

/* Container mais comum de grades/listas de números */
.numbers, .my-numbers, .my-numbers-list, .order-numbers, .ticket-numbers {
  color: #fff !important;
}

/* Caixinhas dos números (pega spans/divs/li/botões dentro do bloco) */
.numbers span, .numbers div, .numbers li, .numbers button,
.my-numbers span, .my-numbers div, .my-numbers li, .my-numbers button,
.my-numbers-list span, .my-numbers-list div, .my-numbers-list li, .my-numbers-list button,
.order-numbers span, .order-numbers div, .order-numbers li, .order-numbers button,
.ticket-numbers span, .ticket-numbers div, .ticket-numbers li, .ticket-numbers button {
  background: #111827 !important;      /* fundo grafite */
  color: #ffffff !important;           /* texto branco */
  border: 1px solid rgba(212, 175, 55, 0.55) !important; /* dourado premium */
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Se o número estiver dentro de <a> */
.numbers a, .my-numbers a, .my-numbers-list a, .order-numbers a, .ticket-numbers a {
  color: #ffffff !important;
}

/* Ao selecionar texto, garantir visibilidade */
::selection {
  background: rgba(212, 175, 55, 0.35);
  color: #ffffff;
}
/* =========================================================
   FIX ULTRA - CONTRASTE DOS NÚMEROS (Meus números / Ver números)
   ========================================================= */

/* A) Força cor do texto dentro de qualquer badge/pílula de número */
.number, .numero, .ticket-number, .ticket-num, .rifa-number,
.badge-number, .num, .n, .chip, .pill, .tag,
.numbers .number, .numbers .numero,
.my-numbers .number, .my-numbers .numero,
.my-numbers-list .number, .my-numbers-list .numero,
.order-numbers .number, .order-numbers .numero,
.ticket-numbers .number, .ticket-numbers .numero {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}

/* B) Força fundo e borda premium nas caixinhas */
.number, .numero, .ticket-number, .ticket-num, .rifa-number,
.badge-number, .num, .n, .chip, .pill, .tag,
.numbers span, .numbers a, .numbers button, .numbers div, .numbers li,
.my-numbers span, .my-numbers a, .my-numbers button, .my-numbers div, .my-numbers li,
.my-numbers-list span, .my-numbers-list a, .my-numbers-list button, .my-numbers-list div, .my-numbers-list li,
.order-numbers span, .order-numbers a, .order-numbers button, .order-numbers div, .order-numbers li,
.ticket-numbers span, .ticket-numbers a, .ticket-numbers button, .ticket-numbers div, .ticket-numbers li {
  background: #0b1220 !important; /* fundo escuro */
  border: 1px solid rgba(212, 175, 55, 0.65) !important; /* dourado */
  box-shadow: 0 8px 18px rgba(0,0,0,.25) !important;
}

/* C) Se existir estilo do Bootstrap tipo .btn-outline ou .text-muted no número */
.numbers .text-muted,
.my-numbers .text-muted,
.my-numbers-list .text-muted,
.order-numbers .text-muted,
.ticket-numbers .text-muted {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* D) Estado selecionado/ativo (se tiver) */
.number.active, .numero.active,
.numbers .active, .my-numbers .active, .my-numbers-list .active,
.order-numbers .active, .ticket-numbers .active {
  background: rgba(212, 175, 55, 0.18) !important;
  border-color: rgba(212, 175, 55, 0.95) !important;
  color: #ffffff !important;
}
/* ================================
   FIX CONTRASTE GLOBAL (CLIENTE)
   ================================ */

/* Texto padrão do app no tema dark */
.app-main, .app-main * {
  color: inherit;
}

/* Títulos e textos dentro do conteúdo */
.app-main, .app-main p, .app-main span, .app-main div, .app-main li, .app-main a,
.app-title h1, .app-title h2, .app-title h3 {
  color: #e8eefc !important;
}

/* Botão buscar e alerts (warning no dark precisa de contraste) */
.app-main .btn.btn-warning {
  color: #1b1400 !important;
  font-weight: 700;
}

.app-main .alert.alert-warning {
  background: rgba(255, 187, 51, 0.18) !important;
  border: 1px solid rgba(255, 187, 51, 0.35) !important;
  color: #ffe7b0 !important;
}

.app-main .alert.alert-warning i,
.app-main .alert.alert-warning strong,
.app-main .alert.alert-warning b {
  color: #ffd75b !important;
}

/* Links no dark */
.app-main a {
  color: #ffd75b !important;
}
.app-main a:hover {
  color: #ffe7a8 !important;
}

/* =========================================================
   FIX CONTRASTE - PÁGINA DE PAGAMENTO / DETALHES DA COMPRA
   ========================================================= */

/* Card/box de detalhes (pega os padrões mais comuns do sistema) */
.app-main .card,
.app-main .app-card,
.app-main .order-details,
.app-main .payment-details,
.app-main .details-box,
.app-main .bg-white,
.app-main .bg-light {
  background: #0b1220 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #e8eefc !important;
}

/* Títulos e cabeçalhos dentro do bloco */
.app-main .card h1, .app-main .card h2, .app-main .card h3, .app-main .card h4, .app-main .card h5,
.app-main .app-card h1, .app-main .app-card h2, .app-main .app-card h3, .app-main .app-card h4, .app-main .app-card h5 {
  color: #ffffff !important;
}

/* Labels/rótulos que costumam vir como muted */
.app-main .text-muted,
.app-main small,
.app-main .label,
.app-main .form-text {
  color: rgba(232, 238, 252, 0.75) !important;
}

/* Valores/dados (IDs, nomes, números, etc.) */
.app-main .order-id,
.app-main .order-code,
.app-main .value,
.app-main .order-value,
.app-main .order-info strong,
.app-main .order-info b {
  color: #ffffff !important;
}

/* Linha divisória/HR */
.app-main hr {
  border-color: rgba(255,255,255,0.10) !important;
  opacity: 1 !important;
}
/* =========================================================
   CHECKOUT - FIX CONTRASTE (Detalhes da sua compra)
   ========================================================= */

/* Escopo: página checkout (título costuma ter "Checkout") */
body .app-main {
  color: #e8eefc;
}

/* Blocos/caixas do checkout (cards do sistema) */
body .app-main .app-card,
body .app-main .card,
body .app-main .card-body,
body .app-main .card-header,
body .app-main .mb-2.card,
body .app-main .mb-3.card {
  background: #0b1220 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #e8eefc !important;
}

/* TÍTULOS */
body .app-main h1,
body .app-main h2,
body .app-main h3,
body .app-main h4,
body .app-main h5 {
  color: #ffffff !important;
}

/* Linhas/colunas onde aparecem labels e valores */
body .app-main .row,
body .app-main .col,
body .app-main .col-12,
body .app-main .col-md-12,
body .app-main .col-lg-12,
body .app-main .text-black,
body .app-main .text-dark {
  color: #ffffff !important;
}

/* Labels apagados / “Transação, Telefone, Data/Hora, Valor, Cotas” */
body .app-main .text-muted,
body .app-main small,
body .app-main .small,
body .app-main .form-text,
body .app-main .app-text-muted {
  color: rgba(232,238,252,0.75) !important;
}

/* Valores fortes */
body .app-main strong,
body .app-main b {
  color: #ffffff !important;
}

/* Se os detalhes estiverem em LISTA */
body .app-main .list-group-item {
  background: rgba(255,255,255,0.03) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Se os detalhes estiverem em TABELA */
body .app-main .table,
body .app-main table {
  color: #ffffff !important;
}
body .app-main .table td,
body .app-main .table th,
body .app-main table td,
body .app-main table th {
  background: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Não mexer em botões/inputs do bootstrap */
body .app-main .btn { color: inherit; }
body .app-main .btn.btn-warning,
body .app-main .btn.btn-success,
body .app-main .btn.btn-primary,
body .app-main .btn.btn-danger {
  color: initial;
}
/* =========================================================
   CHECKOUT - FIX CONTRASTE (Detalhes da sua compra)
   ========================================================= */

/* Escopo: página checkout (título costuma ter "Checkout") */
body .app-main {
  color: #e8eefc;
}

/* Blocos/caixas do checkout (cards do sistema) */
body .app-main .app-card,
body .app-main .card,
body .app-main .card-body,
body .app-main .card-header,
body .app-main .mb-2.card,
body .app-main .mb-3.card {
  background: #0b1220 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #e8eefc !important;
}

/* TÍTULOS */
body .app-main h1,
body .app-main h2,
body .app-main h3,
body .app-main h4,
body .app-main h5 {
  color: #ffffff !important;
}

/* Linhas/colunas onde aparecem labels e valores */
body .app-main .row,
body .app-main .col,
body .app-main .col-12,
body .app-main .col-md-12,
body .app-main .col-lg-12,
body .app-main .text-black,
body .app-main .text-dark {
  color: #ffffff !important;
}

/* Labels apagados / “Transação, Telefone, Data/Hora, Valor, Cotas” */
body .app-main .text-muted,
body .app-main small,
body .app-main .small,
body .app-main .form-text,
body .app-main .app-text-muted {
  color: rgba(232,238,252,0.75) !important;
}

/* Valores fortes */
body .app-main strong,
body .app-main b {
  color: #ffffff !important;
}

/* Se os detalhes estiverem em LISTA */
body .app-main .list-group-item {
  background: rgba(255,255,255,0.03) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Se os detalhes estiverem em TABELA */
body .app-main .table,
body .app-main table {
  color: #ffffff !important;
}
body .app-main .table td,
body .app-main .table th,
body .app-main table td,
body .app-main table th {
  background: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Não mexer em botões/inputs do bootstrap */
body .app-main .btn { color: inherit; }
body .app-main .btn.btn-warning,
body .app-main .btn.btn-success,
body .app-main .btn.btn-primary,
body .app-main .btn.btn-danger {
  color: initial;
}