/* ===== 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; }

.payment-settings__fulfillment {
  margin-top: 1.25rem;
  padding: 1.15rem;
  border: 1px solid #d7e2e5;
  border-radius: 14px;
  background: #f8fbfb;
}

.payment-settings__fulfillment-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.payment-settings__eyebrow {
  margin: 0 0 .25rem;
  color: #397887;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.payment-settings__fulfillment h6 {
  margin: 0;
  color: #17323a;
  font-size: 1.05rem;
}

.payment-settings__status {
  flex: 0 0 auto;
  padding: .35rem .65rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
}

.payment-settings__status.is-ready {
  color: #16643f;
  background: #dff4e8;
}

.payment-settings__status.is-needed {
  color: #8a4b12;
  background: #fff0df;
}

.payment-settings__fulfillment-summary {
  margin: .85rem 0 1rem;
  color: #5e7379;
  line-height: 1.55;
}

.payment-settings__saved-card,
.payment-settings__fulfillment-callout {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem .9rem;
  border-radius: 10px;
}

.payment-settings__saved-card {
  border: 1px solid #d9e4e7;
  background: #fff;
}

.payment-settings__saved-card small {
  display: block;
  margin-top: .1rem;
  color: #72858b;
}

.payment-settings__card-mark {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 9px;
  color: #397887;
  background: #e8f1f3;
  font-size: 1.1rem;
}

.payment-settings__fulfillment-callout {
  color: #754410;
  background: #fff0df;
}

.payment-settings__fulfillment-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1rem;
}

.payment-settings__fulfillment-actions form,
.payment-settings__explanation-modal .modal-footer form {
  margin: 0;
}

.payment-settings__why-link {
  padding-inline: .25rem;
  color: #397887;
  font-weight: 700;
  text-decoration: none;
}

.payment-settings__explanation-modal .modal-content {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(20, 48, 56, .2);
}

.payment-settings__explanation-modal .modal-header,
.payment-settings__explanation-modal .modal-footer {
  padding: 1.25rem 1.4rem;
}

.payment-settings__explanation-modal .modal-body {
  padding: 1.25rem 1.4rem;
}

.payment-settings__funding-steps {
  display: grid;
  gap: .75rem;
  margin: 1rem 0;
  padding-left: 1.35rem;
  color: #344e55;
}

.payment-settings__modal-note {
  display: flex;
  gap: .75rem;
  margin: 1rem 0;
  padding: .9rem;
  border-radius: 10px;
  color: #245763;
  background: #edf5f6;
}

.payment-settings__modal-note p { margin: 0; }

/* ===== 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;
  }

  .payment-settings__fulfillment-heading {
    flex-direction: column;
    gap: .65rem;
  }

  .payment-settings__fulfillment-actions,
  .payment-settings__fulfillment-actions form,
  .payment-settings__fulfillment-actions .btn {
    width: 100%;
  }
}

/* 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;
  }
}