/**
 * FC Player Shop - Cart UI (igual página de jogadores)
 * - Grid 4 colunas PC / 2 colunas mobile
 * - Badge coins flutuante
 * - Botão X flutuante no topo direito do card
 * - Barra de preço com mesma largura do card
 */

:root{
  --fc-coin-icon: url("https://chamacoins.com.br/wp-content/uploads/2025/11/ChatGPT-Image-22-de-out.-de-2025-18_17_45-1-1.png");

  /* ícone do botão remover todos (link que você mandou) */
  --fc-trash-icon: url("https://img.icons8.com/?size=100&id=12494&format=png&color=FFFFFF");
}

/* =========================
   CONTAINER
   ========================= */
.fc-cart-container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 16px 120px;
}

/* =========================
   TOPBAR
   ========================= */
.fc-cart-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  background: rgba(15, 15, 20, 0.70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;

  padding: 12px 20px;
  margin-bottom: 32px;
}

.fc-cart-topbar__left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 0;
}

.fc-cart-topbar__title{
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.60);
  white-space: nowrap;
}

/* Badge premium do total de coins (usa o MESMO ícone do jogador) */
.fc-cart-topbar__coins-badge{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 8px 14px 8px 36px;
  border-radius: 999px;

  background: rgba(10, 10, 10, 0.62);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  overflow: hidden;
}

.fc-cart-topbar__coins-badge::before{
  content:"";
  position:absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;

  background-image: var(--fc-coin-icon);
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;

  filter: drop-shadow(0 3px 10px rgba(255,111,0,0.35));
  opacity: 0.95;
}



/* Valor do total */
.fc-cart-topbar__coins{
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: 700;
  color: var(--fc-primary, #FF6F00);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.2px;
}

.fc-cart-topbar__right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Botão Remover todos (vermelho baixa opacidade + ícone) */
#fc-clear-cart-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border-radius: 12px;
  padding: 10px 14px;

  background: rgba(255, 40, 40, 0.14);
  border: 1px solid rgba(255, 40, 40, 0.30);
  color: rgba(255,255,255,0.95);

  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.25px;

  box-shadow: 0 10px 22px rgba(0,0,0,0.24);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease, box-shadow .18s ease;
  touch-action: manipulation;
}

#fc-clear-cart-btn::before{
  content:"";
  width: 16px;
  height: 16px;
  display:inline-block;

  background-image: var(--fc-trash-icon);
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;

  opacity: 0.95;
}

#fc-clear-cart-btn:hover{
  transform: translateY(-1px);
  background: rgba(255, 40, 40, 0.20);
  border-color: rgba(255, 40, 40, 0.50);
  box-shadow: 0 14px 28px rgba(0,0,0,0.28);
}

#fc-clear-cart-btn:active{
  transform: translateY(0) scale(0.98);
}

#fc-clear-cart-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 40, 40, 0.25), 0 14px 28px rgba(0,0,0,0.28);
}

/* =========================
   GRID (4 / 2)
   ========================= */
.fc-cart-items,
.fc-cart-items-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

@media (max-width: 768px){
  .fc-cart-items,
  .fc-cart-items-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .fc-cart-topbar{
    padding: 12px 14px;
  }

  /* ↓ diminui o total no mobile */
  .fc-cart-topbar__coins{
    font-size: 16px;
  }

  .fc-cart-topbar__coins-badge{
    padding: 7px 12px 7px 32px;
  }

  .fc-cart-topbar__coins-badge::before{
    left: 10px;
    width: 14px;
    height: 14px;
    background-size: 14px;
  }

  #fc-clear-cart-btn{
    padding: 9px 12px;
    font-size: 12px;
  }

  #fc-clear-cart-btn::before{
    width: 15px;
    height: 15px;
    background-size: 15px;
  }
}

/* =========================
   ITEM (wrapper técnico)
   ========================= */
.fc-cart-item{
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

/* Badge coins flutuante (topo esquerdo) */
.fc-cart-item[data-coins-value]::before{
  content: attr(data-coins-value);
  position:absolute;
  top: 10px;
  left: 10px;
  z-index: 7;

  display:inline-flex;
  align-items:center;
  gap: 6px;

  padding: 6px 10px 6px 30px;
  border-radius: 999px;

  background-color: rgba(10, 10, 10, 0.72);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(4px);

  font-size: 13px;
  font-weight: 800;
  color: #fff;
  line-height: 1;

  background-image: var(--fc-coin-icon);
  background-position: 10px center;
  background-size: 14px;
  background-repeat: no-repeat;
}

/* =========================
   CARD (única caixa visual)
   ========================= */
.fc-cart-card-wrapper{
  position: relative;
  width: 100%;
  max-width: 300px;
  border-radius: 18px;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);

  overflow: hidden;
}

/* Conteúdo do card (centraliza o renderer) */
.fc-cart-card-inner{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 12px 10px;

  background: rgba(10,10,10,0.10);
}

/* Fallback simples (se não renderizar card visual) */
.fc-cart-item-fallback{
  width: 100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 18px 0;
}

.fc-cart-item-fallback img{
  max-width: 220px;
  height: auto;
  display:block;
}

/* =========================
   BOTÃO X (flutuante topo direito)
   ========================= */
.fc-cart-item-remove{
  position:absolute;
  top: 10px;
  right: 10px;
  z-index: 8;

  width: 34px;
  height: 34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10,10,10,0.60);
  color: rgba(255,255,255,0.92);

  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
  touch-action: manipulation;
}

.fc-cart-item-remove:hover{
  transform: translateY(-1px);
  background: rgba(255, 111, 0, 0.16);
  border-color: rgba(255, 111, 0, 0.35);
}

/* =========================
   BARRA DE PREÇO (mesma largura do card)
   ========================= */
.fc-cart-price-info{
  width: 100%;
  max-width: 300px;

  min-height: 44px;
  padding: 8px 10px;
  border-radius: 12px;

  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.10);

  display:flex;
  align-items:center;
  justify-content: center;
}

/* Reusa nomes do squad detail */
.fc-price-container{
  display:flex;
  align-items:baseline;
  gap: 6px;
}

.fc-price-label{
  font-size: 15px;
  color: var(--fc-primary, #FF6F00);
  font-weight: 800;
  line-height: 1;
}

.fc-price-value{
  font-size: 18px;
  font-weight: 900;
  color: var(--fc-primary, #FF6F00);
  line-height: 1;
  white-space: nowrap;
}

/* =========================
   CARRINHO VAZIO
   ========================= */
.fc-cart-empty{
  text-align:center;
  padding: 80px 20px;
  background: rgba(26,26,26,0.50);
  border: 2px dashed rgba(255,255,255,0.10);
  border-radius: 20px;
}

.fc-cart-empty h2{
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin: 12px 0;
}

.fc-cart-empty p{
  color: rgba(255,255,255,0.60);
  margin: 0 0 24px;
}

/*----------------------------
Desabilitar botõa e total 
-----------------------------*/
.fc-cart-footer__total,.fc-cart-actions{display: none;}


/* =========================
   MOBILE FINO
   ========================= */
@media (max-width: 480px){
  .fc-cart-item[data-coins-value]::before{
    font-size: 11px;
    padding: 4px 7px 4px 24px;
    background-size: 11px;
    background-position: 7px center;
    top: 8px;
    left: 8px;
    
  }
  
  .fc-cart-container{padding:0px;}
  
 .fc-cart-card-inner {     padding: 0px 0px 10px 0px;}
.fc-cart-price-info {min-height: 20px; padding: 5px 3px; }

  .fc-cart-item-remove{
    width: 32px;
    height: 32px;
    top: 8px;
    right: 8px;
  }

  .fc-price-label{
    font-size: 13px;
  }

  .fc-price-value{
    font-size: 16px;
  }

  /* ↓ total coins ainda menor no mobile fino */
  .fc-cart-topbar__coins{
    font-size: 14px;
  }

  .fc-cart-topbar__title{
    font-size: 12px;
  }

  #fc-clear-cart-btn{
    padding: 8px 10px;
    font-size: 11px;
    border-radius: 11px;
  }

  #fc-clear-cart-btn::before{
    width: 14px;
    height: 14px;
    background-size: 14px;
  }
}