/* Coins Selector — estilos (50k + UI refinada + bônus) */

/* ====== Outer Wrapper (para posicionar tag de promoção) ====== */
.cs-outer-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 100%;
}

/* ====== Tag de Promoção (estilizada, canto superior esquerdo) ====== */
.cs-promo-tag {
  position: absolute;
  top: -6px;
  left: 16px;
  z-index: 10;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(16, 185, 129, 0.4);
  letter-spacing: 0.3px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cs-wrapper{
  --cs-panel:#0E0E0E; 
  --cs-text:#e7edf7; 
  --cs-muted:#9fb0c8; 
  --cs-accent:#ff6a00; 
  --cs-border:#343434;

  /* ICONS (do WP uploads/2025/10) */
  --icon-modo-lance: url('https://chamacoins.com.br/wp-content/uploads/2025/10/icon-modo-buy-now.png');
  --icon-modo-sniper: url('https://chamacoins.com.br/wp-content/uploads/2025/10/icon-modo-sniper.png');
  --icon-ps: url('/wp-content/uploads/2025/10/PlayStation-Logo-1-1.svg');
  --icon-xbox: url('/wp-content/uploads/2025/10/Xbox-1.svg');
  --icon-pc: url('/wp-content/uploads/2025/10/Origin-Logo-1.svg');

  background:var(--cs-panel); 
  color:var(--cs-text);
  border-radius:14px; 
  border:1px solid var(--cs-border);
  padding:16px 16px 0; 
  max-width:100%;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.cs-mobile-arrows {
  display: none;
}

.cs-inner{ 
  display:grid; 
  gap:14px; 
}

.cs-h2{ 
  font-size:16px; 
  font-weight:600; 
  margin:0; 
  color:var(--cs-muted); 
}

.cs-row{ 
  display:grid; 
  gap:12px; 
  align-items:center; 
}

/* ====== Search ====== */
.cs-search .cs-searchbox{
  display:grid; 
  grid-template-columns:28px 1fr; 
  align-items:center; 
  gap:8px;
  background:#242424; 
  border:1px solid var(--cs-border); 
  border-radius:10px; 
  padding:10px 12px;
}

.cs-icon{ 
  width:18px; 
  height:18px; 
  display:block; 
  opacity:.95; 
}

.cs-search input{ 
  background:transparent; 
  color:var(--cs-text); 
  border:0; 
  outline:0; 
  font-size:15px; 
}

.cs-search input::placeholder{ 
  color:#6e7e96; 
}

/* ====== Linha 2: Modos + Plataforma + Visor ====== */
.cs-controls{
  display:flex; 
  align-items:center; 
  gap:8px; 
  flex-wrap:nowrap;
}

.cs-modes{ 
  display:flex; 
  gap:6px; 
  white-space:nowrap; 
  min-width:0; 
  flex:0 1 auto; 
}

.cs-mode{
  background:#242424; 
  border:1px solid var(--cs-border); 
  color:var(--cs-text);
  padding:5px 10px; 
  border-radius:10px; 
  cursor:pointer;
  transition:transform .08s ease, background .2s, color .2s, border-color .2s;
  display:inline-flex; 
  align-items:center; 
  gap:6px; 
  line-height:1; 
  font-size:14px; 
  white-space:nowrap;
}

.cs-mode::before{
  content:""; 
  width:22px; 
  height:22px; 
  display:inline-block;
  background-size:contain; 
  background-repeat:no-repeat; 
  background-position:center;
  filter: drop-shadow(0 0 2px #0007);
}

.cs-mode[data-mode="lance"]::before  { 
  background-image:var(--icon-modo-lance); 
}

.cs-mode[data-mode="sniper"]::before { 
  background-image:var(--icon-modo-sniper); 
}

.cs-mode.is-active{ 
  color:var(--cs-text); 
  border-color:#343434; 
  background:#202020; 
  transform:translateY(-1px); 
  padding:8px; 
}

/* Plataforma com ícone */
.cs-platform{ 
  display:inline-flex; 
  align-items:center; 
}

.cs-platform select{
  appearance:none; 
  -webkit-appearance:none; 
  -moz-appearance:none;
  background:#202020 no-repeat center / 22px 22px;
  border:1px solid #343434; 
  border-radius:10px;
  width:40px; 
  min-width:40px; 
  height:40px;
  padding:0; 
  text-indent:-9999px; 
  color:#fff; 
  cursor:pointer;
}

[data-pf="ps"]   .cs-platform select{ background-image:var(--icon-ps); }
[data-pf="xbox"] .cs-platform select{ background-image:var(--icon-xbox); }
[data-pf="pc"]   .cs-platform select{ background-image:var(--icon-pc); }

/* Visor */
.cs-visor{ 
  margin-left:15%; 
  display:inline-grid; 
  grid-auto-flow:column; 
  gap:8px; 
  align-items:center; 
  font-size:15px; 
  white-space:nowrap; 
}

.cs-visor-title{ 
  color:#cdcdcd; 
}

.cs-visor-coins{ 
  color:var(--cs-accent); 
  font-weight:700; 
}

/* NOVO: bônus visual */
.cs-visor-bonus{
  color:#7be28a;
  font-weight:600;
  font-size:13px;
  margin-left:4px;
}

/* preço */
.cs-visor-price{ 
  color:#fff; 
  font-weight:600; 
}

/* ====== Slider (linha 3) ====== */
.cs-slider{
  position:relative; /* ancora das setas mobile */
  display:grid;
  grid-template-columns:auto 36px 1fr 36px; /* botão | seta | trilho | seta (desktop) */
  align-items:center; 
  gap:12px;
  padding-bottom:16px; 
  margin-bottom:6px;
}

/* setas desktop/sniper */
.cs-sniper-arrows[aria-hidden="true"]{ 
  visibility:hidden; 
}

.cs-sniper-arrows .cs-arrow{
  width:36px; 
  height:36px; 
  border-radius:10px; 
  background:#0f141d; 
  border:1px solid var(--cs-border); 
  color:var(--cs-text); 
  cursor:pointer;
  transition:transform .08s ease, background .2s, border-color .2s;
}

.cs-sniper-arrows .cs-arrow:hover{ 
  transform:translateY(-1px); 
}

.cs-sniper-arrows .cs-arrow:active{ 
  transform:translateY(0); 
}

/* trilho */
.cs-range{ 
  position:relative; 
  padding:8px 0 28px; 
}

.cs-range input[type="range"]{
  width:100%; 
  height:8px; 
  appearance:none; 
  background:#0f141d; 
  border:1px solid var(--cs-border); 
  border-radius:999px; 
  outline:none;
  /* usado pelo JS para animar o preenchimento */
  --cs-range-pct:0%;
}

.cs-range input[type="range"]::-webkit-slider-runnable-track{ 
  height:8px; 
  background:#242424; 
  border-radius:999px; 
}

/* gradiente com preenchimento dinâmico (Chrome/WebKit) */
.cs-range input[type="range"]::-webkit-slider-runnable-track{
  background:linear-gradient(
    to right, 
    #ff6a00 var(--cs-range-pct, 0%), 
    #242424 var(--cs-range-pct, 0%)
  );
}

.cs-range input[type="range"]::-moz-range-track{ 
  height:8px; 
  background:#242424; 
  border-radius:999px; 
}

.cs-range input[type="range"]::-webkit-slider-thumb{
  appearance:none; 
  width:18px; 
  height:18px; 
  border-radius:50%; 
  background:var(--cs-accent);
  border:2px solid #ffffff20; 
  margin-top:-5px; 
  box-shadow:0 0 0 3px #ff6a0022;
}

/* Firefox: progress/track */
.cs-range input[type="range"]::-moz-range-progress{ 
  background-color:#ff6a00; 
  height:8px; 
  border-radius:999px; 
}

.cs-range input[type="range"]::-moz-range-track{ 
  background-color:#242424; 
}

.cs-range input[type="range"]::-moz-range-thumb{ 
  width:18px; 
  height:18px; 
  border:0; 
  border-radius:50%; 
  background:var(--cs-accent); 
}

/* Escala */
.cs-scale{ 
  position:absolute; 
  left:0; 
  right:0; 
  bottom:0; 
  height:22px; 
}

.cs-scale .cs-tick{ 
  position:absolute; 
  bottom:8px; 
  width:1px; 
  height:6px; 
  background:#343434; 
  transform:translateX(-0.5px); 
}

.cs-scale .cs-tick.has-label::after{ 
  content:attr(data-label); 
  position:absolute; 
  bottom:-14px; 
  left:50%; 
  transform:translateX(-50%); 
  font-size:11px; 
  color:#cdcdcd; 
  white-space:nowrap; 
}

.cs-scale .cs-tick.is-threshold{ 
  background:#343434; 
}

.cs-scale .cs-tick.is-threshold::after{ 
  color:#cdcdcd; 
  font-weight:600; 
}

.cs-scale .cs-tick.is-50k{ 
  background:#343434; 
}

.cs-scale .cs-tick.is-50k.has-label::after{ 
  color:#cdcdcd; 
}

/* Botão finalizar */
.cs-actions{ 
  display:flex; 
  align-items:center; 
}

.cs-finish{
  background:var(--cs-accent); 
  color:#0e0e0e; 
  font-weight:800; 
  border:0; 
  border-radius:10px; 
  padding:12px 22px; 
  cursor:pointer;
  transition:transform .08s ease, filter .2s ease;
}

.cs-finish:hover{ 
  transform:translateY(-1px); 
  filter:brightness(1.05); 
}

.cs-finish:active{ 
  transform:translateY(0); 
}

/* A11y */
.cs-mode:focus, 
.cs-arrow:focus, 
#cs-input:focus, 
#cs-platform:focus, 
.cs-finish:focus, 
.cs-range input[type="range"]:focus{
  outline:2px solid #96b4ff; 
  outline-offset:2px; 
  border-color:#3b5ac5 !important;
}

/* ====== Mobile ====== */
@media (max-width: 860px){
  /* Tag de promoção no mobile - ainda menor */
  .cs-promo-tag {
    top: -5px;
    left: 10px;
    font-size: 8px;
    padding: 2px 5px;
    border-radius: 2px;
  }

  /* controles em 2 colunas: modos | plataforma, visor embaixo */
  .cs-controls{
    display:grid;
    grid-template-columns: 1fr 42px;
    grid-template-areas:
      "modes platform"
      "visor visor";
    gap:8px;
    align-items:stretch;
  }

  .cs-mobile-arrows .cs-mbtn {
    margin-left:-10%;
    margin-right:-10%;
    margin-top:19%;
    width:25px !important;
    height:25px !important;
  }

  .cs-slider{
    margin-bottom:5px !important;
  }

  /* Visor embaixo, alinhado à esquerda, com espaço pro botão */
  .cs-visor{
    grid-area:visor !important;
    margin-left:0 !important;
    justify-content:flex-start !important;
    display:flex !important;
    flex-wrap: wrap;
    gap:4px;
    margin-bottom:-35px !important;
    font-size: 12px !important;
  }

  /* Fontes menores no visor para mobile */
  .cs-visor-title {
    font-size: 11px;
  }

  .cs-visor-coins {
    font-size: 12px;
  }

  .cs-visor-bonus {
    font-size: 10px;
    margin-left: 2px;
  }

  .cs-visor-price {
    font-size: 12px;
  }

  .cs-modes .cs-mode{ 
    padding:2px; 
  }

  .cs-mode::before{    
    width:25px !important;
    height:25px !important;
  }

  .cs-modes{
    grid-area:modes;
    display:grid; 
    grid-template-columns: 1fr 1fr; 
    gap:8px;
  }

  .cs-modes .cs-mode{ 
    width:100%; 
    justify-content:center; 
    padding:3px 8px; 
    font-size:13px; 
  }

  .cs-platform{ 
    grid-area:platform; 
  }

  .cs-platform select{ 
    width:100%; 
    height:100%; 
  }

  /* slider de ponta a ponta */
  .cs-slider{ 
    grid-template-columns:1fr; 
    gap:10px; 
    margin-bottom:76px; 
  }

  /* esconde setas desktop no mobile */
  .cs-sniper-arrows{ 
    display:none !important; 
  }

  .cs-range{ 
    padding-left:0; 
    padding-right:0; 
  }

  .cs-slider .cs-actions > .cs-finish{
    position:absolute; 
    left:0;  
    bottom:-60px; 
    margin:0 auto; 
    width:fit-content; 
    z-index:5;
  }

  .cs-search .cs-searchbox{
    padding:5px 12px;
  }

  /* Marcadores menores no mobile */
  .cs-scale .cs-tick.has-label::after {
    font-size: 9px;
  }

  /* ===== Setas MOBILE (acima do slider, nas laterais) ===== */
  .cs-mobile-arrows{ 
    display:none; 
    position:absolute; 
    left:0; 
    right:0; 
    top:-12px; 
    height:0; 
    pointer-events:none; 
    z-index:6;
  }

  /* só mostra no modo Sniper */
  [data-cs-root].is-sniper .cs-mobile-arrows{ 
    display:block; 
  }

  .cs-mobile-arrows .cs-mbtn{
    position:absolute; 
    top:0;
    transform:translateY(-100%); /* fica acima do slider */
    width:36px; 
    height:36px; 
    border-radius:10px;
    background:#0f141d; 
    border:1px solid var(--cs-border); 
    color:var(--cs-text);
    pointer-events:auto; 
    cursor:pointer;
    display:flex; 
    align-items:center; 
    justify-content:center;
  }

  .cs-mobile-arrows .cs-mbtn-left{ 
    left:0; 
  }

  .cs-mobile-arrows .cs-mbtn-right{ 
    right:0; 
  }
}

/* reduz movimento */
@media (prefers-reduced-motion: reduce){
  .cs-mode, 
  .cs-arrow, 
  .cs-finish, 
  .cs-mobile-arrows .cs-mbtn { 
    transition:none !important; 
  }
}