@media (max-width: 768.9px) {

  .shop_table.shop_table_add_card,
  .shop_table.shop_table_edit_card {
    max-height: 90%;
    overflow: auto;
    max-width: 600px !important;
  }
}

.shop_table.shop_table_add_card,
.shop_table.shop_table_edit_card {
  max-height: 90%;
  overflow: auto;
  max-width: 900px;
}

#description_card,
#description_edit_card {
  width: 457px;
  min-height: 100px;
  resize: vertical;
}

#price_card,
#price_edit_card {
  margin-right: 58px;
}

.shop_list_servers {
  display: block;
  cursor: pointer;
}

@media (max-width: 768.9px) {
  .mobile_cart3 {
    display: block;
  }
}

@media (min-width: 769px) {
  .mobile_cart3 {
    padding-left: 0 !important;
  }
}

@media (max-width: 768.9px) {
  .mobile_cart2 {
    padding: 0 !important;
  }
}

@media (min-width: 769px) {
  .mobile_cart2 {
    display: block;
  }
}

@media (max-width: 768.9px) {
  .mobile_cart {
    margin-top: 10px;
    padding: 5px;
  }
}

@media (min-width: 769px) {
  .mobile_cart {
    display: block;
  }
}

.shop_table_add_server {
  max-width: 34em;
}

.shop_table_accept .shop_body_table {
  text-align: center;
}

.shop_wrapper_table_button {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: .3rem;
}

.shop_black_screen {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 106;
  background: var(--bg-modal);
}

/*
 * The "Show all" button previously displayed a modal with the full list of
 * advantages for a privilege. The revised interaction shows advantages on
 * hover instead of requiring a click, so this button is hidden.
 */
.shop_product_button_info {
  display: none !important;
}

.shop_table {
  min-width: 450px;
  background: var(--card);
  margin: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 107;
  border-radius: var(--br-16);
  padding: 15px;
}

.shop_header_table {
  width: 100%;
  display: flex;
  font-size: var(--font-size-xl);
  color: var(--text-default);
  font-weight: var(--font-weight-6);
  width: 100%;
  border-bottom: 1px solid var(--transparent-5-w);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.shop_card_wrapper {
  padding: 0;
  margin-bottom: 0;
  position: relative;
}

.shop_card {
  background: var(--bg);
  border-radius: var(--br-16);
  padding: 20px;
  display: flex;
  justify-content: center;
  border-bottom: 0;
  transition: var(--transition-duration);
  cursor: pointer;
  gap: 10px;
  height: 100%;
  flex-direction: column;
  align-items: center;
  border: 2px solid var(--transparent-10-w);
}

.shop_delete_server,
.shop_edit_server {
  display: flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--br-6);
  transition: var(--transition-duration);
  cursor: pointer;
}

.shop_delete_server {
  background-color: var(--red)
}

.shop_edit_server {
  background-color: var(--orange)
}

.shop_delete_server svg,
.shop_edit_server svg {
  display: flex;
  width: .8rem;
  height: .8rem;
  fill: var(--text-default)
}

.shop_edit_server svg {
  fill: var(--bg)
}

.shop_server p {
  margin: 0;
}

.product_button {
  background: var(--span);
  padding: 5px 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: 0.5s;
}

.product_button:hover {
  color: rgba(255, 255, 255, 0.7);
}

.product_price {
  font-size: var(--font-size-xs);
  text-align: center;
}

.shop_product {
  display: flex;
  background: var(--bg);
  border-radius: var(--br-16);
  transition: var(--transition-duration);
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
}

.shop_product_title {
  text-align: center;
  padding: 5px 15px;
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background-color: var(--bg-modal);
  border-radius: var(--br-12);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--transparent-2-w);
}

.shop_product_gradient_text {
  margin: 0;
  font-size: var(--font-size-m) !important;
  font-weight: var(--font-weight-7);
  -webkit-text-fill-color: transparent;
  font-family: var(--font-family-1);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.shop_product_select_title {
  cursor: pointer;
  margin: 0 10px;
  position: relative;
  padding: 12px 15px;
  border-radius: var(--br-12);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-6);
  background: var(--toast-bg);
  border: 2px solid var(--bg-table);
}

.shop_product_select {
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  z-index: 100;
  transform: translateY(100%);
  background: var(--toast-bg);
  border-radius: var(--br-12);
  box-shadow: 0px 0px 20px 20px rgb(0 0 0 / 15%);
  border: 2px solid var(--bg-table);
  max-height: 300px;
  overflow-y: scroll;
}

.shop_product_option {
  display: flex;
  height: 46px;
  position: relative;
  padding: 10px 15px;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-m);
}

.shop_product_option:hover span {
  opacity: 1;
}

.shop_product_option:not(:first-child) {
  border-top: 1px solid var(--transparent-2-w);
}

.shop_product_select_button {
  position: absolute;
  font-size: var(--font-size-m);
  top: 50%;
  transform: translateY(-50%);
  right: 14px;
}

.shop_product_select_button svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.shop_product_description {
  display: flex;
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-4);
  color: var(--text-custom);
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 10px;
  height: 28px;
}

.shop_product_property {
  display: flex;
  font-size: var(--font-size-m);
  position: relative;
  border: 1px solid var(--transparent-2-w);
  background: var(--transparent-2-w);
  border-radius: var(--br-12);
  padding: 8px;
  transition: var(--transition-duration);
  cursor: default;
  align-items: center;
  color: var(--text-default);
}

.property_icon_dsb {
  fill: var(--red) !important;
}

.shop_product_table_property_icon_delete {
  position: absolute;
  font-size: var(--font-size-m);
  top: 50%;
  transform: translateY(-50%);
  transition: var(--transition-duration) all;
  display: flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  right: 8px;
  border-radius: var(--br-8);
  background: var(--navbar);
}

.shop_product_table_property_icon_edit {
  position: absolute;
  font-size: var(--font-size-m);
  top: 50%;
  transform: translateY(-50%);
  transition: var(--transition-duration) all;
  display: flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  right: 38px;
  background: var(--navbar);
  border-radius: var(--br-8);
}

.shop_product_table_property_icon_delete svg,
.shop_product_table_property_icon_edit svg {
  display: flex;
  width: 9px;
  height: auto;
  fill: var(--text-custom);
  transition: var(--transition-duration);
}

.shop_product_table_property_icon_edit:hover svg {
  opacity: 1;
  fill: var(--orange);
}

.shop_product_table_property_icon_delete:hover svg {
  fill: var(--red);
  opacity: 1;
}

.shop_product_property_icon {
  display: flex;
  border-radius: var(--br-24);
  position: absolute;
  padding-left: 2px;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-5);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  align-items: center;
  justify-content: center;
}

.shop_product_property_icon svg {
  width: 10px;
  height: auto;
}

.shop_product_property_title {
  margin-left: 20px;
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-5);
}

.shop_product_property_disabled.shop_product_property,
.shop_product_property_disabled.shop_product_property_title {
  color: rgb(255 255 255 / 30%);
}

.shop_product_property_disabled .shop_product_property_icon {
  -webkit-background-clip: inherit;
  background-clip: inherit;
  background: transparent;
  -webkit-text-fill-color: inherit;
}

.shop_product_description_price {
  display: flex;
  flex-direction: column;
}

.shop_product_price {
  display: flex;
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-7);
  font-family: var(--font-family-1);
  gap: 5px;
  align-items: flex-start;
  position: relative;
}

.shop_product_price_count {
  color: var(--money);
}

.shop_product_button {
  flex: 1;
  display: flex;
  border-radius: 6px 12px 12px 6px;
  cursor: pointer;
  justify-content: center;
  width: 100%;
  align-items: center;
  gap: .3rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-default);
  background: var(--transparent-2-w);
  padding: 0.769rem 1rem;
  text-wrap: nowrap;
  text-shadow: 1px 1px 1px rgb(0 0 0 / 39%);
}

.shop_product_button svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.shop_product_button span {
  position: absolute;
  right: -70px;
  transition: 0.25s;
  opacity: 0;
}

.shop_header:hover .shop_product_button {
  justify-content: start;
  height: 46px;
  width: 125px;
  padding-inline: 0.7rem;
  transition: 0.25s;
}

.shop_header:hover .shop_product_button span {
  right: 0.7rem;
  opacity: 1;
  transition: 0.4s;
}

.shop_product_button_info {
  display: flex !important;
  background: var(--money-bg) !important;
  color: var(--money);
  height: 28px;
  border-radius: var(--br-6);
  padding: 5px 10px;
  border: 1px solid var(--transparent-2-w);
  width: max-content;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-5);
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

.shop_product_breadcrumb {
  color: white;
  padding: 5px 15px;
  position: absolute;
  top: 0;
  display: none;
  left: 50%;
  z-index: 5;
  cursor: default;
  font-size: var(--font-size-xxs);
  border-radius: var(--br-3);
  transform: translate(-50%, -150%);
}

.shop_product_breadcrumb_triangle {
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: -7px;
  left: 50%;
  z-index: 1;
  transform: rotate(45deg) translateX(-5px);
}

@media (max-width: 768.9px) {
  .properties_table {
    position: fixed;
    top: 0;
    right: -500px;
    bottom: 0;
    padding: 15px;
    width: 100%;
    z-index: 30001;
    height: 100%;
    overflow: auto;
    background: var(--card);
    transition: right 0.15s ease-in-out;
  }
}

@media (min-width: 769px) {
  .properties_table {
    position: fixed;
    top: 0;
    right: -500px;
    bottom: 0;
    padding: 15px;
    width: 500px;
    z-index: 30001;
    height: 100%;
    overflow: auto;
    background: var(--card);
    transition: right 0.15s ease-in-out;
  }
}

.properties_table.active {
  right: 0;
}

body.poshelnahuiscroll {
  overflow: hidden;
}

html.poshelnahuiscroll {
  overflow: hidden;
}

.properties_table::-webkit-scrollbar {
  width: 0 !important;
}

.shop_product_table_product {
  font-size: var(--font-size-5xl);
  -webkit-text-fill-color: transparent;
}

.shop_product_table_title {
  text-align: center;
  max-width: 100% !important;
  font-size: var(--font-size-5xl) !important;
}

.close_properties_table {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding-inline: 0;
  width: var(--input-height);
}

.close_properties_table svg {

  rotate: 90deg;
}

.shop_property_input {
  font-size: var(--font-size-m);
  padding: 0px 5px 0px 10px;
  background-color: transparent;
  text-decoration: underline;
  color: var(--span);
  width: 93%;
  transition: var(--transition-duration);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 21px;
  border-radius: 0
}

.shop_property_input:focus {
  outline: none;
  border: none
}

.shop_product_card_property_icon_delete {
  right: 5px;
  background-color: var(--red);
}

.shop_product_card_property_icon_edit {
  right: 42px;
  background-color: var(--orange);
}

.shop_sort_property {
  right: 78px;
}

.shop_product_card_property_icon_delete,
.shop_product_card_property_icon_edit,
.shop_sort_property {
  position: absolute;
  font-size: var(--font-size-m);
  top: 50%;
  transform: translateY(-50%);
  transition: var(--transition-duration) all;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--br-8);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  display: flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--br-6);
  transition: var(--transition-duration);
  cursor: pointer;
}

.shop_product_card_property_icon_delete svg,
.shop_product_card_property_icon_edit svg {
  display: flex;
  width: 9px;
  height: 9px;
}

.shop_product_card_property_icon_edit svg {
  fill: var(--bg)
}

.shop_discount_icon {
  padding: 3px 6px;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-7);
  color: var(--text-default);
  background-color: var(--red);
  z-index: 2;
  border-radius: var(--br-6);
  width: max-content;
}

.shop_discount_price {
  color: grey;
  text-decoration: line-through;
  margin-right: 3px;
}

.shop_product_price_delete,
.shop_product_price_edit {
  position: absolute;
  font-size: var(--font-size-m);
  top: 50%;
  transform: translateY(-50%);
  transition: var(--transition-duration) all;
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.shop_product_price_delete {
  right: 5px;
}

.shop_product_price_edit {
  right: 42px;
}

.shop_price_title {
  color: var(--text-default);
  font-weight: var(--font-weight-5);
  opacity: 0.3;
  transition: var(--transition-duration);
}

#table_status {
  cursor: pointer;
}

.shop_gradient_test,
.shop_gradient_test_edit {
  margin: 0;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-8);
  -webkit-text-fill-color: transparent;
  background: linear-gradient(45deg, #ffffff 10%, #ffffff 50%, #ffffff 85%);
  -webkit-background-clip: text;
  background-clip: text;
}

.wrapper_gradient_text {
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--transparent-2-w);
  border-radius: var(--br-12);
  padding: 20px;
  flex-direction: column;
}

.wrapper_gradient_text p {
  line-height: 1;
  font-size: var(--font-size-m);
  color: var(--text-custom);
}

.shop_wrapper_product {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17em, 1fr)) !important;
  justify-content: center;
  gap: 10px;
}

.shop_delete_product {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

#edit-ajax-product .shop_delete_product {
  left: 47px;
  top: 10px;
}

.shop_server_icon {
  width: 20px;
  margin-right: 5px;
}

.shop_options_row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0;
  margin-bottom: 15px;
}

.shop_options_row .card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
}

.shop_add_promo,
.shop_edit_promo {
  background: var(--bg);
}

.shop_product_gradient_test {
  border-radius: var(--br-3) 3px 15px 15px;
  padding: 0 15px;
  padding-bottom: 15px;
  width: 100%;
  height: 400px;
}

.shop_card_main {
  background-color: var(--card);
  border-radius: var(--br-6);
}

.shop_servers_column {
  border-right: 0px !important;
  display: flex;
}

.shop_cards_info,
.shop_servers_info {
  border: 0px !important;
  background-color: var(--bg-table);
}

.shop_server_t {
  padding: 5px 15px;
  margin-top: 10px;
  border: 1px solid rgba(128, 128, 128, 0.4);
  border-radius: var(--br-10);
  cursor: pointer;
  display: flex;
  align-items: center;
  margin: 10px;
}

.shop_cards_info {
  margin-bottom: -5px;
}

.shop_servers_info {
  text-align: left;
  margin-bottom: 30px;
}

.shop_server_t p {
  font-size: var(--font-size-m);
}

.payment_qiwi:hover {
  border: 1px solid var(--span);
  background-color: var(--button-hover);
  padding: 15px 90px;
}

.payment_freekassa:hover {
  border: 1px solid var(--span);
  background-color: var(--button-hover);
  padding: 15px 66px;
}

.wrapper_server_accept {
  width: 500px;
}

.servers_accept {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}

.server_accept p {
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-6);
  text-align: center;
  color: var(--text-custom);
  transition: var(--transition-duration);
}

.server_accept:hover {
  background-color: var(--button);
}

.server_accept {
  flex: 1 1 calc((100% / 2) - 0.5rem);
}

.server_accept_title {
  display: flex;
  font-size: var(--font-size-xl);
  color: var(--text-default);
  font-weight: var(--font-weight-6);
  width: 100%;
}

.wrapper_server_accept {
  display: flex;
  position: fixed;
  z-index: 50000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  background: var(--card);
  box-shadow: 0px 0px 20px 20px rgb(0 0 0 / 16%);
  border-radius: var(--br-16);
  padding: 15px;
  gap: 15px;
  align-items: center;
}

@media (max-width: 575.98px) {
  .server_accept:hover {
    background-color: var(--button);
    color: var(--text-custom);
  }

  .server_accept {
    white-space: nowrap;
  }

  .server_accept_title {
    display: flex;
    font-size: var(--font-size-xl);
    color: var(--text-default);
    font-weight: var(--font-weight-6);
    width: 100%;
  }

  .wrapper_server_accept {
    display: flex;
    position: fixed;
    z-index: 50000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    width: 350px;
  }

  .servers_accept {
    display: grid;
    grid-template-columns: 1fr;
  }

  .right_content {
    padding: 0 10px;
    width: max-content;
    height: 30px;
    color: var(--red);
    background-color: var(--button);
    font-weight: var(--font-weight-7);
    text-transform: uppercase;
    font-size: var(--font-size-s);
    border-radius: var(--br-6);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.text_exception {
  max-width: 200px !important;
}

.errors_date {
  min-width: 170px !important;
}

.shop_servers_wrap_area {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  flex-direction: column;
  height: max-content;
}

.servernameone {
  background-color: #22253e;
  padding: 6px 1px;
  border-radius: var(--br-5);
  margin-bottom: 15px;
}

.formbasket input {
  font-size: var(--font-size-m);
  padding: 11px 6px;
  font-weight: var(--font-weight-2);
  color: var(--text-default);
  background-color: var(--table-line);
  border-radius: var(--br-6);
  border: 1px solid #ffffff0f;
  -webkit-transition: border-color 0.15s ease-in-out,
    -webkit-box-shadow 0.15s ease-in-out;
  -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
    -webkit-box-shadow 0.15s ease-in-out;
  width: 98%;
  box-shadow: 0px 4px 8px 0px rgb(34 60 80 / 10%) inset;
  -moz-box-shadow: 0px 4px 8px 0px rgba(34, 60, 80, 0.1) inset;
  box-shadow: 0px 2px 0px 0px rgb(0 0 0 / 10%) inset;
}

.formbasket label {
  float: left;
  white-space: nowrap;
  width: 19%;
  margin-right: 20px;
}

.formbasket select {
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  outline: none;
  color: var(--text-default);
  background-color: inherit;
  height: 24px;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  border-bottom: 2px solid var(--table-line);
  font-weight: var(--font-weight-2);
  font-size: var(--font-size-m);
}

.formbasket select:focus:not([readonly]) {
  border-bottom: 2px solid var(--span);
}

.formbasket select option {
  border: none;
  outline: none;
  background-color: var(--sidebar-color);
  font-weight: var(--font-weight-2);
}

.button_to_buy {
  display: flex;
  justify-content: center;
  border-radius: var(--br-10);
  transition: var(--transition-duration);
  color: var(--money);
  background-color: var(--money-bg);
  align-items: center;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--transparent-2-w);
  gap: .5rem;
  padding-block: 1rem;
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-6);
}

.button_to_buy svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  transition: var(--transition-duration);
  opacity: .5;
}

.button_to_buy:hover {
  border: 1px solid var(--money-bg);
}

.shop_table_create_button {
  display: flex;
  font-size: var(--font-size-m);
  position: relative;
  border: 1px solid var(--transparent-2-w);
  background: var(--transparent-2-w);
  color: var(--text-custom);
  border-radius: var(--br-12);
  padding: 8px;
  transition: var(--transition-duration);
  cursor: default;
  align-items: center;
  justify-content: center;
}

.shop_table_create_button_option {
  display: flex;
  height: 40px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--transparent-2-w);
  font-size: var(--font-size-m);
  color: var(--text-custom);
}

.shop_table_create_buttonsvg:hover {
  fill: var(--span);
}

.shop_flex_row {
  display: flex;
  gap: 0.2rem;
  margin: 0 10px;
  align-items: center;
}

.shop_buy_price {
  display: flex;
  background-color: var(--input-form);
  border-radius: 12px 6px 6px 12px;
  padding: 0 1rem;
  height: 46.6px;
  width: max-content;
  justify-content: center;
  position: relative;
  overflow: hidden;
  align-items: center;
  flex-direction: column;
}

.please_choose {
  text-align: center;
  margin: 15px 0;
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-7);
  text-transform: uppercase;
  color: var(--text-custom);
  animation: flashtext 1.5s infinite;
}

.shop__next__step {
  display: flex;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  padding: 12px;
  font-weight: var(--font-weight-7);
  color: var(--text-custom);
}

.card_shop {
  display: flex;
  background-color: var(--card);
  padding: 15px;
}

.shop_text_input {
  gap: 5px;
  display: flex;
  color: var(--text-custom);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  text-align: left;
  margin: 1px 0;
  align-items: center;
}

.shop_text_input svg {
  width: 11px;
  height: 11px;
  fill: var(--text-custom);
}

.shop_flex_2pay {
  display: flex;
  gap: 10px;
}

.payment_balance {
  padding: 15px 14px;
  text-transform: uppercase;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-7);
  color: var(--text-custom);
  border-radius: var(--br-6);
  border: 1px solid var(--button);
  transition: 0.5s;
}

.payment {
  cursor: pointer;
  transition: var(--transition-duration);
  box-sizing: border-box;
  border-radius: var(--br-3);
  border: 1px solid var(--button);
}

.payment:hover {
  border: 1px solid var(--button-hover);
  background-color: var(--button-hover);
}

.payment img {
  width: 100px;
}

.pay_order {
  cursor: pointer;
  padding: 15px 14px;
  border-radius: var(--br-12);
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-weight: var(--font-weight-7);
  font-size: var(--font-size-s);
  background: var(--button);
  color: var(--text-default);
  transition: 0.5s;
}

.pay_order:hover {
  cursor: pointer;
  -webkit-filter: brightness(115%);
  filter: brightness(115%);
}

@media (min-width: 809px) {
  .shop_pay_area {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    border-left: 1px solid var(--bottom-line-table);
    padding-left: 20px;
    height: 100%;
  }
}

@media (max-width: 808px) {
  .shop_pay_area {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    height: 100%;
  }
}

.shop_name {
  text-transform: uppercase;
  text-align: center;
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-7);
  color: var(--text-custom);
  position: relative;
}

.shop_back_button {
  position: absolute;
  top: 17px;
  left: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  font-size: var(--font-size-m);
  border-radius: var(--br-12);
  transition: var(--transition-duration);
  cursor: pointer;
  color: var(--text-custom);
  z-index: 1;
}

.shop_back_button svg {
  width: 7px;
  height: auto;
  fill: var(--text-custom);
  opacity: 0.5;
  transition: var(--transition-duration);
}

.shop_back_button:hover svg {
  opacity: 1;
}

.add_new_text {
  display: flex;
  justify-content: center;
  font-size: var(--font-size-default);
  font-family: var(--font-family-1);
  font-weight: var(--font-weight-7);
}

.shop_card:hover {
  color: var(--span);
  border: 2px solid var(--span);
}

.shop_product_img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-duration);
}

#add-server,
#edit-price-options,
#add-product,
#edit-product,
#add-price-options,
#edit-server,
#edit-promo,
#add-promo {
  width: 100% !important;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

#delete-product {
  position: absolute;
}

#edit-ajax-product {
  position: absolute;
}

.shop_product_properties {
  display: flex;
  flex-direction: column;
  margin: 0 10px;
  gap: 3px;
  max-height: 166px;
  overflow: hidden;
  overflow-y: scroll;
  padding-right: 5px;
}

.shop_product_price_old {
  font-size: var(--font-size-xs);
  text-decoration: line-through;
  line-height: normal;
  font-weight: var(--font-weight-4);
  font-family: var(--font-family-1);
  opacity: 0.7;
  color: var(--text-custom);
}

.input-form {
  position: relative;
  text-align: left;
  margin-top: 6px;
  float: left;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.shop_product_select_title_text {
  color: var(--text-default);
  font-weight: var(--font-weight-6);
}

.props {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 90%;
  overflow: hidden;
  overflow-y: scroll;
  margin: 15px 0;
}

.shop_bk {
  background: var(--card);
  border-radius: var(--br-20);
  padding: .3rem;
  margin-inline: 0;
}

.shop_cart_table_head {
  padding: 10px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 0.15fr;
  justify-items: start;
  background: var(--input-form);
  border-radius: var(--br-12);
}

.shop_cart_table_head span {
  font-weight: var(--font-weight-6);
  font-size: var(--font-size-s);
  text-transform: uppercase;
  color: var(--text-custom);
  opacity: 0.5;
  display: flex;
  align-items: center;
}

.shop_cart_table_body li:not(:last-child) {
  margin-bottom: 3px;
}

.basket_table_content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 768.9px) {
  .shop_cart_table_body li {
    background: var(--input-form);
    border-radius: var(--br-12);
    display: grid;
    grid-template-columns: 1fr 1fr 0.15fr;
    padding: 7px 20px;
    transition: var(--transition-duration);
    position: relative;
    justify-items: start;
    align-items: center;
  }

  .shop_cart_table_body li span {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-5);
    display: flex;
    align-items: center;
    color: var(--text-custom);
    z-index: 2;
  }
}

@media (min-width: 769px) {
  .shop_cart_table_body li {
    background: var(--input-form);
    border-radius: var(--br-12);
    display: grid;
    grid-template-columns: 1fr 1fr 0.15fr;
    padding: 10px 20px;
    transition: var(--transition-duration);
    position: relative;
    justify-items: start;
    align-items: center;
  }

  .shop_cart_table_body li span {
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-5);
    display: flex;
    align-items: center;
    color: var(--text-custom);
    z-index: 2;
  }
}

.shop_basket_delete {
  display: flex;
  border-radius: var(--br-8);
  height: 30px;
  width: 30px;
  cursor: pointer;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.shop_basket_delete:hover {
  text-decoration: underline;
}

.shop_basket_delete svg {
  height: 13px;
  width: 13px;
  fill: var(--text-custom);
}

.unique-toggle-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  border: 1px solid var(--transparent-5-w);
  border-radius: var(--br-12);
  padding: 5px;
  position: relative;
  overflow: hidden;
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-4);
}

.unique-toggle-option {
  cursor: pointer;
  flex: 1;
  text-align: center;
  z-index: 2;
  color: var(--text-custom);
  transition: color 0.2s ease;
}

.unique-slider {
  width: 48%;
  height: 80%;
  background-color: var(--span-middle);
  border-radius: var(--br-8);
  position: absolute;
  left: 5px;
  transition: left 0.2s ease-in-out, background-color 0.3s ease-in-out;
  z-index: 0;
}

.unique-slider.as-gift {
  background-color: var(--money-bg);
}

.hidden_gift {
  display: none;
}

.unique-toggle-input-container {
  transition: height 0.2s ease-in-out;
}

.gift_text {
  display: flex;
  font-size: var(--font-size-s);
  color: var(--text-custom);
  text-align: left;
  width: 100%;
}

.shop_product_price_value {
  color: var(--money);
}

.settings_options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shop_input {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.promo_line {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--input-form);
  border-radius: var(--br-10);
  align-items: center;
  padding-block: .3rem;
  padding-inline: .7rem .3rem;
}

.promo_line:not(:last-child) {
  margin-bottom: .2rem;
}

.promo_left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.promo_text {
  display: flex;
  flex-direction: column;
}

.promo_name {
  font-size: var(--font-size-m);
  color: var(--text-default);
  font-weight: var(--font-weight-7);
}

.promo_badges {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.promo_badge {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
}

.amount_badge {
  color: var(--text-secondary);
}

.discount_badge {
  background: var(--red);
  color: white;
}

.shop_badge {
  background-color: var(--bg);
  padding: 4px 11px;
  color: var(--span);
  font-weight: bold;
  font-size: var(--font-size-s);
  border-radius: var(--br-6);
  z-index: 2;
  transition: var(--transition-duration);
}

.shop_card_add_edit {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

@media (max-width: 768.9px) {

  .row_reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

@media (min-width: 768.9px) {

  .row_reverse {
    display: flex;
  }
}

.shop_header {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-radius: var(--br-16);
  height: 12rem;
}

.shop_product_copy {
  display: flex;
  gap: .3rem;
  justify-content: space-between;
}

.shop_product_property input[type="number"]::-webkit-outer-spin-button,
.shop_product_property input[type="number"]::-webkit-inner-spin-button {
  display: none;
}

.shop_sort_property input[type="number"],
.shop_product_property input[type="number"] {
  height: 32px;
  width: 32px;
  border-radius: var(--br-6);
  font-size: var(--font-size-s);
  text-align: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding-inline: 0;
}

.shop_sort_property input[type="number"]::-webkit-outer-spin-button,
.shop_sort_property input[type="number"]::-webkit-inner-spin-button {
  display: none;
}

.choosing_text {
  display: inline-block;
  color: var(--text-custom);
  font-weight: var(--font-weight-5);
  font-size: var(--font-size-m);
}

.choosing_text span {
  color: var(--span);
}

.categories {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.categories button {
  flex: 1
}

.shop_product_property:hover .shop_sort_property,
.shop_product_property:hover .shop_product_price_delete,
.shop_product_property:hover .shop_product_price_edit,
.shop_product_property:hover .shop_product_card_property_icon_delete,
.shop_product_property:hover .shop_product_card_property_icon_edit,
.shop_product_option:hover .shop_product_price_delete,
.shop_product_option:hover .shop_product_price_edit {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.shop_basket_empty {
  display: flex;
  position: relative;
  height: 300px;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.shop_basket_empty .title_empty {
  font-family: var(--font-family-1);
  z-index: 1;
  font-weight: var(--font-weight-7);
  font-size: var(--font-size-4xl);
  position: absolute;
  bottom: 10%;
  white-space: nowrap;
}

.shop_basket_empty img {
  width: auto;
  height: 83%;
  opacity: 0.2;
  z-index: 0;
}

.shop_basket_empty .desc_empty {
  position: absolute;
  z-index: 1;
  bottom: 0;
  opacity: 0.5;
}

.shop_accetp_buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accept_content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}

.shop_label_price.rconinfo {
  display: flex;
  gap: 5px;
}

.shop_rconinfo {
  background: var(--money-bg) !important;
  color: var(--money);
  border-radius: var(--br-6);
  padding: 0px 6px;
  border: 1px solid var(--transparent-2-w);
  cursor: pointer;
}

.shop_header:hover img {
  scale: 1.05;
}

.shop__filters {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .store-none {
    display: none;
  }
}

.store__user-buttons {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.filter__by-price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.shop__action {
  display: flex;
  align-items: center;
  gap: .15rem;
  position: absolute;
  right: .25rem;
}

.shop_button_servers {
  position: relative;
  justify-content: start;
}

.shop_button_cancel {
  margin-left: auto;
}

.header__badges {
  position: absolute;
  right: 0.7rem;
  top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  align-items: flex-end;
}

form#copy-product,
form#copy-product-properties {
  display: none;
}

.store__filter-title {
  font-size: var(--font-size-m);
  color: var(--text-secondary);
}

.sticky-block {
  position: sticky;
  top: .5rem;
}

@media (max-width: 768px) {
  .sticky-block {
    position: relative;
    margin-bottom: 1rem
  }
}

.grid-flow {
  display: grid;
  grid-auto-flow: column;
}

/* ---------- Custom styles for collapsible server dropdown ---------- */
/* Wrapper for the server selection dropdown */
.server-dropdown {
  width: 100%;
}

/* Header area displays the selected server and toggles the list */
.server-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 10px;
  border: 1px solid var(--table-line);
  border-radius: var(--br-8);
  background: var(--table-line);
  color: var(--custom-text-color);
  user-select: none;
}

/* Arrow indicator for dropdown; uses unicode arrow character and rotates when open */
.server-dropdown-arrow {
  display: inline-block;
  margin-left: 10px;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--custom-text-color);
  transition: transform 0.2s ease;
}

/* Body of the dropdown containing the list of servers — always visible */
.server-dropdown-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 5px;
}

/* Keep open class for compatibility, but body is always shown */
.server-dropdown-body.open {
  display: flex;
}

/* Arrow always points up (expanded state) */
.server-dropdown-arrow {
  transform: rotate(180deg);
}

/* ---------- Revised positioning for the advantages panel (properties_table) ---------- */
/* The properties_table originally slides out from the side. It should now appear below
   the server selector inside the filter column. These overrides reposition the panel
   relative to its parent and constrain its height so content stays within the page. */
.properties_table {
  /* Hide by default; will be shown when .active class is applied */
  display: none;
  position: relative !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  /* Allow the panel to grow with its content; remove internal scrolling */
  max-height: none;
  overflow: visible;
  background: var(--card-color);
  border: 1px solid var(--bottom-line-table);
  border-radius: var(--br-8);
  padding: 15px;
  margin-top: 10px;
  z-index: inherit;
  transition: none !important;
}

/* When active, simply display the panel; no sliding animation */
.properties_table.active {
  display: block !important;
}

/* ------------------------------------------------------------------
 * Additional overrides for improved usability:
 * - Hide the advantages section below product cards
 * - Wrap and reduce font size of property table titles
 * - Hide the close button in the properties panel
 * - Remove internal scroll limits in the properties panel
 */

/* Hide the 'advantages' section and its 'show all' button under each product card.
   This applies only within a product card wrapper so the heading inside the
   properties table remains visible. */
.shop_card_wrapper .shop_product_description {
  display: none !important;
}

/* Adjust titles in the properties table: reduce font size and allow wrapping
   so long strings fit without overflowing. */
.shop_product_table_title {
  font-size: var(--font-size-xl) !important;
  white-space: normal !important;
  word-break: break-word !important;
}

/* Hide the close arrow inside the properties panel; the panel now
   appears inline and does not need an explicit close control. */
.close_properties_table {
  display: none !important;
}

/* Remove height restrictions from the properties list to display all advantages
   without requiring a scrollbar. */
.props {
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

/* Hide the close button inside the advantages panel */
.close_properties_table {
  display: none !important;
}

/* Ensure all advantages are visible without scrolling */
.properties_table .props {
  max-height: none !important;
  overflow: visible !important;
}

/* Hide the advantages label and “show all” button under product cards */
.shop_card_wrapper .shop_product_description {
  display: none !important;
}

/* Reduce font-size of long product titles in the advantages panel and allow wrapping */
.shop_product_table_title {
  font-size: var(--font-size-xl) !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.2 !important;
}

/* Slow glow for the selected server in the right server list */
.shop_server.shop_button_servers.shop_server_active,
.shop_server.shop_button_servers.active {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--span) !important;
  color: var(--text-default) !important;
  border: 1px solid var(--span) !important;
  animation: shop-selected-server-button-glow 3.6s ease-in-out infinite;
}

.shop_server.shop_button_servers.shop_server_active::after,
.shop_server.shop_button_servers.active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 0 8px rgba(255, 255, 255, 0.06);
  opacity: 0.25;
  animation: shop-selected-server-button-inner-glow 3.6s ease-in-out infinite;
}

@keyframes shop-selected-server-button-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 214, 74, 0), 0 0 0 0 rgba(255, 214, 74, 0);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 8px 1px rgba(255, 214, 74, 0.35), 0 0 18px 2px rgba(255, 214, 74, 0.10);
    transform: scale(1.005);
  }
}

@keyframes shop-selected-server-button-inner-glow {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .shop_server.shop_button_servers.shop_server_active,
  .shop_server.shop_button_servers.active,
  .shop_server.shop_button_servers.shop_server_active::after,
  .shop_server.shop_button_servers.active::after {
    animation: none;
  }
}