/* ============================================================
   RD STORE RECARGAS V2 — Design System Premium
   ============================================================ */

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

/* ─── CSS Variables ─────────────────────────────────────── */
:root {
  --bg-base:       #080b14;
  --bg-surface:    #0d1121;
  --bg-card:       #111827;
  --bg-card-hover: #151d2e;
  --bg-input:      #0d1121;
  --border:        rgba(99,102,241,.15);
  --border-hover:  rgba(99,102,241,.35);

  --primary:       #6366f1;
  --primary-dark:  #4f46e5;
  --primary-light: #818cf8;
  --primary-glow:  rgba(99,102,241,.25);

  --accent:        #a855f7;
  --accent-dark:   #9333ea;
  --accent-glow:   rgba(168,85,247,.2);

  --success:       #10b981;
  --success-bg:    rgba(16,185,129,.1);
  --warning:       #f59e0b;
  --warning-bg:    rgba(245,158,11,.1);
  --danger:        #ef4444;
  --danger-bg:     rgba(239,68,68,.1);
  --info:          #3b82f6;

  --text-primary:  #f1f5f9;
  --text-muted:    #64748b;
  --text-subtle:   #334155;

  --radius-sm:     8px;
  --radius:        12px;
  --radius-lg:     16px;
  --radius-xl:     20px;
  --radius-2xl:    24px;

  --shadow:        0 4px 24px rgba(0,0,0,.4);
  --shadow-lg:     0 8px 40px rgba(0,0,0,.5);
  --shadow-glow:   0 0 30px rgba(99,102,241,.15);

  --transition:    .2s cubic-bezier(.4,0,.2,1);
  --transition-fast: .12s ease;
}

/* ─── Reset ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg-base);
  color:var(--text-primary);
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; }

/* ─── Scrollbar personalizada ───────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg-surface); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary); }

/* ─── Navbar ────────────────────────────────────────────── */
.navbar {
  position:fixed; top:0; left:0; right:0;
  height:64px;
  background:rgba(8,11,20,.9);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  z-index:100;
  display:flex; align-items:center;
  overflow:visible; /* permite dropdown sair dos limites */
}
.navbar-container {
  max-width:1280px; margin:0 auto; padding:0 24px;
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  overflow:visible;
}
.brand-name {
  font-size:18px; font-weight:800;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  display:flex; align-items:center; gap:10px;
}
.brand-name i { -webkit-text-fill-color:var(--primary); }

/* ─── Layout ───────────────────────────────────────────── */
.page-wrapper {
  padding-top:64px;
  min-height:100vh;
  max-width:100vw;
  overflow-x:hidden;
}
.main-container {
  max-width:1280px;
  margin:0 auto;
  padding:32px 24px;
  overflow-x:hidden;
}
.container-sm { max-width:520px; margin:0 auto; padding:0 24px; }

/* ─── Cards ─────────────────────────────────────────────── */
.card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:24px;
  transition:var(--transition);
}
.card:hover { border-color:var(--border-hover); }
.card-glass {
  background:rgba(17,24,39,.7);
  backdrop-filter:blur(16px);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:24px;
}
.card-header {
  font-size:16px; font-weight:700;
  margin-bottom:20px;
  display:flex; align-items:center; gap:10px;
  color:var(--text-primary);
}
.card-header i { color:var(--primary); }

/* ─── Botões ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px;
  border:none; border-radius:var(--radius);
  font-family:'Inter',sans-serif;
  font-size:14px; font-weight:600;
  cursor:pointer;
  transition:var(--transition);
  text-decoration:none;
  white-space:nowrap;
}
.btn:disabled { opacity:.5; cursor:not-allowed; }

.btn-primary {
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff;
  box-shadow:0 4px 15px var(--primary-glow);
}
.btn-primary:hover:not(:disabled) {
  transform:translateY(-1px);
  box-shadow:0 6px 20px var(--primary-glow);
  filter:brightness(1.1);
}
.btn-primary:active { transform:translateY(0); }

.btn-success {
  background:linear-gradient(135deg,var(--success),#059669);
  color:#fff;
  box-shadow:0 4px 15px rgba(16,185,129,.25);
}
.btn-success:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.1); }

.btn-danger {
  background:var(--danger-bg);
  color:var(--danger);
  border:1px solid rgba(239,68,68,.3);
}
.btn-danger:hover:not(:disabled) { background:var(--danger); color:#fff; }

.btn-secondary {
  background:rgba(255,255,255,.06);
  color:var(--text-muted);
  border:1px solid var(--border);
}
.btn-secondary:hover:not(:disabled) { background:rgba(255,255,255,.1); color:var(--text-primary); }

.btn-ghost {
  background:transparent;
  color:var(--text-muted);
  padding:8px 14px;
}
.btn-ghost:hover { color:var(--primary); }

.btn-sm { padding:7px 14px; font-size:12px; }
.btn-lg { padding:14px 28px; font-size:16px; }
.btn-block { width:100%; justify-content:center; }

/* ─── Inputs ─────────────────────────────────────────────── */
.form-group { margin-bottom:20px; }
.form-label {
  display:block;
  font-size:13px; font-weight:600;
  color:var(--text-muted);
  margin-bottom:8px;
  text-transform:uppercase; letter-spacing:.05em;
}
.form-control {
  width:100%;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 16px;
  color:var(--text-primary);
  font-family:'Inter',sans-serif;
  font-size:14px;
  transition:var(--transition);
  outline:none;
}
.form-control::placeholder { color:var(--text-subtle); }
.form-control:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow);
}
.form-control:hover:not(:focus) { border-color:var(--border-hover); }

select.form-control { cursor:pointer; }
textarea.form-control { resize:vertical; min-height:80px; }

.input-group { position:relative; display:flex; }
.input-group .form-control { border-radius:var(--radius) 0 0 var(--radius); }
.input-group .btn { border-radius:0 var(--radius) var(--radius) 0; }
.input-icon { position:relative; }
.input-icon .form-control { padding-left:42px; }
.input-icon i {
  position:absolute; left:14px; top:50%;
  transform:translateY(-50%);
  color:var(--text-muted); font-size:14px;
}

/* ─── Badges ─────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px;
  border-radius:100px;
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
}
.badge-success { background:var(--success-bg); color:var(--success); border:1px solid rgba(16,185,129,.2); }
.badge-warning { background:var(--warning-bg); color:var(--warning); border:1px solid rgba(245,158,11,.2); }
.badge-danger  { background:var(--danger-bg);  color:var(--danger);  border:1px solid rgba(239,68,68,.2);  }
.badge-primary { background:var(--primary-glow);color:var(--primary-light); border:1px solid rgba(99,102,241,.2); }
.badge-secondary { background:rgba(255,255,255,.05); color:var(--text-muted); border:1px solid var(--border); }

/* ─── Alertas ────────────────────────────────────────────── */
.alert {
  padding:14px 18px;
  border-radius:var(--radius);
  font-size:14px; font-weight:500;
  display:flex; align-items:center; gap:10px;
  margin-bottom:20px;
}
.alert i { flex-shrink:0; }
.alert-success { background:var(--success-bg); color:var(--success); border:1px solid rgba(16,185,129,.2); }
.alert-danger   { background:var(--danger-bg);  color:var(--danger);  border:1px solid rgba(239,68,68,.2);  }
.alert-warning  { background:var(--warning-bg); color:var(--warning); border:1px solid rgba(245,158,11,.2); }
.alert-info     { background:rgba(59,130,246,.1); color:var(--info); border:1px solid rgba(59,130,246,.2); }

/* ─── Tabelas ────────────────────────────────────────────── */
.table-wrapper { overflow-x:auto; }
.table {
  width:100%; border-collapse:collapse;
  font-size:14px;
}
.table th {
  padding:12px 16px;
  color:var(--text-muted);
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.table td {
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.04);
  color:var(--text-primary);
  vertical-align:middle;
}
.table tbody tr {
  transition:var(--transition-fast);
}
.table tbody tr:hover {
  background:rgba(99,102,241,.04);
}
.table tbody tr:last-child td { border-bottom:none; }

/* ─── Stat Cards ─────────────────────────────────────────── */
.stat-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:20px 24px;
  transition:var(--transition);
  position:relative; overflow:hidden;
}
.stat-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  opacity:0; transition:var(--transition);
}
.stat-card:hover { border-color:var(--border-hover); }
.stat-card:hover::before { opacity:1; }
.stat-label {
  font-size:11px; font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.07em;
  margin-bottom:10px;
}
.stat-value {
  font-size:26px; font-weight:800;
  line-height:1.2;
}
.stat-icon {
  width:44px; height:44px;
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  margin-bottom:14px;
  background:var(--primary-glow);
  color:var(--primary);
}

/* ─── Grid ───────────────────────────────────────────────── */
.grid { display:grid; gap:20px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.grid-auto { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }

/* ─── Operadora Card (Dashboard) ─────────────────────────── */
.operator-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:20px;
  cursor:pointer;
  transition:var(--transition);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.operator-card:hover {
  border-color:var(--primary);
  transform:translateY(-3px);
  box-shadow:var(--shadow-glow);
  background:var(--bg-card-hover);
}
/* Logo wrapper com fallback */
.op-logo-wrapper {
  width:72px; height:72px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  overflow:hidden;
}
.op-logo-img {
  width:96px; height:96px;
  object-fit:contain;
  display:block;
  transition:var(--transition);
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.25));
}
.operator-card:hover .op-logo-img { transform:scale(1.08); }
.op-logo-fallback {
  width:72px; height:72px;
  border-radius:var(--radius);
  align-items:center; justify-content:center;
  font-size:22px; font-weight:900;
  color:#fff;
  letter-spacing:-1px;
}
.operator-card .op-name { font-weight:700; font-size:14px; }
.operator-card .op-price {
  font-size:12px; color:var(--primary);
  font-weight:600;
  background:var(--primary-glow);
  padding:3px 10px; border-radius:100px;
}

/* ─── Saldo Hero ─────────────────────────────────────────── */
.balance-hero {
  background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(168,85,247,.1));
  border:1px solid var(--border);
  border-radius:var(--radius-2xl);
  padding:32px 28px;
  position:relative; overflow:hidden;
}
.balance-hero::before {
  content:'';
  position:absolute; top:-50%; right:-20%;
  width:300px; height:300px;
  background:radial-gradient(circle,var(--primary-glow) 0%,transparent 70%);
  pointer-events:none;
}
.balance-label { font-size:13px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.07em; }
.balance-value {
  font-size:42px; font-weight:900;
  background:linear-gradient(135deg,#fff,#cbd5e1);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  line-height:1.1; margin:8px 0;
}
.balance-actions { display:flex; gap:12px; margin-top:20px; }

/* ─── Modals ─────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(8px);
  z-index:999;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden;
  transition:var(--transition);
}
.modal-overlay.active { opacity:1; visibility:visible; }
.modal {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-2xl);
  padding:32px;
  max-width:480px; width:100%;
  transform:scale(.95) translateY(20px);
  transition:var(--transition);
}
.modal-overlay.active .modal { transform:scale(1) translateY(0); }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:24px;
}
.modal-title { font-size:18px; font-weight:700; }
.modal-close {
  width:32px; height:32px;
  border-radius:var(--radius-sm);
  border:none; background:rgba(255,255,255,.06);
  color:var(--text-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition);
}
.modal-close:hover { background:var(--danger-bg); color:var(--danger); }

/* ─── WhatsApp Float ─────────────────────────────────────── */
.whatsapp-float {
  position:fixed; bottom:28px; right:28px; z-index:90;
  width:56px; height:56px;
  background:linear-gradient(135deg,#25d366,#128c7e);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:#fff;
  box-shadow:0 4px 20px rgba(37,211,102,.4);
  transition:var(--transition);
  animation:float 3s ease-in-out infinite;
}
.whatsapp-float:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(37,211,102,.5); }
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-6px); }
}

/* ─── PIX Payment ────────────────────────────────────────── */
.pix-container {
  max-width:440px; margin:0 auto;
  text-align:center;
}
.pix-qr-wrapper {
  background:#fff;
  border-radius:var(--radius-xl);
  padding:16px;
  display:inline-block;
  margin:20px 0;
  box-shadow:var(--shadow-glow);
}
.pix-timer {
  font-size:24px; font-weight:800;
  color:var(--warning);
  font-variant-numeric:tabular-nums;
}
.pix-status-bar {
  display:flex; align-items:center; gap:10px;
  background:var(--success-bg);
  border:1px solid rgba(16,185,129,.2);
  border-radius:var(--radius);
  padding:12px 16px;
  font-size:14px; font-weight:600; color:var(--success);
}
.polling-dots span {
  display:inline-block; width:7px; height:7px;
  border-radius:50%; background:var(--primary);
  margin:0 2px;
  animation:dotBounce 1.4s ease-in-out infinite;
}
.polling-dots span:nth-child(2) { animation-delay:.2s; }
.polling-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes dotBounce {
  0%,80%,100% { transform:scale(0); opacity:.4; }
  40%          { transform:scale(1); opacity:1; }
}

/* ─── Auth Pages ─────────────────────────────────────────── */
.auth-page {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-base);
  position:relative; overflow:hidden;
}
.auth-bg-glow {
  position:absolute;
  width:500px; height:500px; border-radius:50%;
  filter:blur(100px); pointer-events:none;
}
.auth-bg-glow-1 {
  background:rgba(99,102,241,.15);
  top:-10%; left:-10%;
  animation:glowPulse 8s ease-in-out infinite;
}
.auth-bg-glow-2 {
  background:rgba(168,85,247,.1);
  bottom:-10%; right:-10%;
  animation:glowPulse 8s ease-in-out infinite 4s;
}
@keyframes glowPulse {
  0%,100% { opacity:.5; transform:scale(1); }
  50%      { opacity:1;  transform:scale(1.1); }
}
.auth-card {
  background:rgba(17,24,39,.8);
  backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:var(--radius-2xl);
  padding:40px;
  width:100%; max-width:440px;
  position:relative; z-index:1;
  box-shadow:var(--shadow-lg);
}
.auth-logo {
  text-align:center; margin-bottom:32px;
}
.auth-logo-icon {
  width:64px; height:64px;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:inline-flex; align-items:center; justify-content:center;
  font-size:28px; color:#fff;
  margin-bottom:16px;
  box-shadow:0 8px 24px var(--primary-glow);
}
.auth-title {
  font-size:22px; font-weight:800;
  background:linear-gradient(135deg,#fff,#94a3b8);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.auth-subtitle { font-size:14px; color:var(--text-muted); margin-top:6px; }

/* ─── Skeleton Loader ────────────────────────────────────── */
.skeleton {
  background:linear-gradient(90deg,var(--border) 25%,rgba(99,102,241,.08) 50%,var(--border) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--radius-sm);
}
@keyframes shimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* ─── Password Reset Banner ──────────────────────────────── */
.reset-password-banner {
  background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(239,68,68,.1));
  border:1px solid rgba(245,158,11,.3);
  border-radius:var(--radius-lg);
  padding:16px 20px;
  display:flex; align-items:center; gap:14px;
  margin-bottom:24px;
}
.reset-password-banner i { color:var(--warning); font-size:20px; flex-shrink:0; }
.reset-password-banner .text { flex:1; }
.reset-password-banner strong { color:var(--warning); display:block; margin-bottom:4px; }
.reset-password-banner p { font-size:13px; color:var(--text-muted); margin:0; }

/* ─── Maintenance Page ───────────────────────────────────── */
.maintenance-page {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-base);
  text-align:center; padding:40px;
}
.maintenance-icon {
  font-size:64px;
  animation:spin-slow 10s linear infinite;
  display:inline-block;
  margin-bottom:24px;
}
@keyframes spin-slow {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
.maintenance-title { font-size:32px; font-weight:900; margin-bottom:16px; }
.maintenance-message {
  font-size:16px; color:var(--text-muted);
  max-width:480px; margin:0 auto 32px;
  line-height:1.7;
}

/* ─── Responsivo ─────────────────────────────────────────── */

/* ── 1024px: Tablet landscape ── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ── 768px: Tablet ── */
@media (max-width: 768px) {
  /* Layout */
  .main-container  { padding: 20px 16px 100px; } /* 100px bottom = nav bar height */
  .navbar-container { padding: 0 14px; }
  .container-sm    { padding: 0 16px; }

  /* Grids */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* Saldo hero */
  .balance-hero    { padding: 20px 16px; }
  .balance-value   { font-size: 32px; }
  /* Botoes de acao: 2 colunas */
  .balance-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
  }
  .balance-actions .btn,
  .balance-actions > button,
  .balance-actions > a {
    justify-content: center;
    font-size: 12px;
    padding: 10px 8px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Esconde texto secundario dos botoes menores */
  .balance-actions .btn-secondary .btn-label-long { display: none; }
  .grid-auto {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
  .operator-card { padding: 16px 12px; gap: 8px; }
  .op-logo-wrapper, .op-logo-fallback { width: 56px; height: 56px; }
  .operator-card .op-name { font-size: 13px; }

  /* Section title menor */
  .section-title { font-size: 17px; margin-bottom: 14px; }

  /* Tabelas: scroll horizontal */
  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table th, .table td { padding: 10px 12px; font-size: 12px; white-space: nowrap; }

  /* Cards */
  .card { padding: 18px 16px; border-radius: var(--radius-lg); }
  .stat-card { padding: 16px 18px; }
  .stat-value { font-size: 22px; }

  /* Auth */
  .auth-card { padding: 28px 20px; margin: 16px; }

  /* Modal: quasi fullscreen no mobile */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    max-width: 100%;
    width: 100%;
    padding: 28px 20px 32px;
    max-height: 92vh;
    overflow-y: auto;
  }
  .modal-overlay.active .modal { transform: translateY(0); }

  /* Dropdown notificações: full width */
  .notif-dropdown { width: calc(100vw - 32px); right: -8px; left: auto; }

  /* PIX */
  .pix-container { padding: 0 4px; }

  /* Balance hero actions: evita items espremidos */
  .balance-actions > button, .balance-actions > a {
    min-width: 0;
    flex: 1 1 calc(50% - 6px);
  }

  /* Reset password banner */
  .reset-password-banner { flex-wrap: wrap; }
  .reset-password-banner .text { min-width: 0; }

  /* Navbar: saldo compacto no mobile */
  #nav-balance { font-size: 13px; }

  /* Profile: avatar maior para ser visível */
  .profile-avatar-wrap { width: 80px !important; height: 80px !important; font-size: 30px !important; }
}

/* ── 480px: Mobile small ── */
@media (max-width: 480px) {
  /* Navbar: esconde nome da loja */
  .brand-name span:not(.brand-icon) { display: none; }

  /* Saldo ainda menor */
  .balance-value { font-size: 30px; }

  /* 1 coluna nos stat cards */
  .grid-2 { grid-template-columns: 1fr; }

  /* Operadoras: mantém 2 colunas mesmo no menor */
  .grid-auto { grid-template-columns: repeat(2, 1fr) !important; }

  /* Tabela no mobile: mostra só colunas essenciais via helper */
  .hide-mobile { display: none !important; }

  /* Saldo hero */
  .balance-hero { padding: 20px 16px; border-radius: var(--radius-xl); }
  .balance-actions { grid-template-columns: 1fr 1fr; gap: 8px; }
  .balance-actions .btn { font-size: 12px; padding: 9px 8px; }

  /* Cards menores */
  .card { padding: 16px 14px; }

  /* Section title */
  .section-title { font-size: 15px; gap: 7px; }

  /* Modal quase fullscreen */
  .modal { padding: 24px 16px 28px; }

  /* Logo do operador menor */
  .op-logo-wrapper, .op-logo-fallback { width: 48px; height: 48px; }
  .operator-card .op-name { font-size: 12px; }
  .operator-card .op-price { font-size: 11px; }

  /* Auth card */
  .auth-card { padding: 24px 16px; border-radius: var(--radius-xl); }

  /* Botão block: full width */
  .btn-block { width: 100%; }
}

/* ── Bottom Navigation Bar (mobile only) ── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: rgba(13,17,33,.97);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  z-index: 200;
  justify-content: space-around;
  align-items: center;
  padding: 0 8px;
  padding-bottom: env(safe-area-inset-bottom); /* iPhone notch */
}
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  padding: 8px 4px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  transition: color .15s;
  position: relative;
}
.bottom-nav-item i {
  font-size: 19px;
  transition: transform .15s;
}
.bottom-nav-item.active,
.bottom-nav-item:hover {
  color: var(--primary);
}
.bottom-nav-item.active i,
.bottom-nav-item:hover i {
  transform: translateY(-2px);
}
.bottom-nav-item .bnav-badge {
  position: absolute;
  top: 4px;
  left: calc(50% + 4px);
  background: var(--danger);
  color: white;
  font-size: 8px;
  font-weight: 900;
  border-radius: 10px;
  min-width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}
.bottom-nav-center {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white !important;
  font-size: 22px !important;
  flex-shrink: 0;
  box-shadow: 0 4px 16px var(--primary-glow);
  transition: transform .15s, box-shadow .15s;
  text-decoration: none;
}
.bottom-nav-center:hover {
  transform: scale(1.08) translateY(-4px);
  box-shadow: 0 8px 24px var(--primary-glow);
}

@media (max-width: 768px) {
  .bottom-nav { display: flex; }
  /* Evita que WhatsApp float colida com bottom nav */
  .whatsapp-float { bottom: 76px; right: 16px; width: 48px; height: 48px; font-size: 20px; }
}

/* ── Safe area para iPhones com notch ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .main-container { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .bottom-nav { padding-bottom: env(safe-area-inset-bottom); height: calc(64px + env(safe-area-inset-bottom)); }
}

/* ── Touch improvements ── */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects que ficam presos no touch */
  .operator-card:hover { transform: none; }
  .btn:hover { transform: none; }
  /* Tap target mínimo de 44px */
  .btn, .btn-sm { min-height: 44px; }
  .bottom-nav-item { min-height: 44px; min-width: 44px; }
}

/* ─── Utilitários ────────────────────────────────────────── */
.d-flex          { display: flex; }
.d-none          { display: none !important; }
.d-md-inline     { display: none; }
@media (min-width: 768px) { .d-md-inline { display: inline; } }
.align-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap       { flex-wrap: wrap; }
.gap-1 { gap: 8px; }  .gap-2 { gap: 12px; } .gap-3 { gap: 16px; }
.mt-1 { margin-top: 8px; }  .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.text-center  { text-align: center; }
.text-muted   { color: var(--text-muted); font-size: 13px; }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-primary { color: var(--primary); }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fs-12  { font-size: 12px; }
.fs-14  { font-size: 14px; }
.fs-18  { font-size: 18px; }
.w-100  { width: 100%; }
.divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.section-title {
  font-size: 20px; font-weight: 800;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
}
.section-title i { color: var(--primary); }
.hide-mobile { }