/* style slug for playstock.online */

#payment .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}

#payment .form-group.col-12 {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}

#payment .form-group.col-12:nth-child(1),
#payment .form-group.col-12:nth-child(2),
#payment .form-group.col-12:nth-child(3) {
  width: 50%;
}

#payment .form-group.col-12:nth-child(4),
#payment .form-group.col-12:nth-child(5),
#payment .form-group.col-12:nth-child(6) {
  width: 100%;
}

#payment .form-group label {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}

#amount-acc,
#steam_number,
#mail {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d8d8d8;
  box-sizing: border-box;
  font-size: 14px;
  background: #fff;
  color: #111;
}

#account-pay,
#amount-pay {
  font-weight: 600 !important;
  color: #1b8f3b;
}

#amount-pay {
  margin-top: 8px;
}

#payment input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff3838 0%, #ff3838 50%, #e6e6e6 50%, #e6e6e6 100%);
  outline: none;
  margin-top: 8px;
}

#payment input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #ff3838;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

#payment input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #ff3838;
  cursor: pointer;
}

#payment .fixed-amounts-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

#payment .fixed-amount-btn {
  border: 1px solid #ff3838;
  background: transparent;
  color: #111;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}

#payment .fixed-amount-btn:hover,
#payment .fixed-amount-btn.is-active {
  background: #ff3838;
  color: #fff;
}

#pay-common-RUB,
#pay-common-EXT {
  float: left;
  width: calc(50% - 8px);
  min-height: 54px;
  border: none;
  border-radius: 10px;
  background: #ff3838;
  color: #fff;
  font-weight: 600;
  padding: 12px 14px;
  margin-right: 8px;
  cursor: pointer;
  transition: transform 0.08s ease, opacity 0.12s ease;
}

#pay-common-EXT {
  margin-right: 0;
}

#pay-common-RUB:hover,
#pay-common-EXT:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}

/* form-steam / form-steam-2c: region tabs full-width */
.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-tabs {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-bottom: 14px;
}

.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-tab {
  flex: 1 1 0;
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: transparent;
  color: #fff;
  border-radius: 0 !important;
  font-weight: 600;
}

.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-tab.active,
.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-tab[aria-pressed="true"] {
  border-color: #f2003a;
  background: transparent;
}

/* Payment method buttons in one line, equal width, transparent */
.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-pay-buttons {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  margin-bottom: 10px;
}

.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-pay-btn,
#pay-sbp,
#pay-rub,
#pay-kzt,
#pay-common-RUB,
#pay-common-EXT {
  flex: 1 1 0;
  width: 100%;
  min-height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: transparent;
  color: #fff;
}

.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 0 !important;
  padding: 12px 14px;
}

.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-pay-btn span {
  display: none;
}

.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-pay-btn img,
#pay-sbp img,
#pay-rub img,
#pay-kzt img {
  max-height: 60px;
  width: auto;
}

.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-pay-btn:hover,
#pay-sbp:hover,
#pay-rub:hover,
#pay-kzt:hover,
#pay-common-RUB:hover,
#pay-common-EXT:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.72);
  opacity: 1;
}

.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-pay-btn.is-selected {
  border-color: #f2003a;
}

.payment-form-steam-wrapper.form-style-playstock #pay-common-RUB.is-selected,
.payment-form-steam-wrapper.form-style-playstock #pay-common-EXT.is-selected {
  border-color: #f2003a !important;
}

/* Hide extra captions/hints for compact old-school look */
.payment-form-steam-wrapper.form-style-playstock label[for="steam_number"],
.payment-form-steam-wrapper.form-style-playstock label[for="amount-acc"],
.payment-form-steam-wrapper.form-style-playstock #btn-where-login,
.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-modal {
  display: none !important;
}

.payment-form-steam-wrapper.form-style-playstock .payment-form-amount-hint.payment-form-amount-hint-login {
  display: block !important;
  margin-top: 8px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  line-height: 1.35;
}

/* Inputs: transparent, square, thin light border */
.payment-form-steam-wrapper.form-style-playstock #steam_number,
.payment-form-steam-wrapper.form-style-playstock #amount-acc,
.payment-form-steam-wrapper.form-style-playstock #mail,
.payment-form-steam-wrapper.form-style-playstock input,
.payment-form-steam-wrapper.form-style-playstock select,
.payment-form-steam-wrapper.form-style-playstock textarea {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 0 !important;
  color: #fff;
}

.payment-form-steam-wrapper.form-style-playstock #steam_number::placeholder,
.payment-form-steam-wrapper.form-style-playstock #amount-acc::placeholder,
.payment-form-steam-wrapper.form-style-playstock #mail::placeholder {
  color: rgba(255, 255, 255, 0.52);
}

.payment-form-steam-wrapper.form-style-playstock #steam_number,
.payment-form-steam-wrapper.form-style-playstock #steam_number:focus,
.payment-form-steam-wrapper.form-style-playstock #steam_number:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
}

.payment-form-steam-wrapper.form-style-playstock #steam_number:-webkit-autofill,
.payment-form-steam-wrapper.form-style-playstock #steam_number:-webkit-autofill:hover,
.payment-form-steam-wrapper.form-style-playstock #steam_number:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0 1000px transparent inset !important;
}

/* Fixed amount row: equal-width transparent square buttons */
.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-amount-buttons {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  margin-top: 8px;
}

.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-amount-btn {
  width: 100%;
  min-height: 28px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 0 !important;
  background: transparent;
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
}

.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-amount-btn:hover,
.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-amount-btn.active {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.06);
}

/* Submit under pay buttons, same style, no rounding */
.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-actions {
  margin-top: 10px;
}

.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-submit {
  width: 100%;
}

.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-pay-btn,
.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-submit,
.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-tab,
.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-amount-btn,
.payment-form-steam-wrapper.form-style-playstock input,
.payment-form-steam-wrapper.form-style-playstock select,
.payment-form-steam-wrapper.form-style-playstock textarea,
.payment-form-steam-wrapper.form-style-playstock button {
  border-radius: 0 !important;
}

.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-rules {
  margin-top: 8px;
  margin-bottom: 8px;
}

.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.88);
}

.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-checkbox-label input[type="checkbox"] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  min-height: 16px;
  margin: 0 !important;
  padding: 0 !important;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  accent-color: #f2003a;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 0 !important;
  position: static !important;
  transform: none !important;
  pointer-events: auto !important;
}

.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-checkbox-label span {
  display: inline;
}

.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-field,
.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-methods,
.payment-form-steam-wrapper.form-style-playstock .payment-form-steam-actions {
  margin-bottom: 12px;
}

.payment-form-steam-wrapper.form-style-playstock #transnumber {
  margin-top: 8px;
  margin-bottom: 8px;
  color: #ff6b81;
  font-weight: 600;
}

.only-form-consent-label a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 767px) {
  #payment .form-group.col-12:nth-child(1),
  #payment .form-group.col-12:nth-child(2),
  #payment .form-group.col-12:nth-child(3) {
    width: 100%;
  }

  #pay-common-RUB,
  #pay-common-EXT {
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 8px;
  }

  .payment-form-steam-wrapper.form-style-playstock .payment-form-steam-tabs,
  .payment-form-steam-wrapper.form-style-playstock .payment-form-steam-pay-buttons {
    flex-direction: column;
  }
}

/* Cabinet style overrides for playstock (same slug) */
.universal-admin-cabinet.form-style-playstock .admin-cabinet-section {
  padding-top: 24px;
  padding-bottom: 64px;
}

.universal-admin-cabinet.form-style-playstock .admin-cabinet h1 {
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.15 !important;
  margin-bottom: 10px !important;
}

.universal-admin-cabinet.form-style-playstock .admin-cabinet h3,
.universal-admin-cabinet.form-style-playstock .admin-cabinet p,
.universal-admin-cabinet.form-style-playstock .admin-cabinet label,
.universal-admin-cabinet.form-style-playstock .admin-cabinet th,
.universal-admin-cabinet.form-style-playstock .admin-cabinet td {
  color: #ffffff !important;
}

.universal-admin-cabinet.form-style-playstock .admin-cabinet .admin-cabinet-input,
.universal-admin-cabinet.form-style-playstock .admin-cabinet .admin-cabinet-cell-input {
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
}

.universal-admin-cabinet.form-style-playstock .admin-cabinet .admin-cabinet-btn {
  border-radius: 0 !important;
}

.universal-admin-cabinet.form-style-playstock .admin-cabinet .admin-cabinet-btn-primary {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  color: #ffffff !important;
}

.universal-admin-cabinet.form-style-playstock .admin-cabinet .admin-cabinet-btn-primary:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
}

.universal-admin-cabinet.form-style-playstock .admin-cabinet-table-scroll {
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, 0.32) !important;
}

.universal-admin-cabinet.form-style-playstock .admin-cabinet-table thead th {
  background: rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.universal-admin-cabinet.form-style-playstock .admin-cabinet-table tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.universal-admin-cabinet.form-style-playstock .admin-cabinet-row-delete {
  border-radius: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  background: transparent !important;
  color: #ffffff !important;
}