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

.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; }
.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;
}
.cs-range input[type="range"]::-webkit-slider-runnable-track{ height:8px; background:#242424; border-radius:999px; }
.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;
}
.cs-range input[type="range"]::-webkit-slider-runnable-track{
  background:linear-gradient(to right, #ff6a00 var(--value, 0%), #242424 var(--value, 0%));
}
.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){
  /* 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;}
  .cs-visor{        grid-area: visor!important;
        margin-left: 0!important;
        justify-content: flex-start!important;
        display: flex!important;
        margin-bottom: -35px!important;
;}
  .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%; }
  .cs-visor{ grid-area:visor; margin-left:0; justify-content:space-between; }

  /* 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;}
  /* ===== 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; }
}