@keyframes fnAutoFill {
  to {
    font-family: inherit;
    font-size: inherit;
  }
}
.order-form {
  --spd-back: #263345;
  --spd-alt-back: #1f2d41;
  --spd-color: #bebebe;
  --spd-alt-border: 1px solid #102437;
  --spd-border: 5px solid #3c5272;
  --product-count: 2;
}
.order-form .__flex-row {
  display: flex;
  gap: 0.8em;
  align-items: center;
  box-sizing: border-box;
}
.order-form .__flex-row .fill {
  flex: 1 1 auto;
}
.order-form .title {
  flex: 1 1 auto;
  width: 100%;
}
.order-form .quantity {
  font-size: 0.8em;
  color: #ccc;
}
.order-form :where(.unit-price) {
  font-size: 1.2em;
  color: #cd712d;
  white-space: nowrap;
  font-weight: 500;
  text-align: right;
  min-width: 5em;
}
.order-form :where(.price) {
  font-size: 1.2em;
  white-space: nowrap;
  font-weight: 500;
  text-align: right;
  min-width: 5em;
  color: #d7b88f;
}
.order-form .link {
  font-size: 1rem;
}
.order-form .quantity-price {
  display: flex;
  gap: 0.8em;
  align-items: center;
  box-sizing: border-box;
  font-size: 0.8em;
  color: #ccc;
}
.order-form .quantity-price .fill {
  flex: 1 1 auto;
}
.order-form .quantity-price .free {
  font-size: 1.1em;
  color: red;
}
.order-form .quantity-price .unit-price {
  white-space: nowrap;
}
.order-form .quantity-price .x {
  font-size: 0.8em;
  opacity: 0.8;
}
.order-form .quantity-suffix {
  width: 8em;
  font-size: 0.8em;
  opacity: 0.7;
}
.order-form number-input {
  width: 10em;
}
.order-form .pay-actions {
  --inp-shade: #7d10e4;
  margin-top: 1em;
  display: flex;
  gap: 1em;
  align-items: center;
  justify-content: end;
  padding: 0;
  font-size: 1.2em;
  box-sizing: border-box;
}
.order-form .pay-actions .fill {
  flex: 1 1 auto;
}
.order-form .pay-actions .wide {
  width: 100%;
  text-align: center;
  justify-content: center;
}
.order-form .pay-actions .ok {
  background: red;
}
.order-form .order-group {
  border: 1px solid #21394f;
  padding: 1em;
  border-radius: 4px;
  background: #142739;
}
.order-form .order-group__title {
  flex: 1 1 auto;
}
.order-form .order-segment + .order-segment {
  margin-top: 1em;
}
.order-form .order-segment.date {
  position: relative;
  font-size: 1.2em;
  z-index: 1200;
}
.order-form .order-items__empty {
  display: flex;
  gap: 0.8em;
  align-items: center;
  box-sizing: border-box;
  padding: 1em;
  margin: 0;
  margin-top: 1em;
  border: 1px dashed #474747;
  border-radius: 4px;
  justify-content: space-between;
  background: #5f3b30;
  color: #b9ae8f;
}
.order-form .order-items__title {
  display: flex;
  gap: 0.8em;
  align-items: center;
  box-sizing: border-box;
  margin-bottom: 1em;
}
.order-form .order-items__title .fill {
  flex: 1 1 auto;
}
.order-form .order-items__title .title {
  flex: 1 1 auto;
  font-size: 1.3em;
  color: #90b7e0;
}
.order-form .order-items__title .link {
  --site-link-color: #5184b4;
  --site-link-hover-color: #aaa684;
  flex: 0 0 auto;
  white-space: nowrap;
}
.order-form .order-items__item {
  gap: 0.8em;
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: 1em;
}
.order-form .order-items__item .fill {
  flex: 1 1 auto;
}
.order-form .order-items__item .title .name {
  border-bottom: 1px dashed #6788a754;
  font-size: 1em;
}
.order-form .order-items__item .title .conditions {
  margin-top: 0.4em;
  font-size: 0.7em;
  color: #8f8c83;
}
.order-form .order-items__item .del {
  cursor: pointer;
  color: #915a49;
}
.order-form .order-items .order-items__item + .order-items__item {
  margin-top: 1em;
}
.order-form .products {
  display: grid;
  grid-template-columns: repeat(var(--product-count), 1fr);
  gap: 0.5em;
}
.order-form .product {
  padding: 0.6em;
  font-size: 1em;
  border-radius: 5px;
  border: 1px solid #2b3337;
  background: #0f1f35;
  box-shadow: 0 0 4px #00000055;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  box-sizing: border-box;
  --site-link-hover-style: none;
  --site-link-color: #99cbef;
  --site-link-hoiver-color: #99cbef;
}
.order-form .product.selected {
  border: 1px solid #f18b0f;
  background: #01171e;
}
.order-form .product__info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  gap: 0.5em;
  margin-bottom: 1em;
}
.order-form .product__imaged {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  padding: 1em;
}
.order-form .product__shade {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(128deg, #000608d9, #00000040);
}
.order-form .product__title {
  position: relative;
  z-index: 10;
}
.order-form .product__description {
  flex: 1 1 auto;
  font-size: 0.74em;
  color: #577b89;
}
.order-form .product__conditions {
  font-size: 0.7em;
  color: #979086;
}
.order-form .product__row {
  --check-back-checked: #1d4c57;
  display: grid;
  grid-template-areas: "check title price";
  grid-template-columns: auto 1fr auto;
  gap: 0em 0.5em;
  font-size: 1em;
  border-top: 1px solid #424d52;
  align-items: center;
  padding: 0.7em 0;
}
.order-form .product__row .check {
  grid-area: check;
}
.order-form .product__row .title {
  grid-area: title;
  color: #edb537;
}
.order-form .product__row .quantity-price {
  display: none;
  grid-area: unit;
  display: flex;
}
.order-form .product__row .price {
  grid-area: price;
}
.order-form .order-totals {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  gap: 0.5em;
}
.order-form .order-totals__row {
  display: flex;
  gap: 0.8em;
  align-items: center;
  box-sizing: border-box;
}
.order-form .order-totals__row .fill {
  flex: 1 1 auto;
}
.order-form .order-totals__row__title {
  flex: 1 1 auto;
}
.order-form .order-totals .total {
  font-size: 1.1em;
  font-weight: 500;
  margin-top: 0.4em;
  padding-top: 0.4em;
  border-top: 2px solid #0a1c2d;
}
.order-form .order-totals__row.total .quantity,
.order-form .order-totals__row.subtotal .quantity {
  visibility: hidden;
}
.order-form .order-totals__row:not(.total):not(.subtotal) {
  font-size: 0.9rem;
}
.order-form .order-totals__row:not(.total):not(.subtotal),
.order-form .order-totals__row:not(.total):not(.subtotal) .price,
.order-form .order-totals__row:not(.total):not(.subtotal) .quantity {
  color: #627c95;
}
.order-form .order-totals__row:not(.total):not(.subtotal) .title {
  font-style: italic;
  border-bottom: 1px dashed #ebebeb2e;
}