.iban-details-card {
  min-width: 0;
  margin-top: 14px;
  padding: 24px;
  border: 1px solid rgba(184, 147, 74, .34);
  border-radius: 16px;
  background: radial-gradient(circle at 100% 0, rgba(184, 147, 74, .09), transparent 34%), linear-gradient(145deg, #fff, #fbf6ed);
  box-shadow: 0 12px 30px rgba(59, 42, 26, .055);
  color: #3b2a1a;
}

.iban-details-head {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.iban-details-mark {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(184, 147, 74, .3);
  border-radius: 14px;
  background: #fff;
  color: #9a7838;
  display: grid;
  place-items: center;
}

.iban-details-mark svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iban-details-kicker {
  display: block;
  margin-bottom: 3px;
  color: #9a7838;
  font: 800 9.5px/1.3 Montserrat, Manrope, sans-serif;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.iban-details-head h4 {
  margin: 0;
  color: #3b2a1a;
  font: 700 28px/1.08 "Cormorant Garamond", Georgia, serif;
}

.iban-details-head p {
  max-width: 760px !important;
  margin: 5px 0 0 !important;
  color: #7d5e45 !important;
  font: 500 12.5px/1.55 Manrope, sans-serif !important;
}

.iban-payment-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 15px 17px;
  border: 1px solid rgba(184, 147, 74, .32);
  border-radius: 12px;
  background: #3b2a1a;
  color: #fff;
}

.iban-payment-summary > div { display: grid; gap: 2px; }
.iban-payment-summary > div span {
  color: rgba(255, 255, 255, .72);
  font: 700 9px/1.3 Montserrat, Manrope, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.iban-payment-summary > div strong {
  color: #fff;
  font: 800 26px/1.15 Manrope, sans-serif;
  white-space: nowrap;
}

.iban-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.iban-detail-row {
  min-width: 0;
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(226, 213, 197, .82);
  border-radius: 10px;
  background: rgba(255, 255, 255, .88);
}

.iban-detail-row.is-primary { grid-column: 1 / -1; }
.iban-detail-copy { min-width: 0; display: grid; gap: 3px; }
.iban-detail-copy > span {
  color: #9a7838;
  font: 800 8.5px/1.25 Montserrat, Manrope, sans-serif;
  letter-spacing: .9px;
  text-transform: uppercase;
}
.iban-detail-copy > strong {
  min-width: 0;
  color: #3b2a1a;
  font: 750 12.5px/1.4 Manrope, sans-serif;
  overflow-wrap: anywhere;
}
.iban-detail-copy > strong.is-monospace {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .35px;
}

.iban-copy-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(184, 147, 74, .38);
  border-radius: 8px;
  background: #fbf4e8;
  color: #87672f;
  padding: 8px 10px;
  font: 800 11.5px/1.2 Montserrat, Manrope, sans-serif;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.iban-copy-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.iban-copy-button:hover,
.iban-copy-button:focus-visible { border-color: #b8934a; background: #b8934a; color: #fff; outline: none; }
.iban-copy-button:active { transform: scale(.98); }
.iban-copy-button.is-copied { border-color: #6d8a55; background: #eef5e9; color: #55723f; }
.iban-payment-summary .iban-copy-button { border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .1); color: #fff; }
.iban-payment-summary .iban-copy-button:hover { background: #fff; color: #3b2a1a; }

.iban-details-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.iban-details-actions .iban-copy-button { min-height: 42px; padding: 10px 14px; }
.iban-details-note {
  margin: 12px 0 0 !important;
  padding: 11px 13px;
  border-left: 3px solid rgba(184, 147, 74, .65);
  border-radius: 0 8px 8px 0;
  background: rgba(248, 242, 231, .8);
  color: #7d5e45 !important;
  font: 600 10.5px/1.55 Manrope, sans-serif !important;
}
.iban-copy-status { min-height: 0; color: #55723f; font: 700 10px/1.4 Manrope, sans-serif; text-align: right; }
.iban-copy-status:not(:empty) { margin-top: 7px; }

.payment-account-panel .iban-details-card { margin-top: 0; }
.success-card .iban-details-card { margin-top: 0; }
.success-card .iban-details-head h4 { font-size: 27px; }

@media (max-width: 760px) {
  .iban-details-card { padding: 16px; border-radius: 13px; }
  .iban-details-head { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; margin-bottom: 14px; }
  .iban-details-mark { width: 48px; height: 48px; border-radius: 12px; }
  .iban-details-mark svg { width: 24px; height: 24px; }
  .iban-details-head h4, .success-card .iban-details-head h4 { font-size: 23px; }
  .iban-details-head p { font-size: 10.8px !important; }
  .iban-payment-summary { padding: 13px; gap: 10px; }
  .iban-payment-summary > div strong { font-size: 22px; }
  .iban-payment-summary .iban-copy-button span { display: none; }
  .iban-detail-list { grid-template-columns: 1fr; gap: 8px; }
  .iban-detail-row, .iban-detail-row.is-primary { grid-column: auto; min-height: 58px; padding: 9px 10px; }
  .iban-detail-copy > strong { font-size: 11px; }
  .iban-copy-button { padding: 7px 8px; }
  .iban-copy-button span { font-size: 10.5px; }
  .iban-details-actions .iban-copy-button { width: 100%; }
  .iban-details-note { font-size: 9.7px !important; }
}

@media (max-width: 520px) {
  .iban-payment-summary { align-items: flex-start; }
  .iban-payment-summary > div strong { font-size: 20px; }
  .iban-detail-row { grid-template-columns: minmax(0, 1fr) auto; }
  .iban-detail-row > .iban-copy-button { width: auto; max-width: 176px; padding: 8px 10px; }
  .iban-detail-row > .iban-copy-button span { display: inline; }
  .iban-detail-row.is-nowrap-value { grid-template-columns: minmax(0, 1fr) 38px; gap: 7px; }
  .iban-detail-row.is-nowrap-value .iban-detail-copy > strong.is-nowrap {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    font-size: clamp(8.8px, 2.55vw, 10.5px);
    letter-spacing: 0;
  }
  .iban-detail-row.is-nowrap-value > .iban-copy-button {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    padding: 8px;
  }
  .iban-detail-row.is-nowrap-value > .iban-copy-button span { display: none; }
}

/* iOS: keep the two long payment values on one visual line and leave only the copy icon. */
@media (max-width: 520px) {
  .iban-detail-row,
  .iban-detail-row.is-nowrap-value {
    grid-template-columns: minmax(0, 1fr) 36px !important;
    gap: 5px !important;
    padding-left: 8px;
    padding-right: 8px;
  }
  .iban-detail-row.is-nowrap-value .iban-detail-copy {
    min-width: 0;
    overflow: hidden;
  }
  .iban-detail-row.is-nowrap-value .iban-detail-copy > strong.is-nowrap {
    display: block;
    width: 100%;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: clamp(8.4px, 2.38vw, 10px);
    letter-spacing: -.04px;
  }
  .iban-detail-row > .iban-copy-button {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px;
    padding: 7px !important;
  }
  .iban-detail-row > .iban-copy-button span {
    display: none !important;
  }
}

@media (max-width: 350px) {
  .iban-detail-row.is-nowrap-value { grid-template-columns: minmax(0, 1fr) 34px; gap: 5px; padding-left: 8px; padding-right: 8px; }
  .iban-detail-row.is-nowrap-value > .iban-copy-button { width: 34px; min-width: 34px; max-width: 34px; padding: 7px; }
  .iban-detail-row.is-nowrap-value .iban-detail-copy > strong.is-nowrap { font-size: 8.6px; }
}