/* TÍTULO: Coral Size Guide v2 — CSS (com scroll vertical no mobile + scroll horizontal na tabela) */

html.csg-lock{overflow:hidden}

.csg-overlay{
  position:fixed;top:0;right:0;bottom:0;left:0;
  background:rgba(0,0,0,.45);
  display:none;
  z-index:999999;
  padding:18px;

  /* TÍTULO: CSG — permite scroll vertical quando modal é maior que a tela */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.csg-overlay.is-open{display:block}

.csg-modal{
  max-width:1040px;
  width:96%;
  background:#fff;
  border-radius:10px;
  box-shadow:0 20px 70px rgba(0,0,0,.25);
  position:relative;

  /* IMPORTANTE:
     antes estava overflow:hidden e isso "matava" o scroll vertical.
     agora o modal pode rolar verticalmente quando precisar. */
  overflow-y:auto;
  overflow-x:hidden;

  /* TÍTULO: CSG — limita altura para ativar rolagem vertical no mobile */
  max-height:calc(100vh - 36px);

  margin:0 auto;
  top:6vh;
}

/* TÍTULO: CSG — Fix botão fechar (X) visível sempre */
.csg-close{
  position:absolute;right:12px;top:10px;
  width:40px;height:40px;border:0;
  cursor:pointer;

  background:#fff !important;
  color:#111 !important;
  border:1px solid #e5e5e5 !important;
  border-radius:10px !important;

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

  font-size:26px !important;
  line-height:1 !important;
  opacity:1 !important;
}
.csg-close:hover{
  background:#111 !important;
  color:#fff !important;
  border-color:#111 !important;
}

/* TÍTULO: CSG — Header com espaço para o botão X não “morder” o texto */
.csg-header{
  padding:18px 22px 0;
  padding-right:70px; /* reserva pro X */
}
.csg-title{font-weight:700;letter-spacing:.08em;font-size:13px}
.csg-subtitle{margin-top:2px;color:#444;font-size:12px}

.csg-body{padding:18px 22px 22px;font-size:0}

.csg-left,.csg-right{display:inline-block;vertical-align:top;font-size:14px}

.csg-left{
  width:300px;
  padding-right:18px;
  border-right:1px solid #eee;
  box-sizing:border-box;
}
.csg-right{
  width:calc(100% - 300px);
  padding-left:18px;
  box-sizing:border-box;
}

.csg-brand{font-weight:700;font-size:20px}
.csg-product{margin-top:4px;color:#666;font-size:13px}
.csg-section{
  margin-top:22px;
  font-weight:700;
  letter-spacing:.06em;
  font-size:12px;
  border-bottom:2px solid #111;
  display:inline-block;
  padding-bottom:6px;
}
.csg-note{margin-top:12px;color:#555;font-size:12px;line-height:1.4}

.csg-controls{
  overflow:hidden;
  margin-top:6px;
  margin-bottom:12px;
}

.csg-control{display:inline-block;vertical-align:top;margin-right:16px}
.csg-control label{display:block;font-size:12px;color:#444;margin-bottom:6px}

.csg-select{
  min-width:240px;
  padding:10px 12px;
  border:1px solid #ddd;border-radius:8px;background:#fff;font-size:14px;
}

.csg-toggle{display:inline-block;border:1px solid #ddd;border-radius:8px;overflow:hidden}
.csg-toggle button{
  padding:10px 14px;border:0;background:#fff;cursor:pointer;font-size:13px;
}
.csg-toggle button.is-active{background:#111;color:#fff}

/* =========================================================
   TÍTULO: CSG — WRAP da tabela (rolagem horizontal no mobile)
   ========================================================= */
.csg-table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.csg-table{
  width:100%;
  border-collapse:collapse;
}

.csg-table thead th{
  text-align:left;font-size:12px;color:#444;
  padding:10px 12px;border-bottom:1px solid #eee;
}
.csg-table tbody td{
  padding:12px;border-bottom:1px solid #f1f1f1;font-size:14px;
}
.csg-table tbody tr:nth-child(odd){background:#fafafa}








/* =========================================================
   TÍTULO: Size Guide — seta única (via <span>) e sem seta nativa
   ========================================================= */

.csg-modal .csg-control--system{
  position: relative !important;
}

/* remove seta nativa + abre espaço pra seta custom */
.csg-modal .csg-control--system .csg-select{
  padding-right: 48px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  background: #fff !important;
}

/* Edge/IE antigo */
.csg-modal .csg-control--system .csg-select::-ms-expand{
  display:none !important;
}

/* seta custom */
.csg-modal .csg-control--system .csg-select-arrow{
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  pointer-events: none !important;
  opacity: .75 !important;
}

.csg-modal .csg-control--system .csg-select-arrow::before{
  content: "" !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 6px solid #6b7280 !important;
  margin: 5px auto 0 !important;
}







@media (max-width:820px){
  /* TÍTULO: CSG — mobile: modal usa melhor a altura e não “prende” o scroll */
  .csg-modal{
    top:0;
    max-height:calc(100vh - 36px);
  }

  .csg-left{
    width:100%;
    border-right:0;
    padding-right:0;
    border-bottom:1px solid #eee;
    padding-bottom:14px;
    margin-bottom:14px;
  }
  .csg-right{width:100%;padding-left:0}
  .csg-control{display:block;margin-right:0;margin-bottom:12px}
  .csg-select{width:100%;min-width:0}

  /* TÍTULO: CSG — Mobile: tabela rolável e sem quebra nas células */
  .csg-table{
    min-width:640px; /* ajuste fino: 600~720 se quiser */
  }
  .csg-table th,
  .csg-table td{
    white-space:nowrap;
  }
}