/* ============================================================
   🛒 Vai de Peça — CART (CSS organizado + hover padrão)
   ✅ Tokens/variáveis consistentes
   ✅ Header/Cart/Footer/Frete/Itens/Resumo/Modal
   ✅ Botões com padrão único de hover/foco
   ✅ Remove duplicações e corrige erros de CSS
   ============================================================ */

/* ============================================================
   1) DESIGN TOKENS (cores, sombras, raios, largura)
   - Use SEMPRE estes tokens no restante do CSS
   ============================================================ */
:root{
  /* Backgrounds */
  --bg: #f6f7fb;
  --card: #ffffff;

  /* Texto */
  --text: #0f172a;
  --muted: #64748b;

  /* Linhas */
  --line: #e5e7eb;
  --line2: #eef2f7;

  /* Marca */
  --primary:  #59a3c5;
  --primary2: #125aa3;

  /* Extras */
  --warning: #ffca28;   /* badge carrinho */
  --danger: #ef4444;

  /* Layout */
  --maxw: 1180px;

  /* Sombras */
  --shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  --shadow2: 0 2px 10px rgba(15, 23, 42, 0.06);

  /* Raios */
  --r12: 12px;
  --r16: 16px;

  /* Tipografia (opcional, mas deixa consistente) */
  --font-sans: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

/* ============================================================
   2) BASE (body, container, foco)
   ============================================================ */
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Container padrão: centraliza e dá padding lateral.
   OBS: no .cart-page .container a gente aplica grid. */
.container{
  max-width: var(--maxw);
  
  margin: 0 auto;
  padding: 0 16px;
}

/* Acessibilidade: foco visível consistente (teclado) */
:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(25,118,210,.18);
  border-radius: 10px;
}

/* ============================================================
   3) LAYOUT DO CARRINHO (grid principal)
   ============================================================ */
.cart-page .container{
  padding: 18px 16px 32px;
  
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}

.cart-page h1{
  grid-column: 1 / -1;
  margin: 6px 0 8px;
  font-size: 28px;
  letter-spacing: -0.02em;
}

@media (max-width: 960px){
  .cart-page .container{
    grid-template-columns: 1fr; /* summary vai pra baixo */
  }
}

/* ============================================================
   4) HOVER PADRÃO (um padrão pra tudo)
   - Links: sublinhado suave
   - Botões: leve elevação + ajuste de brilho
   ============================================================ */
a{
  color: inherit;
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* “Padrão de interação” — use em botões e links que parecem botão */
.interactive{
  transition: transform .05s ease, filter .15s ease, background .15s ease, border .15s ease, opacity .15s ease;
}
.interactive:hover{ filter: brightness(1.03); }
.interactive:active{ transform: translateY(1px); }

/* ============================================================
   5) HEADER (corrigindo tokens e removendo variáveis inexistentes)
   ============================================================ */
.header{
  position: relative;
  z-index: 1000;

  /* visual clean */
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid var(--line2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.header .container{
  background: linear-gradient(180deg, var(--primary), var(--primary2));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  height: 76px;
}

/* Logo mais proporcional (100px estava enorme pro header) */
.logo img{
  height: 58px;
  width: auto;
  vertical-align: middle;
  transition: height 0.25s ease;
}

.main-nav{
  display: flex;
  gap: 18px;
}

.main-nav a{
  color: var(--text);
  font-weight: 700;
  padding: 10px 10px;
  border-radius: 12px;
  position: relative;
}

/* underline “marca” no hover */
.main-nav a::after{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 2px;
  width: 0;
  margin: 0 auto;
  background: var(--primary);
  transition: width .2s ease;
  border-radius: 999px;
}

.main-nav a:hover{
  background: rgba(25,118,210,.06);
  color: var(--primary2);
  text-decoration: none; /* evita underline duplo */
}

.main-nav a:hover::after{ width: calc(100% - 20px); }

.header-actions{
  display: flex;
  align-items: center;
  gap: 12px;
}

.action-btn{
  background: none;
  border: 1px solid transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 800;
  padding: 10px 12px;
  border-radius: 12px;
}

.action-btn:hover{
  background: rgba(25,118,210,.08);
  border-color: rgba(25,118,210,.12);
  color: var(--primary2);
}

/* Carrinho com badge correto (corrige var(#ffca28) inválido) */
.cart-btn{ position: relative; }

.cart-count{
  position: absolute;
  top: -10px;
  right: -12px;
  background: var(--warning);
  color: #111827;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 999px;
  width: 22px;
  height: 22px;
  font-size: 0.75rem;
  display: grid;
  place-items: center;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}

.mobile-menu-icon{ display: none; }

/* ============================================================
   6) FOOTER (corrige hover usando tokens)
   ============================================================ */
.footer{
  background: #222;
  color: #eee;
  padding: 30px 0;
  font-size: 0.95rem;
  line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer a{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.footer a:hover{
  opacity: .9;
}

.footer .container{
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.footer ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer li + li{ margin-top: 6px; }

@media (max-width: 768px){
  .footer{
    padding: 15px 0;
    font-size: 0.9rem;
  }
}

/* ============================================================
   7) FRETE BOX (topo)
   ============================================================ */
.frete-box{
  grid-column: 1 / 2;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r16);
  padding: 14px;
  box-shadow: var(--shadow2);
}

.frete-box label{
  display: block;
  font-weight: 800;
  margin-bottom: 8px;
}

.frete-row{
  display: flex;
  gap: 10px;
}

.frete-row input{
  flex: 1;
  height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  outline: none;
  transition: border .15s ease, box-shadow .15s ease;
}

.frete-row input:focus{
  border-color: rgba(25,118,210,.45);
  box-shadow: 0 0 0 4px rgba(25,118,210,.12);
}

.frete-row button{
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, var(--primary), var(--primary2));
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  transition: transform .05s ease, filter .15s ease, background .15s ease, border .15s ease;
}

.frete-row button:hover{
  filter: brightness(1.04);
  background: #1f2937;
}
.frete-row button:active{ transform: translateY(1px); }

.frete-hint{
  margin-top: 8px;
  color: var(--muted);
}

/* ============================================================
   8) LOJAS / ITENS
   ============================================================ */
#cart-stores{ grid-column: 1 / 2; }

.store-block{
  background: var(--card);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--r16);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow2);
}

.store-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15,23,42,.06);
  margin-bottom: 10px;
}

.store-head h3{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
}

.store-head .store-badge{
  font-size: 12px;
  color: var(--muted);
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
  padding: 6px 10px;
  border-radius: 999px;
}

/* Item em grid: imagem | infos | ações */
.store-items .item{
  display: grid;
  grid-template-columns: 92px 1fr 140px;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed #eaeaea;
}

.store-items .item:last-child{ border-bottom: none; }

.item-img img{
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: #fff;
}

.item-info{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.item-name{
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-meta{
  color: var(--muted);
  font-size: 13px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.item-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.price, .line{
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* QTY */
.qty-control{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
}

.qty-btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #dde3ea;
  background: #fff;
  cursor: pointer;
  font-weight: 900;
  transition: transform .05s ease, background .15s ease, border .15s ease;
}

.qty-btn:hover{
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.qty-btn:active{ transform: translateY(1px); }

/* Remover */
.remove-btn{
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 12px;
  padding: 9px 10px;
  cursor: pointer;
  font-weight: 800;
  color: var(--text);
  transition: transform .05s ease, background .15s ease, border .15s ease;
}

.remove-btn:hover{
  background: #fff7f7;
  border-color: #fecaca;
}
.remove-btn:active{ transform: translateY(1px); }

@media (max-width: 700px){
  .store-items .item{
    grid-template-columns: 84px 1fr;
  }
  .item-actions{
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ============================================================
   9) RESUMO POR LOJA
   ============================================================ */
.store-summary{
  margin-top: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--r16);
  padding: 12px;
}

/* ============================================================
   10) CART SUMMARY (aside)
   ============================================================ */
.cart-summary{
  position: sticky;
  top: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r16);
  padding: 16px;
  box-shadow: var(--shadow);
}

.cart-summary h2{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
}

.summary-row{
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  color: var(--text);
}

.summary-row span:first-child{
  color: var(--muted);
  font-weight: 700;
}

.summary-row.total{
  font-size: 1.25rem;
  font-weight: 900;
  margin-top: 12px;
}

.cart-summary hr{
  border: 0;
  border-top: 1px solid var(--line2);
  margin: 12px 0;
}

/* ============================================================
   Sticky footer (footer sempre no fim da página)
   ============================================================ */

/* 1) Faz a página ocupar a altura toda da tela */
html, body{
  height: 100%;
}

/* 2) Body vira coluna: header + main (cresce) + footer */
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 3) O conteúdo principal cresce e empurra o footer para baixo
   - Use no container principal da página (ex: .cart-page) */
main,
.cart-page{
  flex: 1;
}


/* ============================================================
   11) BOTÕES (sem duplicação + hover padrão)
   - .cta: primário
   - .ghost: contorno
   - .secondary: neutro
   ============================================================ */
.cta, .ghost, .secondary{
  width: 100%;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 900;
  transition: transform .05s ease, filter .15s ease, background .15s ease, border .15s ease;
}

.cta{
  padding: 12px 14px;
  border: none;
  background: linear-gradient(180deg, var(--primary), var(--primary2));
  color: #fff;
  box-shadow: 0 10px 24px rgba(25,118,210,.18);
}
.cta:hover{ filter: brightness(1.03); }
.cta:active{ transform: translateY(1px); }

.ghost{
  padding: 11px 14px;
  border: 1px solid rgba(25,118,210,.35);
  color: var(--primary2);
  background: #fff;
}
.ghost:hover{
  border-color: rgba(25,118,210,.55);
  background: rgba(25,118,210,.06);
}
.ghost:active{ transform: translateY(1px); }

.secondary{
  padding: 11px 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  color: #111827;
}
.secondary:hover{ background: rgba(15,23,42,.03); }
.secondary:active{ transform: translateY(1px); }

.pay-actions{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

/* ============================================================
   12) MODAL (visual premium + alinhamento interno)
   - Compatível com .show / .hidden
   ============================================================ */
.hidden{ display:none !important; }

.modal{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2,6,23,.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  z-index: 1000;
}

.modal.show{
  opacity: 1;
  pointer-events: auto;
}

.modal-content{
  width: min(560px, 92vw);
  
  overflow: auto;

  background: rgba(255,255,255,.98);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 20px;
  padding: 22px;

  box-shadow:
    0 22px 60px rgba(2,6,23,.28),
    0 6px 18px rgba(2,6,23,.14);

  transform: translateY(12px) scale(.985);
  opacity: .98;
  transition: transform .22s ease, opacity .22s ease;

  /* alinhamento interno padrão */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal.show .modal-content{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-content h2,
.modal-content h3{
  margin: 0 0 6px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.modal-content p{
  margin: 0;
  color: var(--muted);
}

/* Close com botão circular */
.modal .close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.10);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, border .15s ease;
}
.modal .close:hover{
  background: rgba(15,23,42,.07);
  border-color: rgba(15,23,42,.16);
}
.modal .close:active{ transform: translateY(1px); }

/* Inputs dentro do modal: uniformiza */
.modal-content label{
  display: block;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 6px;
}

.modal-content input,
.modal-content select,
.modal-content textarea{
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  outline: none;
  transition: border .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}

.modal-content textarea{
  min-height: 96px;
  height: auto;
  resize: vertical;
}

.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus{
  border-color: rgba(25,118,210,.45);
  box-shadow: 0 0 0 4px rgba(25,118,210,.12);
}

.modal-content ::placeholder{
  color: rgba(100,116,139,.85);
}

/* Linhas em 2 colunas (se você usar .modal-row no HTML) */
.modal-content .modal-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

/* Variante: input + botão (CEP + buscar, por ex) */
.modal-content .modal-row.actions{
  grid-template-columns: 1fr auto;
}

/* Botões do modal (sem quebrar .cta/.ghost/.secondary) */
.modal-content button:not(.cta):not(.ghost):not(.secondary),
.modal-content .btn{
  height: 44px;
  border-radius: 12px;
  font-weight: 900;
  cursor: pointer;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  color: #1f2937;
  padding: 0 14px;
  transition: transform .05s ease, background .15s ease, border .15s ease, filter .15s ease;
}

.modal-content button:not(.cta):not(.ghost):not(.secondary):hover,
.modal-content .btn:hover{
  background: rgba(15,23,42,.03);
  border-color: rgba(15,23,42,.14);
}
.modal-content button:not(.cta):not(.ghost):not(.secondary):active,
.modal-content .btn:active{
  transform: translateY(1px);
}

/* Ações em rodapé (se usar .modal-actions) */
.modal-content .modal-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

/* Mobile: tudo em 1 coluna */
@media (max-width: 520px){
  .modal-content .modal-row{ grid-template-columns: 1fr; }
  .modal-content .modal-actions{ grid-template-columns: 1fr; }
}

/* ============================================================
   📱 MOBILE (até 768px)
   ============================================================ */
@media (max-width:768px){
  .filter-sidebar{ width:280px; }
  .mobile-menu-icon{ display: block; cursor: pointer; }

  /* ---------------------------
     Layout geral
  ----------------------------*/
  .cart-page .container{
    grid-template-columns: 1fr;   /* tira sidebar */
    gap: 16px;
    padding: 12px 12px 24px;
  }

  .cart-page h1{
    font-size: 22px;
  }

  /* ---------------------------
     Header
  ----------------------------*/
  .header .container{
    height: auto;
    padding: 10px 0;
  }

  .logo img{
    height: 44px;
  }

  .main-nav{
    display: none; /* pode trocar por menu hamburguer depois */
  }

  .header-actions{
    gap: 8px;
  }

  .action-btn{
    padding: 8px 10px;
    font-size: .95rem;
  }

  /* ---------------------------
     Frete box
  ----------------------------*/
  .frete-row{
    flex-direction: column;
  }

  .frete-row button{
    width: 100%;
  }

  /* ---------------------------
     Itens do carrinho
  ----------------------------*/
  .store-items .item{
    grid-template-columns: 72px 1fr;
    gap: 10px;
  }

  .item-img img{
    width: 72px;
    height: 72px;
  }

  .item-actions{
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .item-name{
    font-size: 14px;
  }

  /* ---------------------------
     Quantidade
  ----------------------------*/
  .qty-btn{
    width: 32px;
    height: 32px;
  }

  /* ---------------------------
     Resumo lateral (vira bloco normal)
  ----------------------------*/
  .cart-summary{
    position: static;
  }

  /* ---------------------------
     Botões grandes p/ toque
  ----------------------------*/
  .cta,
  .ghost,
  .secondary{
    padding: 14px;
    font-size: 1rem;
  }

  /* ---------------------------
     Modal
  ----------------------------*/
  .modal-content{
    width: 95vw;
    max-height: 85vh;
    padding: 18px;
  }

  .modal-content .modal-row{
    grid-template-columns: 1fr;
  }

  .modal-content .modal-actions{
    grid-template-columns: 1fr;
  }

  /* ---------------------------
     Footer
  ----------------------------*/
  .footer .container{
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

}


/* Scrollbar discreta */
.modal-content::-webkit-scrollbar{ width: 10px; }
.modal-content::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.14);
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.9);
}
.modal-content::-webkit-scrollbar-thumb:hover{ background: rgba(15,23,42,.22); }

/* Menos animação pra quem preferir */
@media (prefers-reduced-motion: reduce){
  .modal, .modal-content{ transition: none !important; }
}

/* ============================================================
   13) user-link (email clicável etc.)
   ============================================================ */
.user-link{
  cursor: pointer;
  text-decoration: none;
}
.user-link:hover{
  text-decoration: underline;
}

/* ============================================================
   🚫 Sem rolagem lateral no mobile
   ============================================================ */
@media (max-width: 768px){

  html, body{
    width: 100%;
    overflow-x: hidden;
  }

  /* Evita elementos estourarem largura */
  *, *::before, *::after{
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Imagens e vídeos nunca passam da tela */
  img, video, iframe{
    max-width: 100%;
    height: auto;
  }

  /* Containers críticos */
  .container,
  .cart-page,
  .modal-content,
  .store-block,
  .frete-box,
  .cart-summary{
    overflow-x: hidden;
  }

}
/* ============================================================
   14) PAGAMENTO (Tabs PIX / Cartão + PIX UI + Feedback)
   - Compatível com o HTML do modal de pagamento (pay-tab / pay-panel)
   - Usa tokens do projeto e mantém padrão premium do modal
   ============================================================ */

/* Subtítulo no modal de pagamento */
.payment-subtitle{
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.35;
}

/* Feedback (mensagens de status/erro do pagamento) */
.payment-feedback{
  display: none; /* aparece quando tiver conteúdo via JS */
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--text);
  font-weight: 700;
}
.payment-feedback.show{ display:block; }

/* estados opcionais */
.payment-feedback.is-ok{
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.08);
}
.payment-feedback.is-warn{
  border-color: rgba(245,158,11,.30);
  background: rgba(245,158,11,.10);
}
.payment-feedback.is-err{
  border-color: rgba(239,68,68,.30);
  background: rgba(239,68,68,.10);
}

/* Tabs (PIX / Cartão / Boleto) */
.payment-methods{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

/* Botão-tab */
.pay-tab{
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  color: var(--text);
  font-weight: 900;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  transition: transform .05s ease, filter .15s ease, background .15s ease, border .15s ease;
}
.pay-tab:hover{
  background: rgba(25,118,210,.06);
  border-color: rgba(25,118,210,.22);
}
.pay-tab:active{ transform: translateY(1px); }

.pay-tab i{
  color: var(--primary2);
}

/* Tab ativa */
.pay-tab.active{
  background: linear-gradient(180deg, rgba(89,163,197,.18), rgba(18,90,163,.14));
  border-color: rgba(25,118,210,.30);
  box-shadow: 0 10px 24px rgba(25,118,210,.10);
}

/* Tab desabilitada (Em breve) */
.pay-tab:disabled{
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

/* Painéis (conteúdo das tabs) */
.pay-panel{
  margin-top: 8px;
  padding-top: 2px;
}
.pay-panel.hidden{ display:none !important; }

/* Cabeçalho do painel */
.pay-panel-head{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

/* =========================
   PIX Layout
   ========================= */
.pix-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;

  background: rgba(15,23,42,.02);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  padding: 12px;
}

.pix-left,
.pix-right{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Área do QR Code */
.pix-qrcode{
  width: 100%;
  min-height: 220px;
  border-radius: 16px;
  border: 1px dashed rgba(15,23,42,.18);
  background: #fff;

  display: grid;
  place-items: center;

  color: var(--muted);
  font-weight: 800;
  text-align: center;
  padding: 10px;
}

/* Ações do PIX */
.pix-actions{
  display: grid;
  gap: 10px;
}

/* Textarea copia e cola já herda estilos do modal (height auto),
   mas aqui damos um “shape” melhor */
#pix-copiaecola{
  min-height: 120px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.35;
}

/* Metadados do PIX (status/expiração) */
.pix-meta{
  display: grid;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 10px;
}

.pix-meta-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* =========================
   Cartão Layout (organiza o form)
   ========================= */
.card-form{
  background: rgba(15,23,42,.02);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-group{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-group.small input{ text-align: left; }

/* input com ícone */
.input-icon{
  position: relative;
  display: grid;
}
.input-icon input{
  padding-right: 42px;
}
.input-icon i{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(15,23,42,.55);
}

/* Botões “fullwidth” (se você usar essa classe no HTML) */
.fullwidth{ width: 100%; }

/* =========================
   Responsivo do PIX / Form
   ========================= */
@media (max-width: 520px){
  .payment-methods{
    grid-template-columns: 1fr;
  }
  .pix-grid{
    grid-template-columns: 1fr;
  }
  .form-row{
    grid-template-columns: 1fr;
  }
  .pix-qrcode{
    min-height: 200px;
  }
}