/* ==========================================================================
   FC CARDS — Players + Rewards  (carcaça visual revisada)
   ========================================================================== */

/* ======= Tokens ========================================================== */
:root{
  --fcc-gap: 16px;
  --fcc-radius: 10px; /* base global de raio */
  --fcc-card-bg: #14161c; /* preto mais claro */
  --fcc-text: #e9e9e9;
  --fcc-muted: #bdbfc6;

  --fcc-title: clamp(12px, 1.8vw, 16px);
  --fcc-name: clamp(12px, 1.7vw, 15px);
  --fcc-meta: clamp(10px, 1.4vw, 13px);
  --fcc-stat: clamp(10px, 1.3vw, 12px);

  --fcc-topname-pad: 8px;
  --fcc-pricebar-h: 38px;

  --fcc-cols: 4;

  /* Elevação/contorno premium */
  --fcc-shadow-1: 0 2px 10px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.02) inset;
  --fcc-shadow-2: 0 12px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  --fcc-outline: conic-gradient(from 180deg at 50% 50%, #ffffff08, #ffd36a22, #7bdcff22, #ffffff08);

  /* Sheen (feixe) */
  --fc-sheen-angle: 76deg;
  --fc-sheen-width: 18%;
  --fc-sheen-opacity: .28;
  --fc-sheen-blur: 2px;
  --fc-sheen-speed: 4.2s;
  --fc-sheen-delay: 0s;

  /* Fonte global */
  --fcc-font: 'Montserrat', sans-serif;
}

/* Aplica Montserrat em todo o site (mantido conforme sua base) */
body, * { font-family: var(--fcc-font); }

/* === Raio padrão para tudo, EXCETO SVGs ================================ */
.fcp-root,
.fcp-root *:not(svg){ border-radius: var(--fcc-radius); }

/* Garantia: nunca arredondar SVGs (ícones, banners, playstyles) */
.fcp-root svg{ border-radius: 0 !important; overflow: visible; }

/* ======= Root & Grid ===================================================== */
.fcp-root{
  display:block;
  color:var(--fcc-text);
}

/* Topbar */
.fcp-topbar{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 6px 0 12px;
}

/* Label com ícone + select */
.fcp-platform-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--fcc-radius);
  padding:6px 10px;
  font-size:14px;
}
/* Aplica a regra solicitada SOMENTE às faces problemáticas detectadas */
.fc-card-frame.is-avatar-face .fc-face,
.fc-face.is-avatar-face{
  z-index: 10;
  max-width: 60%;
  left: 20% !important;
  top: 20% !important;
  height: auto !important;
  object-fit: contain !important; /* garante que não "estoure" */
}

/* (opcional) garante comportamento atual nos normais */
.fc-card-frame.is-cutout-face .fc-face,
.fc-face.is-cutout-face{
  object-fit: cover;
}

/* Ícone dinâmico conforme plataforma */
.fcp-platform-label::before{
  content:"";
  width:20px; height:20px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.fcp-platform-label[data-platform="ps"]::before{
  background-image:url("https://chamacoins.com.br/wp-content/uploads/2025/10/logo-PS.png");
}
.fcp-platform-label[data-platform="xbox"]::before{
  background-image:url("https://chamacoins.com.br/wp-content/uploads/2025/10/Logo-xbox.png");
}
.fcp-platform-label[data-platform="pc"]::before{
  background-image:url("https://chamacoins.com.br/wp-content/uploads/2025/10/Origin-1-1.png");
}

/* Select estilizado (acessível) */
/* Select estilizado (acessível) — texto do select (fechado) em branco */
.fcp-platform{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:transparent; border:0; color:#fff; /* <-- branco no valor exibido */
  font-weight:700; cursor:pointer; padding:4px 18px 4px 6px;
}

.fcp-platform-label::after{
  content:"";
  width:10px; height:10px; margin-left:6px; opacity:.7;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' fill='currentColor'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' fill='currentColor'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Força as opções do dropdown a terem texto preto e fundo claro */
.fcp-platform option,
.fcp-platform optgroup{
  color:#000;           /* texto preto nas opções */
  background:#fff;      /* fundo claro no menu suspenso (onde o browser permitir) */
}


/* Grid responsivo */
.fcp-grid{
  display:grid;
  grid-template-columns:repeat(var(--fcc-cols,4),minmax(0,1fr));
  gap:var(--fcc-gap);
}
@media (max-width:768px){
  .fcp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* ======= Item base ======================================================= */
.fcp-item{
  display:flex; flex-direction:column; 
  background:transparent; user-select:none; cursor:pointer;
  position:relative;
}

/* ======= Card frame (unificado) ========================================= */
.fc-card-frame{
  position:relative;
  width:100%;
  aspect-ratio:252/350;
  border-radius: var(--fcc-radius);
  overflow:hidden;
  background: var(--fcc-card-bg);
  isolation:isolate;
  contain: layout paint style;
  box-shadow: var(--fcc-shadow-1);
  transition: box-shadow .18s ease, transform .18s ease;

  /* NOVO: o frame ocupa o espaço disponível e "empurra" a barra para baixo */
  flex: 1 1 auto;
  min-height: 0;
}

/* Anel de realce em gradiente (premium) */
.fc-card-frame::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding:1px; /* espessura */
  background: var(--fcc-outline);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:.65;
  pointer-events:none;
}

.fc-card-frame:hover{ box-shadow: var(--fcc-shadow-2); transform: translateY(-1px); }
.fc-card-frame:focus-visible{ outline:3px solid #5aa7ff66; outline-offset:2px; }

/* Imagens posicionadas */
.fc-card-frame .fc-card-bg,
.fc-card-frame .fc-face{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block; object-fit:cover;
}
.fc-card-bg{ z-index:5; }
.fc-face{ z-index:10; }
/* Só para as faces marcadas como avatar/quadradas */
.fc-card-frame.is-avatar-face > .fc-face,
.fc-face.is-avatar-face {
  /* desfaz o preset do card */
  width: auto !important;
  height: auto !important;

  /* inset:0 define top/left/right/bottom; zeramos os que atrapalham */
  inset: auto !important;
  left: 20% !important;
  top: 20% !important;
  right: auto !important;
  bottom: auto !important;

  max-width: 60% !important;
  object-fit: contain !important;
  z-index: 10;
}

/* (opcional) explicita o comportamento padrão no “cutout” retrato */
.fc-card-frame.is-cutout-face > .fc-face,
.fc-face.is-cutout-face {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* (REMOVIDO) Degradê inferior fixo — pedido do cliente */
/* .fc-card-frame::after { ... } REMOVIDO */

/* Recompensa: preservar qualidade */
.fcp-item.is-reward .fc-face{ object-fit: none; }

/* ======= SHEEN ROBUSTO (elemento dedicado + máscara inline) ============= */
.fc-bg-sheen{
  position:absolute; inset:0; z-index:7;
  pointer-events:none; will-change: transform, opacity;
  background: linear-gradient(
    var(--fc-sheen-angle),
    rgba(255,255,255,0) calc(50% - var(--fc-sheen-width)),
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,0) calc(50% + var(--fc-sheen-width))
  );
  filter: blur(var(--fc-sheen-blur)) saturate(1.05) brightness(1.06);
  opacity: var(--fc-sheen-opacity);
  mix-blend-mode: overlay;
  transform: translateX(-130%);
  animation: fcpCardSheen var(--fc-sheen-speed) linear infinite;
  animation-delay: var(--fc-sheen-delay);
}
@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))){
  .fc-bg-sheen{ display:none; }
}
.fcp-item.is-reward .fc-bg-sheen{ display:none; }

@keyframes fcpCardSheen{
  0%   { transform: translateX(-130%); }
  100% { transform: translateX(130%);  }
}
h1 { display: none; }

.breadcrumbs ol{display:none;}

/* ======= Top name (glass chip) ========================================== */
.fc-topname{
  position:absolute; z-index:90; left:10px; right:10px; top:5px;
  display:flex; align-items:center; justify-content:center;
  min-height: 34px;
  padding: 2px 5px;
  border-radius: var(--fcc-radius);
  font-weight:800; font-size: var(--fcc-name); line-height:1;
  letter-spacing:.2px;
  color:#ff5d00;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  background: rgba(12,12,14,.38);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 2px 10px rgba(0,0,0,.35) inset, 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(0.9px);
}
@supports not (backdrop-filter: blur(1px)){
  .fc-topname{ background: rgba(12,12,14,.6); }
}

/* ======= Cluster rating/pos/++ ========================================== */
.fc-card-top{
  line-height: 1;
  position:absolute; z-index:20; top:22%; left:18%;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.fc-rating{ font-weight:800; font-size:clamp(14px,2.2vw,30px); }
.fc-pos{     font-weight:700; font-size:clamp(10px,1.6vw,14px); }
.fc-roleplus{display:inline; font-weight:800; font-size:clamp(9px,1.3vw,12px); }

/* ======= Lateral (alt-positions + side icon) ============================= */
.fc-alt-sidebar{ position:absolute; z-index:30; top:25%; left:4%; display:grid; gap:6px; align-items:start; }
.fc-altpos-wrap{ position:relative; width:27%; }
.fc-altpos-emb{ position:relative; }
.fc-altpos-emb svg{ display:block; width:100%; height:auto; }

.fc-altpos-list{
  position:absolute; inset:0; right:0%; top:38%;
  transform: translate(
    calc(var(--altpos-shift-x, 0) - 0%),
    calc(var(--altpos-shift-y, 0) - 15%)
  );
}
.fc-altpos-sub{
  font-size:clamp(9px,1.2vw,8px); font-weight:700; letter-spacing:.5px;
  display:flex; flex-direction:column; align-items:center; line-height:1;
}
.fc-altpos-sub .pp{ margin-left:2px; font-weight:900; }

.fc-altpos-emb svg path,
.fc-altpos-emb svg rect,
.fc-altpos-emb svg circle,
.fc-altpos-emb svg polygon,
.fc-altpos-emb svg ellipse{
  fill:var(--alt-pos-background, #000);
  stroke:var(--alt-pos-border, #fff);
  stroke-width:1px;
}

/* Ícone lateral */
.fc-sideicon{ position:relative; width:26px; height:26px; }
.fc-sideicon svg{
  width:100%; height:100%; display:block;
  transform:translate(var(--sideicon-shift-x,0),var(--sideicon-shift-y,0));
}

/* ======= Playstyles ====================================================== */
.fc-playstyles{ display:flex; gap:6px; justify-content:center; }
.fc-playstyle{ display:inline-flex; width:18px; height:18px; }
.fc-playstyle svg{ width:100%; height:100%; display:block; }
.fc-playstyle.is-fallback svg path,
.fc-playstyle.is-fallback svg rect,
.fc-playstyle.is-fallback svg circle,
.fc-playstyle.is-fallback svg polygon,
.fc-playstyle.is-fallback svg ellipse{
  fill: currentColor;
  stroke: rgba(255,255,255,.9);
  stroke-width: 1px;
}
.fc-playstyle.playstylePlusDiamond{ color:#FFD54F; }

/* ======= Faixa extra (banner) =========================================== */
.fc-extrainfo{
  position:absolute; z-index:50;
  left:8px; right:8px; bottom:2px;
}
.fc-extrainfo > svg{
  width:100%; height:auto; display:block; position:relative; z-index:1;
  transform: translate(var(--extrainfo-svg-shift-x, 0), var(--extrainfo-svg-shift-y, 0));
}
.fc-extrainfo.extrainfo-use-vars > svg path,
.fc-extrainfo.extrainfo-use-vars > svg rect,
.fc-extrainfo.extrainfo-use-vars > svg circle,
.fc-extrainfo.extrainfo-use-vars > svg polygon,
.fc-extrainfo.extrainfo-use-vars > svg ellipse,
.fc-extrainfo.extrainfo-use-vars > svg g,
.fc-extrainfo.extrainfo-use-vars > svg use{
  fill: var(--extrainfo-bg);
  stroke: var(--extrainfo-border);
  stroke-width: 1px;
}
.fc-extrainfo-row{
  z-index: 2;
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:4px;
  transform:translate(var(--extrainfo-shift-x,0),var(--extrainfo-shift-y,0));
  font-weight:800; font-size:clamp(9px,1.2vw,8px); text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.fc-right-foot{ text-transform:uppercase; }
.fc-right-skills{ display:inline-flex; align-items:center; gap:4px; }
.fc-right-wf{ display:inline-flex; align-items:baseline; gap:4px; }
.fc-right-wf-title{ font-size:.85em; opacity:.85; }

/* ======= Nome + Stats + Ícones (interno do jogador) ====================== */
.fc-name-stats-info{
  position:absolute; left:8px; right:8px; bottom:12%; z-index:60;
  display:grid; grid-template-rows:auto auto auto; gap:6px;
}
.fc-name{
  text-align:center; font-weight:800; font-size:22px; letter-spacing:.25px;
  text-shadow:0 1px 2px rgba(0,0,0,.45); margin-bottom:-10px;
}
.fc-stats{ display:flex; justify-content:center; align-items:center; gap:10px; line-height:1.2; }
.fc-stat{ display:grid; justify-items:center; font-size:var(--fcc-stat); }
.fc-stat-lbl{ opacity:.85; font-weight:700; }
.fc-stat-num{ font-weight:700; }
span.fc-stat-num { font-size: 16px; }
.fc-info-row{ display:flex; justify-content:center; align-items:center; gap:8px; }
.fc-info-row .fc-ico{ width:18px; height:18px; object-fit:contain; }

/* ======= Preço dentro do frame (rodapé) ================================= */
/* ======= Preço + Ações dentro do frame (rodapé) ========================= */
.fc-pricebar{
  /* NOVO: fora do frame → fluxo normal */
  position: static;
  left:auto; right:auto; bottom:auto;
  z-index: auto;

  height: var(--fcc-pricebar-h);
  display:flex;
  align-items:center;
  justify-content: space-between;
  column-gap: 10px;
  padding: 0 10px;
  width: 100%;
  margin-top: 8px; /* espaço entre o frame e a barra */

  /* vidro sutil (mantido) */
  background: rgba(12,12,14,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--fcc-radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 4px 12px rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
}

/* Texto do preço na esquerda */
@supports not (backdrop-filter: blur(1px)){
  .fc-pricebar{ background: rgba(12,12,14,.75); }
}

.fc-pricebar .fc-price-text{
  font-weight: 800;
  font-size: 14px;
  color:#fff;
  letter-spacing:.2px;
}

/* Ações embutidas na direita */
.fc-pricebar .fcp-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0; /* neutraliza margem externa do layout antigo */
}

/* Botões um pouco mais baixos para caber na barra */
.fc-pricebar .fcp-btn{
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  margin-right: -5px;
}

/* ======= Indicador de regra aplicada no card ============================ */
.fcp-item[data-rule]::after{
  content: attr(data-rule);
  position:absolute; right:8px; top:8px; z-index:95;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius: var(--fcc-radius);
  padding:2px 6px; font-size:10px;
}

/* ======= Modal =========================================================== */
/* ===== Modal: layout e footer fixo/colado no fim ======================= */
.fcp-modal__box{
  display:flex;
  flex-direction:column;
}

/* o conteúdo passa a ter “fundo” para o footer sticky não ficar grudado */
.fcp-modal__content{
  flex:1 1 auto;
  padding-bottom: 88px; /* espaço de segurança pro footer flutuante */
}

/* footer flutuante com gap do fundo, total à esquerda e botões à direita */
.fcp-modal-footer{
  position: sticky;
  bottom: 12px;                 /* NÃO encosta no fim do modal */
  display:flex;
  align-items:center;           /* verticalmente centralizado */
  justify-content: space-between;
  gap:12px;

  padding:10px 12px;
  margin-top:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(15,17,21,.90), rgba(15,17,21,.96));
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  justify-content: flex-start;
  backdrop-filter: blur(2px);
}

/* chip do total dentro do footer */
.fcp-modal-total{
  font-weight: 800;
  font-size: 14px;
  color:#fff;
  letter-spacing:.2px;
  white-space: nowrap;
}

/* botões no footer: altura e alinhamento coerentes */
.fcp-modal-footer .fcp-btn{
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

/* garante um respiro extra entre o grid e o footer */
.fcp-squads-grid{
  gap:14px;
  margin-bottom:16px;
}


/* garante um respiro extra entre o grid e o footer */
.fcp-squads-grid{
  gap:14px;                 /* um pouco mais de espaço entre os cards */
  margin-bottom:16px;       /* separa do footer */
}

.fcp-modal{ position:fixed; inset:0; z-index:9999; }
.fcp-modal[hidden]{ display:none !important; }
.fcp-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.fcp-modal__box{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(960px, 92vw); max-height:85vh; overflow:auto;
  background:#0f1115; color:#e9e9e9; border-radius: var(--fcc-radius); padding:20px; box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.fcp-modal__close{
  position:absolute; top:8px; right:10px; width:32px; height:32px;
  border:0; background:transparent; color:#fff; font-size:24px; cursor:pointer;
}
.fcp-modal__content h4{ margin:0 0 6px; font-size:18px; }
.fcp-modal-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.fcp-modal-head .m-name{ font-size:20px; font-weight:800; margin:0; }
.fcp-modal-head .m-meta{ opacity:.8; }

/* ======= Modal: resumo + regras aplicadas ================================ */
/* zera raio de cantos nos separadores do modal */
.fcp-modal .fcp-modal-summary,
.fcp-modal .fcp-squad-box .s-values{
  border-radius: 0 !important;
  background: transparent;
}

.fcp-modal-summary{
  margin: 2px 0 10px;
  padding: 6px 4px 8px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 14px;
}
.fcp-rule-badge{
  display:inline-block; margin-left:8px; padding:2px 6px;
  border:1px solid rgba(255,255,255,.12); border-radius: var(--fcc-radius);
  font-size:11px; opacity:.85; white-space:nowrap;
}

/* ===== Squad card — hierarquia de informação =========================== */
.fcp-squad-box{
  position:relative;
  display:flex; flex-direction:column; gap:6px; cursor:pointer;
  min-height: 240px;
  background:#141924;
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--fcc-radius);
  overflow:hidden;
}

/* checkbox e imagem (inalterado) */
.fcp-squad-box input.s-check{
  position:absolute; top:8px; left:8px; width:18px; height:18px;
  accent-color:#0A66FF;
}
.fcp-squad-box img{ display:block; object-fit:none; }

/* nome do elenco no “rodapé” do card */
.fcp-squad-box .s-title{
  margin-top: auto;
display: flex;
    justify-content: center;
  font-weight: 800;
  font-size: 15px;
}

/* linha de preços com separador reto (sem arredondar) */
.fcp-squad-box .s-values{
  display: flex;
  grid-template-columns: 1fr auto;  /* Coins | Preço */
  align-items: baseline;
  gap: 10px;
  padding: 6px 12px 10px 34px;
  margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,.06);
  border-radius: 0 !important;      /* <- sem raio aqui */
  background: transparent;
      justify-content: flex-end;
}
.fcp-squad-box .s-coins{
  font-weight: 800; opacity: .95; font-size:12px;
}
.fcp-squad-box .s-coins::before{
  content: "Coins";
  display:block; font-size: 11px; font-weight: 600; opacity: .65; margin-bottom: 2px;
}
.fcp-squad-box .s-brl{
  text-align: right; font-weight: 800; color:#fff; font-size:12px;
}
.fcp-squad-box .s-brl::before{
  content: "Preço";
  display:block; font-size: 11px; font-weight: 600; opacity: .65; margin-bottom: 2px;
}

/* responsivo */
@media (max-width:768px){
  .fcp-squad-box{ min-height: 200px; }
  .fcp-squad-box .s-title{ font-size:14px; }
  .fcp-squad-box .s-values{
    grid-template-columns: 1fr; gap:6px;
  }
  .fcp-squad-box .s-brl{ text-align:left; }
}
/* ======= Barra de ações por card ======================================= */


/* ======= Barra de ações por card ======================================= */
.fcp-actions{
  display:flex; gap:8px; justify-content:center; align-items:center;
  margin-top:8px;
}
/* Garante que o comportamento do JS prevaleça (botões somem/mostram) */
.fcp-actions .fcp-btn[hidden]{ display:none !important; }

/* ======= Botões ========================================================= */
.fcp-btn{
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  height: 38px; padding:0 14px;
  border-radius: var(--fcc-radius);
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, #1a2230, #141c28);
  color:#e9e9e9; font-weight:700; font-size:13px;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, opacity .14s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  cursor:pointer;
}
.fcp-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.fcp-btn:active{ transform: translateY(0);   box-shadow: 0 2px  8px rgba(0,0,0,.35); }
.fcp-btn:disabled{ opacity:.55; cursor:not-allowed; }

/* Resolver DME com o visual antigo (sólido #0A66FF) */
.fcp-btn.primary{
  background:#ff5d00;
  color:#fff;
}

/* Comprar/Editar com visual novo */
.fcp-btn.success{
  background: linear-gradient(180deg, #1f8a47, #176e39);
  border-color:#1f8a47;
  color:#fff;
}
.fcp-btn.ghost{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}

.fcp-btn:focus-visible{
  outline: 2px solid #5aa7ff80;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(10,102,255,.25);
}

/* ======= Preço externo (chip) ========================================== */
.fcp-price{
  display:flex; align-items:center; justify-content:center;
  min-height: 40px;
  padding: 8px 12px;
  margin-top: 8px;
  font-weight:800; font-size:15px; color:#fff;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--fcc-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
}
@supports not (backdrop-filter: blur(1px)){
  .fcp-price{ background: rgba(20,22,28,.7); }
}

/* ======= Grid dos squads no modal ====================================== */
.fcp-squads-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
}
@media (max-width:768px){
  .fcp-squads-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  span.fc-stat-num{font-size:10px}
  .fc-stat-lbl{font-size:7px}
  .fc-stats{gap:4px; margin-bottom:-5px;}
  .fc-name{font-size:15px}
  .fc-altpos-sub{font-size:6px;}
  .fc-info-row .fc-ico{width:15px; height:15px}
  .fc-extrainfo-row{font-size:1px}
  .fc-altpos-list{
    transform: translate(calc(var(--altpos-shift-x, 0) - 1%), calc(var(--altpos-shift-y, 0) - 15%));
  }
}
@media (max-width:768px){
  .fcp-squad-box{ min-height: 200px; }
  .fcp-squad-box .s-title{ font-size:14px; }
  .fcp-squad-box .s-values{
    grid-template-columns: 1fr;  /* empilha (Coins em cima, Preço embaixo) */
    gap:6px;
  }
  .fcp-squad-box .s-brl{ text-align:left; }
}
/* === Mobile: preço ACIMA, botões ABAIXO (lado a lado após 1ª gravação) === */
@media (max-width:768px){
  .fcp-item{ min-width:0; } /* evita overflow horizontal */

  .fc-pricebar{
    display:flex;
    grid-template-columns: 1fr;   /* uma coluna */
    grid-template-rows: auto auto;/* linha 1: preço | linha 2: ações */
    align-items:center;
    gap:8px;
    height:auto;
    padding:6px 8px;
    margin-top:6px;
    box-sizing:border-box;
  }

  .fc-pricebar .fc-price-text{
    grid-column: 1 / -1;  /* ocupa a largura toda na linha do preço */
    font-size:12px;
    line-height:1.2;
    white-space:nowrap;
  }

  /* Área das ações ocupa a 2ª linha. Quando “has-order”, viram 2 colunas */
  .fc-pricebar .fcp-actions{
    grid-column: 1 / -1;
    display:grid;
    grid-template-columns: 1fr;   /* default: um botão por linha (Resolver) */
    gap:8px;
    width:100%;
    justify-content:stretch;
    align-items:stretch;
  }

  /* Antes da 1ª gravação: mostrar só o “Resolver” */
  .fcp-item:not(.has-order) .fc-pricebar .fcp-actions .fcp-btn:not(.primary){
    display:none !important;
  }

  /* Depois da 1ª gravação: esconder “Resolver” e mostrar os dois botões */
  .fcp-item.has-order .fc-pricebar .fcp-actions .fcp-btn.primary{
    display:none !important;
  }
  .fcp-item.has-order .fc-pricebar .fcp-actions{
    grid-template-columns: 1fr 1fr; /* Editar | Concluir lado a lado */
  }

  /* Botões preenchem a célula e não “vazam” */
  .fc-pricebar .fcp-actions .fcp-btn{
    width:100%;
    max-width:100%;
    min-width:0;
    border-radius: var(--fcc-radius);
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:11px;
    font-weight:600;
    height:25px;
    padding:0 10px;
  }

  /* Se ainda existir apenas o primário (estado inicial), mantém único */
  .fc-pricebar .fcp-actions .fcp-btn.primary{
    width:100%;
  }
}
/* ======= Acessibilidade: reduzir movimento ============================== */
/* === Layout condicional da barra: só no card em edição ou já concluído === */
/* Padrão geral já é display:flex em .fc-pricebar. Ao editar/concluir, vira coluna
   SOMENTE no card-alvo (is-editing enquanto modal aberto; has-order após 1ª gravação). */
.fcp-item.is-editing .fc-pricebar,
.fcp-item.has-order .fc-pricebar{
  display: flex;              /* garante flex mesmo que outro bloco mude */
  flex-direction: column;     /* preço em cima, ações embaixo */
  align-items: stretch;
  gap: 8px;
}

/* No mobile você tinha trocado .fc-pricebar para grid; aqui forçamos coluna
   só no card ativo, sobrescrevendo o grid para manter o comportamento pedido. */
@media (max-width:768px){
  .fcp-item.is-editing .fc-pricebar,
  .fcp-item.has-order .fc-pricebar{
    display: flex !important;
    flex-direction: column !important;
            align-items: center!important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .fc-bg-sheen{ animation: none !important; opacity: .12; }
  .fc-card-frame{ transition: none !important; }
  .fcp-btn{ transition: none !important; }
}