/* newwaybox/css/style.css */

/* --- Variáveis de Tema (Ajuste conforme o seu tema) --- */
:root {
  --cor-primaria: #007bff;    /* Azul (Ex: Botões, Links, Títulos) */
  --cor-secundaria: #6c757d;   /* Cinzento (Ex: Texto Secundário, Footer) */
  --cor-destaque: #ffc107;    /* Amarelo (Ex: Alerta, pendente) */
  --cor-sucesso: #28a745;    /* Verde (Ex: Entregue, Pago) */
  --cor-erro: #dc3545;      /* Vermelho (Ex: Devolvido, Erro) */
 
  --cor-fundo: #f8f9fa;     /* Fundo da página */
  --cor-card-bg: #ffffff;    /* Fundo de cartões e áreas de conteúdo */
  --cor-texto-claro: #f0f0f0;
  --cor-texto-escuro: #333333;

  /* Status Badges Cores */
  --status-registada: #007bff;    /* Azul */
  --status-expirada: #6c757d;    /* Cinzento Escuro */
  --status-entregue: #28a745;    /* Verde */
  --status-devolvida: #dc3545;    /* Vermelho */
  --status-pagamento: #ffc107;    /* Amarelo */

  /* Cores específicas para o admin */
  --admin-sidebar-bg-color: #343a40;
  --admin-sidebar-link-color: #adb5bd;
  --admin-sidebar-link-hover-bg: #495057;
  --admin-sidebar-submenu-bg: #212529;
  --admin-sidebar-submenu-link-color: #ced4da;
  --admin-sidebar-submenu-link-hover-bg: #495057;
  --admin-header-bg: #ffffff;
  --admin-header-text: #343a40;
}


/* ------------------------------------------- */
/* --- 1. Reset Básico e Propriedades Globais --- */
/* ------------------------------------------- */
body {
  font-family: 'Arial', sans-serif;
  background-color: var(--cor-fundo);
  color: var(--cor-texto-escuro);
  margin: 0;
  padding: 0;
  line-height: 1.6;
  /* 🚨 CORREÇÃO CRÍTICA: Sobrescrever a regra 'display: flex' do body com alta prioridade aqui. */
  display: block !important;
  min-height: auto !important;
}

/* Para centrar formulários de login/registo, use esta classe no contentor principal dessas páginas */
.auth-page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--cor-fundo);
}

/* Contentor padrão para formulários centrais (login, registo) */
.container {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  background-color: var(--cor-card-bg);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

h1, h2 {
  text-align: center;
  color: var(--cor-primaria);
  margin-bottom: 20px;
}

/* --- 1.1 Formulário --- */
.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  margin-bottom: 7px;
  font-weight: bold;
  font-size: 0.95rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group .form-control { /* Adicionado form-control para ser mais genérico */
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1rem;
  background-color: var(--cor-card-bg); /* Garante fundo branco nos inputs */
  color: var(--cor-texto-escuro);
}

/* Estilo para o grupo de checkbox (Termos e Condições) */
.form-group-checkbox {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px;
}
.form-group-checkbox input[type="checkbox"] {
  width: auto;
  margin-right: 10px;
  margin-top: 5px;
  flex-shrink: 0;
}
.form-group-checkbox label {
  margin-bottom: 0;
  font-weight: normal;
  display: block; 
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--cor-secundaria);
}
.form-group-checkbox a {
  color: var(--cor-primaria);
}


/* --- 1.2 Botões --- */
.btn {
  display: inline-block;
  width: 100%;
  padding: 12px;
  font-size: 1.1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn.primary {
  background-color: var(--cor-primaria);
  color: white;
}
.btn.primary:hover {
  background-color: #0056b3;
}

.btn.secondary {
  background-color: var(--cor-secundaria);
  color: white;
}
.btn.secondary:hover {
  background-color: #5a6268;
}

.btn.btn-sm {
  padding: 5px 10px;
  font-size: 0.85rem;
  line-height: 1.5;
  width: auto;
}

/* Botão grande de registo na homepage */
.register-cta {
  margin-top: 30px;
  width: 100%;
  text-align: center;
}
.register-button-large {
  width: auto;
  padding: 15px 30px;
  font-size: 1.2rem;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}


/* --- 1.3 Mensagens e Links --- */
.message {
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 4px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.message.success {
  background-color: #d4edda;
  color: var(--cor-sucesso);
  border: 1px solid #c3e6cb;
}
.message.error {
  background-color: #f8d7da;
  color: var(--cor-erro);
  border: 1px solid #f5c6cb;
}
.message.info {
  background-color: #e0f7fa;
  color: #00796b;
  border: 1px solid #00bcd4;
}
.message i { margin-right: 0; } /* Ajustado para gap */


.link-group {
  text-align: center;
  margin-top: 15px;
}
.link-group a {
  color: var(--cor-primaria);
  text-decoration: none;
}
.link-group a:hover {
  text-decoration: underline;
}


/* ----------------------------------------------- */
/* --- 2. Estilos do Header e Navegação do Cliente --- */
/* ----------------------------------------------- */

.client-header {
  background-color: var(--cor-card-bg);
  color: var(--cor-texto-escuro);
  padding: 15px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.client-header .header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.client-header .logo a {
  color: var(--cor-primaria);
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
}

.menu-toggle-btn {
  display: none; /* Apenas visível no mobile */
  background: none;
  border: none;
  color: var(--cor-primaria);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 5px;
}

.client-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

.client-nav ul li a {
  color: var(--cor-texto-escuro);
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s ease, background-color 0.3s ease;
  padding: 8px 12px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.client-nav ul li a:hover {
  color: var(--cor-primaria);
  background-color: #f0f0f0;
}


/* --------------------------------------------- */
/* --- 3. Estilos do Conteúdo Principal/Footer --- */
/* --------------------------------------------- */

.client-main-content {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  background-color: var(--cor-card-bg);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  flex-grow: 1;
  box-sizing: border-box;
}

.client-dashboard-area h1 {
  font-size: 2rem;
  color: var(--cor-primaria);
  margin-bottom: 25px;
  text-align: center;
}
.client-dashboard-area p {
  text-align: center;
  color: #666;
  margin-bottom: 20px;
}

.client-footer {
  background-color: var(--cor-secundaria);
  color: white;
  text-align: center;
  padding: 20px 0;
  margin-top: 30px;
}

.client-footer .footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}


/* ------------------------------------------ */
/* --- 4. Estilos do Dashboard (Cards/Stats) --- */
/* ------------------------------------------ */

.dashboard-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}
.card-identity, .card-address, .card-summary {
  background-color: var(--cor-card-bg);
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.card-identity h2, .card-address h2, .card-summary h2 {
  color: var(--cor-primaria);
  font-size: 1.3rem;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-identity .identity-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: 15px;
}

/* --- QR Code e Código Cliente --- */
.qr-code-box {
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
}
.code-label {
  font-size: 0.85rem;
  color: var(--cor-secundaria);
  margin-bottom: 0;
}
.code-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--cor-primaria);
  margin-top: 5px;
  margin-bottom: 5px;
  word-break: break-all;
}

/* --- Morada Virtual --- */
.virtual-address-box {
  background-color: #f1f1f1;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 5px;
  font-family: monospace;
  white-space: pre-wrap;
  font-size: 1rem;
  line-height: 1.4;
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 15px;
  text-align: left;
}
.virtual-address-box .line-1 { font-weight: bold; color: #343a40; }
.virtual-address-box .line-2 { color: var(--cor-primaria); font-weight: bold; }


/* --- Stats (Ajustado para usar variáveis) --- */
.dashboard-stats {
  display: flex;
  justify-content: space-around;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.stat-item {
  flex: 1;
  min-width: 120px;
  padding: 15px 10px;
  border-radius: 6px;
  text-align: center;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.stat-item:hover { transform: translateY(-2px); }
.stat-item h3 { font-size: 0.8rem; color: var(--cor-secundaria); margin-bottom: 5px; }
.stat-value { font-size: 2rem; font-weight: bold; margin-bottom: 5px; line-height: 1; }
.stat-item a { font-size: 0.8rem; font-weight: bold; text-decoration: none; color: var(--cor-secundaria); }

.in-warehouse { background-color: #e9f5ff; border: 1px solid var(--cor-primaria); }
.in-warehouse .stat-value { color: var(--cor-primaria); }
.awaiting-pickup { background-color: #fff8e1; border: 1px solid var(--cor-destaque); }
.awaiting-pickup .stat-value { color: var(--cor-destaque); }
.picked-up { background-color: #e6ffed; border: 1px solid var(--cor-sucesso); }
.picked-up .stat-value { color: var(--cor-sucesso); }
.returned { background-color: #fce4e4; border: 1px solid var(--cor-erro); }
.returned .stat-value { color: var(--cor-erro); }


/* ---------------------------------------------------- */
/* --- 5. Estilos de Tabelas e Badges (Encomendas/etc) --- */
/* ---------------------------------------------------- */
.table-responsive {
  overflow-x: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
.modern-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--cor-card-bg);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.modern-table th, .modern-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #f1f1f1;
}
.modern-table thead th {
  background-color: var(--cor-primaria);
  color: #ffffff;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}
.modern-table tbody tr:hover { background-color: #f8f9fa; }
.modern-table tbody tr:last-child td { border-bottom: none; }


/* --- Status Badges (CORRIGIDO PARA OS 4 STATUS FINAIS) --- */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.8em;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
}
.status-badge i { margin-right: 5px; }

/* As classes da DB que usará no PHP: */
.status-registada { background-color: var(--status-registada); }
.status-expirada { background-color: var(--status-expirada); }
.status-entregue { background-color: var(--status-entregue); }
.status-devolvida { background-color: var(--status-devolvida); }

/* Para o caso de um status desconhecido, use esta classe de fallback */
.status-desconhecido { background-color: #a8a8a8; }


/* --- Badges de Pagamento (Mantidos para o caso de uso) --- */
.badge-paid { background-color: var(--cor-sucesso); color: #fff; padding: 3px 8px; border-radius: 12px; font-size: 0.75em; font-weight: bold; }
.badge-unpaid { background-color: var(--cor-erro); color: #fff; padding: 3px 8px; border-radius: 12px; font-size: 0.75em; font-weight: bold; }
.badge-paid i, .badge-unpaid i { margin-right: 3px; }


/* --- Paginação --- */
.pagination-nav {
  display: flex; justify-content: center; margin-top: 30px;
}
.pagination {
  display: flex; list-style: none; padding: 0; margin: 0; border-radius: 0.25rem;
}
.page-item { margin: 0 2px; }
.page-link {
  display: block; padding: 8px 12px; color: var(--cor-primaria); text-decoration: none;
  background-color: #fff; border: 1px solid #dee2e6; border-radius: 5px;
  transition: all 0.2s ease-in-out;
}
.page-link:hover { background-color: #e9ecef; border-color: var(--cor-primaria); color: #0056b3; }
.page-item.active .page-link {
  color: #fff; background-color: var(--cor-primaria); border-color: var(--cor-primaria);
}
.page-item.active .page-link:hover {
  color: #fff; background-color: #0056b3; border-color: #0056b3;
}


/* ---------------------------------------------------- */
/* --- 6. Estilos da Página de Login/Apresentação (Novo Layout) --- */
/* ---------------------------------------------------- */

.homepage-layout {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--cor-fundo);
  margin: 0;
  padding: 0;
}

.main-content-wrapper {
  display: flex;
  background-color: var(--cor-card-bg);
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  max-width: 1200px;
  width: 95%;
  min-height: 600px;
}

/* Coluna da Apresentação do Serviço */
.service-presentation {
  flex: 1;
  padding: 40px;
  background-color: #f0f8ff;
  color: var(--cor-texto-escuro);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.service-presentation .logo-large {
  margin-bottom: 25px;
}
.service-presentation .logo-large a {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--cor-primaria);
  text-decoration: none;
}
.service-presentation h1 {
  font-size: 2.2rem;
  color: var(--cor-primaria);
  margin-bottom: 20px;
  text-align: left;
}
.service-presentation p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: left;
}

.feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
  width: 100%;
}
.feature-item {
  text-align: left;
}
.feature-item i {
  font-size: 2rem;
  color: var(--cor-primaria);
  margin-bottom: 10px;
}
.feature-item h3 {
  font-size: 1.1rem;
  color: var(--cor-texto-escuro);
  margin-bottom: 5px;
  text-align: left;
}
.feature-item p {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.5;
  text-align: left;
}
.cta-text {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--cor-primaria);
  text-align: left;
}

/* Coluna do Formulário de Autenticação */
.auth-card-wrapper {
  flex: 0 0 450px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--cor-card-bg);
}
.auth-card {
  width: 100%;
}
.auth-card h2 {
  font-size: 1.8rem;
  color: var(--cor-primaria);
  margin-bottom: 25px;
  text-align: center;
}


/* ------------------------------------- */
/* --- 7. Media Queries (Responsividade) --- */
/* ------------------------------------- */

/* Tablet (e navegação do cliente) */
@media (max-width: 992px) {
  /* Layout da Homepage/Login */
  .main-content-wrapper {
    flex-direction: column;
    width: 90%;
    max-width: 600px;
    min-height: unset;
  }
  .service-presentation {
    padding: 30px 20px;
    align-items: center;
    text-align: center;
  }
  .service-presentation h1 {
    font-size: 1.8rem;
    text-align: center;
  }
  .feature-list {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .feature-item {
    text-align: center;
  }
  .feature-item h3, .feature-item p {
    text-align: center;
  }
  .auth-card-wrapper {
    flex: auto;
    padding: 30px 20px;
  }
 
  /* Botão de registo */
  .register-button-large {
    width: 80%;
    font-size: 1.1rem;
    padding: 12px 25px;
  }
}

/* Mobile Padrão (max-width: 768px) - BLOCO CORRIGIDO */
@media (max-width: 768px) {
 
  /* Header e Navegação */
  .client-header .header-container { padding: 0 15px; }
  .menu-toggle-btn { display: block; }
  .client-nav ul {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: var(--cor-card-bg);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 990;
    border-top: 1px solid #eee;
  }
  .client-nav ul.active { display: flex; }
  .client-nav ul li {
    border-bottom: 1px solid #eee;
    width: 100%;
  }
  .client-nav ul li:last-child { border-bottom: none; }
  .client-nav ul li a { padding: 15px 20px; text-align: left; width: 100%; }

  /* Contentor Principal */
  .client-main-content {
    margin-top: 10px;
    padding: 15px;
    box-shadow: none;
  }

  /* Dashboard Cards */
  .dashboard-cards-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .card-identity, .card-address, .card-summary {
    background-color: var(--cor-card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #eee;
  }
  .card-identity h2, .card-address h2, .card-summary h2 {
    text-align: center;
    font-size: 1.2rem;
  }
  .identity-content {
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .code-value { font-size: 1.6rem; margin: 5px 0 10px; }
 
  /* Dashboard Stats (2 colunas) */
  .dashboard-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
    width: 100%;
  }
  .stat-item {
    min-width: unset;
    flex: none;
    margin: 0;
    padding: 15px 5px;
  }
  .stat-item h3 { height: 30px; display: flex; align-items: center; justify-content: center; }

  /* Checkbox (Termos) */
  .form-group-checkbox label { font-size: 0.9rem; }

    /* 🚨 CORREÇÃO CRÍTICA PARA LARGURA TOTAL DA TABELA DE PREÇOS (768px) */
    .price-table-card { 
        padding: 0; /* Remove padding do card para usar o padding do main-content */
        box-shadow: none; /* Remove a sombra do card */
    }
    .price-table { 
        max-width: 100% !important; 
        margin: 0 !important; 
        border: none !important; 
        box-shadow: none !important;
    }
    .price-tables-container {
        padding: 0; 
        width: 100%;
    }
}

/* Telemóveis muito pequenos (max-width: 576px) - BLOCO CORRIGIDO */
@media (max-width: 576px) {
  .main-content-wrapper {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .service-presentation, .auth-card-wrapper {
    padding: 20px 15px;
  }
  .service-presentation h1 { font-size: 1.6rem; }
  .service-presentation p { font-size: 0.95rem; }
  .register-button-large {
    width: 100%;
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 8px;
  }
 
  /* Tabela Responsiva (Modern Table - Encomendas) */
  .d-none-mobile { display: none !important; }
  .modern-table thead { display: none; }
  .modern-table tbody tr {
    display: block;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  .modern-table tbody td {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    align-items: center;
  }
  .modern-table tbody td:last-child { border-bottom: none; padding-bottom: 15px; }
  .modern-table tbody td::before {
    content: attr(data-label);
    font-weight: bold;
    color: var(--cor-secundaria);
    flex-basis: 45%;
    text-align: left;
  }
  .modern-table tbody td:nth-child(7)::before { content: "Ações:"; flex-basis: 45%; }
  .modern-table tbody td .action-buttons-group {
    flex-direction: column;
    width: 50%;
    align-items: flex-end;
  }
  .modern-table tbody td .action-buttons-group a {
    width: 100%;
    text-align: center;
  }

  /* 🚨 LAYOUT CARD FINAL: TABELA DE PREÇOS (price-table) - CORREÇÃO DE LARGURA */
    
  /* 1. Garantir que os wrappers ocupam 100% e evitam o corte */
  .price-table-card,
  .price-tables-container, 
  .price-table,
  .price-table > div { /* Target the inline overflow div (se existir) */
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: hidden !important; /* Esconde overflow lateral que pode ocorrer */
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
      box-shadow: none !important;
  }

  .price-table table {
    min-width: unset !important; /* ANULA A LARGURA MÍNIMA DO DESKTOP */
    display: block !important;
    width: 100% !important; /* GARANTE 100% DE LARGURA */
  }
  .price-table thead {
    display: none !important;
  }
  .price-table tbody tr {
    display: grid !important; /* Usar grid para melhor controlo de layout */
    grid-template-columns: 1fr 1fr !important; /* Duas colunas para os campos */
    grid-gap: 5px 10px !important;
    padding: 10px !important; 
    
    /* Adicionar margem lateral aos TRs para dar espaço e criar o efeito de "cartão" */
    margin: 0 15px 15px 15px !important; 
    
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  }
  .price-table tbody td {
    display: flex !important;
    flex-direction: column !important; 
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 5px !important;
    border-bottom: none !important;
    border: 1px solid #f0f0f0 !important; 
    border-radius: 4px !important;
    text-align: center !important; 
  }
  .price-table tbody td:last-child {
    border-bottom: none !important;
    padding-bottom: 8px !important;
  }
  /* Rótulo (Label) do Campo */
  .price-table tbody td::before {
    content: attr(data-label) !important;
    font-weight: bold !important;
    color: var(--cor-secundaria) !important;
    font-size: 0.75rem !important; 
    margin-bottom: 3px !important;
    flex-basis: auto !important; 
    text-align: center !important; 
  }
  /* Categoria (deve ocupar a largura total do "card") */
  .price-table tbody tr td:first-child {
      grid-column: 1 / 3 !important; /* Ocupa as 2 colunas */
      border-bottom: 1px dashed #eee !important;
      margin-bottom: 5px !important;
      padding-bottom: 10px !important;
      border: none !important;
      background-color: #f8f8f8 !important;
      font-size: 1.1rem !important;
      color: var(--cor-primaria) !important;
      font-weight: bold !important;
  }
  .price-table tbody tr td:first-child::before {
      content: "Categoria:" !important; 
  }
  /* Adaptação dos data-labels para a tabela de preços */
  .price-table tbody tr td:nth-child(2)::before { content: "Peso Máx.:" !important; }
  .price-table tbody tr td:nth-child(3)::before { content: "Volume Máx.:" !important; }
  .price-table tbody tr td:nth-child(4)::before { content: "Preço Base:" !important; }
  .price-table tbody tr td:nth-child(5)::before { content: "Taxa Diária:" !important; }
      
  /* Estilo de destaque para o Preço Base */
  .price-table tbody tr td:nth-child(4) {
      background-color: #e6ffed !important; 
      color: var(--cor-sucesso) !important;
  }
  /* Ajustes Finos */
  .client-dashboard-area h1 { font-size: 1.8rem; }
  .stat-item h3 { height: auto; font-size: 0.75rem; }
  .stat-value { font-size: 1.5rem; }
  .form-group-checkbox label { font-size: 0.9rem; }
}

/* --- Estilos Adicionais para o Dashboard de Cliente (Integrados e Corrigidos) --- */

/* Estilos para a badge "Sem Status Definido" */
.stat-item.info-missing {
  background-color: #f0f0f0;
  border: 1px solid #999;
}
.stat-item.info-missing .stat-value {
  color: #666;
}
.stat-item.info-missing a {
  color: #666;
}

/* --- Tabela de Preços e Regras (Ajustada com base no seu style.css e para Responsividade) --- */

.price-table-card {
  margin-top: 30px;
  padding: 25px; /* Mantido do style.css */
  background-color: var(--cor-card-bg); /* Garante fundo branco para o card */
  border-radius: 10px; /* Arredondamento */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Sombra consistente */
}
.price-table-card h2 {
  color: var(--cor-primaria); /* Usar cor primária do cliente */
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 15px;
  font-size: 1.3rem; /* Ajuste para ser consistente com outros h2 de card */
  display: flex; /* Para ícone ao lado do título */
  align-items: center;
  gap: 10px;
}
.price-table-card p {
  font-size: 0.95em;
  margin-bottom: 20px;
  line-height: 1.5;
  color: var(--cor-texto-escuro); /* Cor de texto padrão */
  font-weight: normal; /* Removido bold para texto de parágrafo */
  padding: 10px;
  border: 1px solid #ffe0b2;
  background-color: #fff3e0;
  border-radius: 4px;
  text-align: center; /* Centralizar texto da descrição */
}
/* Especial para a mensagem de alerta de volume máximo */
.price-table-card p.text-danger {
  background-color: #fce4e4; /* Cor de erro */
  border-color: var(--cor-erro);
  color: var(--cor-erro);
  font-weight: bold;
}

/* Layout das tabelas (agora uma só) */
.price-tables-container {
  display: flex;
  justify-content: center; /* Centralizar a tabela */
  margin-top: 20px;
}
.price-table {
  flex: 0 0 100%; /* Ocupa 100% da largura do container flex */
  max-width: 700px; /* Limite máximo para não esticar demais no desktop */
  background-color: var(--cor-card-bg); /* Fundo branco para a tabela */
  padding: 0; /* Remove padding extra aqui, o padding é nas células */
  border-radius: 8px; /* Arredondamento */
  border: 1px solid #ddd; /* Borda leve */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Sombra */
}
.price-table h3 {
  font-size: 1.2em; /* Título da tabela */
  color: var(--cor-texto-escuro);
  margin-top: 0;
  margin-bottom: 0; /* Removido para ter uma barra separadora */
  padding: 15px; /* Padding para o título */
  background-color: #f8f8f8; /* Fundo cinza claro para o título */
  border-bottom: 1px solid #eee; /* Linha divisória */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  text-align: center;
}

/* Container de rolagem para a tabela (responsivo) */
.price-table > div[style="overflow-x: auto;"] {
  /* Esta div é gerada inline, manter o overflow-x: auto */
  overflow-x: auto;
  width: 100%; /* Garante que a div ocupa a largura total */
}

.price-table table {
  width: 100%;
  min-width: 600px; /* Força largura mínima para rolagem em mobile */
  border-collapse: collapse;
  margin-top: 0; /* Remover margin-top após o h3 */
}
.price-table th, .price-table td {
  padding: 12px 15px; /* Mais padding para melhor leitura */
  text-align: center; /* Alinha o texto das células */
  border-bottom: 1px solid #eee;
  font-size: 0.9em;
  color: var(--cor-texto-escuro);
}
.price-table tbody td:first-child {
  text-align: left; /* Nome da categoria à esquerda */
  font-weight: bold;
  color: var(--cor-primaria); /* Cor do nome da categoria */
}
.price-table tbody tr:last-child td {
  border-bottom: none;
}
.price-table tbody tr:nth-child(even) {
  background-color: #f9f9f9; /* Fundo listrado para linhas pares */
}

/* CABEÇALHOS - Contraste e Tema */
.price-table thead th {
  background-color: var(--cor-primaria); /* Cor primária do tema */
  color: white; /* Texto branco */
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--cor-primaria); /* Borda inferior mais escura */
  /* Remove a borda padrão do style.css para evitar duplicidade */
}

/* Sub-cabeçalho "Limites Máximos" */
.price-table thead tr:first-child th[colspan="2"] {
  background-color: var(--cor-primaria); /* Mantém cor primária */
  color: white;
  border-bottom: 1px solid var(--cor-primaria);
}
/* Sub-cabeçalhos individuais de Peso e Volume */
.price-table thead tr:nth-child(2) th {
  background-color: var(--cor-primaria); /* Fundo primário */
  color: white;
  font-weight: normal; /* Um pouco menos de destaque */
  font-size: 0.8em;
}

/* Coluna de Preço Base (destaque) */
.price-table tbody tr td:nth-child(4) {
  background-color: #e6ffed; /* Cor de sucesso ou destaque para o preço */
  font-weight: bold;
  color: var(--cor-sucesso); /* Cor verde */
}

/* Media Queries - Ajustes adicionais para responsividade */
@media (max-width: 768px) {
  .dashboard-cards-grid {
    grid-template-columns: 1fr; /* Empilha os cards */
    gap: 20px;
  }
  .card-identity, .card-address, .card-summary {
    margin-bottom: 0; /* Remove margem entre cards quando empilhados */
  }
  .client-main-content {
    padding: 15px;
  }

  /* Ajustes Mobile para a tabela de Preços */
  .price-table-card {
    padding: 15px; /* Reduzir padding em mobile */
  }
  /* Note: Aqui a tabela ainda está no modo de rolagem horizontal se necessário (min-width: 600px) */
  .price-table th, .price-table td {
    padding: 10px 8px; /* Reduzir padding da célula */
    font-size: 0.85em; /* Reduzir tamanho da fonte */
  }
  .price-table tbody td:first-child {
    text-align: left; /* Mantém alinhamento à esquerda para o nome */
  }
}
@media (max-width: 480px) {
  .client-dashboard-area h1 {
    font-size: 1.8rem;
  }
  .stat-item h3 {
    height: auto; /* Reajustar altura */
    font-size: 0.75rem;
  }
  .stat-value {
    font-size: 1.5rem;
  }
}
/* ------------------------------------------- */
/* --- 4. Estilos do Seletor de Idiomas (Dropdown Visual) --- */
/* ------------------------------------------- */

/* 1. Container Principal (Dentro do <ul> do menu) */
.client-nav ul li.language-switcher {
    position: relative;
    list-style: none;
    padding: 0;
    margin-right: 20px;
    cursor: pointer;
}

/* 2. Botão/Toggle que está sempre visível */
.language-switcher .lang-toggle {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--cor-borda, #ddd);
    border-radius: 5px;
    background-color: var(--cor-card-bg, #ffffff);
    color: var(--cor-texto-escuro, #333333);
    transition: background-color 0.2s;
    font-weight: bold;
    font-size: 0.9em;
}

.language-switcher .lang-toggle:hover {
    background-color: #f0f0f0;
}

.language-switcher .lang-toggle img {
    width: 20px;
    height: 14px;
    margin-right: 5px;
    border: 1px solid #ccc;
    box-shadow: 0 0 2px rgba(0,0,0,0.1);
}

.language-switcher .lang-code {
    margin-right: 5px;
}

/* 3. O menu dropdown que aparece ao clicar */
.lang-dropdown {
    display: none; /* Escondido por padrão */
    position: absolute;
    top: 100%; /* Posição abaixo do lang-toggle */
    right: 0;
    background-color: var(--cor-card-bg, #ffffff);
    border: 1px solid #ddd;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
    z-index: 1000;
    min-width: 130px; /* Ajuste o tamanho */
    padding: 5px 0;
    border-radius: 4px;
    text-align: left;
}

/* 4. **CORREÇÃO CRÍTICA**: Mostrar o dropdown quando o JavaScript adiciona o atributo */
.language-switcher[data-dropdown-open="true"] .lang-dropdown {
    display: block;
}

/* 5. Estilo dos links dentro do dropdown */
.lang-dropdown a {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    text-decoration: none;
    color: var(--cor-texto-escuro);
    width: 100%;
    box-sizing: border-box;
    gap: 10px;
    font-size: 0.9em; /* Garantir que o tamanho do texto seja uniforme */
}

.lang-dropdown a:hover,
.lang-dropdown a.active-lang {
    background-color: #f0f0f0;
    color: var(--cor-primaria);
}

.lang-dropdown a img {
    width: 20px;
    height: 14px;
    border: 1px solid #ccc;
    box-shadow: 0 0 2px rgba(0,0,0,0.1);
}


/* --- Ajustes de Responsividade (Mobile) --- */
@media (max-width: 768px) {
    /* No mobile, o dropdown é estático dentro do menu hambúrguer */
    .client-nav ul li.language-switcher {
        border-bottom: 1px solid #eee;
    }
    
    .language-switcher .lang-toggle {
        justify-content: space-between;
        padding: 15px 20px;
        border-radius: 0;
        border: none;
    }
    
    .lang-dropdown {
        position: static; 
        width: 100%;
        box-shadow: none;
        border: none;
        padding: 0;
        margin-top: -10px; 
        padding-bottom: 10px;
    }
    
    .lang-dropdown a {
        padding-left: 40px; 
    }
}
/* ------------------------------------------- */
/* --- 8. Estilos de Fidelização (Nível/Pontos) --- */
/* ------------------------------------------- */

/* --- CORES BASE DE NÍVEL (Usadas em ícones e elementos menores) --- */
.nivel-fidelizacao-bronze { color: #CC9966 !important; }
.nivel-fidelizacao-prata { color: #C0C0C0 !important; }
.nivel-fidelizacao-ouro { color: #FFD700 !important; }
.nivel-fidelizacao-platina { color: #E5E4E2 !important; } 
.nivel-fidelizacao-na { color: var(--cor-primaria) !important; } 

/* ------------------------------------------- */
/* --- 8.1 Ajustes de Estética na Header --- */
/* ------------------------------------------- */

/* 1. Efeito Global na Header (Borda e Sombra) */
.client-header.client-level-bronze { 
    border-bottom: 3px solid #CC9966; 
}
.client-header.client-level-prata { 
    border-bottom: 3px solid #C0C0C0; 
}
.client-header.client-level-ouro { 
    border-bottom: 3px solid #FFD700; 
    box-shadow: 0 1px 10px rgba(255, 215, 0, 0.2); 
}
.client-header.client-level-platina { 
    border-bottom: 3px solid #E5E4E2; 
    background-color: #343a40; /* Fundo escuro para Platina */
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); 
}

/* Ajustes de Cores de Texto e Links na Header Platina (Fundo Escuro) */
.client-header.client-level-platina a,
.client-header.client-level-platina .lang-toggle {
    color: #E5E4E2; 
}
.client-header.client-level-platina a i {
    color: #E5E4E2 !important; 
}
.client-header.client-level-platina a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 2. Ícone Home (Dashboard) com Cor do Nível */
.client-nav .fa-home.client-level-bronze { color: #CC9966 !important; }
.client-nav .fa-home.client-level-prata { color: #C0C0C0 !important; }
.client-nav .fa-home.client-level-ouro { color: #FFD700 !important; }
.client-nav .fa-home.client-level-platina { color: #E5E4E2 !important; } 

/* 3. Estilo do Emblema de Pontos (Badge) na Navegação */
.client-nav .client-level-badge {
    padding: 5px 12px;
    margin: 0 5px;
    border-radius: 50px; 
    font-size: 0.9rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    cursor: default;
    border: 1px solid transparent;
    height: 40px; 
    box-sizing: border-box; 
}

.client-nav .client-level-badge i {
    font-size: 1.1em;
    margin-right: 0; 
}

/* Cores do Emblema */

.client-level-badge.level-na { 
    background-color: #e9ecef; /* Fundo cinza claro e neutro */
    border-color: #adb5bd;      /* Borda cinza suave */
    color: var(--cor-texto-escuro); /* Cor de texto padrão escuro */
}

.client-level-badge.level-bronze { 
    background-color: #f7e6d4; 
    border-color: #CC9966;
    color: #8c6a47; 
}
.client-level-badge.level-prata { 
    background-color: #f0f0f0; 
    border-color: #C0C0C0;
    color: #6c757d;
}
.client-level-badge.level-ouro { 
    background-color: #fff8e1; 
    border-color: #FFD700;
    color: #a88a00; 
}
.client-level-badge.level-platina { 
    background-color: #555; 
    border-color: #E5E4E2;
    color: #E5E4E2;
}
.client-level-badge.level-platina i {
    color: #E5E4E2;
}

/* Correção definitiva para o hover do badge na navegação */
.client-nav ul li.client-level-badge:hover {
    background-color: transparent !important; 
}
.client-nav ul li.client-level-badge a.badge-link:hover {
    color: inherit !important; 
    text-decoration: none !important;
    background-color: transparent !important;
}

/* 4. Esconder Pontos Simples (Redundante) */
.client-nav .loyalty-points {
    display: none;
}


/* --- Responsividade (Garante que o badge desaparece no mobile) --- */
@media (max-width: 992px) {
    .client-nav .d-none-mobile {
        display: none !important;
    }
}


/* ==================================== */
/* ESTILOS DE FIDELIZAÇÃO (LOYALTY) - DASHBOARD */
/* ==================================== */

.loyalty-dashboard {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.loyalty-dashboard .card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 25px; /* Aumenta a margem */
}

/* ------------------------------------ */
/* Banner de Nível */
/* ------------------------------------ */

.level-banner {
    padding: 40px;
    text-align: center;
    border-radius: 12px;
    margin-bottom: 30px;
    color: #fff;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.level-banner.level-platinum {
    background: linear-gradient(135deg, #4b0082, #9932cc); /* Roxo / Violeta Escuro */
    border: 3px solid gold;
    box-shadow: 0 0 20px rgba(75, 0, 130, 0.7); /* Sombra mais forte */
}

.level-banner.level-gold {
    background: linear-gradient(135deg, #b8860b, #daa520);
}

.level-banner.level-silver {
    background: linear-gradient(135deg, #a9a9a9, #c0c0c0);
}

.level-banner.level-bronze {
    background: linear-gradient(135deg, #8b4513, #a0522d);
}

.level-banner.level-na.simple-banner {
    background: #f0f0f0;
    color: #333;
    box-shadow: none;
    border: 1px solid #ddd;
}

/* ------------------------------------ */
/* Estatísticas (LOYALTY STATS) - 4 Colunas */
/* ------------------------------------ */

.loyalty-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Colunas iguais (Total, Mês, Pontos, Validade) */
    gap: 15px;
    text-align: center;
}

/* Correção no CSS se a antiga DIV era importante para o layout */
.loyalty-stats .stat-item,
.loyalty-stats .points-link-wrap { /* Adicione esta linha para incluir o <a> */
    /* Mantenha as regras de layout Flexbox/Grid aqui (se existirem) */
    text-decoration: none; /* Remover o sublinhado do link */
    color: inherit; /* Manter a cor do texto/ícones */
}

/* Adicione um cursor para indicar que é clicável */
.loyalty-stats .points-link-wrap {
    cursor: pointer;
}
/* --- Novo Estilo: Cartão de Saldo de Pontos Moderno --- */
/* --- Novo Estilo: Cartão de Saldo de Pontos Moderno --- */
.balance-card-modern {
    padding: 30px !important;
    border-radius: 15px !important;
    
    /* ESTA É A COR PRINCIPAL (MANTIDA EM BRANCO PARA CONTRASTE) */
    color: #ffffff !important; 
    
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
    box-shadow: 0 10px 20px rgba(0, 123, 255, 0.4) !important;
    border: none !important;
    text-align: center;
}

.balance-card-modern .card-body {
    padding: 0 !important;
}

.balance-card-modern .card-title {
    font-size: 1.1em !important;
    margin-bottom: 5px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    /* REFORÇAR A COR BRANCA NO TÍTULO */
    color: #ffffff !important; 
}

.balance-card-modern .balance-value {
    font-size: 4.5em !important;
    font-weight: 800 !important;
    line-height: 1.1;
    margin: 0 0 5px 0;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    /* A cor deve ser herdada, mas reforçamos: */
    color: #ffffff !important;
}

.balance-card-modern .balance-unit {
    font-size: 1.2em !important;
    font-weight: 600;
    opacity: 0.9;
    /* REFORÇAR A COR BRANCA NA UNIDADE */
    color: #ffffff !important; 
}

.balance-card-modern .card-title i.fas {
    font-size: 1.2em;
    margin-right: 8px;
    vertical-align: middle;
}
/* Fim do Novo Estilo */

.stat-item {
    padding: 15px 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.stat-item i {
    font-size: 1.8em;
    color: var(--primary-color, #007bff);
    margin-bottom: 5px;
}

.stat-item.current-validity i {
    color: #dc3545; /* Cor para o relógio de validade */
}

.stat-item h3 {
    margin: 5px 0;
    font-size: 1.4em;
    color: #333;
}

.stat-item p {
    font-size: 0.85em;
    color: #666;
    line-height: 1.2;
}


/* ------------------------------------ */
/* Progresso e Incentivo (Lado a Lado) */
/* ------------------------------------ */

.progress-and-incentive-container {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

/* Secção de Progresso (ocupa 2/3) */
.progress-section {
    flex: 2; 
    min-width: 300px;
}

/* Secção de Incentivo (ocupa 1/3) */
.next-level-incentive {
    flex: 1;
    min-width: 200px;
    padding: 20px;
    text-align: center;
    border: 2px dashed; /* Borda pontilhada decorativa */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.next-level-incentive h4 {
    margin-top: 0;
    font-size: 1.2em;
    font-weight: bold;
}

.incentive-benefit {
    font-weight: bold;
    margin: 10px 0;
    font-size: 1em;
}

.incentive-benefit i {
    color: #28a745; 
    margin-right: 5px;
}

.incentive-callout {
    font-size: 0.85em;
    color: #6c757d;
}

/* Decoração do Incentivo por Nível */
.next-level-incentive.level-bronze {
    background-color: #fcf8f5;
    border-color: #CC9966;
}
.next-level-incentive.level-prata {
    background-color: #f5f5f5;
    border-color: #C0C0C0;
}
.next-level-incentive.level-gold {
    background-color: #fffaf0;
    border-color: #FFD700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}
.next-level-incentive.level-platinum {
    background-color: #e6e6fa; /* Lavanda suave */
    border-color: #9932cc;
    box-shadow: 0 0 15px rgba(153, 50, 204, 0.5);
}


/* ------------------------------------ */
/* Barra de Progresso e Mensagens */
/* ------------------------------------ */

.progress-bar-container {
    background-color: #eee;
    border-radius: 10px;
    height: 25px;
    margin: 15px 0;
    overflow: hidden;
    position: relative;
}

.progress-bar {
    height: 100%;
    background-color: var(--primary-color, #007bff);
    border-radius: 10px;
    transition: width 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #fff;
    font-weight: bold;
    padding-right: 10px;
    box-sizing: border-box;
}

/* Cores da barra de progresso por nível */
.loyalty-dashboard.level-bronze .progress-bar { background-color: #8B4513; }
.loyalty-dashboard.level-silver .progress-bar { background-color: #A9A9A9; }
.loyalty-dashboard.level-gold .progress-bar { background-color: #DAA520; }
.loyalty-dashboard.level-platinum .progress-bar { 
    background: linear-gradient(90deg, #9932cc, #4b0082); 
    box-shadow: 0 0 10px #9932cc;
}

.progress-target-message {
    font-weight: 500;
}

.progress-target-message .next-level-target {
    font-weight: bold;
    color: var(--primary-color, #007bff);
}
.loyalty-dashboard.level-bronze .progress-target-message .next-level-target { color: #8B4513; }
.loyalty-dashboard.level-silver .progress-target-message .next-level-target { color: #A9A9A9; }
.loyalty-dashboard.level-gold .progress-target-message .next-level-target { color: #DAA520; }
.loyalty-dashboard.level-platinum .progress-target-message .next-level-target { color: #4b0082; }

/* ------------------------------------ */
/* Tabela de Níveis */
/* ------------------------------------ */

.level-table-section .table-description {
    font-style: italic;
    color: #555;
    margin-bottom: 15px;
    border-left: 3px solid #007bff;
    padding-left: 10px;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
}

.level-table {
    width: 100%;
    border-collapse: collapse;
}

.level-table th, .level-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
}

.level-table th {
    background-color: #f0f0f0;
    font-weight: bold;
    font-size: 0.9em;
    color: #333;
    text-transform: uppercase;
}

.level-table td i {
    margin-right: 5px;
}

.level-table .is-current-level {
    background-color: #e6f7ff;
    border: 2px solid #007bff;
    font-weight: bold;
}

.level-table .level-row-platinum {
    color: #4b0082;
}

.level-table .level-row-gold {
    color: #daa520;
}

.level-table .level-row-silver {
    color: #a9a9a9;
}

.level-table .level-row-bronze {
    color: #8b4513;
}

/* ------------------------------------ */
/* MEDIA QUERIES (RESPONSIVIDADE) */
/* ------------------------------------ */

@media (max-width: 992px) {
    /* Estatísticas (Tablets) - 2 colunas */
    .loyalty-stats {
        grid-template-columns: repeat(2, 1fr); 
    }
    
    /* Progresso e Incentivo (Tablets) - Empilhar */
    .progress-and-incentive-container {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    /* Estatísticas (Mobile) - 1 coluna */
    .loyalty-stats {
        grid-template-columns: 1fr;
    }

    /* Banner (Mobile) - Reduzir o tamanho */
    .level-banner {
        padding: 25px 15px;
    }

    .level-banner h1, .level-banner h2 {
        font-size: 1.8em;
    }

    .level-icon-large {
        font-size: 4em;
    }

    /* Tabela (Mobile) - Scroll horizontal */
    .level-table-section {
        overflow-x: auto;
    }
    
    .level-table {
        min-width: 600px; /* Garante que a tabela é legível */
    }
}
/* --- Cores de Destaque para o Título H1 --- */
.welcome-title.level-color-bronze { color: #CD7F32; }
.welcome-title.level-color-prata { color: #4A4A4A; }
.welcome-title.level-color-ouro { 
    color: #DAA520; /* Dourado escuro */
    text-shadow: 1px 1px 2px rgba(255, 215, 0, 0.4);
}
.welcome-title.level-color-platina { 
    color: #4A4A4A; /* Platina mais escuro */
    text-shadow: 1px 1px 5px rgba(229, 228, 226, 0.8);
}


/* --- DECORAÇÕES DO CARD POR NÍVEL --- */

/* Cores de Destaque para o Título H1 */
.welcome-title.level-color-bronze { color: #CD7F32; }
.welcome-title.level-color-prata { color: #4A4A4A; }
.welcome-title.level-color-ouro { 
    color: #DAA520; /* Dourado escuro */
    text-shadow: 1px 1px 2px rgba(255, 215, 0, 0.4);
}
.welcome-title.level-color-platina { 
    color: #4A4A4A; /* Platina mais escuro */
    text-shadow: 1px 1px 5px rgba(229, 228, 226, 0.8);
}

/* ========================================================================= */
/* --- NOVO DESIGN: CARTÕES TIPO "CARTÃO BANCÁRIO" (ALTA ESPECIFICIDADE) --- */
/* ========================================================================= */

/* --- TÍTULO H1 DE BOAS VINDAS --- */
.client-main-content .welcome-title.level-color-bronze { color: #CD7F32 !important; }
.client-main-content .welcome-title.level-color-prata { color: #4A4A4A !important; }
.client-main-content .welcome-title.level-color-ouro { 
    color: #DAA520 !important;
    text-shadow: 1px 1px 2px rgba(255, 215, 0, 0.4) !important;
}
.client-main-content .welcome-title.level-color-platina { 
    color: #4A4A4A !important;
    text-shadow: 1px 1px 5px rgba(229, 228, 226, 0.8) !important;
}


/* ========================================================================= */
/* --- NOVO DESIGN: CARTÕES TIPO "CARTÃO BANCÁRIO" - CORREÇÃO DE CONTRASTE --- */
/* ========================================================================= */

/* --- TÍTULO H1 DE BOAS VINDAS (Manter o contraste alto) --- */
.client-main-content .welcome-title.level-color-bronze { color: #CD7F32 !important; }
.client-main-content .welcome-title.level-color-prata { color: #4A4A4A !important; }
.client-main-content .welcome-title.level-color-ouro { 
    color: #DAA520 !important;
    text-shadow: 1px 1px 2px rgba(255, 215, 0, 0.4) !important;
}
.client-main-content .welcome-title.level-color-platina { 
    color: #4A4A4A !important;
    text-shadow: 1px 1px 5px rgba(229, 228, 226, 0.8) !important;
}


/* --- ESTILO BASE PARA O CARTÃO DE IDENTIFICAÇÃO (Cartão Bancário) --- */
.client-main-content .card-identity.level-card {
    border-radius: 15px !important;
    min-height: 220px !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 20px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    transform: scale(1.0) !important;
}

/* --- 🥉 BRONZE (Cobre/Bronze Texturizado) - CONTRASTE CORRIGIDO --- */
.client-main-content .card-identity.level-bronze {
    background: linear-gradient(135deg, #A77044 0%, #603E1E 100%) !important;
    color: #fff !important; /* Cor de texto base clara */
    box-shadow: 0 8px 15px rgba(167, 112, 68, 0.5) !important;
    border: none !important;
}
.client-main-content .card-identity.level-bronze h2,
.client-main-content .card-identity.level-bronze i,
.client-main-content .card-identity.level-bronze .code-label,
.client-main-content .card-identity.level-bronze .code-value, /* Alvo Principal */
.client-main-content .card-identity.level-bronze small {
    color: #ffd7b0 !important; /* Dourado suave para texto e ícones */
}

/* --- 🥈 PRATA (Prata Metálica) --- */
.client-main-content .card-identity.level-prata {
    background: linear-gradient(135deg, #E5E5E5 0%, #BDBDBD 100%) !important;
    color: #333 !important;
    box-shadow: 0 8px 15px rgba(189, 189, 189, 0.5) !important;
    border: 1px solid #777 !important;
}
.client-main-content .card-identity.level-prata h2,
.client-main-content .card-identity.level-prata i,
.client-main-content .card-identity.level-prata .code-label,
.client-main-content .card-identity.level-prata .code-value,
.client-main-content .card-identity.level-prata small {
    color: #111 !important; /* Texto escuro garantido */
}


/* --- 🥇 OURO (Ouro Clássico) --- */
.client-main-content .card-identity.level-ouro {
    background: linear-gradient(135deg, #FFD700 0%, #DAA520 100%) !important;
    color: #111 !important;
    box-shadow: 0 8px 15px rgba(255, 215, 0, 0.6) !important;
    border: none !important;
}
.client-main-content .card-identity.level-ouro h2,
.client-main-content .card-identity.level-ouro i,
.client-main-content .card-identity.level-ouro .code-label,
.client-main-content .card-identity.level-ouro .code-value,
.client-main-content .card-identity.level-ouro small {
    color: #111 !important; /* Texto escuro garantido */
}


/* --- 💎 PLATINA (Alto Contraste / Sóbrio) - CONTRASTE CORRIGIDO --- */
.client-main-content .card-identity.level-platina {
    background: linear-gradient(135deg, #2C3E50 0%, #4A637F 100%) !important;
    color: #E5E4E2 !important; 
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7) !important;
    border: 2px solid #fff !important;
    transform: scale(1.02) !important;
}
.client-main-content .card-identity.level-platina h2,
.client-main-content .card-identity.level-platina i,
.client-main-content .card-identity.level-platina .code-label,
.client-main-content .card-identity.level-platina .code-value,
.client-main-content .card-identity.level-platina small {
    color: #E5E4E2 !important; /* Texto claro garantido (platina/branco) */
}


/* --- ESTILO PARA O CARTÃO DE RESUMO (Sem alterar o design) --- */
.client-main-content .card-summary.level-card {
    transition: all 0.3s ease !important;
}
.client-main-content .card-summary.level-bronze { border-left: 5px solid #CD7F32 !important; }
.client-main-content .card-summary.level-prata { border-bottom: 5px solid #C0C0C0 !important; }
.client-main-content .card-summary.level-ouro { border: 2px solid #FFD700 !important; background-color: #fffaf0 !important; }
.client-main-content .card-summary.level-platina { border: 3px solid #000 !important; background-color: #E5E4E2 !important; }

/* ========================================================================= */
/* --- FIM DO NOVO DESIGN --- */
/* ========================================================================= */
/* ========================================================================= */
/* --- ESTILOS PARA DASHBOARD DE FIDELIZAÇÃO (fidelizacao.php) --- */
/* ========================================================================= */

/* --- Estilo de Banner de Nível (Alta Especificidade) --- */
.client-main-content .loyalty-dashboard .level-banner.level-bronze {
    background-color: #CD7F32 !important; /* Cor de Destaque Bronze */
    color: #fff !important;
    border-radius: 10px !important;
    padding: 15px !important;
    text-align: center !important;
    box-shadow: 0 4px 10px rgba(205, 127, 50, 0.5) !important;
    margin-bottom: 20px !important;
}

/* --- Próxima Meta/Incentivo (level-bronze) --- */
.client-main-content .loyalty-dashboard .next-level-incentive.level-bronze {
    border: 2px solid #CD7F32 !important;
    background-color: #fff8e1 !important; /* Fundo suave */
    box-shadow: 0 4px 8px rgba(205, 127, 50, 0.2) !important;
}

.client-main-content .loyalty-dashboard .next-level-incentive.level-bronze h4 {
    color: #CD7F32 !important; /* Cor do Título */
}

/* --- Tabela de Níveis: Linha Atual (Bronze) --- */
.client-main-content .loyalty-dashboard .level-table .is-current-level.level-row-bronze {
    background-color: #fff3cd !important; /* Fundo para destacar a linha atual */
    border-left: 5px solid #CD7F32 !important;
    font-weight: bold !important;
}
.client-main-content .loyalty-dashboard .level-table .is-current-level.level-row-bronze td {
    color: #4a4a4a !important;
}


/* --- Definição de Cores Genéricas para a Tabela (Apenas para Iconografia) --- */
.client-main-content .loyalty-dashboard .level-table .level-row-platina i { color: #E5E4E2 !important; text-shadow: 1px 1px 1px #000; }
.client-main-content .loyalty-dashboard .level-table .level-row-ouro i { color: #FFD700 !important; }
.client-main-content .loyalty-dashboard .level-table .level-row-prata i { color: #C0C0C0 !important; }
.client-main-content .loyalty-dashboard .level-row-bronze i { color: #CD7F32 !important; }
.client-main-content .loyalty-dashboard .level-table .level-row-na i { color: #6c757d !important; }

/* No seu ficheiro CSS */

.progress-bar-container {
    background-color: #e9e9e9;
    border-radius: 5px;
    margin-bottom: 15px;
    height: 25px;
    overflow: hidden;
}

.progress-bar {
    /* Cor padrão para a barra TOTAL */
    height: 100%;
    background-color: var(--primary-color, #007bff); 
    color: white;
    text-align: center;
    line-height: 25px;
    transition: width 0.4s ease-in-out;
}

.progress-bar.monthly-bar {
    /* Cor diferente para a barra MENSAL */
    background-color: var(--warning-color, #ffc107);
}

.mt-4 {
    /* Para dar algum espaçamento entre as duas barras */
    margin-top: 1.5rem !important;
}
/* ========================================================================= */
/* --- ESTILOS PARA DASHBOARD DE FIDELIZAÇÃO (fidelizacao.php) --- */
/* ========================================================================= */

/* --- Estilo de Banner de Nível (Alta Especificidade) --- */
.client-main-content .loyalty-dashboard .level-banner.level-bronze {
    background-color: #CD7F32 !important; /* Cor de Destaque Bronze */
    color: #fff !important;
    border-radius: 10px !important;
    padding: 15px !important;
    text-align: center !important;
    box-shadow: 0 4px 10px rgba(205, 127, 50, 0.5) !important;
    margin-bottom: 20px !important;
}

/* --- Próxima Meta/Incentivo (level-bronze) --- */
.client-main-content .loyalty-dashboard .next-level-incentive.level-bronze {
    border: 2px solid #CD7F32 !important;
    background-color: #fff8e1 !important; /* Fundo suave */
    box-shadow: 0 4px 8px rgba(205, 127, 50, 0.2) !important;
}

.client-main-content .loyalty-dashboard .next-level-incentive.level-bronze h4 {
    color: #CD7F32 !important; /* Cor do Título */
}

/* --- Tabela de Níveis: Linha Atual (Bronze) --- */
.client-main-content .loyalty-dashboard .level-table .is-current-level.level-row-bronze {
    background-color: #fff3cd !important; /* Fundo para destacar a linha atual */
    border-left: 5px solid #CD7F32 !important;
    font-weight: bold !important;
}
.client-main-content .loyalty-dashboard .level-table .is-current-level.level-row-bronze td {
    color: #4a4a4a !important;
}


/* --- Definição de Cores Genéricas para a Tabela (Apenas para Iconografia) --- */
.client-main-content .loyalty-dashboard .level-table .level-row-platina i { color: #E5E4E2 !important; text-shadow: 1px 1px 1px #000; }
.client-main-content .loyalty-dashboard .level-table .level-row-ouro i { color: #FFD700 !important; }
.client-main-content .loyalty-dashboard .level-table .level-row-prata i { color: #C0C0C0 !important; }
.client-main-content .loyalty-dashboard .level-table .level-row-bronze i { color: #CD7F32 !important; }
.client-main-content .loyalty-dashboard .level-table .level-row-na i { color: #6c757d !important; }

/* --- Barras de Progresso --- */
.progress-bar-container {
    background-color: #e9e9e9;
    border-radius: 5px;
    margin-bottom: 15px;
    height: 25px;
    overflow: hidden; 
}

.progress-bar {
    height: 100%;
    background-color: var(--primary-color, #007bff); 
    color: white;
    text-align: center;
    line-height: 25px;
    transition: width 0.4s ease-in-out;
}

.progress-bar.monthly-bar {
    background-color: var(--warning-color, #ffc107);
}

.mt-4 { margin-top: 1.5rem !important; }

/* --- ESTILOS DE FIDELIZAÇÃO (CLIENTE) --- */

.loyalty-dashboard {
    padding: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.level-table-section.card {
    /* ESTE É O CONTENTOR DIRETO DA TABELA */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 20px;
    background-color: #fff;
    margin-top: 20px;
    
    /* CORREÇÃO DO SCROLL: Esconde qualquer scroll que possa ter sido herdado */
    overflow-x: hidden !important; 
    width: 100% !important;
    max-width: 100% !important;
}

.level-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.9em;
    
    /* CORREÇÃO DO SCROLL: Garante que a tabela não força o scroll */
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.level-table th, .level-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    vertical-align: top;
}

.level-table thead th {
    background-color: #f2f2f2;
    color: #333;
    font-weight: bold;
}

/* --- Cores de Fundo das Linhas (Tier Rows) --- */
.level-table .level-row-platina { background-color: #e6f7ff; border-left: 5px solid #0096d8; font-weight: bold; }
.level-table .level-row-ouro { background-color: #fff9e6; border-left: 5px solid #ffd700; }
.level-table .level-row-prata { background-color: #f7f7f7; border-left: 5px solid #c0c0c0; }
.level-table .level-row-bronze { background-color: #fcf4e8; border-left: 5px solid #cd7f32; }
.level-table .level-row-na { background-color: #ffffff; opacity: 0.8; }

/* Linha do Nível ATUAL do Cliente (Adiciona um destaque extra) */
.level-table .is-current-level {
    border: 2px solid #007bff; /* Azul primário */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

/* Estilo para ícones na tabela (para que se destaquem) */
.level-table i {
    margin-right: 5px;
    color: #495057; /* Cinza escuro para ícones */
}

/* Estilo para os nomes em negrito */
.level-table strong {
    font-weight: 700;
}

/* --- ESTILOS DE FIDELIZAÇÃO RESPONSIVOS --- */

/* Esconde a linha mobile no desktop/tablet */
.mobile-card-row {
    display: none;
}

/* Garante que a linha desktop está visível em ecrãs grandes */
.desktop-row {
    display: table-row;
}

/* --- MOBILE STYLES: Ecrãs com menos de 768px --- */
@media (max-width: 768px) {
    
    /* 1. CORREÇÃO DE MARGEM/COLAGEM NA TABELA */
    .level-table-section.card {
        /* Remove o padding padrão para a tabela no mobile */
        padding: 0 !important; 
    }
    
    /* APLICA UM RESPIRO GERAL AOS CARDS MÓVEIS DE NÍVEL */
    .level-table {
        /* O "card" pai é o que precisa do respiro para descolar do ecrã */
        margin-top: 20px; /* Mantém a margem do topo */
        padding: 0 15px 10px 15px; /* NOVO: Padding lateral de 15px para descolar do ecrã */
        width: 100%;
        max-width: 100%;
        border: none;
        overflow-x: hidden !important; 
    }

    .level-table thead,
    .level-table .desktop-row {
        display: none; /* Oculta o cabeçalho e as linhas desktop */
    }

    /* Transforma os elementos de tabela em blocos para empilhamento */
    .level-table, 
    .level-table tbody, 
    .level-table tr, 
    .level-table td {
        display: block; 
        width: 100%;
        box-sizing: border-box; 
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .level-table td {
        padding: 0;
        border-bottom: none;
    }

    .level-table .mobile-card-row {
        display: table-row;
    }


    /* 2. Estilização e Largura do Card Mobile (Estilos Visuais Restaurados) */
    .level-mobile-card {
        margin: 15px 0;
        padding: 18px; 
        border-radius: 10px; 
        border: 1px solid #e0e0e0; 
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
        background-color: #ffffff;
        position: relative; 
        /* O padding do .level-table vai agora servir de margem para este contentor */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden !important; 
    }
    
    /* --- Cores e Destaques do Card Mobile --- */
    .level-mobile-card.level-row-platina { background-color: #e6f7ff; border: 2px solid #0096d8; }
    .level-mobile-card.level-row-ouro { background-color: #fff9e6; border: 2px solid #ffd700; }
    .level-mobile-card.level-row-prata { background-color: #f7f7f7; border: 2px solid #c0c0c0; }
    .level-mobile-card.level-row-bronze { background-color: #fcf4e8; border: 2px solid #cd7f32; }
    .level-mobile-card.level-row-na { background-color: #f8f9fa; border: 1px solid #ccc; }
    
    .level-mobile-card.is-current-level { border-width: 3px; box-shadow: 0 0 15px rgba(0, 123, 255, 0.3); }
    
    /* --- Header e Requisitos (Estilos Restaurados) --- */
    .level-mobile-card .card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
    .level-mobile-card .card-header .fa-solid, .level-mobile-card .card-header .fa-regular, .level-mobile-card .card-header .fas { font-size: 1.5em; color: #555; }
    .level-mobile-card.level-row-platina .card-header .fas { color: #0096d8; }
    .level-mobile-card.level-row-ouro .card-header .fas { color: #ffd700; }
    .level-mobile-card.level-row-prata .card-header .fas { color: #c0c0c0; }
    .level-mobile-card.level-row-bronze .card-header .fas { color: #cd7f32; }
    .level-mobile-card .card-header strong { font-size: 1.2em; color: #333; flex-grow: 1; min-width: 0; }
    .level-mobile-card .current-badge { background-color: #007bff; color: white; padding: 4px 10px; border-radius: 5px; font-size: 0.75em; font-weight: bold; white-space: nowrap; }
    
    /* --- CORREÇÃO DE LAYOUT DO CARD (Requisitos) --- */
    .level-mobile-card .card-requirements { display: block; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #e0e0e0; }
    .level-mobile-card .req-item { display: flex; justify-content: space-between; font-size: 0.95em; color: #444; margin-bottom: 8px; }
    .level-mobile-card .req-item span { font-weight: 500; color: #555; flex-basis: 70%; padding-right: 5px; line-height: 1.3; min-width: 0; }
    .level-mobile-card .req-item strong { color: #222; flex-basis: auto; white-space: nowrap; }
    
    /* --- CORREÇÃO DE QUEBRA DE LINHA DOS BENEFÍCIOS (Lista dentro do <p>) --- */
    .level-mobile-card .card-benefits {
        font-size: 0.95em;
        color: #444;
        width: 100%; 
        max-width: 100%;
        min-width: 0; 
        overflow: hidden !important; 
    }

    .level-mobile-card .card-benefits span { 
        font-weight: bold;
        display: block;
        margin-bottom: 5px; 
        color: #333;
    }

    /* O <p> que contém a lista */
    .level-mobile-card .card-benefits p { 
        margin-bottom: 0;
        line-height: 1.5;
        width: 100% !important; 
        max-width: 100% !important;
        min-width: 0 !important;
        word-break: break-word; 
        word-wrap: break-word; 
        white-space: normal; 
        overflow: hidden !important; 
    }
    
    /* Regras para a lista UL/LI (que deve estar dentro do <p> ou da <div>) */
    .level-mobile-card .card-benefits ul,
    .level-mobile-card .card-benefits p ul {
        list-style: disc inside;
        padding-left: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .level-mobile-card .card-benefits li {
        word-break: break-word; 
        margin-bottom: 5px;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden !important;
    }
}

/* ------------------------------------------------------------------------- */
/* --- CONTROLO DE BOLD --- */
/* ------------------------------------------------------------------------- */

.progress-target-message strong,
.progress-info strong,
.next-level-incentive .incentive-benefit strong,
.level-table td strong {
    font-weight: 700; 
}