/* Piksel Custom Stylesheet */
:root {
  --color-brand: #17794f;
  --color-ink: #13392c;
  --color-mint: #b6f3d6;
  --color-soft: #eef7f2;
  --color-page: #f4f6f5;
}

/* Custom Range Slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 9px;
  outline: none;
  background: linear-gradient(to right, #17794f var(--p, 80%), #e3e8e5 var(--p, 80%));
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #17794f;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.1s ease, border-color 0.1s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #17794f;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Toggle Switch */
.sw {
  width: 44px;
  height: 26px;
  border-radius: 99px;
  background: #d5dbd8;
  position: relative;
  transition: background-color 0.2s ease;
  flex: none;
  cursor: pointer;
  border: none;
  padding: 0;
}

.sw::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sw.on {
  background: #17794f;
}

.sw.on::after {
  left: 21px;
}

.sw:focus-visible {
  outline: 2px solid #17794f;
  outline-offset: 2px;
}

/* Drag-and-drop active hover state */
.drag {
  background-color: #dff3e8 !important;
  border-color: #17794f !important;
  transform: scale(1.005);
}

/* Spinner for processing state */
.spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Smooth fade-in utility */
.fade-in {
  animation: fadeIn 0.25s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}