/*
 * Alostech Pay Visual 22.0
 * Somente apresentação. A tokenização e o processamento continuam nos módulos
 * Alostech Pagamentos / Mercado Pago já instalados.
 */

.alostech-pay-visual-v220 {
  --apv-ink: #14233f;
  --apv-muted: #6c7d94;
  --apv-line: #dde6f1;
  --apv-paper: #ffffff;
  --apv-soft: #f4f7fc;
  --apv-blue: #2468ed;
  --apv-violet: #7156ef;
  --apv-cyan: #20b9d5;
  --apv-green: #13846c;
}

/* Checkout: superfície principal e cabeçalho. */
.alostech-pay-visual-v220 #payment .alos-payments {
  position: relative !important;
  margin: 0 0 24px !important;
  padding: 24px !important;
  overflow: hidden !important;
  border: 1px solid #e0e7f2 !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 100% 0, rgba(113, 86, 239, .10), transparent 31%),
    radial-gradient(circle at 0 15%, rgba(32, 185, 213, .08), transparent 27%),
    linear-gradient(180deg, #fff 0%, #fbfcff 100%) !important;
  box-shadow: 0 24px 60px rgba(30, 53, 96, .10) !important;
  color: var(--apv-ink) !important;
}

.alostech-pay-visual-v220 .alos-pay-head {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.alostech-pay-visual-v220 .alos-pay-logo {
  display: grid !important;
  width: 46px !important;
  height: 46px !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, .62) !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg, var(--apv-violet), var(--apv-blue) 58%, var(--apv-cyan)) !important;
  box-shadow: 0 12px 26px rgba(66, 83, 203, .23), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
  color: #fff !important;
  font-size: 21px !important;
  font-weight: 950 !important;
}

.alostech-pay-visual-v220 .alos-pay-head strong {
  color: var(--apv-ink) !important;
  font-size: 22px !important;
  line-height: 1.18 !important;
  letter-spacing: -.035em !important;
}

.alostech-pay-visual-v220 .alos-pay-head span {
  margin-top: 4px !important;
  color: var(--apv-muted) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.alostech-pay-visual-v220 .alos-secure {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 11px !important;
  border: 1px solid #cde8df !important;
  border-radius: 999px !important;
  background: #eff9f6 !important;
  color: #176e5e !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.alostech-pay-visual-v220 .alos-secure::before {
  content: "✓";
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  background: #d9f1ea;
  color: #0d8068;
}

.alostech-pay-visual-v220 .alos-v220-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin: 16px 0 19px;
  padding: 11px 13px;
  border: 1px solid #e7ecf4;
  border-radius: 14px;
  background: rgba(248, 250, 254, .85);
}

.alostech-pay-visual-v220 .alos-v220-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #62738a;
  font-size: 8px;
  font-weight: 750;
}

.alostech-pay-visual-v220 .alos-v220-trust-row i {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  background: #e8f7f2;
  color: var(--apv-green);
  font-size: 9px;
  font-style: normal;
}

/* Métodos de pagamento: leitura rápida e seleção clara. */
.alostech-pay-visual-v220 .alos-pay-methods {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 18px !important;
}

.alostech-pay-visual-v220 .alos-method {
  position: relative !important;
  display: grid !important;
  min-width: 0 !important;
  min-height: 96px !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: 1fr auto !important;
  align-items: center !important;
  gap: 6px 12px !important;
  margin: 0 !important;
  padding: 14px 42px 13px 14px !important;
  border: 1px solid #dfe6f1 !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 8px 20px rgba(38, 56, 91, .045) !important;
  color: var(--apv-ink) !important;
  text-align: left !important;
  text-transform: none !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease !important;
}

.alostech-pay-visual-v220 .alos-method:hover {
  transform: translateY(-2px) !important;
  border-color: #c9d6ea !important;
  box-shadow: 0 13px 28px rgba(38, 56, 91, .09) !important;
}

.alostech-pay-visual-v220 .alos-method.is-active {
  border-color: rgba(71, 101, 230, .46) !important;
  background: linear-gradient(145deg, rgba(241, 244, 255, .96), rgba(244, 252, 255, .96)) !important;
  box-shadow: 0 0 0 3px rgba(74, 96, 225, .08), 0 13px 28px rgba(38, 56, 91, .08) !important;
}

.alostech-pay-visual-v220 .alos-method-icon {
  display: grid !important;
  grid-row: 1 / 3 !important;
  width: 44px !important;
  height: 44px !important;
  place-items: center !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #edf1ff, #edfaff) !important;
  color: #5265d8 !important;
}

.alostech-pay-visual-v220 .alos-method.is-active .alos-method-icon {
  background: linear-gradient(145deg, var(--apv-violet), var(--apv-blue) 66%, var(--apv-cyan)) !important;
  box-shadow: 0 9px 19px rgba(69, 91, 213, .22) !important;
  color: #fff !important;
}

.alostech-pay-visual-v220 .alos-method-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.alostech-pay-visual-v220 .alos-method-copy b {
  color: var(--apv-ink) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.alostech-pay-visual-v220 .alos-method-copy small {
  display: block !important;
  margin-top: 3px !important;
  overflow: hidden !important;
  color: #73839a !important;
  font-size: 8px !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
}

.alostech-pay-visual-v220 .alos-method > em {
  grid-column: 2 !important;
  color: #4f66c9 !important;
  font-size: 8px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.alostech-pay-visual-v220 .alos-v220-method-check {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid #d9e1ed;
  border-radius: 50%;
  background: #fff;
  color: transparent;
}

.alostech-pay-visual-v220 .alos-method.is-active .alos-v220-method-check {
  border-color: #5268df;
  background: #5268df;
  color: #fff;
}

.alostech-pay-visual-v220 .alos-v220-method-check svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

.alostech-pay-visual-v220 .alos-pay-panel.is-active {
  animation: alosV220PanelIn .32s cubic-bezier(.2, .75, .2, 1) both !important;
}

@keyframes alosV220PanelIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

.alostech-pay-visual-v220 .alos-info-card {
  border: 1px solid #e1e8f2 !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #fff, #f7f9fe) !important;
  box-shadow: none !important;
}

/* Carteira dentro do checkout: cartões grandes, horizontais e com snap. */
.alostech-pay-visual-v220 .alos-card-picker-head {
  align-items: flex-start !important;
  margin-bottom: 14px !important;
}

.alostech-pay-visual-v220 .alos-card-picker-head small {
  color: #5264ca !important;
  letter-spacing: .12em !important;
}

.alostech-pay-visual-v220 .alos-card-picker-head b {
  color: var(--apv-ink) !important;
  font-size: 18px !important;
  letter-spacing: -.025em !important;
}

.alostech-pay-visual-v220 .alos-picker-secure {
  border: 1px solid #d8e9e4 !important;
  border-radius: 999px !important;
  background: #f0f9f6 !important;
  color: #17715f !important;
}

.alostech-pay-visual-v220 .alos-card-list {
  display: flex !important;
  max-width: 100% !important;
  gap: 15px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 5px 4px 14px !important;
  scroll-padding-inline: 4px !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-color: #c6d2e4 transparent !important;
  scrollbar-width: thin !important;
}

.alostech-pay-visual-v220 .alos-card-list::-webkit-scrollbar { height: 5px; }
.alostech-pay-visual-v220 .alos-card-list::-webkit-scrollbar-thumb { border-radius: 999px; background: #c6d2e4; }

.alostech-pay-visual-v220 .alos-card-list .alos-saved-option {
  display: grid !important;
  flex: 0 0 294px !important;
  width: 294px !important;
  min-height: 333px !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr auto !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 10px !important;
  scroll-snap-align: start !important;
  border: 1px solid #e1e7f1 !important;
  border-radius: 23px !important;
  background: #fff !important;
  box-shadow: 0 13px 30px rgba(25, 43, 79, .08) !important;
  text-align: left !important;
  text-transform: none !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}

.alostech-pay-visual-v220 .alos-card-list .alos-saved-option:hover {
  transform: translateY(-3px) !important;
  border-color: #cbd6e8 !important;
  box-shadow: 0 19px 38px rgba(25, 43, 79, .13) !important;
}

.alostech-pay-visual-v220 .alos-saved-option-card {
  width: 100% !important;
  aspect-ratio: 1.586 / 1 !important;
  min-height: 0 !important;
  padding: 17px !important;
  border-radius: 19px !important;
  box-shadow: 0 14px 28px rgba(17, 31, 59, .18), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.alostech-pay-visual-v220 .alos-saved-option-card::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -48%;
  width: 72%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .13), transparent 68%);
  pointer-events: none;
}

.alostech-pay-visual-v220 .alos-card-list .alos-saved-option.is-nubank .alos-saved-option-card {
  background: linear-gradient(145deg, #42117f, #702cbd 60%, #924fda) !important;
  color: #fff !important;
}

.alostech-pay-visual-v220 .alos-card-list .alos-saved-option.is-itau .alos-saved-option-card {
  background: linear-gradient(145deg, #07375f, #15518d 52%, #e56c00) !important;
  color: #fff !important;
}

.alostech-pay-visual-v220 .alos-card-list .alos-saved-option.is-inter .alos-saved-option-card {
  background: linear-gradient(145deg, #b94200, #f66b00 62%, #ff9845) !important;
  color: #fff !important;
}

.alostech-pay-visual-v220 .alos-card-list .alos-saved-option.is-c6 .alos-saved-option-card {
  background: linear-gradient(145deg, #030303, #1f1f1f 68%, #4a4a4a) !important;
  color: #fff !important;
}

.alostech-pay-visual-v220 .alos-card-list .alos-saved-option.is-generic .alos-saved-option-card {
  background: linear-gradient(145deg, #19263b, #273750 62%, #3d506c) !important;
  color: #fff !important;
}

.alostech-pay-visual-v220 .alos-card-list .alos-saved-option.is-santander .alos-saved-option-card {
  background: linear-gradient(145deg, #850000, #d00000 62%, #ef3535) !important;
  color: #fff !important;
}

.alostech-pay-visual-v220 .alos-card-list .alos-saved-option.is-alostech .alos-saved-option-card,
.alostech-pay-visual-v220 .alos-private-option .alos-saved-option-card {
  background: linear-gradient(145deg, #111e36, #3f44b8 58%, #21abc9) !important;
  color: #fff !important;
}

.alostech-pay-visual-v220 .alos-card-list .alos-saved-option:not(.alos-new-option) .alos-saved-option-card strong,
.alostech-pay-visual-v220 .alos-card-list .alos-saved-option:not(.alos-new-option) .alos-option-bank > small,
.alostech-pay-visual-v220 .alos-card-list .alos-saved-option:not(.alos-new-option) .alos-option-network {
  color: #fff !important;
}

.alostech-pay-visual-v220 .alos-saved-option-info {
  min-width: 0 !important;
  padding: 0 6px !important;
}

.alostech-pay-visual-v220 .alos-saved-option-info > small {
  color: #6878d1 !important;
  letter-spacing: .08em !important;
}

.alostech-pay-visual-v220 .alos-saved-option-info > b {
  margin-top: 3px !important;
  overflow: hidden !important;
  color: #172744 !important;
  font-size: 13px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.alostech-pay-visual-v220 .alos-saved-option-action {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 38px !important;
  margin: 0 3px 3px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  background: #f1f5fb !important;
  color: #3654bb !important;
  font-size: 9px !important;
  font-weight: 900 !important;
}

.alostech-pay-visual-v220 .alos-new-option .alos-saved-option-card {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  border: 1px dashed #cfd9ea !important;
  background: linear-gradient(145deg, #f8faff, #eef3fb) !important;
  box-shadow: none !important;
  color: #3451aa !important;
}

.alostech-pay-visual-v220 .alos-new-plus {
  display: grid !important;
  width: 50px !important;
  height: 50px !important;
  place-items: center !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg, var(--apv-violet), var(--apv-blue)) !important;
  box-shadow: 0 12px 22px rgba(67, 83, 198, .23) !important;
  color: #fff !important;
  font-size: 29px !important;
}

/* Cartão salvo e CVV: virada tridimensional clara e suave. */
.alostech-pay-visual-v220 .alos-flip-wrap {
  perspective: 1200px !important;
}

.alostech-pay-visual-v220 .alos-flip-card,
.alostech-pay-visual-v220 .alos-v220-flip-card {
  transform-style: preserve-3d !important;
  transition: transform .72s cubic-bezier(.2, .75, .2, 1), box-shadow .25s ease !important;
  will-change: transform !important;
}

.alostech-pay-visual-v220 .alos-flip-card.is-flipped,
.alostech-pay-visual-v220 .alos-v220-flip-card.is-v220-flipped {
  transform: rotateY(180deg) !important;
}

.alostech-pay-visual-v220 .alos-flip-card.is-flipped {
  filter: drop-shadow(0 22px 28px rgba(18, 33, 61, .18));
}

.alostech-pay-visual-v220 .alos-card-screen {
  border: 1px solid #e0e7f1 !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 16px 36px rgba(31, 49, 83, .07) !important;
}

.alostech-pay-visual-v220 .alos-card-confirm-grid {
  gap: 22px !important;
}

.alostech-pay-visual-v220 .alos-cvv-step {
  border: 1px solid #dce5f1 !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #f8faff, #fff) !important;
}

.alostech-pay-visual-v220 #alos-saved-security.is-focus,
.alostech-pay-visual-v220 #alos-new-cvv:focus-within,
.alostech-pay-visual-v220 #alos-wallet-security:focus-within {
  border-color: #6c78e7 !important;
  box-shadow: 0 0 0 4px rgba(89, 104, 224, .11) !important;
}

.alostech-pay-visual-v220 .alos-cvv-locator {
  animation: alosV220CvvPulse 1.6s ease-in-out infinite !important;
}

@keyframes alosV220CvvPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .1); }
  50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, .12); }
}

/* Novo cartão no checkout e na carteira: frente/verso sem tocar nos iframes. */
.alostech-pay-visual-v220 .alos-new-preview,
.alostech-pay-visual-v220 .alos-wallet-add-preview {
  position: relative !important;
  display: block !important;
  min-height: 198px !important;
  padding: 0 !important;
  perspective: 1200px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.alostech-pay-visual-v220 .alos-v220-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 21px;
  overflow: hidden;
  border-radius: 22px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 18px 36px rgba(21, 35, 68, .19), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.alostech-pay-visual-v220 .alos-v220-card-front {
  flex-direction: column;
  background:
    radial-gradient(circle at 88% 10%, rgba(48, 216, 226, .25), transparent 28%),
    linear-gradient(145deg, #16294a, #5f46d5 66%, #2fb9d5);
  color: #fff;
  transform: rotateY(0deg);
}

.alostech-pay-visual-v220 .alos-wallet-add-preview.is-nubank .alos-v220-card-front { background: linear-gradient(145deg, #42117f, #702cbd 62%, #914fd9); }
.alostech-pay-visual-v220 .alos-wallet-add-preview.is-itau .alos-v220-card-front { background: linear-gradient(145deg, #083966, #14518e 52%, #e56c00); }
.alostech-pay-visual-v220 .alos-wallet-add-preview.is-inter .alos-v220-card-front { background: linear-gradient(145deg, #b94300, #f66b00 62%, #ff9845); }
.alostech-pay-visual-v220 .alos-wallet-add-preview.is-c6 .alos-v220-card-front { background: linear-gradient(145deg, #050505, #242424 68%, #484848); }

.alostech-pay-visual-v220 .alos-v220-card-front > * {
  position: relative !important;
  z-index: 1 !important;
}

.alostech-pay-visual-v220 .alos-v220-card-back {
  display: block;
  padding: 0;
  background: linear-gradient(145deg, #182741, #293b5a 62%, #3c4f70);
  color: #fff;
  transform: rotateY(180deg);
}

.alostech-pay-visual-v220 .alos-v220-magstripe {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  height: 48px;
  background: #0d1420;
}

.alostech-pay-visual-v220 .alos-v220-signature {
  position: absolute;
  top: 96px;
  left: 20px;
  right: 20px;
  display: flex;
  height: 38px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-radius: 7px;
  background: repeating-linear-gradient(-35deg, #f9f8f3 0 6px, #edf0f4 6px 12px);
  color: #536174;
}

.alostech-pay-visual-v220 .alos-v220-signature i {
  font-size: 7px;
  font-style: normal;
  letter-spacing: .08em;
}

.alostech-pay-visual-v220 .alos-v220-signature b {
  color: #18243a;
  font-size: 11px;
}

.alostech-pay-visual-v220 .alos-v220-cvv {
  position: absolute;
  top: 142px;
  right: 20px;
  display: flex;
  min-width: 105px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 9px;
  background: rgba(255, 255, 255, .13);
  animation: alosV220CvvPulse 1.6s ease-in-out infinite;
}

.alostech-pay-visual-v220 .alos-v220-cvv small {
  max-width: 58px;
  color: rgba(255, 255, 255, .74);
  font-size: 6px;
  line-height: 1.25;
}

.alostech-pay-visual-v220 .alos-v220-cvv b { color: #fff; font-size: 11px; }

.alostech-pay-visual-v220 .alos-v220-card-back > p {
  position: absolute;
  right: 20px;
  bottom: 13px;
  left: 20px;
  margin: 0;
  color: rgba(255, 255, 255, .68);
  font-size: 7px;
  line-height: 1.4;
}

/* Carteira: palco inspirado em carteiras digitais, sem copiar marcas. */
.alostech-pay-visual-v220 .alos-wallet-v2-intro {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px) !important;
  grid-template-areas: "copy stage" "security stage" !important;
  align-items: center !important;
  gap: 18px 36px !important;
  margin-bottom: 24px !important;
  padding: 24px !important;
  border: 1px solid #e1e8f3 !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 96% 4%, rgba(111, 82, 238, .12), transparent 32%),
    radial-gradient(circle at 1% 100%, rgba(31, 187, 214, .08), transparent 34%),
    linear-gradient(145deg, #fff, #f8faff) !important;
  box-shadow: 0 22px 55px rgba(30, 50, 88, .09) !important;
}

.alostech-pay-visual-v220 .alos-wallet-v2-intro > div:first-child { grid-area: copy; }
.alostech-pay-visual-v220 .alos-wallet-v2-security { grid-area: security; }

.alostech-pay-visual-v220 .alos-wallet-v2-intro h2 {
  max-width: 620px !important;
  font-size: 32px !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
}

.alostech-pay-visual-v220 .alos-wallet-v2-intro p {
  max-width: 620px !important;
  font-size: 11px !important;
  line-height: 1.65 !important;
}

.alostech-pay-visual-v220 .alos-v220-wallet-stage {
  grid-area: stage;
  display: flex !important;
  width: 100% !important;
  min-height: 285px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--apv-ink) !important;
  text-transform: none !important;
  cursor: pointer !important;
}

.alostech-pay-visual-v220 .alos-v220-wallet-deck {
  position: relative;
  display: block;
  width: min(100%, 390px);
  height: 228px;
  perspective: 1000px;
}

.alostech-pay-visual-v220 .alos-v220-wallet-deck .alos-v220-hero-card {
  position: absolute !important;
  top: calc(var(--v220-card-index) * 13px) !important;
  left: 50% !important;
  display: flex !important;
  width: min(88%, 350px) !important;
  min-width: 0 !important;
  height: 205px !important;
  min-height: 205px !important;
  flex-basis: auto !important;
  padding: 18px !important;
  overflow: hidden !important;
  border-radius: 23px !important;
  box-shadow: 0 20px 34px rgba(25, 38, 74, .18) !important;
  transform: translateX(calc(-50% + (var(--v220-card-index) - 1) * 12px)) rotate(calc((var(--v220-card-index) - 1) * 2.2deg)) !important;
  transform-origin: center bottom !important;
  transition: transform .48s cubic-bezier(.2, .75, .2, 1), top .48s ease !important;
}

.alostech-pay-visual-v220 .alos-v220-wallet-stage:hover .alos-v220-hero-card {
  top: calc(var(--v220-card-index) * 3px) !important;
  transform: translateX(calc(-50% + (var(--v220-card-index) - 1) * 43px)) rotate(calc((var(--v220-card-index) - 1) * 7deg)) !important;
}

.alostech-pay-visual-v220 .alos-v220-hero-card .alos-wallet-bank-head,
.alostech-pay-visual-v220 .alos-v220-hero-card .alos-wallet-card-actions,
.alostech-pay-visual-v220 .alos-v220-hero-card .alos-wallet-bank-footer { display: none !important; }

.alostech-pay-visual-v220 .alos-v220-hero-card .alos-wallet-bank-number {
  margin-top: auto !important;
  padding-top: 42px !important;
  font-size: 15px !important;
}

.alostech-pay-visual-v220 .alos-v220-wallet-stage-copy {
  display: flex;
  align-items: center;
  flex-direction: column;
  color: var(--apv-ink);
  line-height: 1.35;
}

.alostech-pay-visual-v220 .alos-v220-wallet-stage-copy b { font-size: 11px; }
.alostech-pay-visual-v220 .alos-v220-wallet-stage-copy small { margin-top: 2px; color: var(--apv-muted); font-size: 8px; }

.alostech-pay-visual-v220 .alos-v220-empty-card {
  position: absolute;
  inset: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  border: 1px dashed #cbd6e7;
  border-radius: 24px;
  background: linear-gradient(145deg, #f9fbff, #eef3fb);
  color: #3851a6;
}

.alostech-pay-visual-v220 .alos-v220-empty-card i {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--apv-violet), var(--apv-blue));
  box-shadow: 0 12px 24px rgba(70, 84, 199, .22);
  color: #fff;
  font-size: 25px;
  font-style: normal;
}

.alostech-pay-visual-v220 .alos-v220-empty-card b { font-size: 12px; }
.alostech-pay-visual-v220 .alos-v220-empty-card small { color: var(--apv-muted); font-size: 8px; }

.alostech-pay-visual-v220 .alos-wallet-vault {
  min-height: 92px !important;
  border-radius: 22px !important;
}

.alostech-pay-visual-v220 .alos-wallet-card-list {
  gap: 18px !important;
  padding: 12px 4px 18px !important;
  scroll-snap-type: x mandatory !important;
}

.alostech-pay-visual-v220 .alos-wallet-bank-card {
  scroll-snap-align: center !important;
  transition: transform .26s ease, box-shadow .26s ease !important;
}

.alostech-pay-visual-v220 .alos-wallet-bank-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 48px rgba(25, 37, 74, .23) !important;
}

.alostech-pay-visual-v220 .alos-wallet-bank-card.is-nubank {
  background: linear-gradient(145deg, #42117f, #702cbd 60%, #924fda) !important;
}

.alostech-pay-visual-v220 .alos-wallet-bank-card.is-inter {
  background: linear-gradient(145deg, #b94200, #f66b00 62%, #ff9845) !important;
}

.alostech-pay-visual-v220 .alos-wallet-bank-card.is-c6 {
  background: linear-gradient(145deg, #030303, #1f1f1f 68%, #4a4a4a) !important;
}

.alostech-pay-visual-v220 .alos-wallet-bank-card.is-itau {
  background: linear-gradient(145deg, #07375f, #15518d 52%, #e56c00) !important;
}

.alostech-pay-visual-v220 .alos-wallet-bank-card.is-santander {
  background: linear-gradient(145deg, #850000, #d00000 62%, #ef3535) !important;
}

.alostech-pay-visual-v220 .alos-wallet-bank-card.is-generic {
  background: linear-gradient(145deg, #19263b, #273750 62%, #3d506c) !important;
  color: #fff !important;
}

.alostech-pay-visual-v220 .alos-wallet-bank-card.is-generic .alos-wallet-bank-name strong,
.alostech-pay-visual-v220 .alos-wallet-bank-card.is-generic .alos-wallet-bank-name small,
.alostech-pay-visual-v220 .alos-wallet-bank-card.is-generic .alos-wallet-bank-number,
.alostech-pay-visual-v220 .alos-wallet-bank-card.is-generic .alos-wallet-card-type,
.alostech-pay-visual-v220 .alos-wallet-bank-card.is-generic .alos-wallet-bank-footer strong,
.alostech-pay-visual-v220 .alos-wallet-bank-card.is-generic .alos-wallet-bank-footer small {
  color: #fff !important;
}

.alostech-pay-visual-v220 .alos-wallet-add-drawer {
  border-radius: 24px !important;
  background: linear-gradient(145deg, #fff, #f8faff) !important;
  box-shadow: 0 22px 50px rgba(31, 46, 83, .10) !important;
}

.alostech-pay-visual-v220 .alos-wallet-secure-field,
.alostech-pay-visual-v220 .alos-wallet-card-form input,
.alostech-pay-visual-v220 .alos-wallet-card-form select:not(.alos-wallet-hidden-field),
.alostech-pay-visual-v220 .alos-new-fields input,
.alostech-pay-visual-v220 .alos-secure-field {
  border-radius: 13px !important;
}

.alostech-pay-visual-v220 .alos-wallet-save-button,
.alostech-pay-visual-v220 .alos-primary {
  border-radius: 14px !important;
  background: linear-gradient(135deg, #664ce6, #3a65df 58%, #21aeca) !important;
  box-shadow: 0 12px 25px rgba(60, 81, 197, .23) !important;
}

/* Responsividade. */
@media (min-width: 960px) {
  .alostech-pay-visual-v220 .alos-pay-methods { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .alostech-pay-visual-v220 .alos-method {
    min-height: 124px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    align-content: start !important;
    gap: 9px !important;
    padding: 14px !important;
  }
  .alostech-pay-visual-v220 .alos-method-icon { grid-row: auto !important; }
  .alostech-pay-visual-v220 .alos-method > em { grid-column: 1 !important; }
}

@media (max-width: 849px) {
  .alostech-pay-visual-v220 #payment .alos-payments { padding: 19px 15px !important; border-radius: 22px !important; }
  .alostech-pay-visual-v220 .alos-wallet-v2-intro {
    grid-template-columns: 1fr !important;
    grid-template-areas: "copy" "stage" "security" !important;
    padding: 20px !important;
  }
  .alostech-pay-visual-v220 .alos-v220-wallet-stage { min-height: 270px !important; }
  .alostech-pay-visual-v220 .alos-wallet-v2-security { max-width: none !important; }
  .alostech-pay-visual-v220 .alos-wallet-add-grid { grid-template-columns: 1fr !important; }
  .alostech-pay-visual-v220 .alos-wallet-preview-wrap { position: static !important; }
}

@media (max-width: 560px) {
  .alostech-pay-visual-v220 .alos-pay-head { grid-template-columns: auto 1fr !important; }
  .alostech-pay-visual-v220 .alos-pay-head strong { font-size: 18px !important; }
  .alostech-pay-visual-v220 .alos-secure { grid-column: 1 / -1 !important; justify-self: start !important; }
  .alostech-pay-visual-v220 .alos-v220-trust-row { gap: 7px !important; }
  .alostech-pay-visual-v220 .alos-v220-trust-row span { width: 100%; }
  .alostech-pay-visual-v220 .alos-pay-methods { grid-template-columns: 1fr !important; }
  .alostech-pay-visual-v220 .alos-method { min-height: 77px !important; }
  .alostech-pay-visual-v220 .alos-card-picker-head { align-items: flex-start !important; flex-direction: column !important; gap: 8px !important; }
  .alostech-pay-visual-v220 .alos-card-list .alos-saved-option {
    flex-basis: calc(100vw - 82px) !important;
    width: calc(100vw - 82px) !important;
    max-width: 304px !important;
  }
  .alostech-pay-visual-v220 .alos-card-confirm-grid { grid-template-columns: 1fr !important; }
  .alostech-pay-visual-v220 .alos-new-preview,
  .alostech-pay-visual-v220 .alos-wallet-add-preview { min-height: 186px !important; }
  .alostech-pay-visual-v220 .alos-v220-card-face { padding: 18px !important; border-radius: 19px; }
  .alostech-pay-visual-v220 .alos-v220-magstripe { top: 26px; height: 43px; }
  .alostech-pay-visual-v220 .alos-v220-signature { top: 84px; left: 16px; right: 16px; height: 35px; }
  .alostech-pay-visual-v220 .alos-v220-cvv { top: 128px; right: 16px; }
  .alostech-pay-visual-v220 .alos-v220-card-back > p { right: 16px; bottom: 11px; left: 16px; font-size: 6px; }
  .alostech-pay-visual-v220 .alos-wallet-v2-intro { padding: 17px !important; border-radius: 23px !important; }
  .alostech-pay-visual-v220 .alos-wallet-v2-intro h2 { font-size: 25px !important; }
  .alostech-pay-visual-v220 .alos-v220-wallet-stage { min-height: 235px !important; }
  .alostech-pay-visual-v220 .alos-v220-wallet-deck { height: 200px; }
  .alostech-pay-visual-v220 .alos-v220-wallet-deck .alos-v220-hero-card {
    width: min(86%, 300px) !important;
    height: 180px !important;
    min-height: 180px !important;
  }
  .alostech-pay-visual-v220 .alos-v220-hero-card .alos-wallet-bank-number { padding-top: 24px !important; font-size: 13px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .alostech-pay-visual-v220 *,
  .alostech-pay-visual-v220 *::before,
  .alostech-pay-visual-v220 *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/*
 * Alostech Pay Visual 23.0
 * Acabamento profissional e identidades bancárias locais/atuais.
 */
.alostech-pay-visual-v230 {
  --apv-ink: #101b2d;
  --apv-muted: #64748b;
  --apv-line: #dfe5ee;
  --apv-paper: #fff;
  --apv-soft: #f6f8fb;
  --apv-blue: #175cd3;
  --apv-violet: #5538c8;
  --apv-cyan: #0e9fbd;
  --apv-green: #087a5b;
}

.alostech-pay-visual-v230 #payment .alos-payments {
  padding: 26px !important;
  border: 1px solid #dde4ed !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 24px 64px rgba(18, 32, 56, .11) !important;
}

.alostech-pay-visual-v230 #payment,
.alostech-pay-visual-v230 .woocommerce-checkout-payment,
.alostech-pay-visual-v230 #payment .alos-payments,
.alostech-pay-visual-v230 #payment .alos-payments > *,
.alostech-pay-visual-v230 .alos-new-layout,
.alostech-pay-visual-v230 .alos-new-fields {
  min-width: 0 !important;
  max-width: 100% !important;
}

.alostech-pay-visual-v230 .alos-wallet-v2,
.alostech-pay-visual-v230 [data-wallet-root],
.alostech-pay-visual-v230 .alos-wallet-v2 > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

.alostech-pay-visual-v230 #payment,
.alostech-pay-visual-v230 .woocommerce-checkout-payment { width: 100% !important; }

.alostech-pay-visual-v230 #payment .alos-payments::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #17243b, #335fd1 52%, #17a8c4);
  content: "";
}

.alostech-pay-visual-v230 .alos-pay-logo {
  border-radius: 13px !important;
  background: linear-gradient(145deg, #121e33, #2b4772) !important;
  box-shadow: 0 10px 22px rgba(16, 31, 54, .2) !important;
}

.alostech-pay-visual-v230 .alos-v220-trust-row {
  padding: 10px 12px;
  border-color: #e5eaf1;
  background: #f8fafc;
}

.alostech-pay-visual-v230 .alos-method {
  min-height: 104px !important;
  border-color: #dfe5ed !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 5px 16px rgba(22, 36, 60, .045) !important;
}

.alostech-pay-visual-v230 .alos-method.is-active {
  border-color: #2458c6 !important;
  background: #f7f9ff !important;
  box-shadow: 0 0 0 3px rgba(36, 88, 198, .09), 0 9px 24px rgba(27, 54, 104, .08) !important;
}

.alostech-pay-visual-v230 .alos-method-icon,
.alostech-pay-visual-v230 .alos-method.is-active .alos-method-icon {
  border: 1px solid #dce4ef !important;
  background: #f1f5fa !important;
  box-shadow: none !important;
  color: #264c91 !important;
}

.alostech-pay-visual-v230 .alos-method.is-active .alos-method-icon {
  border-color: #183f83 !important;
  background: #183f83 !important;
  color: #fff !important;
}

.alostech-pay-visual-v230 .alos-wallet-save-button,
.alostech-pay-visual-v230 .alos-primary {
  min-height: 50px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #14243e, #244f92) !important;
  box-shadow: 0 12px 25px rgba(23, 49, 88, .2) !important;
}

/* Cartões com proporção, brilho e tipografia próximos de um cartão físico. */
.alostech-pay-visual-v230 .alos-saved-option-card,
.alostech-pay-visual-v230 .alos-flip-card,
.alostech-pay-visual-v230 .alos-wallet-bank-card,
.alostech-pay-visual-v230 .alos-v220-card-face {
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 38px rgba(16, 29, 51, .2), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

.alostech-pay-visual-v230 .alos-saved-option-card::before,
.alostech-pay-visual-v230 .alos-wallet-bank-card::before,
.alostech-pay-visual-v230 .alos-front::before,
.alostech-pay-visual-v230 .alos-v220-card-front::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, .16), transparent 33%, transparent 70%, rgba(255, 255, 255, .08));
  content: "";
  pointer-events: none;
}

.alostech-pay-visual-v230 .alos-bank-logo,
.alostech-pay-visual-v230 .alos-wallet-bank-symbol {
  min-width: 62px !important;
  max-width: 116px !important;
  min-height: 31px !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(14, 28, 49, .08) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 5px 14px rgba(13, 27, 48, .1) !important;
  object-fit: contain !important;
}

.alostech-pay-visual-v230 img.alos-bank-logo {
  width: 104px !important;
  height: 31px !important;
}

.alostech-pay-visual-v230 .alos-wallet-bank-symbol img {
  width: auto !important;
  height: auto !important;
  max-width: 92px !important;
  max-height: 24px !important;
  object-fit: contain !important;
}

.alostech-pay-visual-v230 .alos-mini-chip,
.alostech-pay-visual-v230 .alos-chip,
.alostech-pay-visual-v230 .alos-wallet-bank-chip,
.alostech-pay-visual-v230 .alos-wallet-add-preview-chip {
  background: linear-gradient(135deg, #f7e5a4, #c89e43 53%, #f2d681) !important;
  box-shadow: inset 0 0 0 1px rgba(86, 61, 13, .2), 0 5px 12px rgba(8, 17, 30, .12) !important;
}

/* Paletas de marca: aplicadas tanto no checkout quanto na Carteira Alostech. */
.alostech-pay-visual-v230 .is-nubank .alos-saved-option-card,
.alostech-pay-visual-v230 .alos-flip-card.is-nubank,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-nubank { background: linear-gradient(145deg, #6300a5, #820ad1 58%, #9c35e0) !important; color: #fff !important; }
.alostech-pay-visual-v230 .is-itau .alos-saved-option-card,
.alostech-pay-visual-v230 .alos-flip-card.is-itau,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-itau { background: linear-gradient(145deg, #d85e00, #ec7000 58%, #ff983d) !important; color: #fff !important; }
.alostech-pay-visual-v230 .is-inter .alos-saved-option-card,
.alostech-pay-visual-v230 .alos-flip-card.is-inter,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-inter { background: linear-gradient(145deg, #d84c00, #ff6500 60%, #ff994f) !important; color: #fff !important; }
.alostech-pay-visual-v230 .is-c6 .alos-saved-option-card,
.alostech-pay-visual-v230 .alos-flip-card.is-c6,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-c6 { background: linear-gradient(145deg, #050505, #17191c 62%, #3a3d41) !important; color: #fff !important; }
.alostech-pay-visual-v230 .is-bradesco .alos-saved-option-card,
.alostech-pay-visual-v230 .alos-flip-card.is-bradesco,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-bradesco { background: linear-gradient(145deg, #8d0629, #cc092f 58%, #ed4765) !important; color: #fff !important; }
.alostech-pay-visual-v230 .is-santander .alos-saved-option-card,
.alostech-pay-visual-v230 .alos-flip-card.is-santander,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-santander { background: linear-gradient(145deg, #a90000, #ec0000 60%, #ff4545) !important; color: #fff !important; }
.alostech-pay-visual-v230 .is-caixa .alos-saved-option-card,
.alostech-pay-visual-v230 .alos-flip-card.is-caixa,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-caixa { background: linear-gradient(145deg, #004b82, #006db0 60%, #27a8d2) !important; color: #fff !important; }
.alostech-pay-visual-v230 .is-sicredi .alos-saved-option-card,
.alostech-pay-visual-v230 .alos-flip-card.is-sicredi,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-sicredi { background: linear-gradient(145deg, #155b32, #2f8e48 60%, #70bd68) !important; color: #fff !important; }
.alostech-pay-visual-v230 .is-sicoob .alos-saved-option-card,
.alostech-pay-visual-v230 .alos-flip-card.is-sicoob,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-sicoob { background: linear-gradient(145deg, #003d43, #087d6b 60%, #39a58d) !important; color: #fff !important; }
.alostech-pay-visual-v230 .is-safra .alos-saved-option-card,
.alostech-pay-visual-v230 .alos-flip-card.is-safra,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-safra { background: linear-gradient(145deg, #061f3d, #0a3968 62%, #987436) !important; color: #fff !important; }
.alostech-pay-visual-v230 .is-btg .alos-saved-option-card,
.alostech-pay-visual-v230 .alos-flip-card.is-btg,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-btg { background: linear-gradient(145deg, #002b45, #00537b 62%, #1584ab) !important; color: #fff !important; }
.alostech-pay-visual-v230 .is-neon .alos-saved-option-card,
.alostech-pay-visual-v230 .alos-flip-card.is-neon,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-neon { background: linear-gradient(145deg, #0066b0, #00a9df 58%, #57e5ed) !important; color: #fff !important; }
.alostech-pay-visual-v230 .is-picpay .alos-saved-option-card,
.alostech-pay-visual-v230 .alos-flip-card.is-picpay,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-picpay { background: linear-gradient(145deg, #0b8f43, #21c25e 60%, #70e59a) !important; color: #fff !important; }
.alostech-pay-visual-v230 .is-pan .alos-saved-option-card,
.alostech-pay-visual-v230 .alos-flip-card.is-pan,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-pan { background: linear-gradient(145deg, #0062be, #008bff 60%, #55b8ff) !important; color: #fff !important; }
.alostech-pay-visual-v230 .is-generic .alos-saved-option-card,
.alostech-pay-visual-v230 .alos-flip-card.is-generic,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-generic { background: linear-gradient(145deg, #121d31, #263954 62%, #47617e) !important; color: #fff !important; }

.alostech-pay-visual-v230 .alos-saved-option.is-nubank { --apv-bank-bg: linear-gradient(145deg, #6300a5, #820ad1 58%, #9c35e0); --apv-bank-fg: #fff; }
.alostech-pay-visual-v230 .alos-saved-option.is-itau { --apv-bank-bg: linear-gradient(145deg, #d85e00, #ec7000 58%, #ff983d); --apv-bank-fg: #fff; }
.alostech-pay-visual-v230 .alos-saved-option.is-inter { --apv-bank-bg: linear-gradient(145deg, #d84c00, #ff6500 60%, #ff994f); --apv-bank-fg: #fff; }
.alostech-pay-visual-v230 .alos-saved-option.is-c6 { --apv-bank-bg: linear-gradient(145deg, #050505, #17191c 62%, #3a3d41); --apv-bank-fg: #fff; }
.alostech-pay-visual-v230 .alos-saved-option.is-bradesco { --apv-bank-bg: linear-gradient(145deg, #8d0629, #cc092f 58%, #ed4765); --apv-bank-fg: #fff; }
.alostech-pay-visual-v230 .alos-saved-option.is-santander { --apv-bank-bg: linear-gradient(145deg, #a90000, #ec0000 60%, #ff4545); --apv-bank-fg: #fff; }
.alostech-pay-visual-v230 .alos-saved-option.is-caixa { --apv-bank-bg: linear-gradient(145deg, #004b82, #006db0 60%, #27a8d2); --apv-bank-fg: #fff; }
.alostech-pay-visual-v230 .alos-saved-option.is-sicredi { --apv-bank-bg: linear-gradient(145deg, #155b32, #2f8e48 60%, #70bd68); --apv-bank-fg: #fff; }
.alostech-pay-visual-v230 .alos-saved-option.is-sicoob { --apv-bank-bg: linear-gradient(145deg, #003d43, #087d6b 60%, #39a58d); --apv-bank-fg: #fff; }
.alostech-pay-visual-v230 .alos-saved-option.is-safra { --apv-bank-bg: linear-gradient(145deg, #061f3d, #0a3968 62%, #987436); --apv-bank-fg: #fff; }
.alostech-pay-visual-v230 .alos-saved-option.is-btg { --apv-bank-bg: linear-gradient(145deg, #002b45, #00537b 62%, #1584ab); --apv-bank-fg: #fff; }
.alostech-pay-visual-v230 .alos-saved-option.is-neon { --apv-bank-bg: linear-gradient(145deg, #0066b0, #00a9df 58%, #57e5ed); --apv-bank-fg: #fff; }
.alostech-pay-visual-v230 .alos-saved-option.is-picpay { --apv-bank-bg: linear-gradient(145deg, #0b8f43, #21c25e 60%, #70e59a); --apv-bank-fg: #fff; }
.alostech-pay-visual-v230 .alos-saved-option.is-pan { --apv-bank-bg: linear-gradient(145deg, #0062be, #008bff 60%, #55b8ff); --apv-bank-fg: #fff; }
.alostech-pay-visual-v230 .alos-saved-option.is-bb { --apv-bank-bg: radial-gradient(circle at 86% 14%, rgba(34,65,132,.2), transparent 30%), linear-gradient(145deg, #ffd91a, #f5c900 62%, #f0b900); --apv-bank-fg: #172f66; }
.alostech-pay-visual-v230 .alos-saved-option.is-cora { --apv-bank-bg: radial-gradient(circle at 88% -4%, rgba(242,60,130,.82), rgba(247,145,184,.46) 18%, transparent 42%), linear-gradient(145deg, #fff, #fbf8fa); --apv-bank-fg: #242229; }
.alostech-pay-visual-v230 .alos-saved-option.is-mercadopago { --apv-bank-bg: linear-gradient(145deg, #ffe600, #ffd600 62%, #ffbd17); --apv-bank-fg: #153047; }
.alostech-pay-visual-v230 .alos-saved-option.is-generic { --apv-bank-bg: linear-gradient(145deg, #121d31, #263954 62%, #47617e); --apv-bank-fg: #fff; }

.alostech-pay-visual-v230 .alos-card-list .alos-saved-option[class*="is-"] .alos-saved-option-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto 1fr auto !important;
  align-items: end !important;
  gap: 9px 12px !important;
  background: var(--apv-bank-bg) !important;
  color: var(--apv-bank-fg) !important;
}

.alostech-pay-visual-v230 .alos-card-list .alos-saved-option-card .alos-option-bank {
  grid-column: 1 / -1 !important;
  align-self: start !important;
}

.alostech-pay-visual-v230 .alos-card-list .alos-saved-option-card .alos-mini-chip {
  align-self: center !important;
  margin: 6px 0 2px !important;
}

.alostech-pay-visual-v230 .alos-card-list .alos-saved-option-card > strong {
  grid-column: 1 !important;
  margin: 0 !important;
  color: var(--apv-bank-fg) !important;
  font-size: 13px !important;
  letter-spacing: .075em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.alostech-pay-visual-v230 .alos-card-list .alos-saved-option-card .alos-option-network {
  grid-column: 2 !important;
  align-self: end !important;
  justify-self: end !important;
  color: var(--apv-bank-fg) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.alostech-pay-visual-v230 .alos-saved-option-info {
  display: flex !important;
  align-items: flex-start !important;
  flex-direction: column !important;
  gap: 3px !important;
  text-align: left !important;
}

.alostech-pay-visual-v230 .alos-saved-option-info > small,
.alostech-pay-visual-v230 .alos-saved-option-info > b,
.alostech-pay-visual-v230 .alos-saved-option-info > span,
.alostech-pay-visual-v230 .alos-saved-option-info > em,
.alostech-pay-visual-v230 .alos-saved-option-info > mark {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.alostech-pay-visual-v230 .alos-saved-option-info > span,
.alostech-pay-visual-v230 .alos-saved-option-info > em {
  color: #64748b !important;
  font-size: 8px !important;
  font-style: normal !important;
}

.alostech-pay-visual-v230 .alos-card-list .alos-saved-option.is-bb .alos-saved-option-card > strong,
.alostech-pay-visual-v230 .alos-card-list .alos-saved-option.is-bb .alos-option-bank > small,
.alostech-pay-visual-v230 .alos-card-list .alos-saved-option.is-bb .alos-option-network { color: #172f66 !important; }
.alostech-pay-visual-v230 .alos-card-list .alos-saved-option.is-cora .alos-saved-option-card > strong,
.alostech-pay-visual-v230 .alos-card-list .alos-saved-option.is-cora .alos-option-bank > small,
.alostech-pay-visual-v230 .alos-card-list .alos-saved-option.is-cora .alos-option-network { color: #242229 !important; }
.alostech-pay-visual-v230 .alos-card-list .alos-saved-option.is-mercadopago .alos-saved-option-card > strong,
.alostech-pay-visual-v230 .alos-card-list .alos-saved-option.is-mercadopago .alos-option-bank > small,
.alostech-pay-visual-v230 .alos-card-list .alos-saved-option.is-mercadopago .alos-option-network { color: #153047 !important; }

.alostech-pay-visual-v230 .is-bb .alos-saved-option-card,
.alostech-pay-visual-v230 .alos-flip-card.is-bb,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-bb {
  background: radial-gradient(circle at 86% 14%, rgba(34, 65, 132, .2), transparent 30%), linear-gradient(145deg, #ffd91a, #f5c900 62%, #f0b900) !important;
  color: #172f66 !important;
}

.alostech-pay-visual-v230 .is-cora .alos-saved-option-card,
.alostech-pay-visual-v230 .alos-flip-card.is-cora,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-cora {
  border-color: #ece7eb !important;
  background: radial-gradient(circle at 88% -4%, rgba(242, 60, 130, .82), rgba(247, 145, 184, .46) 18%, transparent 42%), linear-gradient(145deg, #fff, #fbf8fa) !important;
  color: #242229 !important;
}

.alostech-pay-visual-v230 .is-mercadopago .alos-saved-option-card,
.alostech-pay-visual-v230 .alos-flip-card.is-mercadopago,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-mercadopago {
  background: linear-gradient(145deg, #ffe600, #ffd600 62%, #ffbd17) !important;
  color: #153047 !important;
}

.alostech-pay-visual-v230 .alos-flip-card.is-nubank .alos-front { background: linear-gradient(145deg, #6300a5, #820ad1 58%, #9c35e0) !important; }
.alostech-pay-visual-v230 .alos-flip-card.is-itau .alos-front { background: linear-gradient(145deg, #d85e00, #ec7000 58%, #ff983d) !important; }
.alostech-pay-visual-v230 .alos-flip-card.is-inter .alos-front { background: linear-gradient(145deg, #d84c00, #ff6500 60%, #ff994f) !important; }
.alostech-pay-visual-v230 .alos-flip-card.is-c6 .alos-front { background: linear-gradient(145deg, #050505, #17191c 62%, #3a3d41) !important; }
.alostech-pay-visual-v230 .alos-flip-card.is-bradesco .alos-front { background: linear-gradient(145deg, #8d0629, #cc092f 58%, #ed4765) !important; }
.alostech-pay-visual-v230 .alos-flip-card.is-santander .alos-front { background: linear-gradient(145deg, #a90000, #ec0000 60%, #ff4545) !important; }
.alostech-pay-visual-v230 .alos-flip-card.is-caixa .alos-front { background: linear-gradient(145deg, #004b82, #006db0 60%, #27a8d2) !important; }
.alostech-pay-visual-v230 .alos-flip-card.is-sicredi .alos-front { background: linear-gradient(145deg, #155b32, #2f8e48 60%, #70bd68) !important; }
.alostech-pay-visual-v230 .alos-flip-card.is-sicoob .alos-front { background: linear-gradient(145deg, #003d43, #087d6b 60%, #39a58d) !important; }
.alostech-pay-visual-v230 .alos-flip-card.is-safra .alos-front { background: linear-gradient(145deg, #061f3d, #0a3968 62%, #987436) !important; }
.alostech-pay-visual-v230 .alos-flip-card.is-btg .alos-front { background: linear-gradient(145deg, #002b45, #00537b 62%, #1584ab) !important; }
.alostech-pay-visual-v230 .alos-flip-card.is-neon .alos-front { background: linear-gradient(145deg, #0066b0, #00a9df 58%, #57e5ed) !important; }
.alostech-pay-visual-v230 .alos-flip-card.is-picpay .alos-front { background: linear-gradient(145deg, #0b8f43, #21c25e 60%, #70e59a) !important; }
.alostech-pay-visual-v230 .alos-flip-card.is-pan .alos-front { background: linear-gradient(145deg, #0062be, #008bff 60%, #55b8ff) !important; }
.alostech-pay-visual-v230 .alos-flip-card.is-bb .alos-front { background: linear-gradient(145deg, #ffd91a, #f5c900 62%, #f0b900) !important; color: #172f66 !important; }
.alostech-pay-visual-v230 .alos-flip-card.is-cora .alos-front { background: radial-gradient(circle at 88% -4%, rgba(242,60,130,.82), rgba(247,145,184,.46) 18%, transparent 42%), #fff !important; color: #242229 !important; }
.alostech-pay-visual-v230 .alos-flip-card.is-mercadopago .alos-front { background: linear-gradient(145deg, #ffe600, #ffd600 62%, #ffbd17) !important; color: #153047 !important; }

.alostech-pay-visual-v230 .alos-wallet-bank-card.is-bb *,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-cora *,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-mercadopago *,
.alostech-pay-visual-v230 .alos-saved-option.is-bb .alos-saved-option-card *,
.alostech-pay-visual-v230 .alos-saved-option.is-cora .alos-saved-option-card *,
.alostech-pay-visual-v230 .alos-saved-option.is-mercadopago .alos-saved-option-card * {
  color: inherit !important;
}

.alostech-pay-visual-v230 .alos-wallet-bank-card.is-bb .alos-wallet-card-actions button,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-cora .alos-wallet-card-actions button,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-mercadopago .alos-wallet-card-actions button {
  border-color: rgba(19, 43, 79, .14) !important;
  background: rgba(255, 255, 255, .55) !important;
  color: #17314e !important;
}

/* Novo cartão e CVV: verso realista e animação acionada no campo protegido. */
.alostech-pay-visual-v230 .alos-v220-card-front {
  background: radial-gradient(circle at 88% 9%, rgba(29, 171, 201, .24), transparent 28%), linear-gradient(145deg, #101d32, #254b88 64%, #168eaa) !important;
}

.alostech-pay-visual-v230 .alos-v220-card-back,
.alostech-pay-visual-v230 .alos-backface {
  background: linear-gradient(145deg, #101a2b, #263a57 62%, #405572) !important;
}

.alostech-pay-visual-v230 .alos-v220-flip-card.is-v220-flipped,
.alostech-pay-visual-v230 .alos-flip-card.is-flipped {
  transform: rotateY(180deg) scale(1.015) !important;
}

.alostech-pay-visual-v230 .alos-v220-magstripe,
.alostech-pay-visual-v230 .alos-mag { background: linear-gradient(180deg, #070b12, #171d27) !important; }

.alostech-pay-visual-v230 .alos-v220-cvv,
.alostech-pay-visual-v230 .alos-cvv-locator {
  border-color: rgba(255, 255, 255, .55) !important;
  background: rgba(255, 255, 255, .18) !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .07) !important;
}

.alostech-pay-visual-v230 #alos-saved-security.is-focus,
.alostech-pay-visual-v230 #alos-new-cvv:focus-within,
.alostech-pay-visual-v230 #alos-wallet-security:focus-within {
  border-color: #2458c6 !important;
  box-shadow: 0 0 0 4px rgba(36, 88, 198, .11) !important;
}

.alostech-pay-visual-v230 .alos-card-screen,
.alostech-pay-visual-v230 .alos-cvv-step,
.alostech-pay-visual-v230 .alos-wallet-add-drawer {
  border-color: #dde4ed !important;
  background: #fff !important;
  box-shadow: 0 15px 40px rgba(18, 33, 58, .075) !important;
}

@media (max-width: 560px) {
  .alostech-pay-visual-v230 #payment .alos-payments { padding: 18px 14px !important; border-radius: 20px !important; }
  .alostech-pay-visual-v230 .alos-pay-methods { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
  .alostech-pay-visual-v230 .alos-method {
    min-height: 112px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    align-content: start !important;
    padding: 12px !important;
  }
  .alostech-pay-visual-v230 .alos-method-icon { grid-row: auto !important; width: 39px !important; height: 39px !important; }
  .alostech-pay-visual-v230 .alos-method > em { grid-column: 1 !important; }
  .alostech-pay-visual-v230 .alos-bank-logo { min-width: 52px !important; max-width: 96px !important; height: 29px !important; }
  .alostech-pay-visual-v230 .alos-wallet-bank-symbol { min-width: 72px !important; max-width: 102px !important; }
}

/*
 * Alostech Pay Visual 23.1
 * Ajustes validados na coluna estreita do checkout em producao.
 */
.alostech-pay-visual-v230 #payment .alos-payments {
  container-name: alostech-payment;
  container-type: inline-size;
}

/* A grade acompanha o painel de pagamento, mesmo em monitores largos. */
.alostech-pay-visual-v230 .alos-pay-methods {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.alostech-pay-visual-v230 .alos-method {
  min-height: 96px !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  align-items: center !important;
  gap: 5px 9px !important;
  padding: 12px !important;
}

.alostech-pay-visual-v230 .alos-method-icon {
  grid-row: 1 / 3 !important;
  width: 40px !important;
  height: 40px !important;
}

.alostech-pay-visual-v230 .alos-method-copy {
  align-self: end !important;
}

.alostech-pay-visual-v230 .alos-method-copy b {
  font-size: 11px !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere;
}

.alostech-pay-visual-v230 .alos-method-copy small {
  margin-top: 3px !important;
  color: #66758a !important;
  font-size: 8.5px !important;
  line-height: 1.35 !important;
}

.alostech-pay-visual-v230 .alos-method > em {
  grid-column: 2 !important;
  align-self: start !important;
  justify-self: start !important;
  max-width: 100% !important;
  padding: 4px 7px !important;
  font-size: 7.5px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

/*
 * Mantem a frente visivel ao selecionar um cartao salvo. O verso aparece
 * somente enquanto o campo CVV esta em foco.
 */
.alostech-pay-visual-v230 .alos-flip-wrap {
  width: min(100%, 360px) !important;
  max-width: 360px !important;
  overflow: visible !important;
  perspective: 1300px !important;
}

.alostech-pay-visual-v230 .alos-card-visual-col,
.alostech-pay-visual-v230 .alos-card-confirm-grid > .alos-card-visual-col {
  overflow: visible !important;
}

.alostech-pay-visual-v230 .alos-flip-card {
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 1.586 / 1 !important;
  filter: none !important;
  transform: rotateY(0deg) !important;
  -webkit-transform: rotateY(0deg) !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
}

.alostech-pay-visual-v230 .alos-flip-card .alos-face {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.alostech-pay-visual-v230 .alos-flip-card .alos-front {
  transform: rotateY(0deg) translateZ(1px) !important;
  -webkit-transform: rotateY(0deg) translateZ(1px) !important;
}

.alostech-pay-visual-v230 .alos-flip-card .alos-backface {
  transform: rotateY(180deg) translateZ(1px) !important;
  -webkit-transform: rotateY(180deg) translateZ(1px) !important;
}

.alostech-pay-visual-v230 .alos-flip-card.is-flipped {
  filter: none !important;
  transform: rotateY(180deg) !important;
  -webkit-transform: rotateY(180deg) !important;
}

.alostech-pay-visual-v230 .alos-confirm-copy {
  padding: 4px 0 0 !important;
}

.alostech-pay-visual-v230 .alos-confirm-copy h3 {
  margin: 8px 0 5px !important;
  font-size: clamp(18px, 5.3cqi, 21px) !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  overflow-wrap: anywhere;
}

.alostech-pay-visual-v230 .alos-cvv-step {
  margin-top: 12px !important;
  padding: 14px !important;
}

.alostech-pay-visual-v230 .alos-installments-select {
  margin-top: 12px !important;
  padding: 14px !important;
}

@container alostech-payment (max-width: 340px) {
  .alostech-pay-visual-v230 .alos-pay-methods {
    grid-template-columns: 1fr !important;
  }

  .alostech-pay-visual-v230 .alos-method {
    min-height: 76px !important;
  }
}

@media (max-width: 560px) {
  .alostech-pay-visual-v230 .alos-pay-methods {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .alostech-pay-visual-v230 .alos-method {
    min-height: 96px !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    padding: 11px !important;
  }

  .alostech-pay-visual-v230 .alos-method-icon { grid-row: 1 / 3 !important; }
  .alostech-pay-visual-v230 .alos-method > em { grid-column: 2 !important; }
}

/* Rotacao por face: evita a frente espelhada em compositores que achatam 3D. */
.alostech-pay-visual-v230 .alos-flip-card,
.alostech-pay-visual-v230 .alos-flip-card.is-flipped {
  transform: none !important;
  -webkit-transform: none !important;
}

.alostech-pay-visual-v230 .alos-flip-card .alos-front,
.alostech-pay-visual-v230 .alos-flip-card .alos-backface {
  transition: transform .8s cubic-bezier(.71, .03, .56, .85), opacity .3s ease !important;
  transform-origin: center !important;
  -webkit-transform-origin: center !important;
}

.alostech-pay-visual-v230 .alos-flip-card .alos-front {
  z-index: 2 !important;
  opacity: 1 !important;
  transform: rotateY(0deg) !important;
  -webkit-transform: rotateY(0deg) !important;
}

.alostech-pay-visual-v230 .alos-flip-card .alos-backface {
  z-index: 1 !important;
  opacity: 0 !important;
  transform: rotateY(180deg) !important;
  -webkit-transform: rotateY(180deg) !important;
}

.alostech-pay-visual-v230 .alos-flip-card.is-flipped .alos-front {
  z-index: 1 !important;
  opacity: 0 !important;
  transform: rotateY(-180deg) !important;
  -webkit-transform: rotateY(-180deg) !important;
}

.alostech-pay-visual-v230 .alos-flip-card.is-flipped .alos-backface {
  z-index: 2 !important;
  opacity: 1 !important;
  transform: rotateY(0deg) !important;
  -webkit-transform: rotateY(0deg) !important;
}

/*
 * Alostech Pay Visual 24.0
 * Identidade Alostech Pay, cartoes no estilo carteira digital e CVV animado.
 */
.alostech-pay-visual-v230 .alos-pay-logo {
  overflow: visible !important;
  border-radius: 15px !important;
  background: transparent !important;
  box-shadow: 0 10px 24px rgba(15, 31, 55, .2) !important;
}

.alostech-pay-visual-v230 .alos-pay-logo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.alostech-pay-visual-v230 .alos-wallet-hero-brand {
  width: auto !important;
  height: auto !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: transparent !important;
}

.alostech-pay-visual-v230 .alos-pay-brand-lockup {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.alostech-pay-visual-v230 .alos-pay-brand-lockup > img {
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 15px !important;
  box-shadow: 0 12px 27px rgba(13, 29, 52, .2) !important;
}

.alostech-pay-visual-v230 .alos-pay-brand-lockup > span {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.alostech-pay-visual-v230 .alos-pay-brand-lockup b {
  color: #13223a !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
  line-height: 1 !important;
}

.alostech-pay-visual-v230 .alos-pay-brand-lockup small {
  color: #66778d !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}

.alostech-pay-visual-v230 .alos-wallet-vault-icon {
  overflow: visible !important;
  width: 58px !important;
  height: 58px !important;
  transform: none !important;
}

.alostech-pay-visual-v230 .alos-wallet-vault-icon img {
  display: block !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 17px !important;
  box-shadow: 0 10px 25px rgba(13, 28, 51, .2) !important;
}

.alostech-pay-visual-v230 .alos-card-alostech-mark {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
}

/* Logotipo bancario branco, sem a placa branca, nos cartoes coloridos. */
.alostech-pay-visual-v230 .alos-wallet-bank-card .alos-wallet-bank-symbol,
.alostech-pay-visual-v230 .alos-saved-option-card .alos-option-bank,
.alostech-pay-visual-v230 .alos-flip-card .alos-bank-wordmark,
.alostech-pay-visual-v230 .alos-wallet-add-preview [data-wallet-preview-symbol] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.alostech-pay-visual-v230 .alos-wallet-bank-card .alos-wallet-bank-symbol img,
.alostech-pay-visual-v230 .alos-saved-option-card img.alos-bank-logo,
.alostech-pay-visual-v230 .alos-flip-card .alos-front img.alos-bank-logo,
.alostech-pay-visual-v230 .alos-wallet-preview-bank-logo {
  width: auto !important;
  max-width: 104px !important;
  height: auto !important;
  max-height: 31px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: brightness(0) invert(1) !important;
  opacity: .98 !important;
  object-fit: contain !important;
}

/* Cartoes claros conservam a cor oficial para manter legibilidade. */
.alostech-pay-visual-v230 .is-bb img.alos-bank-logo,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-bb .alos-wallet-bank-symbol img,
.alostech-pay-visual-v230 .is-cora img.alos-bank-logo,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-cora .alos-wallet-bank-symbol img,
.alostech-pay-visual-v230 .is-mercadopago img.alos-bank-logo,
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-mercadopago .alos-wallet-bank-symbol img {
  filter: none !important;
}

/* Cartao salvo: banco no topo, final embaixo e bandeira no canto inferior. */
.alostech-pay-visual-v230 .alos-saved-option-card {
  position: relative !important;
  display: block !important;
  aspect-ratio: 1.586 / 1 !important;
  min-height: 0 !important;
  padding: 17px !important;
}

.alostech-pay-visual-v230 .alos-saved-option-card .alos-option-bank {
  position: absolute !important;
  top: 17px !important;
  left: 17px !important;
}

.alostech-pay-visual-v230 .alos-saved-option-card .alos-option-bank small,
.alostech-pay-visual-v230 .alos-saved-option-card .alos-mini-chip {
  display: none !important;
}

.alostech-pay-visual-v230 .alos-card-list .alos-saved-option-card > strong {
  position: absolute !important;
  right: auto !important;
  bottom: 17px !important;
  left: 17px !important;
  color: inherit !important;
  font-size: 14px !important;
  letter-spacing: .04em !important;
}

.alostech-pay-visual-v230 .alos-saved-option-card .alos-option-network {
  position: absolute !important;
  right: 17px !important;
  bottom: 15px !important;
}

/* Cartoes da pagina Minha conta com a composicao da referencia. */
.alostech-pay-visual-v230 .alos-wallet-bank-card {
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 1.586 / 1 !important;
  padding: 24px !important;
  border-radius: 25px !important;
}

.alostech-pay-visual-v230 .alos-wallet-bank-card-head {
  display: block !important;
}

.alostech-pay-visual-v230 .alos-wallet-bank-symbol {
  position: absolute !important;
  top: 23px !important;
  left: 24px !important;
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  height: 32px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.alostech-pay-visual-v230 .alos-wallet-bank-name,
.alostech-pay-visual-v230 .alos-wallet-bank-chip,
.alostech-pay-visual-v230 .alos-wallet-bank-footer {
  display: none !important;
}

.alostech-pay-visual-v230 .alos-wallet-card-type {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  display: block !important;
  color: rgba(255, 255, 255, .9) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .06em !important;
  text-transform: lowercase !important;
}

.alostech-pay-visual-v230 .alos-wallet-default-badge {
  position: absolute !important;
  top: 45px !important;
  right: 21px !important;
  margin: 0 !important;
}

.alostech-pay-visual-v230 .alos-wallet-brand-original {
  position: absolute !important;
  right: 23px !important;
  bottom: 22px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.alostech-pay-visual-v230 .alos-wallet-brand-original img {
  max-width: 62px !important;
  max-height: 30px !important;
}

.alostech-pay-visual-v230 .alos-wallet-brand-original b {
  color: inherit !important;
  font-size: 11px !important;
}

.alostech-pay-visual-v230 .alos-wallet-bank-number {
  position: absolute !important;
  bottom: 24px !important;
  left: 24px !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: 16px !important;
  letter-spacing: .045em !important;
}

.alostech-pay-visual-v230 .alos-wallet-bank-card .alos-wallet-bank-symbol img {
  width: 104px !important;
  height: 32px !important;
  object-position: left center !important;
}

/* A arte oficial do Itau e um icone quadrado; no cartao usamos o wordmark branco. */
.alostech-pay-visual-v230 .alos-wallet-bank-card.is-itau .alos-wallet-bank-symbol img,
.alostech-pay-visual-v230 .alos-saved-option.is-itau .alos-saved-option-card img.alos-bank-logo,
.alostech-pay-visual-v230 .alos-flip-card.is-itau .alos-front img.alos-bank-logo,
.alostech-pay-visual-v230 .alos-wallet-add-preview.is-itau .alos-wallet-preview-bank-logo {
  display: none !important;
}

.alostech-pay-visual-v230 .alos-wallet-bank-card.is-itau .alos-wallet-bank-symbol::after,
.alostech-pay-visual-v230 .alos-saved-option.is-itau .alos-saved-option-card .alos-option-bank::after,
.alostech-pay-visual-v230 .alos-flip-card.is-itau .alos-front .alos-bank-wordmark::after,
.alostech-pay-visual-v230 .alos-wallet-add-preview.is-itau [data-wallet-preview-symbol]::after {
  color: #fff !important;
  content: "itau" !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  letter-spacing: -.08em !important;
  line-height: 1 !important;
  text-shadow: 0 2px 9px rgba(18, 31, 50, .18) !important;
}

.alostech-pay-visual-v230 .alos-saved-option-card img.alos-bank-logo {
  width: 86px !important;
  height: 28px !important;
  object-position: left center !important;
}

.alostech-pay-visual-v230 .alos-flip-card .alos-front img.alos-bank-logo {
  width: 96px !important;
  height: 31px !important;
  object-position: left center !important;
}

.alostech-pay-visual-v230 .alos-wallet-card-actions {
  top: 65px !important;
  right: 18px !important;
  bottom: auto !important;
  opacity: 0 !important;
  transform: translateY(-4px) !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

.alostech-pay-visual-v230 .alos-wallet-bank-card:hover .alos-wallet-card-actions,
.alostech-pay-visual-v230 .alos-wallet-bank-card:focus-within .alos-wallet-card-actions {
  opacity: 1 !important;
  transform: none !important;
}

/* Frente enxuta no checkout; detalhes continuam no painel logo abaixo. */
.alostech-pay-visual-v230 .alos-flip-card .alos-front .alos-chip,
.alostech-pay-visual-v230 .alos-flip-card .alos-front .alos-card-meta,
.alostech-pay-visual-v230 .alos-flip-card .alos-front .alos-card-wallet-tag {
  display: none !important;
}

.alostech-pay-visual-v230 .alos-flip-card .alos-front .alos-card-number-main {
  position: absolute !important;
  bottom: 24px !important;
  left: 24px !important;
  margin: 0 !important;
  font-size: 17px !important;
  letter-spacing: .045em !important;
}

.alostech-pay-visual-v230 .alos-flip-card .alos-front .alos-brand-original {
  position: absolute !important;
  right: 24px !important;
  bottom: 22px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.alostech-pay-visual-v230 .alos-flip-card .alos-front .alos-bank-wordmark small {
  display: none !important;
}

/* Animacao de CVV por faces independentes: sem vazamento ou espelhamento. */
.alostech-pay-visual-v230 .alos-v220-flip-card,
.alostech-pay-visual-v230 .alos-v220-flip-card.is-v220-flipped {
  transform: none !important;
  -webkit-transform: none !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
}

.alostech-pay-visual-v230 .alos-v220-flip-card .alos-v220-card-front,
.alostech-pay-visual-v230 .alos-v220-flip-card .alos-v220-card-back {
  transition: transform .8s cubic-bezier(.71, .03, .56, .85), opacity .3s ease !important;
  transform-origin: center !important;
  -webkit-transform-origin: center !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.alostech-pay-visual-v230 .alos-v220-flip-card .alos-v220-card-front {
  z-index: 2 !important;
  opacity: 1 !important;
  transform: rotateY(0deg) !important;
  -webkit-transform: rotateY(0deg) !important;
}

.alostech-pay-visual-v230 .alos-v220-flip-card .alos-v220-card-back {
  z-index: 1 !important;
  opacity: 0 !important;
  transform: rotateY(180deg) !important;
  -webkit-transform: rotateY(180deg) !important;
}

.alostech-pay-visual-v230 .alos-v220-flip-card.is-v220-flipped .alos-v220-card-front {
  z-index: 1 !important;
  opacity: 0 !important;
  transform: rotateY(-180deg) !important;
  -webkit-transform: rotateY(-180deg) !important;
}

.alostech-pay-visual-v230 .alos-v220-flip-card.is-v220-flipped .alos-v220-card-back {
  z-index: 2 !important;
  opacity: 1 !important;
  transform: rotateY(0deg) !important;
  -webkit-transform: rotateY(0deg) !important;
}

.alostech-pay-visual-v230 .alos-v220-flip-card .alos-v220-cvv {
  animation: alosV240CvvPulse 1.4s ease-in-out infinite !important;
}

@keyframes alosV240CvvPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .08), 0 0 0 rgba(71, 202, 239, 0); }
  50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, .13), 0 0 24px rgba(71, 202, 239, .38); }
}

.alostech-pay-visual-v230 .alos-wallet-add-preview .alos-wallet-add-preview-chip,
.alostech-pay-visual-v230 .alos-wallet-add-preview .alos-wallet-add-preview-footer {
  display: flex !important;
}

.alostech-pay-visual-v230 .alos-wallet-add-preview .alos-wallet-add-preview-number {
  position: static !important;
  margin-top: 14px !important;
}

.alostech-pay-visual-v230 .alos-wallet-add-preview [data-wallet-preview-symbol] {
  display: flex !important;
  width: 96px !important;
  min-width: 0 !important;
  height: 31px !important;
  padding: 0 !important;
  align-items: center !important;
}

.alostech-pay-visual-v230 .alos-wallet-preview-bank-logo {
  width: 96px !important;
  height: 31px !important;
  object-position: left center !important;
}

@media (hover: none), (max-width: 700px) {
  .alostech-pay-visual-v230 .alos-wallet-card-actions {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 560px) {
  .alostech-pay-visual-v230 .alos-pay-brand-lockup > img { width: 46px !important; height: 46px !important; }
  .alostech-pay-visual-v230 .alos-pay-brand-lockup b { font-size: 18px !important; }
  .alostech-pay-visual-v230 .alos-wallet-bank-card { padding: 19px !important; border-radius: 22px !important; }
  .alostech-pay-visual-v230 .alos-wallet-bank-symbol { top: 19px !important; left: 19px !important; }
  .alostech-pay-visual-v230 .alos-wallet-card-type { top: 20px !important; right: 19px !important; }
  .alostech-pay-visual-v230 .alos-wallet-brand-original { right: 19px !important; bottom: 18px !important; }
  .alostech-pay-visual-v230 .alos-wallet-bank-number { bottom: 20px !important; left: 19px !important; font-size: 14px !important; }
  .alostech-pay-visual-v230 .alos-wallet-card-actions { top: 55px !important; right: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .alostech-pay-visual-v230 .alos-v220-flip-card .alos-v220-card-front,
  .alostech-pay-visual-v230 .alos-v220-flip-card .alos-v220-card-back { transition-duration: .01ms !important; }
  .alostech-pay-visual-v230 .alos-v220-flip-card .alos-v220-cvv { animation: none !important; }
}

/* v24.1 — chip EMV e identificação completa na própria arte do cartão. */
.alostech-pay-visual-v230 .alos-mini-chip,
.alostech-pay-visual-v230 .alos-chip,
.alostech-pay-visual-v230 .alos-wallet-bank-chip,
.alostech-pay-visual-v230 .alos-wallet-add-preview-chip {
  position: absolute !important;
  display: block !important;
  width: 46px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(77, 53, 10, .28) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(90deg, transparent 31%, rgba(91, 62, 12, .25) 32%, rgba(91, 62, 12, .25) 34%, transparent 35%, transparent 65%, rgba(91, 62, 12, .25) 66%, rgba(91, 62, 12, .25) 68%, transparent 69%),
    linear-gradient(135deg, #fff1b5 0%, #d3a84d 43%, #f5d57f 70%, #b88b32 100%) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -1px 1px rgba(74, 50, 9, .18), 0 5px 12px rgba(8, 18, 35, .18) !important;
}

.alostech-pay-visual-v230 .alos-mini-chip::before,
.alostech-pay-visual-v230 .alos-chip::before,
.alostech-pay-visual-v230 .alos-wallet-bank-chip::before,
.alostech-pay-visual-v230 .alos-wallet-add-preview-chip::before {
  position: absolute !important;
  top: 7px !important;
  right: 0 !important;
  bottom: 7px !important;
  left: 0 !important;
  border-top: 1px solid rgba(86, 59, 12, .28) !important;
  border-bottom: 1px solid rgba(86, 59, 12, .28) !important;
  content: "" !important;
}

.alostech-pay-visual-v230 .alos-mini-chip::after,
.alostech-pay-visual-v230 .alos-chip::after,
.alostech-pay-visual-v230 .alos-wallet-bank-chip::after,
.alostech-pay-visual-v230 .alos-wallet-add-preview-chip::after {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 15px !important;
  height: 14px !important;
  border: 1px solid rgba(86, 59, 12, .3) !important;
  border-radius: 4px !important;
  content: "" !important;
  transform: translate(-50%, -50%) !important;
}

.alostech-pay-visual-v230 .alos-wallet-bank-chip i,
.alostech-pay-visual-v230 .alos-wallet-add-preview-chip i { display: none !important; }

/* Seletor da carteira no checkout. */
.alostech-pay-visual-v230 .alos-card-list .alos-saved-option-card .alos-mini-chip {
  display: block !important;
  top: 57px !important;
  left: 17px !important;
  width: 39px !important;
  height: 29px !important;
  z-index: 2 !important;
}

.alostech-pay-visual-v230 .alos-card-list .alos-saved-option-card > strong {
  top: 101px !important;
  right: 17px !important;
  bottom: auto !important;
  left: 17px !important;
}

.alostech-pay-visual-v230 .alos-card-compact-meta {
  position: absolute !important;
  right: 100px !important;
  bottom: 16px !important;
  left: 17px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  color: inherit !important;
}

.alostech-pay-visual-v230 .alos-card-compact-meta > span {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
}

.alostech-pay-visual-v230 .alos-card-compact-meta small {
  color: inherit !important;
  font-size: 5.5px !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
  opacity: .68 !important;
}

.alostech-pay-visual-v230 .alos-card-compact-meta b {
  overflow: hidden !important;
  margin-top: 2px !important;
  color: inherit !important;
  font-size: 7.5px !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Cartões salvos na Carteira Alostech. */
.alostech-pay-visual-v230 .alos-wallet-bank-card .alos-wallet-bank-chip {
  top: 71px !important;
  left: 24px !important;
  width: 48px !important;
  height: 35px !important;
}

.alostech-pay-visual-v230 .alos-wallet-bank-card .alos-wallet-bank-card-head {
  position: static !important;
}

.alostech-pay-visual-v230 .alos-wallet-bank-card .alos-wallet-bank-number {
  top: 119px !important;
  right: 24px !important;
  bottom: auto !important;
  left: 24px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

.alostech-pay-visual-v230 .alos-wallet-bank-card .alos-wallet-bank-number::before {
  display: none !important;
  content: none !important;
}

.alostech-pay-visual-v230 .alos-wallet-bank-card .alos-wallet-card-actions {
  position: absolute !important;
  top: 78px !important;
  right: 18px !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
}

.alostech-pay-visual-v230 .alos-wallet-bank-card .alos-wallet-bank-footer {
  position: absolute !important;
  right: 120px !important;
  bottom: 20px !important;
  left: 24px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.alostech-pay-visual-v230 .alos-wallet-bank-footer > span {
  display: flex !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

.alostech-pay-visual-v230 .alos-wallet-bank-footer > span:nth-child(n+3) { display: none !important; }
.alostech-pay-visual-v230 .alos-wallet-bank-footer small { color: inherit !important; opacity: .66 !important; }
.alostech-pay-visual-v230 .alos-wallet-bank-footer strong { color: inherit !important; font-size: 9px !important; }

/* Cartão selecionado: mesmos dados na frente e virada para o CVV. */
.alostech-pay-visual-v230 .alos-flip-card .alos-front .alos-chip {
  display: block !important;
  top: 68px !important;
  left: 24px !important;
}

.alostech-pay-visual-v230 .alos-flip-card .alos-front .alos-card-number-main {
  top: 116px !important;
  right: 24px !important;
  bottom: auto !important;
  left: 24px !important;
}

.alostech-pay-visual-v230 .alos-flip-card .alos-front .alos-card-meta {
  position: absolute !important;
  right: 120px !important;
  bottom: 20px !important;
  left: 24px !important;
  width: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  margin: 0 !important;
}

.alostech-pay-visual-v230 .alos-flip-card .alos-front .alos-card-meta > span {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
}

.alostech-pay-visual-v230 .alos-flip-card .alos-front .alos-card-meta small {
  color: inherit !important;
  font-size: 6px !important;
  letter-spacing: .09em !important;
  opacity: .67 !important;
}

.alostech-pay-visual-v230 .alos-flip-card .alos-front .alos-card-meta b {
  overflow: hidden !important;
  margin-top: 2px !important;
  color: inherit !important;
  font-size: 8.5px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.alostech-pay-visual-v230 .alos-flip-card .alos-front .alos-card-wallet-tag { display: none !important; }

/* Cartão novo na carteira e no checkout. */
.alostech-pay-visual-v230 .alos-v220-card-front > .alos-chip,
.alostech-pay-visual-v230 .alos-v220-card-front > .alos-wallet-add-preview-chip {
  top: 66px !important;
  left: 21px !important;
}

.alostech-pay-visual-v230 .alos-v220-card-front > strong[data-new-preview-number],
.alostech-pay-visual-v230 .alos-v220-card-front > .alos-wallet-add-preview-number {
  position: absolute !important;
  top: 112px !important;
  right: 21px !important;
  left: 21px !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: 15px !important;
  letter-spacing: .085em !important;
}

.alostech-pay-visual-v230 .alos-new-live-meta,
.alostech-pay-visual-v230 .alos-v220-card-front > .alos-wallet-add-preview-footer {
  position: absolute !important;
  right: 21px !important;
  bottom: 18px !important;
  left: 21px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  margin: 0 !important;
}

.alostech-pay-visual-v230 .alos-new-live-meta > span,
.alostech-pay-visual-v230 .alos-v220-card-front > .alos-wallet-add-preview-footer > span {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
}

.alostech-pay-visual-v230 .alos-new-live-meta small,
.alostech-pay-visual-v230 .alos-v220-card-front > .alos-wallet-add-preview-footer small {
  color: inherit !important;
  font-size: 6px !important;
  letter-spacing: .09em !important;
  opacity: .65 !important;
}

.alostech-pay-visual-v230 .alos-new-live-meta b,
.alostech-pay-visual-v230 .alos-v220-card-front > .alos-wallet-add-preview-footer strong {
  overflow: hidden !important;
  margin-top: 2px !important;
  color: inherit !important;
  font-size: 8px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.alostech-pay-visual-v230 .alos-new-preview .alos-v220-card-front > small { display: none !important; }

@media (max-width: 560px) {
  .alostech-pay-visual-v230 .alos-wallet-bank-card .alos-wallet-bank-chip { top: 64px !important; left: 19px !important; }
  .alostech-pay-visual-v230 .alos-wallet-bank-card .alos-wallet-bank-number { top: 108px !important; left: 19px !important; }
  .alostech-pay-visual-v230 .alos-wallet-bank-card .alos-wallet-bank-footer { right: 86px !important; bottom: 17px !important; left: 19px !important; gap: 12px !important; }
}