/* ===== COMMON.CSS =====
   Shared styles loaded by all three layouts:
     - views/layouts/main.ejs        (survey-facing)
     - views/admin/layout.ejs        (admin)
     - views/admin/survey-builder.ejs (builder)
   ===================================================== */

/* ===== CUSTOM NUMBER INPUT BUTTONS ===== */
/* Suppress native browser spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Wrapper — relative so the button column can be absolutely positioned */
.number-input-wrap {
  position: relative;
  display: inline-flex;
}

/* Reserve space on the right for the +/- column */
.number-input-wrap input[type="number"] {
  padding-right: 34px;
}

/* The +/- button column */
.number-btns {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 30px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #ddd;
  border-radius: 0 2px 2px 0;
  overflow: hidden;
}

.number-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #999;
  padding: 0;
  line-height: 1;
  transition: background 0.1s, color 0.1s;
}

.number-btn:hover {
  background: #f0f0f0;
  color: #333;
}

.number-btn:active {
  background: #e0e0e0;
}

.number-btn-up {
  border-bottom: 1px solid #ddd;
}

.number-btn svg {
  pointer-events: none;
}