/* =================================================================
   HUBSPOT CUSTOM MODULE - CSS PANEL (CALCULADORA DE IMPACTO)
   Palette: #00754A | #80BAA5 | #EF8943 | #33916e | #17392F
   ================================================================= */

:root {
  --hs-green-dark: #17392F;
  --hs-green-primary: #00754A;
  --hs-green-mid: #33916e;
  --hs-green-light: #80BAA5;
  --hs-orange-accent: #EF8943;
  --hs-white: #FFFFFF;
  --hs-card-glass: rgba(23, 57, 47, 0.85);
  --hs-border-glass: rgba(128, 186, 165, 0.28);
}

.hs-calculator-section {
  position: relative;
  background-color: #0b1e19;
  padding: 100px 24px 110px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--hs-white);
  overflow: hidden;
  box-sizing: border-box;
}

.hs-calculator-section * {
  box-sizing: border-box;
}

.calc-wrapper-container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Header */
.calc-header {
  margin-bottom: 45px;
}

.calc-header.text-center {
  text-align: center;
}

.calc-badge {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--hs-orange-accent);
  border: 1px solid rgba(239, 137, 67, 0.35);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.calc-main-title {
  font-size: 38px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--hs-white);
  margin: 0 0 16px 0;
  letter-spacing: -0.02em;
}

.calc-main-text {
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 760px;
  margin: 0 auto;
}

/* Card Principal da Calculadora */
.calc-card-container {
  background: var(--hs-card-glass);
  border: 1.5px solid var(--hs-border-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 24px;
  padding: 44px 38px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}

/* Sliders */
.calc-slider-group {
  margin-bottom: 28px;
}

.calc-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.calc-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--hs-white);
}

.calc-value {
  color: var(--hs-green-light);
  font-size: 16px;
  font-weight: 700;
}

.slider-track-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 6px;
  background: #254a3e;
  outline: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hs-orange-accent);
  border: 3px solid var(--hs-green-dark);
  box-shadow: 0 0 10px rgba(239, 137, 67, 0.6);
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.calc-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: #f09555;
}

.calc-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hs-orange-accent);
  border: 3px solid var(--hs-green-dark);
  box-shadow: 0 0 10px rgba(239, 137, 67, 0.6);
  cursor: pointer;
}

/* Grid Comparativo de Resultados */
.calc-grid-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 36px;
  margin-bottom: 26px;
}

.calc-result-card {
  border-radius: 16px;
  padding: 24px 22px;
  background: rgba(14, 38, 31, 0.7);
  position: relative;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.calc-result-card:hover {
  transform: translateY(-3px);
}

.card-unoptimized {
  border: 1.5px solid rgba(239, 137, 67, 0.45);
}

.card-optimized {
  border: 1.5px solid var(--hs-green-light);
  background: linear-gradient(135deg, rgba(0, 117, 74, 0.3) 0%, rgba(23, 57, 47, 0.85) 100%);
  box-shadow: 0 8px 25px rgba(0, 117, 74, 0.2);
}

.optimized-spark {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--hs-green-primary);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 100px;
}

.result-tag {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 10px;
}

.tag-alert { color: #FFB380; }
.tag-success { color: var(--hs-green-light); }

.result-info-label {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13.5px;
  display: block;
  margin-bottom: 8px;
}

.result-main-val {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}

.text-white { color: var(--hs-white); }
.text-mint { color: #80BAA5; }

.result-sub-info {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
  display: block;
}

/* Box de Economia Anual */
.calc-savings-box {
  border: 1.5px dashed var(--hs-green-light);
  border-radius: 16px;
  padding: 26px 20px;
  text-align: center;
  background: rgba(0, 117, 74, 0.15);
  margin-bottom: 26px;
}

.savings-label {
  font-size: 14.5px;
  color: var(--hs-white);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.savings-value {
  font-size: 36px;
  font-weight: 800;
  color: #80BAA5;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.savings-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  display: block;
  font-weight: 500;
}

/* Botão de Ação CTA */
.calc-btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  background-color: var(--hs-orange-accent);
  color: var(--hs-white);
  text-align: center;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 18px 24px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 10px 25px rgba(239, 137, 67, 0.35);
}

.calc-btn-cta:hover {
  background-color: #f09555;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(239, 137, 67, 0.45);
}

.calc-btn-cta svg {
  transition: transform 0.2s ease;
}

.calc-btn-cta:hover svg {
  transform: translateX(4px);
}

/* Microcopy */
.calc-microcopy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.55);
}

.calc-microcopy svg {
  flex-shrink: 0;
  color: var(--hs-green-light);
  margin-top: 3px;
}

.calc-microcopy p {
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
}

/* Responsividade */
@media (max-width: 768px) {
  .hs-calculator-section {
    padding: 60px 16px 70px;
  }

  .calc-main-title {
    font-size: 28px;
  }

  .calc-card-container {
    padding: 26px 18px;
  }

  .calc-grid-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .savings-value {
    font-size: 28px;
  }

  .calc-btn-cta {
    font-size: 13.5px;
    padding: 16px 18px;
    flex-direction: column;
    gap: 6px;
  }
/* =================================================================
   HUBSPOT CUSTOM MODULE - JS (VERSÃO CORRIGIDA E BLINDADA)
   ================================================================= */

(function () {
  function initCalculadora() {
    var inputCallsDay = document.getElementById("inputCallsDay");
    var inputMsgsCall = document.getElementById("inputMsgsCall");
    var inputDaysMonth = document.getElementById("inputDaysMonth");

    // Se os elementos ainda não estiverem no DOM, aguarda brevemente
    if (!inputCallsDay || !inputMsgsCall || !inputDaysMonth) {
      setTimeout(initCalculadora, 100);
      return;
    }

    function formatBR(val) {
      return val.toLocaleString("pt-BR", { style: "currency", currency: "BRL" });
    }

    function updateSliderBackground(slider) {
      var min = parseFloat(slider.min) || 0;
      var max = parseFloat(slider.max) || 100;
      var value = parseFloat(slider.value) || 0;
      var percentage = max === min ? 0 : ((value - min) / (max - min)) * 100;
      slider.style.background =
        "linear-gradient(to right, #00754A 0%, #00754A " +
        percentage +
        "%, #254a3e " +
        percentage +
        "%, #254a3e 100%)";
    }

    function runCalculation() {
      var callsDay = parseInt(inputCallsDay.value, 10) || 0;
      var msgsCall = parseInt(inputMsgsCall.value, 10) || 0;
      var daysMonth = parseInt(inputDaysMonth.value, 10) || 0;

      // Elementos de exibição de valores nos sliders
      var elValCalls = document.getElementById("valCallsDay");
      var elValMsgs = document.getElementById("valMsgsCall");
      var elValDays = document.getElementById("valDaysMonth");

      if (elValCalls) elValCalls.innerText = callsDay.toLocaleString("pt-BR") + " atendimentos";
      if (elValMsgs) elValMsgs.innerText = msgsCall + " mensagens";
      if (elValDays) elValDays.innerText = daysMonth + " dias";

      // Atualiza visual das barras
      updateSliderBackground(inputCallsDay);
      updateSliderBackground(inputMsgsCall);
      updateSliderBackground(inputDaysMonth);

      // Lógica de cálculo
      var totalMsgsMonth = callsDay * msgsCall * daysMonth;
      var ratePerMsg = 0.035; // R$ 0,035 por mensagem

      var costNoOpt = totalMsgsMonth * ratePerMsg;
      var msgsSelbetti = totalMsgsMonth * 0.25;
      var costSelbetti = msgsSelbetti * ratePerMsg;

      var monthSavings = costNoOpt - costSelbetti;
      var yearSavings = monthSavings * 12;

      // Elementos de saída
      var elCostNoOpt = document.getElementById("valCostNoOpt");
      var elMsgsNoOpt = document.getElementById("valMsgsNoOpt");
      var elCostSelbetti = document.getElementById("valCostSelbetti");
      var elMsgsSelbetti = document.getElementById("valMsgsSelbetti");
      var elYearSavings = document.getElementById("valYearSavings");
      var elMonthSavings = document.getElementById("valMonthSavings");

      if (elCostNoOpt) elCostNoOpt.innerText = formatBR(costNoOpt) + "/mês";
      if (elMsgsNoOpt) elMsgsNoOpt.innerText = totalMsgsMonth.toLocaleString("pt-BR") + " msgs faturadas";
      if (elCostSelbetti) elCostSelbetti.innerText = formatBR(costSelbetti) + "/mês";
      if (elMsgsSelbetti) elMsgsSelbetti.innerText = Math.round(msgsSelbetti).toLocaleString("pt-BR") + " msgs faturadas";
      if (elYearSavings) elYearSavings.innerText = formatBR(yearSavings) + " / ano";
      if (elMonthSavings) elMonthSavings.innerText = "Economia de " + formatBR(monthSavings) + "/mês (75% de redução)";
    }

    // Escuta eventos input e change em cada slider
    var sliders = [inputCallsDay, inputMsgsCall, inputDaysMonth];
    sliders.forEach(function (slider) {
      slider.addEventListener("input", runCalculation);
      slider.addEventListener("change", runCalculation);
    });

    // Executa imediatamente para calcular os valores iniciais
    runCalculation();
  }

  // Garante a execução independentemente do timing do DOM no HubSpot
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initCalculadora);
  } else {
    initCalculadora();
  }
})();