.cashier--100 {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 100dvh;
  height: max-content;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  z-index: 1000;
}
.cashier--100::before {
  content: "";
  display: block;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  position: absolute;
  background: rgba(0, 0, 0, 0.5019607843);
}
.cashier--100 > * {
  position: relative;
  z-index: 1;
}
.cashier--100 .cashier__content {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
.cashier--100 .cashier__header {
  height: 54px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px;
}
@media screen and (min-width: 1024px) {
  .cashier--100 .cashier__header {
    padding: 16px 0;
  }
}
.cashier--100 .cashier__header__title {
  /* flex: 1 1 0; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  color: #ffffff;
  font: 700 14px/16px "Open Sans", sans-serif;
}
.cashier--100 .cashier__button {
  cursor: pointer;
}
.cashier--100 .cashier__button--go-back {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  color: #ff6600;
}
.cashier--100 .cashier__button--go-back::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 19 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.6673 8.85417H4.72253L11.1277 2.44896L9.50065 0.833334L0.333984 10L9.50065 19.1667L11.1163 17.551L4.72253 11.1458H18.6673V8.85417Z' fill='currentColor'/%3E%3C/svg%3E%0A");
}
.cashier--100 .cashier__button--add-favourite {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  color: #ffffff;
}
.cashier--100 .cashier__button--add-favourite::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M442.9 144C415.6 144 389.9 157.1 373.9 179.2L339.5 226.8C335 233 327.8 236.7 320.1 236.7C312.4 236.7 305.2 233 300.7 226.8L266.3 179.2C250.3 157.1 224.6 144 197.3 144C150.3 144 112.2 182.1 112.2 229.1C112.2 279 144.2 327.5 180.3 371.4C221.4 421.4 271.7 465.4 306.2 491.7C309.4 494.1 314.1 495.9 320.2 495.9C326.3 495.9 331 494.1 334.2 491.7C368.7 465.4 419 421.3 460.1 371.4C496.3 327.5 528.2 279 528.2 229.1C528.2 182.1 490.1 144 443.1 144zM335 151.1C360 116.5 400.2 96 442.9 96C516.4 96 576 155.6 576 229.1C576 297.7 533.1 358 496.9 401.9C452.8 455.5 399.6 502 363.1 529.8C350.8 539.2 335.6 543.9 320 543.9C304.4 543.9 289.2 539.2 276.9 529.8C240.4 502 187.2 455.5 143.1 402C106.9 358.1 64 297.7 64 229.1C64 155.6 123.6 96 197.1 96C239.8 96 280 116.5 305 151.1L320 171.8L335 151.1z'/%3E%3C/svg%3E");
}
.cashier--100 .cashier__button--add-favourite[data-selected=true]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M305 151.1L320 171.8L335 151.1C360 116.5 400.2 96 442.9 96C516.4 96 576 155.6 576 229.1L576 231.7C576 343.9 436.1 474.2 363.1 529.9C350.7 539.3 335.5 544 320 544C304.5 544 289.2 539.4 276.9 529.9C203.9 474.2 64 343.9 64 231.7L64 229.1C64 155.6 123.6 96 197.1 96C239.8 96 280 116.5 305 151.1z'/%3E%3C/svg%3E");
}
.cashier--100 .cashier__button--confirm {
  padding: 12px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #40b840;
  color: #ffffff;
  font: 600 16px/24px "Open Sans", sans-serif;
}
.cashier--100 .cashier__buttons-container {
  width: 80%;
  display: flex;
  gap: 8px;
}
.cashier--100 .cashier__buttons-container > * {
  flex: 1 1 0;
}
.cashier--100 .cashier__game {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.6980392157);
}
@media screen and (min-width: 1024px) {
  .cashier--100 .cashier__game {
    grid-column: 1/span 1;
    grid-row: 1/span 2;
  }
}
@media screen and (min-width: 1024px) {
  .cashier--100 .cashier__game {
    border-radius: 0;
    background: transparent;
    flex-direction: column;
    align-items: flex-start;
  }
}
.cashier--100 .cashier__game__img img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
}
@media screen and (min-width: 1024px) {
  .cashier--100 .cashier__game__img img {
    width: 196px;
    height: 221px;
    border-radius: 16px;
  }
}
.cashier--100 .cashier__game__title {
  padding: 0 16px;
  color: #ffffff;
  font: 700 14px/16px "Open Sans", sans-serif;
}
@media screen and (min-width: 1024px) {
  .cashier--100 .cashier__game__title {
    padding: 0;
  }
}
.cashier--100 .cashier__body {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 8px;
  padding: 16px;
}
@media screen and (min-width: 1024px) {
  .cashier--100 .cashier__body {
    grid-template-columns: max-content 1fr;
  }
}
@media screen and (min-width: 1024px) {
  .cashier--100 .cashier__body {
    padding: 16px 0;
  }
}
.cashier--100 .cashier__box {
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.6980392157);
  box-sizing: border-box;
}
@media screen and (min-width: 1024px) {
  .cashier--100 .cashier__box {
    grid-column: 2/span 1;
  }
}
.cashier--100 .cashier__recap {
  color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 8px 16px;
}
.cashier--100 .cashier__recap__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 36px;
}
.cashier--100 .cashier__recap__row > * {
  flex: 1 1 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  font: 700 14px/16px "Open Sans", sans-serif;
}
.cashier--100 .cashier__recap__row > *:nth-child(1) {
  text-align: left;
}
.cashier--100 .cashier__recap__row > *:nth-child(2) {
  text-align: right;
}
.cashier--100 .cashier__credit {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.cashier--100 .cashier__credit__title {
  max-width: 248px;
  text-align: center;
  color: #ffffff;
  font: 600 16px/100% "Open Sans", sans-serif;
}
.cashier--100 .cashier__picker {
  display: flex;
  gap: 8px;
}
.cashier--100 .cashier__picker > * {
  flex: 1 1 0;
}
.cashier--100 .cashier__footer {
  margin-top: auto;
  padding: 16px;
}
@media screen and (min-width: 1024px) {
  .cashier--100 .cashier__footer {
    padding: 16px 0;
  }
}
.cashier--100 .cashier__selected-amount {
  color: #ffffff;
  border-radius: 8px;
  padding: 8px 16px;
  border: 1px solid #ff6600;
  font: 700 18px/20px "Open Sans", sans-serif;
}
.cashier--100 .cashier__amount-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cashier--100 .cashier__amount-picker__value {
  cursor: pointer;
  user-select: none;
  border-radius: 999px;
  padding: 8px 16px;
  font: 700 12px/16px "Open Sans", sans-serif;
  background: #000000;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.cashier--100 .cashier__amount-picker__value--selected {
  background: #000000;
  color: #ffffff;
  border: 1px solid #ff6600;
}

.custom-radio--200 {
  --accent-color: #ffffff33;
  --dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M528 320C528 205.1 434.9 112 320 112C205.1 112 112 205.1 112 320C112 434.9 205.1 528 320 528C434.9 528 528 434.9 528 320zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320z'/%3E%3C/svg%3E");
  padding: 4px 8px 8px 16px;
  border-radius: 8px;
  border: 2px solid var(--accent-color);
  /* width: 50px; */
}
.custom-radio--200:has(input:checked) {
  --accent-color: #ff6600;
  --dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 112C205.1 112 112 205.1 112 320C112 434.9 205.1 528 320 528C434.9 528 528 434.9 528 320C528 205.1 434.9 112 320 112zM320 416C267 416 224 373 224 320C224 267 267 224 320 224C373 224 416 267 416 320C416 373 373 416 320 416z'/%3E%3C/svg%3E");
}
.custom-radio--200 .custom-radio__label {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.custom-radio--200 .custom-radio__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: #ffffff;
}
.custom-radio--200 .custom-radio__text span:nth-child(1) {
  font: 400 14px/20px "Open Sans", sans-serif;
}
.custom-radio--200 .custom-radio__text span:nth-child(2) {
  font: 700 14px/20px "Open Sans", sans-serif;
}
.custom-radio--200 input {
  display: none;
}
.custom-radio--200 .custom-radio__dot {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.custom-radio--200 .custom-radio__dot::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-image: var(--dot);
  background-color: var(--accent-color);
}
.custom-radio--200 .custom-radio__img {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.custom-radio--200 .custom-radio__img img {
  display: block;
  height: 32px;
  width: 32px;
  object-fit: contain;
}

.custom-range--100 {
  width: 100%;
}
.custom-range--100 input {
  width: 100%;
  accent-color: #40b840;
}
.custom-range--100 .custom-range__info {
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  gap: 8px;
  color: #ffffff;
}
.custom-range--100 .custom-range__desc {
  font: 400 12px/120% "Open Sans", sans-serif;
}
.custom-range--100 .custom-range__amount {
  font: 700 12px/120% "Open Sans", sans-serif;
}
.custom-range--100 .custom-range__amount:first-child {
  text-align: left;
}
.custom-range--100 .custom-range__amount:last-child {
  text-align: end;
}
.cashier--100 .cashier__credit__title.cashier__credit__title--error{
	color: red;
    font-size: 14px;
    font-weight: 400;
}