.refill-modal { --refill-caret-width: 2px; }
.refill-modal:not(.tbank-modal) .modal-backdrop { background: rgb(29 32 35 / .4); }
.refill-sheet:not(.tbank-sheet) {
  --sheet-fallback-height: initial;
  --refill-ink: #031918;
}

.refill-sheet:not([data-refill-sections], .success-sheet, .tbank-sheet) .sheet-content {
  background: linear-gradient(transparent, #fff 51.128%),
    linear-gradient(rgb(255 255 255 / .3), rgb(255 255 255 / .3)), url('../assets/refill-header.png');
  background-repeat: no-repeat;
  background-size: 100% 603px;
}

.refill-sheet:not(.success-sheet, .tbank-sheet) .sheet-header::before { opacity: 0; }
.refill-sheet[data-refill-scrolled]:not(.success-sheet, .tbank-sheet) .sheet-header::before { opacity: 1; }
.refill-sheet:not(.tbank-sheet) .sheet-close { background: #fff; }
.refill-sheet:not(.tbank-sheet) .sheet-close:hover { background: var(--surface-soft); }
.refill-sheet:not(.tbank-sheet) .sheet-avatar,
.refill-sheet.tbank-sheet .refill-help { display: none; }
.refill-help {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  height: 32px;
  border-radius: 12px;
  background: #fff;
}

.refill-purchase { padding: 0 20px 16px; }
.refill-purchase .refill-commission { color: var(--text-primary); }
.refill-sheet .card-badge { width: 87px; }
.refill-recipient {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
}
.refill-recipient-avatar {
  display: block;
  border: 2.2px solid #efedff;
  border-radius: 50%;
  object-fit: cover;
}
.refill-recipient-details {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: -14px;
  padding: 8px 12px 8px 16px;
  border-radius: 16px;
  background: #fff;
  z-index: 1;
}
.refill-recipient-details strong { display: block; font: 500 14px/20px var(--font-ui); }
.refill-recipient-details div > span { display: block; font: 400 12px/16px var(--font-ui); white-space: nowrap; }
.refill-recipient-details b { color: #6378c3; font-weight: 500; }
.refill-recipient-chevron { display: grid; place-items: center; padding: 2px; border-radius: 50%; background: var(--surface-soft); }

.multi-refill-avatars {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: end;
  height: 100px;
}
.multi-refill-avatars .refill-recipient-avatar { position: relative; z-index: 2; pointer-events: none; }
.multi-refill-add {
  position: relative;
  z-index: 1;
  display: grid;
  width: 83.6px;
  height: 83.6px;
  margin-left: -26.4px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #abbbde;
  pointer-events: none;
}
.multi-refill-promo {
  position: absolute;
  top: -12.1px;
  right: -12.48px;
  width: 52.627px;
  height: 52.627px;
}
.multi-refill-promo img {
  position: absolute;
  top: 34.014px;
  left: 17.784px;
  width: 116.738px;
  height: 66.238px;
  translate: -50% -50%;
  transform: rotate(45deg);
}
.multi-refill-promo span {
  position: absolute;
  top: calc(50% + 7.94px);
  left: 16.78px;
  translate: -50% -50%;
  transform: rotate(45deg);
  font: 700 8.8px/13.2px var(--font-wide);
  letter-spacing: -.11px;
  white-space: nowrap;
}
.multi-refill-secondary {
  position: relative;
  border: 2.2px solid var(--surface-soft);
  border-radius: 50%;
  object-fit: cover;
}
.multi-refill-recipient[data-count="3"] .multi-refill-avatars .refill-recipient-avatar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.multi-refill-recipient[data-count="3"] .multi-refill-secondary:first-child { transform: translateX(-36px); }
.multi-refill-recipient[data-count="3"] .multi-refill-secondary:nth-child(2) { transform: translateX(36px); }
.multi-refill-details {
  border: 0;
  color: var(--text-primary);
  text-align: left;
}
.multi-refill-recipient:not([data-count]) .multi-refill-details { margin-top: -12px; }
.multi-refill-single > span { display: block; font: 400 12px/16px var(--font-ui); white-space: nowrap; }
.multi-refill-total { display: grid; justify-items: center; color: var(--refill-ink); font: 500 14px/24px var(--font-ui); }
.multi-refill-total-value { max-width: 100%; padding: 2px 0 4px; font: 400 32px/40px var(--font-merchant); text-align: center; overflow-wrap: anywhere; }

.refill-amount-field {
  container-type: inline-size;
}
.refill-amount-target {
  display: grid;
  justify-items: center;
  border-radius: 20px;
  cursor: text;
  transition: background-color 160ms ease;
}
.refill-sheet[data-refill-desktop] .refill-amount-target {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 12px;
}
.refill-sheet[data-refill-desktop] .refill-amount-target:hover { background: rgb(29 32 35 / .035); }
.refill-sheet:not([data-refill-desktop]) .refill-commission { cursor: text; }
.refill-amount-title { color: var(--refill-ink); font: 500 14px/24px var(--font-ui); }
.refill-commission { display: block; text-align: center; font: 400 14px/20px var(--font-ui); }
.refill-amount-line {
  display: flex;
  align-items: center;
  padding: 2px 0 4px 8px;
  color: var(--refill-ink);
  font: 400 32px/40px var(--font-merchant);
  font-size: clamp(16px, calc(94cqi / var(--refill-characters, 4)), 32px);
  white-space: nowrap;
}
.refill-amount-number { position: relative; display: inline-block; }
.refill-amount-measure { visibility: hidden; }
.refill-amount-number > .refill-amount-morph { position: absolute; inset: 0; pointer-events: none; }
#refillAmount {
  appearance: none;
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(100% + var(--refill-caret-width));
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--text-primary);
  background: transparent;
  font: inherit;
}
.refill-amount-caret, .refill-caret-marker {
  width: var(--refill-caret-width);
  border-radius: 1px;
  background: var(--text-primary);
  animation: refill-blink 1.06s step-end infinite;
}
.refill-amount-caret { flex: 0 0 var(--refill-caret-width); height: 40px; }
.refill-amount-number:focus-within + .refill-amount-caret { visibility: hidden; }
.refill-modal :is(.autopay-settings-money, .bank-code) { position: relative; }
.refill-modal input[data-refill-caret], #refillAmount[data-refill-caret] { caret-color: transparent; }
.refill-caret-mirror, .refill-caret-marker { position: absolute; pointer-events: none; }
.refill-caret-mirror { top: 0; left: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; white-space: pre; }
.refill-caret-marker { height: 1em; z-index: 1; transform: translateY(-50%); }
.refill-caret-marker[hidden] { display: none; }
.refill-amount-number > .refill-caret-marker { height: 40px; }
.tbank-code-field > .refill-caret-marker { background: #eaeaea; }
.refill-amount-ruble { margin-inline-start: 4px; }
@keyframes refill-blink { 50% { opacity: 0; } }

.refill-sheet[data-refill-editing] .sheet-footer {
  --sheet-footer-fade-size: 100%;
  min-height: 0;
  padding: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .refill-sheet:not(.success-sheet, .tbank-sheet) .sheet-header::before { transition: opacity 160ms ease; }
  .refill-sheet[data-refill-restoring] :is(.methods-scroll, .offer-caption, .pay-button) {
    animation: refill-controls-in 240ms ease-out;
  }
}
@keyframes refill-controls-in { from { opacity: 0; } }

.refill-editor-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 8px 20px;
}
.refill-editor-actions button {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 16px;
  font: 700 12px/16px var(--font-wide);
  letter-spacing: .6px;
  text-transform: uppercase;
}
.refill-editor-actions .refill-dismiss-keyboard { flex: 0 0 44px; background: var(--surface-soft); }
.refill-editor-done, .refill-editor-pay { flex: 1; color: #fff; }
.refill-editor-done { background: var(--text-primary); }
.refill-editor-pay { background: linear-gradient(0deg, #031918 77.985%, #2b7d78 151.37%); }
.refill-sheet :is(.pay-button, .refill-editor-pay):disabled { opacity: .48; }

.refill-autopay {
  position: relative;
  margin-inline: 20px;
  color: var(--text-primary);
}
.refill-sheet[data-refill-editing] .refill-autopay { display: none; }
.refill-autopay-compact {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 16px 16px 16px 14px;
  border-radius: 24px;
  background: #f3f4fb;
}
.refill-autopay-pointer {
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50% 0;
  pointer-events: none;
}
.refill-autopay-art {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
}
.refill-autopay-art img { position: absolute; display: block; }
.refill-autopay-calendar { top: 14.96%; left: 7.3%; }
.refill-autopay-coins { top: 64.74%; left: 60.64%; z-index: 1; }
.refill-autopay-calendar-top { top: 2.41%; left: 33.15%; }
.refill-autopay-copy { display: grid; flex: 1; min-width: 0; }
.refill-autopay-copy strong { font: 500 14px/18px var(--font-ui); }
.refill-autopay-copy > span { font: 400 12px/16px var(--font-ui); }
.refill-autopay-settings, .refill-autopay-switch {
  display: grid;
  flex: none;
  place-items: center;
  padding: 0;
  border: 0;
}
.refill-autopay-settings { width: 24px; height: 24px; border-radius: 8px; background: var(--surface); }
.refill-autopay-switch { width: 42px; height: 24px; border-radius: 12px; background: transparent; }
.refill-autopay-switch .flex-switch-track { width: 100%; background: rgb(188 195 208 / .25); }
.refill-autopay-switch .flex-switch-track::after { box-shadow: none; }
.refill-autopay-switch[aria-checked="true"] .flex-switch-track { background: #26cd58; }
.refill-autopay-switch[aria-checked="true"] .flex-switch-track::after { transform: translateX(18px); }
.refill-autopay-bonus, .refill-autopay-ai {
  position: absolute;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  font: 500 12px/16px var(--font-ui);
  white-space: nowrap;
}
.refill-autopay-bonus { top: -9px; padding: 1px 2px 1px 4px; background: #d9f38b; color: var(--text-primary); }
.refill-autopay-ai {
  top: -10px;
  gap: 2px;
  padding: 2px 4px;
  background: linear-gradient(105.241deg, #ffda47 13.495%, #ff61c2 117.48%);
  color: #fafafa;
}
.refill-autopay-expanded {
  display: grid;
  gap: 12px;
  padding-block: 16px;
  border-radius: 28px;
  background: radial-gradient(ellipse 130% 128% at 50% -30%, #d6fff1, transparent 49%),
    linear-gradient(180deg, #f1f2fc, #e7eafb);
}
.refill-autopay-advice { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline: 16px; }
.refill-autopay-advice strong { line-height: 20px; }
.refill-autopay-advice b { color: #3da981; font-weight: inherit; }
.refill-autopay-advice [data-autopay-selected] b { color: #12b23f; }
.refill-autopay-plans {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-inline: 16px;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
  border-radius: 0 0 24px 24px;
}
.refill-autopay-plans button {
  flex: none;
  min-height: 32px;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--surface);
  color: #434e82;
  font: 500 12px/16px var(--font-ui);
  white-space: nowrap;
}
.refill-autopay-plans button[aria-pressed="true"] { background: var(--text-primary); color: #fafafa; }
.refill-autopay-plans button:focus-visible { outline-offset: -2px; }
.autopay-dialog {
  position: fixed;
  inset: auto 0 var(--autopay-bottom, 0px);
  width: min(100%, 440px);
  max-width: none;
  max-height: calc(var(--autopay-visible-height, 100dvh) - 16px);
  margin: 0 auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  border: 0;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--surface);
  color: var(--text-primary);
  font-synthesis: none;
}
.autopay-dialog::backdrop { --modal-backdrop-blur: 0px; background: rgb(29 32 35 / .4); }
.autopay-dialog [data-autopay-title]:focus { outline: none; }
.autopay-dialog-panel { margin: 0; }
.autopay-dialog-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 20px;
}
.autopay-dialog-heading h2, .autopay-bonus-heading h2 { margin: 0; font: 500 20px/24px var(--font-wide); }
.autopay-dialog-heading h2 { padding-block: 4px; }
.autopay-dialog-heading .sheet-close { flex: 0 0 32px; }
.autopay-dialog-heading p, .autopay-bonus-heading p { margin: 4px 0 0; color: var(--text-secondary); font: 400 14px/20px var(--font-ui); }
.autopay-settings-panel, .autopay-bonus-panel { padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
.autopay-settings-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0 20px 8px;
  padding: 10px;
  border-radius: 16px;
  background: var(--surface-soft);
  font: 400 14px/20px var(--font-ui);
}
.autopay-settings-info img { flex: none; }
.autopay-settings-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  padding: 12px 20px;
}
.autopay-settings-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 64px;
  padding: 6px 12px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: var(--surface-soft);
  color: var(--text-secondary);
  text-align: left;
  font: 400 14px/20px var(--font-ui);
}
.autopay-settings-field:focus-within { border-color: var(--active); }
.autopay-settings-money {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-primary);
  font: 400 17px/24px var(--font-ui);
}
.autopay-settings-money input {
  width: calc(var(--autopay-digits, 3) * 1ch + 1px);
  max-width: calc(100% - 20px);
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
}
.autopay-settings-amount small { display: block; margin-top: 8px; color: var(--text-secondary); font-size: 12px; line-height: 16px; }
.autopay-settings-date { position: relative; padding-right: 34px; }
.autopay-settings-date strong { color: var(--text-primary); font: 400 17px/24px var(--font-ui); }
.autopay-settings-date img { position: absolute; top: 50%; right: 12px; translate: 0 -50%; }
.autopay-dialog-actions { padding: 12px 20px 20px; }
.autopay-dialog-primary {
  width: 100%;
  min-height: 52px;
  padding: 10px 16px;
  border: 0;
  border-radius: 16px;
  background: #ff0032;
  color: #fff;
  font: 700 12px/16px var(--font-wide);
  letter-spacing: .6px;
  text-transform: uppercase;
}
.autopay-dialog-primary:active { background: #df002c; }
.autopay-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  justify-items: center;
  gap: 4px 0;
  width: min(100%, 375px);
  margin: 0 auto;
  padding: 12px 12px calc(28px + env(safe-area-inset-bottom, 0px));
}
.autopay-calendar button {
  width: min(100%, 36px);
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary);
  font: 400 17px/24px var(--font-ui);
}
.autopay-calendar button:hover { background: var(--surface-soft); }
.autopay-calendar [data-autopay-day="25"] { color: #ff0032; }
.autopay-calendar button[aria-pressed="true"] { background: var(--text-primary); color: #fff; }
.autopay-calendar [data-autopay-day="25"][aria-pressed="true"] { background: #ff0032; }
.autopay-bonus-cover, .autopay-bonus-placeholder {
  height: 192px;
  margin: 8px 8px 0;
  overflow: hidden;
  border-radius: 24px;
}
.autopay-bonus-cover { position: relative; background: linear-gradient(126deg, #e4efff 5.87%, #303b57 114.09%); }
.autopay-bonus-art {
  position: absolute;
  top: calc(50% + 1px);
  inset-inline: 0;
  aspect-ratio: 538 / 300;
  translate: 0 -50%;
  overflow: hidden;
}
.autopay-bonus-art img { position: absolute; top: -23.05%; left: 12.64%; width: 74.54%; height: 133.67%; }
.autopay-bonus-heading { padding: 16px 20px 12px; }
.autopay-bonus-heading h2 { font-size: 24px; line-height: 28px; }
.autopay-bonus-heading p { font-size: 17px; line-height: 24px; }
.autopay-bonus-benefits { margin: 0; padding: 0; list-style: none; }
.autopay-bonus-benefits li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  font: 400 17px/24px var(--font-ui);
}
.autopay-bonus-benefits small { display: block; color: var(--text-secondary); font: 400 14px/20px var(--font-ui); }
.autopay-bonus-phone { border-radius: 16px; background: var(--surface-soft); }
.autopay-bonus-card { position: relative; height: 36px; overflow: hidden; border-radius: 10px; }
.autopay-bonus-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(-30.88deg, rgb(105 113 153 / .62) 12.43%, rgb(179 188 212 / 0) 53.31%), rgb(105 113 153 / .06);
  backdrop-filter: blur(3.862px);
}
.autopay-bonus-card img { position: absolute; }
.autopay-bonus-card img:first-child { top: 35.1%; left: 90.5%; transform: translate(-50%, -50%) rotate(-11.63deg); }
.autopay-bonus-card img:last-child { right: 0; bottom: 0; z-index: 1; }
.autopay-bonus-panel .autopay-dialog-actions { padding-bottom: 12px; }
.autopay-bonus-placeholder { display: grid; place-items: center; background: var(--stroke); }
.autopay-bonus-skeleton { display: grid; gap: 22px; padding: 20px 20px 16px; }
.autopay-bonus-skeleton :is(span, div)::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--surface-soft);
  animation: autopay-skeleton-opacity 2s linear infinite;
}
.autopay-bonus-skeleton > span:first-child { width: min(240px, 100%); height: 24px; border-radius: 8px; }
.autopay-bonus-skeleton > span:last-child { height: 52px; border-radius: 16px; }
.autopay-bonus-skeleton > div {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  align-items: end;
  gap: 8px 12px;
}
.autopay-bonus-skeleton > div::before { grid-row: span 2; height: 52px; border-radius: 16px; }
.autopay-bonus-skeleton div span { width: min(200px, 100%); height: 12px; border-radius: 4px; }
.autopay-bonus-skeleton div span:last-child { width: min(110px, 100%); align-self: start; }
@keyframes autopay-skeleton-opacity {
  0% { animation-timing-function: ease-out; opacity: .5; }
  45% { animation-timing-function: ease-out; opacity: 1; }
  90%, 100% { opacity: .5; }
}
.autopay-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 600px) {
  .autopay-dialog { inset: 0; margin: auto; max-height: calc(100dvh - 48px); border-radius: var(--radius-sheet); }
  .autopay-dialog:focus-within { max-height: min(calc(100dvh - 48px), calc(var(--autopay-visible-height, 100dvh) - 16px)); }
  .autopay-dialog[data-autopay-keyboard] { inset-block: auto var(--autopay-bottom); }
}
@media (prefers-reduced-motion: reduce) {
  .autopay-bonus-skeleton :is(span, div)::before { animation: none; }
}
.checkout-card.refill-autopay-standalone {
  margin-inline: 0;
  padding: 16px 20px;
  border-radius: 32px;
}
.refill-sheet[data-refill-sections]:not(.success-sheet, .tbank-sheet) .sheet-scroll { background: var(--surface-soft); }
.refill-sheet[data-refill-sections]:not(.success-sheet, .tbank-sheet) .sheet-header {
  margin-bottom: -60px;
}
.refill-sheet[data-refill-sections] .checkout-payment {
  padding-top: 60px;
  background: linear-gradient(transparent, #fff 51.128%) 0 0 / 100% 603px no-repeat,
    linear-gradient(rgb(255 255 255 / .3), rgb(255 255 255 / .3)) 0 0 / 100% 603px no-repeat,
    var(--surface) url('../assets/refill-header.png') center top / 100% 603px no-repeat;
}
.refill-sheet[data-refill-sections] .checkout-coupon:first-child > span:nth-child(2) { min-width: 139px; }
.refill-sheet[data-refill-editing] :is(.checkout-coupons, .checkout-card:not(.checkout-payment)) { display: none; }
.refill-sheet .pay-button span:first-child { text-align: left; }
.refill-sheet .pay-button span:last-child { white-space: nowrap; }

@media (max-width: 599px) {
  .refill-modal { --modal-backdrop-blur: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .refill-amount-target { transition: none; }
  .refill-amount-caret, .refill-caret-marker { animation: none; }
}