/* ===== Payment Settings (scoped) ===== */
.payment-settings {}

/* Header that holds the logo */
.payment-settings .provider-header{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f3f5;
  min-height: 0 !important;
  height: 64px;            /* cap header height on desktop */
  overflow: hidden;        /* prevent tall content from expanding */
}

/* 🔒 FORCE a fixed-width badge so global rules can't inflate it */
.payment-settings .provider-header img.brand{
  display: inline-block !important;
  width: 160px !important;      /* desktop cap */
  max-width: 160px !important;
  height: auto !important;      /* keep aspect ratio */
  object-fit: contain !important;
  line-height: 0;
}

/* Buttons */
.payment-settings .card-body .btn{ white-space: nowrap; }

/* Currency/Sales Tax tiny nicety */
.payment-settings #sales_tax_rate{ text-align: right; }

/* ===== Mobile only ===== */
@media (max-width: 576px){
  .payment-settings .provider-header{
    padding: 8px 10px;
    gap: 8px;
    height: 50px;          /* shorter header on phones */
  }
  /* Smaller badges on phones */
  .payment-settings .provider-header img.brand{
    width: 120px !important;     /* phone cap */
    max-width: 120px !important;
    height: auto !important;
  }
}

/* Ultra-narrow phones */
@media (max-width: 360px){
  .payment-settings .provider-header{
    height: 46px;          /* extra-compact on very small screens */
  }
  .payment-settings .provider-header img.brand{
    width: 100px !important;
    max-width: 100px !important;
  }
}