#ghg-calculator {
  width: 100%;
  min-height: 90vh;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 80px 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-radius: 10px;
}
/* Stepper */
#ghg-steps {
  width: 17%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#ghg-steps .step {
  flex: 1;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
  border-bottom: 3px solid #bdbdbd;
  color: #666;
  user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#ghg-steps .step.active {
  border-bottom: 3px solid #9aa0a6;
  color: #333;
}
#ghg-steps .step.completed {
  border-bottom: 3px solid #4c9b84;
  color: #4c9b84;
}
#ghg-steps > .step > h3 {
  font-size: 16px !important;
  margin: 0;
}
/*Form*/
#ghg-form {
  width: 78%;
}
/* tabs */
#ghg-calculator .tab {
  display: none;
}
#ghg-calculator .tab.active {
  display: block;
}
#ghg-calculator #ghg-form label, 
#ghg-calculator #ghg-form .info,
#ghg-calculator #ghg-form .technique,
#ghg-calculator #ghg-form .info,
select option[value=""] {
  color: #333 !important;
}
.info {
  margin-bottom: 40px;
  font-size: 18px;
}
.asteriks {
  color: #d35a67;
}
.biogorivo,
.waste-water,
.products {
  margin-top: 60px;
  border-top: 1px solid #4c9b84;
  padding-top: 60px;
}
.info {
  position: relative;
}
.tooltip {
  /*position: relative;*/
  display: inline-block;
  margin-left: 8px;
  color: #4c9b84;
  border-radius: 100%;
  border: 1px solid #4c9b84;
  padding: 0 12px;
  cursor: pointer;
  font-weight: bold;
}
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 35px;
  left: 0;
  right: 0;
  background: #fff;
  color: #333;
  padding: 6px 8px;
  border-radius: 4px;
  width: 500px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 9999;
  font-size: 16px;
  font-weight: normal;
  display: none;
  white-space: pre-line;
}
.tooltip:hover::after {
  opacity: 1;
  display: block;
}
/* form inputs */
.workshop-data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.workshop-data .input-group {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 20px;
}
.workshop-label,
.headquoters-label,
.year-label,
.email-label {
  margin-bottom: 10px;
  margin-top: 15px;
  width: 35%;
}
#workshop,
#headquoters,
#email,
#year {
  width: 50%;
  padding: 8px 16px;
  box-sizing: border-box;
  border: 1px solid #333;
  border-radius: 100px;
}
input:focus,
input:active,
.nonmelted-glass-row select:focus,
.nonmelted-glass-row select:active,
/*.nonmelted-glass-row select:focus-within,*/
.fuel-row select:focus,
.fuel-row select:active,
/*.fuel-row select:focus-within,*/
.biofuel-row select:focus,
.biofuel-row select:active,
/*.biofuel-row select:focus-within,*/
.fluid-row select:focus,
.fluid-row select:active,
/*.fluid-row select:focus-within,*/
.electricity-row select:focus,
.electricity-row select:active,
/*.electricity-row select:focus-within,*/
.waste-row select:focus,
.waste-row select:active
/*.waste-row select:focus-within */ {
  outline: none !important;
  border: 2px solid #88C5B3 !important;
}
.technique {
  margin-top: 45px;
  margin-bottom: 15px;
}
.melted-glass-row,
.primary-row,
.secondary-row,
.nonmelted-glass-row,
.products-row,
.product-unit-row,
.fuel-row,
.biofuel-row,
.waste-row,
.electricity-row,
.water-row,
.waste-water-row,
.fluid-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.primary-row {
  margin-bottom: 10px;
}
.nonmelted-glass-row:not(:first-child),
.fuel-row:not(:first-child),
.biofuel-row:not(:first-child),
.fluid-row:not(:first-child),
.waste-row:not(:first-child),
.ghg-max-warning,
.ghg-error-pair,
.ghg-error {
  margin-top: 10px;
}
.workshop-data p.ghg-error {
  text-align: right;
  padding-right: 20%;
}
.inputs-wrapper {
  display: flex;
  width: 91%;
}
.button-wrapper {
  display: flex;
  width: 8%;
  justify-content: center;
  align-items: center;
}
.melted-glass-row label,
.primary-row label,
.secondary-row label,
.products-row label,
.product-unit-row label,
.fuel-row select,
.biofuel-row select,
.waste-row select,
.electricity-row select,
.water-row label,
.waste-water-row label,
.fluid-row select,
.nonmelted-glass-row select {
  flex: 5;
  padding: 8px 16px;
  box-sizing: border-box;
  border: 1px solid #333;
  border-radius: 100px 0 0 100px;
}
.waste-water-row label,
.water-row label,
.melted-glass-row label,
.primary-row label,
.secondary-row label,
.products-row label,
.product-unit-row label {
  background: #fff;
  display: flex;
  align-items: center;
}
.fuel-row input[name="fuel-amount[]"],
.biofuel-row input[name="biofuel-amount[]"],
.waste-row input[name="waste-amount[]"],
.electricity-row input[name="electricity-amount[]"],
.water-row input[name="water-amount[]"],
.waste-water-row input[name="waste-water-amount[]"],
.fluid-row input[name="fluid-amount[]"],
.melted-glass-row input[name="melted-glass-amount[]"],
.primary-row input[name="primary-amount[]"],
.secondary-row input[name="secondary-amount[]"],
.nonmelted-glass-row input[name="nonmelted-glass-amount[]"],
.products-row input[name="products-amount[]"],
.product-unit-row input[name="product-unit-amount[]"] {
  flex: 2;
  padding: 8px 16px;
  box-sizing: border-box;
  border: 1px solid #333;
  border-radius: 0;
  margin-left: 5px;
}
.biofuel-row .unit,
.waste-row .unit,
.fuel-row .unit,
.electricity-row .unit,
.water-row .unit,
.waste-water-row .unit,
.fluid-row .unit,
.melted-glass-row .unit,
.primary-row .unit,
.secondary-row .unit,
.nonmelted-glass-row .unit,
.products-row .unit,
.product-unit-row .unit {
  flex: 2;
  margin-left: 5px;
  padding: 8px 16px;
  box-sizing: border-box;
  border: 1px solid #333;
  border-radius: 0 100px 100px 0;
  background: #f0f0f0;
  color: #666;
  text-align: center;
}
#add-fuel,
#add-biofuel,
#add-waste,
#add-fluid,
#add-material {
  margin-top: 20px;
  cursor: pointer;
  font-weight: 500;
  border: 1px solid #4c9b84;
  border-radius: 100px;
  color: #4c9b84;
  font-size: 20px;
  padding: 0 10px;
}
.remove-row {
  cursor: pointer;
  font-weight: 500;
  border: 1px solid #4c9b84 !important;
  border-radius: 100px !important;
  color: #4c9b84 !important;
  font-size: 20px !important;
  padding: 0 11px !important;
}
.remove-row:focus,
.remove-row:active,
.remove-row:hover {
  background: #4c9b84 !important;
  color: #fff !important;
}
#add-fuel:hover,
#add-fuel:focus,
#add-fuel:active,
#add-biofuel:hover,
#add-biofuel:focus,
#add-biofuel:active,
#add-waste:hover,
#add-waste:focus,
#add-waste:active,
#add-material:hover,
#add-material:focus,
#add-material:active,
#add-fluid:hover,
#add-fluid:active,
#add-fluid:focus {
  background: #4c9b84;
  color: #fff;
}
/* General select styling */
#ghg-form select {
  appearance: none; /* skida default stil browsera */
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none; /* Firefox */
  background: #fff
    url("data:image/svg+xml;utf8,<svg fill='%23333' height='22' viewBox='0 0 24 24' width='22' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>")
    no-repeat right 12px center;
  transition: border-color 0.2s, box-shadow 0.2s;
  @supports (appearance: base-select) {
    &,
    &::picker(select) {
      appearance: base-select;
    }
    &::picker(select) {
      border: none;
      border-radius: 10px;
      border: 1px solid #333;
      margin: 2px;
      padding-top: 5px;
      padding-bottom: 5px;
    }
    &::picker-icon,
    & option::checkmark {
      display: none;
    }
    & option {
      padding: 5px 15px 5px 15px;
    }
    & option:focus-visible {
      outline: -webkit-focus-ring-color auto 0px !important;
    }
  }
}
#ghg-form select.open {
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23333' height='22' viewBox='0 0 24 24' width='22' xmlns='http://www.w3.org/2000/svg'><path d='M7 14l5-5 5 5z'/></svg>");
}
/*Uklanjanje strelica sa input type number*/
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  /*margin: 0;*/
}
input[type="number"] {
  appearance: none; /* standardno, podržano u većini modernih browsera */
  -webkit-appearance: none; /* Chrome, Safari, Edge */
  -moz-appearance: textfield; /* Firefox (warning je normalan, ali radi) */
  margin: 0; /* uklanja eventualni dodatni prostor */
}
/*removable templete row*/
.template {
  display: none;
}
.consent {
  margin-top: 80px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#privacy_consent {
  margin-right: 10px;
  margin-bottom: 10px;
}
.privacy-link {
  border-bottom: 1px dotted #333;
}
/* nav buttons */
.nav-buttons {
  margin-top: 60px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-self: flex-end;
}
.nav-buttons button,
#print-ghg {
  padding: 8px 14px;
  cursor: pointer;
  border: 1px solid #4c9b84;
  color: #3c7b69;
  font-weight: 500;
}
.nav-buttons button:hover,
.nav-buttons button:active,
.nav-buttons button:focus,
#print-ghg:hover,
#print-ghg:focus,
#print-ghg:active {
  background: #4c9b84;
  color: #fff;
}
.nav-buttons .prev {
  border-radius: 100px 0 0 100px;
}
.nav-buttons .next,
.nav-buttons #calculate-ghg {
  border-radius: 0 100px 100px 0;
}
.nav-buttons .next.first {
  border-radius: 100px;
  padding-left: 20px;
  padding-right: 20px;
}
/*error states*/
.ghg-error-border {
  border: 2px solid #d35a67!important;
}
p.ghg-error {
  color: #c93948;
  font-size: 14px;
}
.ghg-error {
  width: 100%;
}
.consent .ghg-error-privacy {
  width: 100%;
  display: block;
  margin-top: 5px;
}
/*results*/
#ghg-results-container {
  width: 100%;
}
#results-container {
  width: 900px;
  min-width: 750px;
  padding: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}
#results-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 30px;
}
.results-total,
.results-indir,
.operating-costs {
  width: 100%;
  border-bottom: 0.2px solid #333;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 10px;
}
.results-total {
  font-weight: bold;
  font-size: 17px;
}
.results-indir {
  font-size: 16px;
  color: #333;
}
.operating-costs {
  font-size: 14px;
  color: #333;
}
span.number,
span.text {
  display: flex;
}
span.text {
  width: 65%;
}
.results-indir span.text {
  padding-left: 10px;
}
.operating-costs span.text {
  padding-left: 25px;
}
span.number {
  text-align: left;
  width: 35%;
  justify-content: space-between;
  gap: 10px;
}
span.percentage {
  display: block;
  width: 40%;
}
#print-ghg {
  border-radius: 100px;
  margin-top: 20px;
  align-self: center;
}
.nodata {
  font-weight: 500;
  color: #333;
  font-size: 16px;
}
/* ---------- Print styles: Izveštaj kao dokument ---------- */
@media print {
  /* Sakrij elemente na stranici koji ne treba da se stampaju */
  header,
  footer,
  #print-ghg,
  #back-to-calculator {
    display: none !important;
  }
  #results-container {
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: #fff !important;
    box-shadow: none !important;
    font-family: Verdana, sans-serif !important;
    color: #000 !important;
  }
  #results-container #results-title {
    font-size: 22px;
    margin-bottom: 50px;
  }
  #results-container .results-total {
    font-size: 14px;
  }
  #results-container .results-indir {
    font-size: 13px;
  }
  #results-container .operating-costs {
    font-size: 12px;
  }
  /* Skloni default header/footer */
  @page {
    margin-top: 0;
    margin-bottom: 0;
  }
  html::-webkit-print-preview-page {
    margin: 0 !important;
  }
}

/*responsive*

/* === Mobile (accordion) === */
@media screen and (max-width: 767px) {
  #ghg-calculator {
    flex-wrap: wrap;
    padding: 15px 15px 35px 15px;
  }
  #ghg-steps {
    width: 100%;
  }
  #ghg-steps .step {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  #ghg-form {
    width: 100%;
    margin-top: 25px;
  }
  #ghg-calculator .tab.open {
    width: 100%;
    padding-top: 45px;
    display: block;
  }
  .workshop-label,
  .headquoters-label,
  .year-label,
  .email-label {
    width: 100%;
  }
  #workshop,
  #headquoters,
  #email,
  #year {
    width: 100%;
  }
  .tooltip::after {
    max-width: 90vw;
    transform: translateX(-15px);
  }
  .products-row label,
  .product-unit-row label {
    display: none;
  }
  .products-row input[name="products-amount[]"],
  .product-unit-row input[name="product-unit-amount[]"] {
    border-radius: 100px 0 0 100px;
  }
  .products-row .inputs-wrapper,
  .product-unit-row .inputs-wrapper {
    width: 100%;
  }
  .inputs-wrapper {
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .primary-row,
  .secondary-row,
  .nonmelted-glass-row,
  .fuel-row,
  .biofuel-row,
  .waste-row,
  .fluid-row {
    margin-bottom: 18px;
  }
  .melted-glass-row label,
  .primary-row label,
  .secondary-row label,
  .fuel-row select,
  .biofuel-row select,
  .waste-row select,
  .electricity-row select,
  .water-row label,
  .waste-water-row label,
  .fluid-row select,
  .nonmelted-glass-row select {
    border: 1px solid #333;
    border-radius: 100px;
    flex: 0 0 100%;
    margin-bottom: 8px;
  }
  .fuel-row input[name="fuel-amount[]"],
  .biofuel-row input[name="biofuel-amount[]"],
  .waste-row input[name="waste-amount[]"],
  .electricity-row input[name="electricity-amount[]"],
  .water-row input[name="water-amount[]"],
  .waste-water-row input[name="waste-water-amount[]"],
  .fluid-row input[name="fluid-amount[]"],
  .melted-glass-row input[name="melted-glass-amount[]"],
  .primary-row input[name="primary-amount[]"],
  .secondary-row input[name="secondary-amount[]"],
  .nonmelted-glass-row input[name="nonmelted-glass-amount[]"] {
    border-radius: 100px 0 0 100px;
    flex: 0 0 48%;
  }
  .biofuel-row .unit,
  .waste-row .unit,
  .fuel-row .unit,
  .electricity-row .unit,
  .water-row .unit,
  .waste-water-row .unit,
  .fluid-row .unit,
  .melted-glass-row .unit,
  .primary-row .unit,
  .secondary-row .unit,
  .nonmelted-glass-row .unit,
  .products-row .unit,
  .product-unit-row .unit {
    flex: 0 0 48%;
  }
  /*rezultati*/
  #results-container {
    width: 100%;
    padding: 30px 10px;
    min-width: 300px;
  }
  #results-title {
    font-size: 17px;
  }
  .results-total {
    font-size: 16px;
  }
  .results-indir {
    font-size: 15px;
  }
  .results-total,
  .results-indir,
  .operating-costs {
    flex-wrap: wrap;
  }
  span.text {
    flex: 0 0 100%;
  }
  span.percentage {
    flex: 0 0 36%;
  }
  span.number {
   flex: 0 0 60%; 
    margin-left: 25px;
  }
  input[disabled] {
    font-size: 14px;
    align-self: stretch;
  }
 .unit-m3 {
    font-size: 12px !important;
  }
}