@import url("/jogos/aa/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 #dfdfdf; }
.referral-pixel-provider h4 { font-size: 18px; margin: 0 0 14px; color: #363636; }
.modal.modal--payment { width: min(100%, 460px); color: #f9f9f9; background: #181818; border: 1px solid #494949; border-radius: 26px; }
.modal--payment .modal__header { background: #1e1e1e; border-bottom: 1px solid #494949; padding: 24px; }
.modal--payment .modal__header h2 { color: #f9f9f9; font-size: 26px; }
.modal--payment .modal__header p { color: #d0d0d0; 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 #5b5b5b; border-radius: 18px; background: linear-gradient(130deg, #2f2f2f, #454545); }
.modal--payment .summary-card span { color: #d5d5d5; font-size: 12px; }
.modal--payment .summary-card strong { color: #f9f9f9; font-size: 26px; overflow-wrap: anywhere; }
.modal--payment .summary-card b { color: #d0d0d0; background: #373737; }
.modal--payment .summary-card .ui-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; }
.modal--payment .form-field label { color: #dbdbdb; font-size: 14px; text-transform: none; letter-spacing: 0; }
.modal--payment .form-field input, .modal--payment .form-field select { color-scheme: dark; background: #252525; color: #f9f9f9; border: 1px solid #4f4f4f; border-radius: 12px; font-size: 16px; }
.modal--payment .form-field input::placeholder { color: #a8a8a8; }
.modal--payment .form-field input:focus, .modal--payment .form-field select:focus { outline: 2px solid #c4c4c4; outline-offset: 2px; }
.modal--payment .quick-values { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.modal--payment .quick-values button { background: #2a2a2a; color: #f6f6f6; border-color: #5e5e5e; 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, #303030, #454545); border-color: #d0d0d0; box-shadow: inset 0 0 0 1px #d0d0d0, 0 4px 16px rgb(181 181 181 / 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: #585858; color: #ffffff; border-color: #c3c3c3; }
.modal--payment .quick-values button.is-active { box-shadow: inset 0 0 0 2px #f9f9f9; }
.modal--payment .quick-values button:focus-visible { outline: 2px solid #d0d0d0; 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: #c3c3c3; font-size: 13px; cursor: pointer; text-underline-offset: 4px; }
.modal--payment .payment-coupon > summary:is(:hover, :focus-visible) { color: #d0d0d0; text-decoration: underline; }
.modal--payment .payment-coupon > summary:focus-visible { outline: 2px solid #c4c4c4; 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: #c3c3c3; font-size: 14px; line-height: 1.5; }
.modal--payment .withdrawal-amounts { display: grid; gap: 12px; margin: 0 0 18px; padding: 16px; border: 1px solid #4f4f4f; border-radius: 14px; background: #252525; }
.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: #c3c3c3; font-size: 13px; line-height: 1.45; }
.modal--payment .withdrawal-amounts dd { margin: 0; color: #f9f9f9; 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 #4f4f4f; }
.modal--payment .security-note { color: #c8c8c8; background: #222222; border-radius: 14px; font-size: 13px; line-height: 1.6; padding: 16px; }
.modal--payment .action-button { background: #b5b5b5; color: #1f1f1f; border-radius: 14px; min-height: 52px; font-size: 15px; text-transform: none; letter-spacing: 0; box-shadow: none; }
.modal--payment .action-button:hover { background: #d1d1d1; color: #1f1f1f; }
.modal--payment .action-button--secondary, .modal--payment .modal__header .icon-button { background: #303030; color: #e6e6e6; }
.modal--payment .payment-pix-code { background: #252525; border-color: #4f4f4f; }
.modal--payment .payment-pix-code code { color: #e0e0e0; }
.modal--payment .payment-pix-code button { background: #b5b5b5; color: #1f1f1f; font-size: 14px; }
.modal--payment .payment-demo-notice { margin: 16px 0; color: #d5d5d5; 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 #c4c4c4; outline-offset: 3px; border-radius: 4px; }
.modal--payment .payment-demo-copy-status { min-height: 1.5em; margin: 0; color: #e0e0e0; font-size: 13px; line-height: 1.5; }
.modal--payment .payment-history > article { background: #252525; border-color: #4f4f4f; color: #f6f6f6; }
.deposit-shortcut { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid #c9c9c9; border-radius: 13px; background: #b3b3b3; color: #242424; 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: #dadada; color: #242424; outline: 2px solid #c9c9c9; 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 #c3c3c370; border-radius: 18px; background: #323232; color: #f8f8f8; }
.deposit-demo-banner::before { content: ""; position: absolute; z-index: -2; inset: 0; background: url('/assets/platform/aa/crava-hero.svg') 62% 44% / cover; opacity: .38; }
.deposit-demo-banner::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(100deg, #252525f5 15%, #303030e8 52%, #2b2b2b35); }
.deposit-demo-banner__eyebrow { display: block; margin-bottom: 12px; color: #dbdbdb; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.deposit-demo-banner h3 { margin: 0; color: #fafafa; 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: #e9e9e9; font-size: 15px; line-height: 1.45; }
.deposit-demo-banner__amount { display: block; margin: 2px 0 12px; color: #d6d6d6; 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: #e3e3e3; font-size: 11px; line-height: 1.5; }
.deposit-demo-choice { padding: 10px 12px; border: 1px solid #4e4e4e; border-radius: 12px; background: #262626; color: #dddddd; }
.deposit-demo-choice > label { display: flex; align-items: center; gap: 10px; min-height: 32px; color: #eeeeee; 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: #b5b5b5; }
.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: #cecece; font-size: 12px; line-height: 1.6; }
.deposit-demo-choice [role="status"] { margin: 6px 0 0; color: #e3e3e3; 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 #c4c4c4; 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: #d0d0d0; 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)); }
}