// GENERAL
body {
  margin-top: 2rem;
  font-family: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium",
    "Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
}

.friendly {
  margin-block: 3rem;
}

// Counter STYLES
.stepper {
  display: inline-flex;
  margin-block: 0.5rem;
  &:hover {
    button {
      background: #777;
    }
    input {
      border-color: #777;
    }
  }
  //Buttons Style
  button {
    flex-shrink: 0;
    outline: none;
    background: dodgerblue;
    color: #fff;
    width: 40px;
    height: 40px;
    font-size: 11px;
    transition: background 0.4s;
    &:first-of-type {
      border-radius: 5px 0 0 5px;
    }
    &:last-of-type {
      border-radius: 0 5px 5px 0;
    }
  }
  //Display Style
  input {
    margin: 0;
    width: 100%;
    max-width: 160px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 2px solid dodgerblue;
    border-left: 0;
    border-right: 0;
    color: #666;
    font-weight: bold;
    font-size: 1.125rem;
    transition: border 0.4s;
  }
}

.column {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 1rem;
  justify-content: center;
  label {
    font-size: 1rem;
    flex-shrink: 0;
    display: block;
    min-width: 120px;
    flex-shrink: 0;
    text-align: right;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

input {
  text-align: center;
}

@media (max-width: 500px) {
  label {
    width: 100%;
    text-align: left !important;
  }
  .column {
    justify-content: flex-start;
  }
  .add-to-basket {
    //margin-left: auto;
    font-size: 2rem;
  }
}

var steppers = document.querySelectorAll(".stepper");

steppers.forEach(function (stepper) {
  var add = stepper.querySelector(".add");
  var sub = stepper.querySelector(".sub");
  var display = stepper.querySelector("input");
  var oldValue = display.value; // Added line: store the old value initially

  // Plus 1
  add.addEventListener("click", function () {
    var value = parseInt(display.value);
    oldValue = display.value = value + 1; // Modified line: keep the new value
  });

  // Minus 1
  sub.addEventListener("click", function () {
    var value = parseInt(display.value);
    if (value > 1) {
      oldValue = display.value = value - 1; // Modified line: keep the new value
    }
  });

  // Added code: clear the input on focus
  display.addEventListener("focus", function () {
    display.value = "";
  });

  // Added code: if the input is still empty when it loses focus, restore the old value
  display.addEventListener("blur", function () {
    if (display.value === "") {
      display.value = oldValue;
    } else {
      oldValue = display.value; // keep the newly inserted value
    }
  });
});


var addToBasketButtons = document.querySelectorAll('.add-to-basket');

addToBasketButtons.forEach(function(button) {
  button.addEventListener('click', function() {
    var stepperValue = this.previousElementSibling.querySelector('input').value;
    alert(`${stepperValue} item(s) added to basket`);
  });
});