@import url("/jogos/helix-pix/runtime/deposit-offers.css?v=1");
/* Financial dialogs share the portal identity. QR contrast stays unchanged. */
.referral-pixel-provider { padding-top: 18px; margin-top: 22px; border-top: 1px solid #d0e2ee; }
.referral-pixel-provider h4 { font-size: 18px; margin: 0 0 14px; color: #153c56; }
.modal.modal--payment { width: min(100%, 460px); color: #eefcff; background: #071b2e; border: 1px solid #23516b; border-radius: 26px; }
.modal--payment .modal__header { background: #092239; border-bottom: 1px solid #23516b; padding: 24px; }
.modal--payment .modal__header h2 { color: #eefcff; font-size: 26px; }
.modal--payment .modal__header p { color: #72e8fa; font-size: 12px; }
.modal--payment .modal__body { padding: 24px; }
/* Keep the full uploaded promotion visible at its original aspect ratio. */
.modal--payment .modal-media-banner--deposit { height: auto; margin: 20px 24px 0; }
.modal--payment .modal-media-banner--deposit img { width: 100%; height: auto; max-height: none; object-fit: contain; }
.modal--payment .summary-card { margin-bottom: 20px; padding: 20px; border: 1px solid #286780; border-radius: 18px; background: linear-gradient(130deg, #0c3652, #10516a); }
.modal--payment .summary-card span { color: #b6dce8; font-size: 12px; }
.modal--payment .summary-card strong { color: #eefcff; font-size: 26px; overflow-wrap: anywhere; }
.modal--payment .summary-card b { color: #75e7f6; background: #103f57; }
.modal--payment .summary-card .ui-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; }
.modal--payment .form-field label { color: #c9dfe9; font-size: 14px; text-transform: none; letter-spacing: 0; }
.modal--payment .form-field input, .modal--payment .form-field select { color-scheme: dark; background: #0b2a40; color: #eefcff; border: 1px solid #31556d; border-radius: 12px; font-size: 16px; }
.modal--payment .form-field input::placeholder { color: #91acbf; }
.modal--payment .form-field input:focus, .modal--payment .form-field select:focus { outline: 2px solid #66dced; outline-offset: 2px; }
.modal--payment .quick-values { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.modal--payment .quick-values button { background: #0c3048; color: #e4faff; border-color: #39667d; border-radius: 12px; min-height: 54px; }
/* Highlight the configured R$ 50 preset without selecting it or changing its badge. */
.modal--payment .quick-values button[data-deposit-cents="5000"] { background: linear-gradient(135deg, #12364d, #10516a); border-color: #72e8fa; box-shadow: inset 0 0 0 1px #72e8fa, 0 4px 16px rgb(67 210 233 / 18%); }
.modal--payment .quick-values button[data-deposit-cents="5000"] > span { font-size: .875rem; }
.modal--payment .quick-values button:is(:hover, :focus-visible, .is-active) { background: #196780; color: #fff; border-color: #62dced; }
.modal--payment .quick-values button.is-active { box-shadow: inset 0 0 0 2px #eefcff; }
.modal--payment .quick-values button:focus-visible { outline: 2px solid #72e8fa; outline-offset: 3px; }
.modal--payment .payment-coupon { min-width: 0; }
.modal--payment .payment-coupon > summary { width: fit-content; min-height: 44px; align-content: center; color: #b0c7d6; font-size: 13px; cursor: pointer; text-underline-offset: 4px; }
.modal--payment .payment-coupon > summary:is(:hover, :focus-visible) { color: #72e8fa; text-decoration: underline; }
.modal--payment .payment-coupon > summary:focus-visible { outline: 2px solid #66dced; outline-offset: 3px; border-radius: 4px; }
.modal--payment .payment-coupon[open] > .form-field { margin-top: 8px; }
.modal--payment .payment-limits, .modal--payment .modal__lead, .modal--payment .payment-pix-qr figcaption { color: #b0c7d6; font-size: 14px; line-height: 1.5; }
.modal--payment .withdrawal-amounts { display: grid; gap: 12px; margin: 0 0 18px; padding: 16px; border: 1px solid #31556d; border-radius: 14px; background: #0b2a40; }
.modal--payment .withdrawal-amounts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; min-width: 0; }
.modal--payment .withdrawal-amounts dt { color: #b0c7d6; font-size: 13px; line-height: 1.45; }
.modal--payment .withdrawal-amounts dd { margin: 0; color: #eefcff; font-size: 14px; font-weight: 800; text-align: right; white-space: nowrap; }
.modal--payment .withdrawal-amounts > div:last-child { padding-top: 12px; border-top: 1px solid #31556d; }
.modal--payment .security-note { color: #b2cddd; background: #0a273c; border-radius: 14px; font-size: 13px; line-height: 1.6; padding: 16px; }
.modal--payment .action-button { background: #43d2e9; color: #042438; border-radius: 14px; min-height: 52px; font-size: 15px; text-transform: none; letter-spacing: 0; box-shadow: none; }
.modal--payment .action-button:hover { background: #7ce7f5; color: #042438; }
.modal--payment .action-button--secondary, .modal--payment .modal__header .icon-button { background: #12364d; color: #c9edf6; }
.modal--payment .payment-pix-code { background: #0b2a40; border-color: #31556d; }
.modal--payment .payment-pix-code code { color: #c5e6f1; }
.modal--payment .payment-pix-code button { background: #43d2e9; color: #042438; font-size: 14px; }
.modal--payment .payment-demo-notice { margin: 16px 0; color: #b6dce8; font-size: 13px; line-height: 1.5; text-align: center; }
.modal--payment .modal__header.modal__header--compact { justify-content: flex-end; padding: 16px 20px 0; border-bottom: 0; background: none; }
.modal--payment .modal__header--compact .icon-button { min-width: 44px; min-height: 44px; }
.modal--payment .modal__header--compact + .modal__body { padding-top: 12px; }
.modal--payment .payment-demo-code code { font-size: 13px; user-select: text; -webkit-user-select: text; }
.modal--payment .payment-demo-code button { min-height: 44px; }
.modal--payment .payment-demo-code :is(code, button):focus-visible { outline: 2px solid #66dced; outline-offset: 3px; border-radius: 4px; }
.modal--payment .payment-demo-copy-status { min-height: 1.5em; margin: 0; color: #c5e6f1; font-size: 13px; line-height: 1.5; }
.modal--payment .payment-history > article { background: #0b2a40; border-color: #31556d; color: #e4faff; }
.deposit-shortcut { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid #69e2f0; border-radius: 13px; background: #3ed0e7; color: #032b40; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; flex-shrink: 0; }
.deposit-shortcut svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.deposit-shortcut:is(:hover, :focus-visible) { background: #8beef8; color: #032b40; outline: 2px solid #69e2f0; outline-offset: 2px; }
/* Server-owned grant values remain live text, never baked into a campaign image. */
.deposit-demo-banner { position: relative; isolation: isolate; overflow: hidden; margin: 0 0 18px; padding: 22px; border: 1px solid #62dced70; border-radius: 18px; background: #0a3b52; color: #edfbff; }
.deposit-demo-banner::before { content: ""; position: absolute; z-index: -2; inset: 0; background: url('/assets/platform/helix-pix/helix-pix-hero.png') 62% 44% / cover; opacity: .38; }
.deposit-demo-banner::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(100deg, #082b43f5 15%, #08394ee8 52%, #06344535); }
.deposit-demo-banner__eyebrow { display: block; margin-bottom: 12px; color: #9debf2; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.deposit-demo-banner h3 { margin: 0; color: #f3fbff; font-size: clamp(25px, 6vw, 32px); line-height: 1.15; font-weight: 850; letter-spacing: -.035em; }
.deposit-demo-banner h3 strong { white-space: nowrap; }
.deposit-demo-banner__lead { margin: 7px 0 0; color: #d6edf5; font-size: 15px; line-height: 1.45; }
.deposit-demo-banner__amount { display: block; margin: 2px 0 12px; color: #7df0e0; font-size: clamp(36px, 9vw, 46px); line-height: 1.15; letter-spacing: -.035em; font-weight: 900; overflow-wrap: anywhere; }
.deposit-demo-banner__note { margin: 0; color: #d0e7f0; font-size: 11px; line-height: 1.5; }
.deposit-demo-choice { padding: 10px 12px; border: 1px solid #2b566a; border-radius: 12px; background: #0c2b3f; color: #c8e1ed; }
.deposit-demo-choice > label { display: flex; align-items: center; gap: 10px; min-height: 32px; color: #d7f4f8; font-size: 12px; font-weight: 750; line-height: 1.5; cursor: pointer; }
.deposit-demo-choice input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: #43d2e9; }
.deposit-demo-choice summary { min-height: 32px; padding: 8px 0 2px; font-size: 11px; cursor: pointer; }
.deposit-demo-choice details p { margin: 10px 0 0; color: #b9d3e0; font-size: 12px; line-height: 1.6; }
.deposit-demo-choice [role="status"] { margin: 6px 0 0; color: #ffe1a6; font-size: 12px; line-height: 1.5; }
.deposit-demo-choice [role="status"]:empty { display: none; }
.deposit-demo-choice :is(input, summary):focus-visible { outline: 2px solid #66dced; outline-offset: 3px; border-radius: 4px; }
@media (max-height: 700px) { .deposit-demo-banner { padding: 16px 18px; } .deposit-demo-banner__amount { font-size: 34px; margin-bottom: 8px; } }
@media (max-width: 760px) {
  .portal-topbar .deposit-shortcut { width: 44px; padding: 0; }
  .deposit-shortcut > span { display: none; }
  .portal-topbar { gap: 8px; }
  .portal-topbar .brand { min-width: 44px; min-height: 44px; flex: 0 0 auto; }
  .portal-topbar .topbar-account { min-width: 0; gap: 6px; }
  .portal-topbar .diamond-balance { min-width: 60px; min-height: 44px; padding: 6px; gap: 6px; flex: 0 0 auto; }
  .portal-topbar .diamond-balance > .account-icon { display: grid; width: 22px; height: 22px; flex: 0 0 auto; background: none; color: #72e8fa; box-shadow: none; }
  .portal-topbar .diamond-balance .account-icon svg { width: 20px; height: 20px; }
  .portal-topbar .diamond-balance__copy small { display: none; }
  .portal-topbar .diamond-balance__copy strong { font-size: 15px; white-space: nowrap; }
  .modal--payment .modal__body, .modal--payment .modal__header { padding: 20px; }
  .modal--payment .modal-media-banner--deposit { margin-inline: 20px; }
}
/* Small phones keep full balances without squeezing the diamond or deposit tap targets. */
@media (max-width: 355px) {
  .portal-topbar { height: calc(110px + env(safe-area-inset-top)); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
  .portal-topbar .topbar-account { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 5px; }
  .portal-topbar .diamond-balance { grid-column: 1; grid-row: 1; }
  .portal-topbar .deposit-shortcut { grid-column: 2; grid-row: 1; height: 44px; }
  .portal-topbar .balance-pill { grid-column: 1 / -1; grid-row: 2; min-width: 0; min-height: 44px; }
  .portal-main { top: calc(110px + env(safe-area-inset-top)); }
}