.bank-details {
  margin-top: 28px;
  padding: 40px;
  color: #fff;
  background: linear-gradient(135deg, #0c2650, #071a37);
  border: 1px solid rgba(127, 184, 240, .3);
  border-radius: 20px;
}
.bank-details-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.bank-details-heading h3 { margin: 0; font-size: 1.5rem; }
.bank-name { display: inline-flex; flex: 0 0 auto; max-width: 100%; }
.bank-logo { display: block; width: 144px; max-width: 100%; height: auto; border-radius: 5px; }
.bank-details-list {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr);
  gap: 20px 32px;
  margin: 24px 0;
}
.bank-details-list dt { color: #aebdd2; font-size: .9375rem; }
.bank-details-list dd { margin: 6px 0 0; font-size: 1.125rem; font-weight: 700; }
#tel4u-bank-number {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  overflow-wrap: anywhere;
  user-select: all;
}
.bank-copy-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.bank-copy-button { border: 0; cursor: pointer; font-family: inherit; }
.bank-copy-button[hidden] { display: none; }
.bank-copy-button:focus-visible { outline: 3px solid #85c5ff; outline-offset: 4px; }
#tel4u-bank-status { margin: 0; color: #c5d3e6; font-size: .9375rem; }
@media (max-width: 850px) {
  .bank-details { padding: 32px; }
  .bank-details-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .bank-details { padding: 28px 20px; }
  .bank-copy-button { width: 100%; }
}