@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&display=swap');

:root{
  --wip2-accent: #E85400;
  --wip2-text: #0f172a;          /* off-black (não “estoura” como #000) */
  --wip2-muted: #64748b;         /* slate */
  --wip2-line: rgba(15, 23, 42, .12);
  --wip2-bg: #ffffff;
  --wip2-surface: #ffffff;
  --wip2-surface-2: #f7f8fa;
  --wip2-radius: 16px;
  --wip2-radius-sm: 12px;
  --wip2-shadow: 0 10px 30px rgba(15, 23, 42, .10);
  --wip2-shadow-soft: 0 8px 18px rgba(15, 23, 42, .08);
  --wip2-focus: 0 0 0 3px rgba(232, 84, 0, .18);
  --wip2-font: 'Montserrat', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

/* Escopo do gateway */
li.wc_payment_method.payment_method_infinitepay_cc_chamacoins,
div.payment_box.payment_method_infinitepay_cc_chamacoins{
  font-family: var(--wip2-font);
}

li.wc_payment_method.payment_method_infinitepay_cc_chamacoins > label{
  display:flex; align-items:center; gap:10px;
  font-weight: 900;
  color: var(--wip2-text);
}

div.payment_box.payment_method_infinitepay_cc_chamacoins{
  border: 1px solid var(--wip2-line) !important;
  border-radius: var(--wip2-radius) !important;
  background: var(--wip2-surface) !important;
  box-shadow: var(--wip2-shadow);
  padding: 14px !important;
}

div.payment_box.payment_method_infinitepay_cc_chamacoins p{
  margin: 0 0 12px !important;
  color: var(--wip2-muted);
  line-height: 1.4;
  font-weight: 600;
}

/* Fieldset */
#wip-payment-fields{
  display:grid;
  gap: 12px;
  margin-top: 0 !important;
}

#wip-payment-fields > p{
  margin: 0 !important;
  padding: 12px;
  border: 1px solid var(--wip2-line);
  border-radius: var(--wip2-radius);
  background: linear-gradient(180deg, #fff, var(--wip2-surface-2));
  box-shadow: var(--wip2-shadow-soft);
}

#wip-payment-fields label{
  display:block;
  margin: 0 0 8px;
  font-weight: 900;
  color: var(--wip2-text);
}

/* Mantém o select bonito quando JS estiver OFF */
#wip_installments{
  width:100% !important;
  height:48px;
  font-family: var(--wip2-font);
  font-size: 16px;              /* evita zoom no mobile (padrão Stripe) */
  font-weight: 800;
  color: var(--wip2-text);
  background:#fff;
  border: 1px solid rgba(15,23,42,.18) !important;
  border-radius: 14px;
  padding: 10px 44px 10px 14px !important;
  box-shadow: 0 10px 18px rgba(15,23,42,.08);
}

#wip_installments:focus{
  outline:none !important;
  border-color: rgba(232,84,0,.55) !important;
  box-shadow: var(--wip2-focus), 0 14px 24px rgba(15,23,42,.10);
}

/* =========================
   SELECT CUSTOM (JS ON)
   ========================= */
html.wip2-js .wip2-select{
  position: relative;
  width: 100%;
  max-width: 520px;
}

/* esconde o select nativo só quando JS ligou */
html.wip2-js .wip2-select select{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  height:0 !important;
  width:0 !important;
}

/* botão do select */
.wip2-select__btn{
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.18);
  background: #fff;
  box-shadow: 0 10px 18px rgba(15,23,42,.08);
  padding: 10px 42px 10px 14px;
  font-family: var(--wip2-font);
  font-size: 16px;
  font-weight: 800;
  color: var(--wip2-text);
  text-align: left;
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease, transform .08s ease;
}

.wip2-select__btn:hover{
  border-color: rgba(15,23,42,.28);
}
.wip2-select__btn:focus{
  outline: none;
  border-color: rgba(232,84,0,.55);
  box-shadow: var(--wip2-focus), 0 14px 24px rgba(15,23,42,.10);
}
.wip2-select__btn:active{ transform: translateY(1px); }

.wip2-select__btn::after{
  content:"";
  position:absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
  opacity: .72;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%230f172a' fill-opacity='0.75' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

/* painel dropdown */
.wip2-select__panel{
  position:absolute;
  left:0; right:0;
  top: calc(100% + 8px);
  z-index: 99999;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15,23,42,.16);
  overflow: hidden;
}

.wip2-select__list{
  max-height: 260px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* opções */
.wip2-select__opt{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  background:#fff;
  border: 0;
  border-bottom: 1px solid rgba(15,23,42,.06);
  font-family: var(--wip2-font);
  font-size: 15px;
  font-weight: 800;
  color: var(--wip2-text);
  cursor: pointer;
  text-align:left;
}

.wip2-select__opt:last-child{ border-bottom:0; }

.wip2-select__opt:hover{
  background: #f6f7f9;
}

.wip2-select__opt .wip2-select__check{
  opacity: 0;
  font-weight: 900;
  color: var(--wip2-accent);
}

.wip2-select__opt.is-selected{
  background: linear-gradient(180deg, rgba(232,84,0,.08), #fff);
  box-shadow: inset 3px 0 0 rgba(232,84,0,.85);
}

.wip2-select__opt.is-selected .wip2-select__check{ opacity: 1; }

/* Resumo */
#wip-fee-summary{
  margin-top: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  border-radius: var(--wip2-radius) !important;
  background:
    radial-gradient(900px 260px at 8% -30%, rgba(232,84,0,.16), transparent 60%),
    #fff !important;
  box-shadow: var(--wip2-shadow-soft);
}

#wip-fee-summary > div:first-child{
  font-weight: 900 !important;
  color: var(--wip2-text);
  margin: 0 0 10px !important;
  display:flex; align-items:center; gap:10px;
}

#wip-fee-summary > div:first-child::before{
  content:"";
  width:10px; height:10px; border-radius:999px;
  background: var(--wip2-accent);
  box-shadow: 0 0 0 6px rgba(232,84,0,.14);
}

#wip-fee-lines > div{
  padding: 10px 2px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
  color: rgba(15,23,42,.78);
  font-weight: 700;
}

#wip-fee-lines > div:not(:last-child){
  border-bottom: 1px solid rgba(15,23,42,.08);
}

#wip-fee-lines span{
  color: var(--wip2-text);
  font-weight: 900;
  white-space: nowrap;
}

#wip-fee-lines > div:nth-child(3){
  margin-top: 8px !important;
  padding: 12px 12px !important;
  border: 1px solid rgba(232,84,0,.22) !important;
  border-radius: var(--wip2-radius-sm) !important;
  background: linear-gradient(180deg, rgba(232,84,0,.08), #fff) !important;
}

#wip-total-with-fee{ color: var(--wip2-accent) !important; }

#wip-per-installment-line{
  margin-top: 10px !important;
  padding: 10px 0 0 !important;
  border-top: 1px dashed rgba(15,23,42,.18);
  opacity: 1 !important;
  color: rgba(15,23,42,.62);
  font-weight: 800;
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: baseline;
}

/* layout desktop */
@media (min-width: 860px){
  #wip-payment-fields{ grid-template-columns: 360px 1fr; }
  #wip-payment-fields > p{ grid-column: 1; }
  #wip-fee-summary{ grid-column: 2; }
}