.cf-credit-hero { overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 24px; background: #fff; color: var(--cf-navy); box-shadow: 0 28px 70px rgba(5,18,47,.28); }
.cf-credit-hero__document { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 20px 22px; }
.cf-credit-hero__document > div { display: grid; }
.cf-credit-hero__document span, .cf-credit-hero__document small { color: var(--cf-muted); font-size: .74rem; }
.cf-credit-hero__document b { align-self: center; font-size: 1.2rem; }
.cf-credit-hero__document small { grid-column: 1 / -1; }
.cf-credit-hero__document.credit { background: #f3eefe; }
.cf-credit-hero__document.credit b { color: #6941c6; }
.cf-credit-hero__link { display: grid; justify-items: center; padding: 10px; border-block: 1px solid var(--cf-line); background: var(--cf-bg); }
.cf-credit-hero__link span { color: var(--cf-cyan-dark); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.cf-credit-hero__link i { color: var(--cf-cyan-dark); font-style: normal; }
.cf-credit-hero__link small { color: var(--cf-muted); }
.cf-credit-hero > a { display: block; padding: 14px 22px; background: var(--cf-navy); color: #fff; font-weight: 750; text-decoration: none; }

.cf-credit-start, .cf-credit-history, .cf-credit-parent { background: #fff; }
.cf-credit-form { overflow: hidden; border: 1px solid var(--cf-line); border-radius: 22px; background: #fff; box-shadow: var(--cf-shadow); }
.cf-credit-form__head, .cf-credit-form__invoice, .cf-credit-form__total { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.cf-credit-form__head { padding: 20px; border-bottom: 1px solid var(--cf-line); }
.cf-credit-form__head > div { display: grid; }
.cf-credit-form__head small { color: var(--cf-muted); }
.cf-credit-form__head > span { padding: 7px 10px; border-radius: 999px; background: #eef1f6; color: #4c5c74; font-size: .72rem; font-weight: 800; }
.cf-credit-form__invoice { padding: 16px 20px; background: var(--cf-bg); }
.cf-credit-form__invoice p { display: grid; margin: 0; }
.cf-credit-form__invoice small { color: var(--cf-muted); }
.cf-credit-form__lines { padding: 0 20px; }
.cf-credit-form__lines > div { display: flex; align-items: center; gap: 11px; padding: 15px 0; border-bottom: 1px solid var(--cf-line); }
.cf-credit-form__lines i { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--cf-line); border-radius: 9px; font-style: normal; }
.cf-credit-form__lines .selected i { border-color: #6941c6; background: #f3eefe; color: #6941c6; }
.cf-credit-form__lines p { display: grid; flex: 1; margin: 0; }
.cf-credit-form__lines small { color: var(--cf-muted); }
.cf-credit-form__lines .selected b { color: #6941c6; }
.cf-credit-form__reason { display: grid; gap: 3px; margin: 16px 20px; padding: 14px; border: 1px solid #ddd2fa; border-radius: 13px; background: #faf8ff; }
.cf-credit-form__reason span, .cf-credit-form__reason small { color: var(--cf-muted); font-size: .74rem; }
.cf-credit-form__total { padding: 16px 20px; background: var(--cf-navy); color: #fff; }
.cf-credit-form__total strong { color: var(--cf-cyan); font-size: 1.2rem; }

.cf-credit-process { background: var(--cf-navy); color: #fff; }
.cf-credit-process p { color: rgba(255,255,255,.7); }
.cf-credit-process-grid { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; }
.cf-credit-process-grid::before { content: ""; position: absolute; top: 35px; right: 7%; left: 7%; height: 2px; background: rgba(78,208,203,.45); }
.cf-credit-process-grid article { position: relative; min-height: 190px; padding: 24px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(12,31,65,.96); }
.cf-credit-process-grid b { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 20px; border: 1px solid rgba(78,208,203,.45); border-radius: 13px; background: var(--cf-navy); color: var(--cf-cyan); font-size: .74rem; }
.cf-credit-process-grid span { display: block; margin-bottom: 9px; font-weight: 800; }
.cf-credit-process-grid p { margin: 0; font-size: .8rem; line-height: 1.55; }

.cf-credit-history-card { overflow: hidden; border: 1px solid var(--cf-line); border-radius: 22px; background: #fff; box-shadow: var(--cf-shadow); }
.cf-credit-history-card__title, .cf-credit-history-card__item { display: flex; align-items: center; gap: 12px; }
.cf-credit-history-card__title { padding: 20px; background: var(--cf-navy); color: #fff; }
.cf-credit-history-card__title > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--cf-cyan); color: var(--cf-navy); font-weight: 850; }
.cf-credit-history-card p { display: grid; flex: 1; margin: 0; }
.cf-credit-history-card small { color: var(--cf-muted); }
.cf-credit-history-card__title small { color: rgba(255,255,255,.62); }
.cf-credit-history-card__item { padding: 17px 20px; }
.cf-credit-history-card__item > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #e9f5ff; color: #176fa5; font-style: normal; }
.cf-credit-history-card__item.credit > i { background: #f3eefe; color: #6941c6; }
.cf-credit-history-card__item.credit b { color: #6941c6; }
.cf-credit-history-card__connector { display: flex; align-items: center; gap: 10px; padding: 8px 20px; border-block: 1px solid var(--cf-line); background: var(--cf-bg); }
.cf-credit-history-card__connector span { width: 22px; height: 2px; background: var(--cf-cyan-dark); }
.cf-credit-history-card__result { display: flex; justify-content: space-between; padding: 16px 20px; background: #eaf8f1; color: #14734c; }

.cf-credit-reasons, .cf-credit-integration { background: var(--cf-bg); }
.cf-credit-reasons article { height: 100%; padding: 25px; border: 1px solid var(--cf-line); border-radius: 20px; background: #fff; box-shadow: 0 12px 30px rgba(12,31,65,.05); }
.cf-credit-reasons article > span { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 14px; font-size: .9rem; font-weight: 850; }
.cf-credit-reasons span.duplicate { background: #fff0ef; color: #b13f3a; }
.cf-credit-reasons span.amount { background: #fff5dd; color: #986d0c; }
.cf-credit-reasons span.cancel { background: #f3eefe; color: #6941c6; }
.cf-credit-reasons span.other { background: #e9f5ff; color: #176fa5; }
.cf-credit-reasons h3 { font-size: 1.08rem; }
.cf-credit-reasons p { margin: 0; color: var(--cf-muted); }

.cf-credit-parent-panel { overflow: hidden; border: 1px solid var(--cf-line); border-radius: 22px; background: #fff; box-shadow: var(--cf-shadow); }
.cf-credit-parent-panel__top { display: flex; justify-content: space-between; gap: 15px; padding: 20px; border-bottom: 1px solid var(--cf-line); }
.cf-credit-parent-panel__top > div { display: grid; }
.cf-credit-parent-panel__top small, .cf-credit-parent-panel__top > span { color: var(--cf-muted); }
.cf-credit-parent-panel__row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--cf-line); }
.cf-credit-parent-panel__row > i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #e9f5ff; color: #176fa5; font-style: normal; }
.cf-credit-parent-panel__row.credit > i { background: #f3eefe; color: #6941c6; }
.cf-credit-parent-panel__row p { display: grid; margin: 0; }
.cf-credit-parent-panel__row small { color: var(--cf-muted); }
.cf-credit-parent-panel__row > span { color: #14734c; font-size: .74rem; font-weight: 750; }
.cf-credit-parent-panel__balance { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #eaf8f1; color: #14734c; }

.cf-credit-exchange { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 25px; border: 1px solid var(--cf-line); border-radius: 22px; background: #fff; box-shadow: var(--cf-shadow); }
.cf-credit-exchange > div { display: flex; align-items: center; gap: 10px; padding: 15px; border-radius: 14px; background: var(--cf-navy); color: #fff; }
.cf-credit-exchange > div:nth-of-type(2) { background: #edf8f7; color: var(--cf-navy); }
.cf-credit-exchange > div > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--cf-cyan); color: #fff; font-weight: 850; }
.cf-credit-exchange p { display: grid; margin: 0; }
.cf-credit-exchange small { color: rgba(255,255,255,.62); }
.cf-credit-exchange > div:nth-of-type(2) small { color: var(--cf-muted); }
.cf-credit-exchange > i { color: var(--cf-cyan-dark); font-size: 1.3rem; font-style: normal; }
.cf-credit-exchange > section { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3,1fr); gap: 8px; }
.cf-credit-exchange > section span { padding: 8px; border: 1px solid var(--cf-line); border-radius: 9px; color: var(--cf-muted); font-size: .72rem; text-align: center; }
.cf-credit-boundary { overflow: hidden; margin: 22px 0; border: 1px solid var(--cf-line); border-radius: 16px; background: #fff; }
.cf-credit-boundary > div { display: grid; gap: 2px; padding: 13px 16px; border-bottom: 1px solid var(--cf-line); }
.cf-credit-boundary > div:last-child { border-bottom: 0; }
.cf-credit-boundary span { color: var(--cf-cyan-dark); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }

@media (max-width:1199.98px) {
  .cf-credit-process-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .cf-credit-process-grid::before { display: none; }
}
@media (max-width:767.98px) {
  .cf-credit-exchange { grid-template-columns: 1fr; }
  .cf-credit-exchange > i { transform: rotate(90deg); justify-self: center; }
  .cf-credit-exchange > section { grid-column: auto; grid-template-columns: repeat(2,1fr); }
}
@media (max-width:575.98px) {
  .cf-credit-process-grid { grid-template-columns: 1fr; }
  .cf-credit-process-grid article { min-height: 0; }
  .cf-credit-parent-panel__row { grid-template-columns: auto 1fr auto; }
  .cf-credit-parent-panel__row > span { grid-column: 2 / -1; }
  .cf-credit-exchange > section { grid-template-columns: 1fr; }
}