body.xr-payment-gateways-route app-payment-gateways-settings .card {
  border: 1px solid rgba(33, 37, 41, 0.08) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08) !important;
}

body.xr-payment-gateways-route app-payment-gateways-settings .card-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 54px !important;
  border-bottom-color: rgba(33, 37, 41, 0.08) !important;
  background: #fff !important;
  color: #1f2933 !important;
  font-weight: 700 !important;
}

body.xr-payment-gateways-route app-payment-gateways-settings .card-header .fa {
  color: #f0a45e !important;
}

body.xr-payment-gateways-route app-payment-gateways-settings .list-group {
  display: grid !important;
  gap: 10px !important;
}

body.xr-payment-gateways-route app-payment-gateways-settings .xr-gateway-item {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 74px !important;
  padding: 12px !important;
  border: 1px solid rgba(31, 41, 55, 0.1) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.055) !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

body.xr-payment-gateways-route app-payment-gateways-settings .xr-gateway-item:hover {
  border-color: rgba(240, 164, 94, 0.55) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1) !important;
  transform: translateY(-1px) !important;
}

body.xr-payment-gateways-route app-payment-gateways-settings .xr-gateway-item.active {
  border-color: rgba(240, 164, 94, 0.78) !important;
  background: linear-gradient(180deg, #fffdf9 0%, #fff 100%) !important;
  box-shadow: 0 16px 34px rgba(240, 164, 94, 0.18) !important;
}

body.xr-payment-gateways-route app-payment-gateways-settings .xr-gateway-hidden {
  display: none !important;
}

body.xr-payment-gateways-route app-payment-gateways-settings .xr-gateway-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 58px !important;
  height: 46px !important;
  padding: 7px !important;
  border: 1px solid rgba(31, 41, 55, 0.08) !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
}

body.xr-payment-gateways-route app-payment-gateways-settings .xr-gateway-logo img {
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

body.xr-payment-gateways-route app-payment-gateways-settings .xr-gateway-copy {
  min-width: 0 !important;
}

body.xr-payment-gateways-route app-payment-gateways-settings .xr-gateway-copy h5,
body.xr-payment-gateways-route app-payment-gateways-settings .xr-gateway-item h5 {
  margin: 0 0 3px !important;
  color: #1f2933 !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

body.xr-payment-gateways-route app-payment-gateways-settings .xr-gateway-copy small,
body.xr-payment-gateways-route app-payment-gateways-settings .xr-gateway-item small:not(.gw-enabled):not(.gw-disabled) {
  display: block !important;
  color: #6b7280 !important;
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
}

body.xr-payment-gateways-route app-payment-gateways-settings .xr-gateway-item .gw-enabled,
body.xr-payment-gateways-route app-payment-gateways-settings .xr-gateway-item .gw-disabled {
  justify-self: end !important;
  align-self: center !important;
  min-width: 72px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  text-align: center !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

body.xr-payment-gateways-route app-payment-gateways-settings .xr-gateway-item .gw-enabled {
  color: #0f7a3a !important;
  background: rgba(45, 164, 78, 0.12) !important;
}

body.xr-payment-gateways-route app-payment-gateways-settings .xr-gateway-item .gw-disabled {
  color: #a44312 !important;
  background: rgba(240, 164, 94, 0.16) !important;
}

body.xr-payment-gateways-route app-payment-gateways-settings .xr-selected-gateway-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
}

body.xr-payment-gateways-route app-payment-gateways-settings .xr-selected-gateway-title .xr-selected-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 58px !important;
  height: 42px !important;
  padding: 6px !important;
  border: 1px solid rgba(31, 41, 55, 0.08) !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
}

body.xr-payment-gateways-route app-payment-gateways-settings .xr-selected-gateway-title img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

body.xr-payment-gateways-route app-payment-gateways-settings .xr-gateway-note {
  margin: 0 0 12px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(240, 164, 94, 0.28) !important;
  border-radius: 8px !important;
  background: #fffaf3 !important;
  color: #7a4b16 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}

@media (max-width: 767.98px) {
  body.xr-payment-gateways-route app-payment-gateways-settings .xr-gateway-item {
    grid-template-columns: 54px minmax(0, 1fr) !important;
  }

  body.xr-payment-gateways-route app-payment-gateways-settings .xr-gateway-item .gw-enabled,
  body.xr-payment-gateways-route app-payment-gateways-settings .xr-gateway-item .gw-disabled {
    grid-column: 2 !important;
    justify-self: start !important;
  }
}