/*
 * Android sheet parity layer.
 * Keep this after styles.css: desktop changes placement, never the native skin.
 */

:is(.side-sheet-panel, .modal-panel, .picker-sheet-panel) {
  --bg: #121212;
  --surface: #1a1a1a;
  --surface-strong: #1a1a1a;
  --field-bg: #1a1a1a;
  --ink: #f4f4f4;
  --muted: #9a9a9a;
  --icon-inactive: #92969d;
  --line: #2a2a2a;
  border: 0 !important;
  border-radius: 24px !important;
  background: #121212 !important;
  color: #f4f4f4 !important;
  overflow: hidden !important;
}

:is(.side-sheet-backdrop, .modal-backdrop, .picker-sheet-backdrop) {
  background: rgba(0, 0, 0, .588) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

:is(#side-sheet, #wallet-modal, #picker-sheet) :is(.side-sheet-body, .picker-sheet-body) {
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

:is(#side-sheet, #picker-sheet) .side-sheet-header,
#wallet-modal .modal-header {
  min-height: auto !important;
  padding: 0 16px 12px !important;
  border: 0 !important;
  background: #121212 !important;
}

:is(#side-sheet, #picker-sheet) .side-sheet-header > div:first-child,
#wallet-modal .modal-header > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  text-align: left !important;
}

:is(#side-sheet, #picker-sheet) .side-sheet-header h2,
#wallet-modal .modal-header h2 {
  margin: 0 !important;
  color: #f4f4f4 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

:is(#side-sheet, #picker-sheet) .side-sheet-header .eyebrow,
#wallet-modal .modal-header .eyebrow {
  order: 2 !important;
  margin: 6px 0 0 !important;
  color: #9a9a9a !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#side-sheet[data-generic-eyebrow="true"] .side-sheet-header .eyebrow {
  display: none !important;
}

#picker-sheet .side-sheet-header .eyebrow {
  display: none !important;
}

:is(#side-sheet, #picker-sheet) :is(.side-sheet-body, .picker-sheet-body) {
  gap: 12px !important;
  padding: 0 16px 16px !important;
  background: #121212 !important;
}

#side-sheet .side-sheet-footer {
  gap: 8px !important;
  padding: 8px 16px 16px !important;
  border: 0 !important;
  background: #121212 !important;
  box-shadow: none !important;
}

.side-sheet[data-sheet-variant="native-data"] .side-sheet-body {
  padding-right: 0 !important;
  padding-bottom: 16px !important;
  padding-left: 0 !important;
}

.native-data-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.native-data-row {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #9a9a9a;
  text-align: left;
  box-shadow: none;
}

.native-data-row:hover,
.native-data-row:focus-visible {
  outline: 0;
  background: rgba(255, 255, 255, .08);
}

.native-data-row:active {
  background: rgba(255, 255, 255, .14);
}

.native-data-row-icon,
.native-data-row-icon .app-icon-svg {
  width: 24px;
  height: 24px;
  color: #92969d;
  --app-icon-color: #92969d;
}

.native-data-row-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
}

.native-data-row-copy strong {
  overflow: hidden;
  color: #9a9a9a;
  font-size: 16px;
  line-height: 1.1;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-data-row-copy small {
  overflow: hidden;
  color: rgba(154, 154, 154, .72);
  font-size: 12px;
  line-height: 1.1;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-sheet[data-sheet-variant="native-import"] .side-sheet-body {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.native-import-list {
  display: grid;
  gap: 0;
}

.native-import-list .import-choice-row {
  min-height: 52px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) 24px !important;
  gap: 8px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.native-import-list .import-choice-row > .app-icon-svg {
  width: 24px !important;
  height: 24px !important;
  color: #92969d !important;
}

.native-import-list .import-choice-row strong {
  color: #9a9a9a !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

.native-import-list .import-choice-row small {
  color: rgba(154, 154, 154, .72) !important;
  font-size: 12px !important;
}

.native-import-action {
  width: calc(100% - 32px) !important;
  min-height: 48px !important;
  margin: 12px 16px 0 !important;
}

.side-sheet[data-sheet-variant="native-filter"] .filter-form,
.side-sheet[data-sheet-variant="native-selection"] .ordered-selection {
  gap: 12px !important;
}

.side-sheet[data-sheet-variant="native-form"] .wallet-movement-form {
  display: grid !important;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.side-sheet[data-sheet-variant="native-form"] .wallet-movement-form > label {
  margin: 0 !important;
}

.side-sheet[data-sheet-variant="native-form"] .wallet-movement-form > .primary-button {
  min-height: 48px !important;
  margin-top: 0 !important;
}

.side-sheet[data-sheet-variant="native-selection"] .ordered-selection-search {
  min-height: 48px !important;
  border-radius: 999px !important;
}

:is(
  .settings-account-card,
  .settings-pro-card,
  .settings-group,
  .sheet-section,
  .sheet-callout,
  .sheet-metric,
  .sheet-option,
  .sheet-toggle,
  .native-list-card,
  .native-notification-hero,
  .modal-option,
  .ordered-selection-list,
  .copy-bank-list
) {
  border: 0 !important;
  border-radius: 24px !important;
  background: #1a1a1a !important;
  background-image: none !important;
  box-shadow: none !important;
}

:is(.settings-row, .sheet-option, .sheet-toggle, .ordered-selection-row, .picker-option-row, .modal-option) {
  min-height: 54px !important;
  color: #f4f4f4 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

:is(.settings-row-icon, .settings-row-chevron, .native-list-icon) {
  color: #a3a6ac !important;
  --app-icon-color: #a3a6ac !important;
}

.native-notification-hero {
  min-height: 148px !important;
  padding: 24px 16px !important;
}

:is(.native-notification-hero span, .native-list-card small, .sheet-option small) {
  color: #9a9a9a !important;
  font-size: 13px !important;
}

:is(
  #side-sheet .side-sheet-header [data-close-sheet],
  #picker-sheet .side-sheet-header [data-close-picker-sheet],
  #wallet-modal .modal-header [data-close-modal],
  .settings-back-button,
  .native-icon-pill
) {
  width: 54px !important;
  min-width: 54px !important;
  height: 44px !important;
  border: .65px solid #2a2a2a !important;
  border-radius: 999px !important;
  background: #1a1a1a !important;
  color: #a3a6ac !important;
  box-shadow: none !important;
}

:is(.primary-button, .secondary-button, .danger-button, .settings-subscription-cta) {
  min-height: 44px !important;
  border-radius: 999px !important;
}

@media (min-width: 901px) {
  :is(.side-sheet, .modal, .picker-sheet) {
    display: grid !important;
    place-items: center !important;
    padding: 24px !important;
  }

  :is(#side-sheet .side-sheet-panel, #wallet-modal .modal-panel, #picker-sheet .picker-sheet-panel) {
    position: relative !important;
    inset: auto !important;
    max-height: calc(100dvh - 48px) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 72px rgba(0, 0, 0, .48) !important;
    transform: translateY(16px) scale(.98) !important;
  }

  :is(#side-sheet, #wallet-modal, #picker-sheet)[aria-hidden="false"] :is(.side-sheet-panel, .modal-panel, .picker-sheet-panel) {
    transform: translateY(0) scale(1) !important;
  }

  #side-sheet .side-sheet-panel { width: min(620px, calc(100vw - 48px)) !important; }
  #side-sheet[data-sheet-variant="settings-page"] .side-sheet-panel { width: min(720px, calc(100vw - 48px)) !important; }
  #side-sheet[data-sheet-variant="native-tools"] .side-sheet-panel,
  #side-sheet[data-sheet-variant="bet-slip"] .side-sheet-panel { width: min(640px, calc(100vw - 48px)) !important; }
  #picker-sheet .picker-sheet-panel,
  #wallet-modal .modal-panel { width: min(560px, calc(100vw - 48px)) !important; }

  :is(#side-sheet, #picker-sheet) .side-sheet-header,
  #wallet-modal .modal-header {
    padding-top: 16px !important;
  }

  :is(.side-sheet-panel, .modal-panel, .picker-sheet-panel) > .bottom-sheet-handle {
    display: none !important;
  }
}

@media (max-width: 900px) {
  :is(.side-sheet, .modal, .picker-sheet) {
    transition: visibility 0s linear 180ms !important;
  }

  :is(.side-sheet, .modal, .picker-sheet)[aria-hidden="false"] {
    transition-delay: 0s !important;
  }

  :is(.side-sheet-backdrop, .modal-backdrop, .picker-sheet-backdrop) {
    opacity: 0 !important;
    background: rgba(0, 0, 0, .588) !important;
    transition: opacity 180ms ease !important;
  }

  :is(.side-sheet, .modal, .picker-sheet)[aria-hidden="false"]
  :is(.side-sheet-backdrop, .modal-backdrop, .picker-sheet-backdrop) {
    opacity: 1 !important;
  }

  :is(#side-sheet:not([data-sheet-variant="settings-page"]) .side-sheet-panel, #wallet-modal .modal-panel, #picker-sheet .picker-sheet-panel) {
    inset: auto 0 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -12px 36px rgba(0, 0, 0, .18) !important;
    opacity: 1 !important;
    transform: translateY(100%) !important;
    transition: transform 180ms cubic-bezier(.2, 0, 0, 1) !important;
    will-change: transform;
  }

  :is(#side-sheet:not([data-sheet-variant="settings-page"]), #wallet-modal, #picker-sheet)[aria-hidden="false"]
  :is(.side-sheet-panel, .modal-panel, .picker-sheet-panel) {
    transform: translateY(0) !important;
  }

  :is(#side-sheet:not([data-sheet-variant="settings-page"]) .side-sheet-panel, #wallet-modal .modal-panel, #picker-sheet .picker-sheet-panel) > .bottom-sheet-handle {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 26px !important;
    min-height: 26px !important;
    display: grid !important;
    place-items: start center !important;
    padding: 12px 0 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: grab;
    touch-action: none;
  }

  :is(#side-sheet:not([data-sheet-variant="settings-page"]) .side-sheet-panel, #wallet-modal .modal-panel, #picker-sheet .picker-sheet-panel) > .bottom-sheet-handle:active {
    cursor: grabbing;
  }

  :is(#side-sheet:not([data-sheet-variant="settings-page"]) .side-sheet-panel, #wallet-modal .modal-panel, #picker-sheet .picker-sheet-panel) > .bottom-sheet-handle > span {
    width: 48px !important;
    height: 2px !important;
    min-height: 2px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #777b82 !important;
    opacity: 1 !important;
  }

  :is(#side-sheet, #picker-sheet) .side-sheet-header > div:first-child,
  #wallet-modal .modal-header > div:first-child {
    touch-action: none;
    user-select: none;
  }

  #side-sheet:not([data-sheet-variant="settings-page"]) .side-sheet-header [data-close-sheet],
  #picker-sheet .side-sheet-header [data-close-picker-sheet] {
    display: none !important;
  }

  #side-sheet[data-sheet-variant="settings-page"] .side-sheet-backdrop {
    opacity: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
  }
}