@font-face {
  font-family: "Koalafi";
  src: url("/wp-content/plugins/koalafi-plugin/images/Koalafi.ttf")
      format("truetype"),
    url("/wp-content/plugins/koalafi-plugin/images/Koalafi.woff2")
      format("woff2"),
    url("/wp-content/plugins/koalafi-plugin/images/Koalafi.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

#koalafi-shop-first {
  text-align: center;
  /* width: 100%;
  border: 1px solid #cfcfcf;
  background-color: #d9d5d5;
  color: black;
  font-weight: bold;
  padding: 10px; */
  cursor: pointer;
}

#koalafi-shop-first-hidden {
  display: none;
}

#koalafi-approval-first {
  cursor: pointer;
}

.koalafi-right-align {
  background-color: #a6bfd5;
  color: #314054;
  width: 100px;
  text-align: center;
  font-weight: bold;
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 5px;
  float: right;
  cursor: pointer;
}

.koalafi-left-align {
  background-color: #a6bfd5;
  color: #314054;
  width: 100px;
  text-align: center;
  font-weight: bold;
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 5px;
  float: left;
  cursor: pointer;
}

.koalafi-approval {
}

.koalafi-clear {
  clear: both;
}

.theme-pyxl-base #koalafi-shop-first {
  /* background-color: #c48235;
  color: white;
  width: 155px;
  padding: 12px 24px; */
}

.payment_method_koalafi #payment .payment_methods li img {
  float: left;
}

#koalafi-as-low-as,
#koalafi-lease-message {
  padding: 10px 0;
  clear: both;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.koalafi-description {
  font-size: 16px;
}

.koalafi-description ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.koalafi-logo-small {
  height: 13px;
  display: inline-block;
}

label[for="payment_method_koalafi"] {
  display: inline-block;
  margin-right: 10px;
  font-weight: bold;
  width: 100%;
  padding-bottom: 2%;
  margin-bottom: 0px;
}

label[for="payment_method_koalafi"] img {
  vertical-align: middle;
  width: 120px;
  height: auto;
}

/* Media query for screens below 380 pixels */
@media (max-width: 380px) {
  label[for="payment_method_koalafi"] {
      display: block; /* Change to block-level to stack elements */
      text-align: center; /* Center-align text and image */
  }

  label[for="payment_method_koalafi"] img {
      display: block; /* Change to block-level to stack below text */
      margin: 0 auto; /* Center-align image */
  }
}


/* label[for="payment_method_koalafi"]::before {
  content: "Pay over time with "; 
  font-style: italic; 
  color: #666; 
} */