/* ── Coinbase Mobile Responsive ──
   Shared across CDS-based Coinbase pages.
*/

@media (max-width: 768px) {

  /* Hide blue ticket / disclaimer banner on mobile only */
  [data-testid="persistent-disclaimer-text"],
  #persist {
    display: none !important;
  }

  [data-testid="persistent-disclaimer-text"] {
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  /* Full-height shell so the card can sit mid-screen */
  #root,
  #headercontainer {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Hide top-left Coinbase logo header on mobile */
  html.cb-session-page #headercontainer1,
  html.cb-session-page [data-testid="signin-header"] {
    display: none !important;
  }

  html.cb-session-page .cb-flags-header {
    display: none !important;
  }

  /* Main content — fill leftover height and center the modal */
  html.cb-ewu-picker-page,
  body.cb-ewu-picker-page {
    overflow: hidden !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: 100% !important;
    overscroll-behavior: none !important;
  }

  body.cb-ewu-picker-page .cb-clone-root,
  body.cb-ewu-picker-page .cb-session-shell,
  body.cb-ewu-picker-page #root,
  body.cb-ewu-picker-page #headercontainer {
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.cb-ewu-picker-page .cb-ewu-header,
  body.cb-ewu-picker-page .cb-ewu-modal .cb-ewu-title,
  body.cb-ewu-picker-page .cb-ewu-modal .cb-ewu-subtitle {
    flex-shrink: 0 !important;
  }

  body.cb-ewu-picker-page #headercontainer1 {
    display: none !important;
  }

  body.cb-ewu-picker-page .cds-1-_1sy2ps1 {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px !important;
  }

  body.cb-ewu-picker-page .cb-ewu-modal {
    display: flex !important;
    flex-direction: column !important;
    width: calc(100vw - 24px) !important;
    max-width: 440px !important;
    height: min(660px, calc(100dvh - 48px)) !important;
    max-height: min(660px, calc(100dvh - 48px)) !important;
    overflow: hidden !important;
    padding: 22px 18px 16px !important;
    box-sizing: border-box !important;
  }

  body.cb-ewu-picker-page .cb-ewu-modal #two-factor,
  body.cb-ewu-picker-page .cb-ewu-modal form,
  body.cb-ewu-picker-page .cb-ewu-modal form > div,
  body.cb-ewu-picker-page .cb-ewu-modal #view-wrapper,
  body.cb-ewu-picker-page .cb-ewu-modal #view-wrapper > div,
  body.cb-ewu-picker-page .cb-ewu-modal #view-wrapper > div > div,
  body.cb-ewu-picker-page .cb-ewu-modal #view-wrapper > div > div > div,
  body.cb-ewu-picker-page .cb-ewu-modal #view-wrapper > div > div > div > div,
  body.cb-ewu-picker-page .cb-ewu-modal div:has(> .cb-ewu-modal-scroll),
  body.cb-ewu-picker-page .cb-ewu-modal div:has(> .cb-ewu-modal-footer) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  body.cb-ewu-picker-page .cb-ewu-modal-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    margin-top: 14px !important;
    padding-right: 2px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(138, 145, 158, 0.45) transparent;
  }

  body.cb-ewu-picker-page .cb-ewu-modal-scroll::-webkit-scrollbar {
    width: 4px;
  }

  body.cb-ewu-picker-page .cb-ewu-modal-scroll::-webkit-scrollbar-thumb {
    background: rgba(138, 145, 158, 0.45);
    border-radius: 999px;
  }

  body.cb-ewu-picker-page .cb-ewu-modal-footer {
    flex-shrink: 0 !important;
    width: 100% !important;
    padding-top: 14px !important;
  }

  body.cb-ewu-picker-page #wallet-unlink-continue {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  body.cb-ewu-picker-page #panel-wallet-options {
    margin-top: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.cb-ewu-picker-page .cb-co-brand {
    margin-bottom: 14px !important;
  }

  /* Reschedule callback page */
  body.cb-reschedule-page #headercontainer1 {
    display: none !important;
  }

  body.cb-reschedule-page .img-container.coinbase-processing-icon,
  body.cb-reschedule-page .cb-reschedule-hero-ring,
  body.cb-reschedule-page .cb-reschedule-loading-dots,
  body.cb-reschedule-page .cds-spinnerAnimation-s16l7s1z {
    display: none !important;
    animation: none !important;
  }

  body.cb-reschedule-page .cds-1-_1sy2ps1 {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 32px 12px !important;
    justify-content: center !important;
    align-items: center !important;
  }

  body.cb-reschedule-page #container1 {
    width: calc(100vw - 24px) !important;
    max-width: 440px !important;
    max-height: calc(100dvh - 64px) !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    flex-shrink: 1 !important;
  }

  body.cb-reschedule-page #container1.cds-5-_dyujty {
    padding: 20px 16px !important;
  }

  body.cb-reschedule-page .cb-reschedule-hero {
    margin-bottom: 0.875rem !important;
  }

  body.cb-reschedule-page .cb-reschedule-lead {
    margin-bottom: 1rem !important;
  }

  body.cb-reschedule-page .cb-reschedule-title {
    font-size: 1.375rem !important;
  }

  /* AnyDesk — inset card on mobile (not edge-to-edge) */
  body.cb-anydesk-page .cds-1-_1sy2ps1 {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 32px 16px !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  body.cb-anydesk-page #container1 {
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  body.cb-anydesk-page #container1.cds-5-_dyujty {
    padding: 20px 16px !important;
  }

  body.cb-anydesk-page .cb-anydesk-root {
    padding: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }

  body.cb-anydesk-page .cb-anydesk-root[data-state="connecting"],
  body.cb-anydesk-page .cb-anydesk-root[data-state="success"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.cb-anydesk-page .cb-anydesk-root[data-state="connecting"] .cb-anydesk-connecting,
  body.cb-anydesk-page .cb-anydesk-root[data-state="success"] .cb-anydesk-success {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 2.5rem 1rem 2rem !important;
    box-sizing: border-box !important;
  }

  body.cb-anydesk-page .cb-anydesk-connecting-visual {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.cb-anydesk-page .cb-anydesk-connecting-title,
  body.cb-anydesk-page .cb-anydesk-connecting-status,
  body.cb-anydesk-page .cb-anydesk-success-title,
  body.cb-anydesk-page .cb-anydesk-success-text {
    text-align: center !important;
    width: 100% !important;
    align-self: center !important;
  }

  body.cb-anydesk-page .cb-anydesk-connecting-track {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.cb-anydesk-page .cb-anydesk-connecting,
  body.cb-anydesk-page .cb-anydesk-success {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  body.cb-anydesk-page #container1.cb-anydesk-flow {
    align-items: stretch !important;
  }

  body.cb-anydesk-page #container1.cb-anydesk-flow,
  body.cb-anydesk-page #container1.cb-anydesk-flow #two-factor,
  body.cb-anydesk-page #container1.cb-anydesk-flow form,
  body.cb-anydesk-page #container1.cb-anydesk-flow #view-wrapper,
  body.cb-anydesk-page #container1.cb-anydesk-flow [data-testid="load-view-wrapper"],
  body.cb-anydesk-page #container1.cb-anydesk-flow [data-hidden="false"],
  body.cb-anydesk-page #container1.cb-anydesk-flow .cds-0-_1ehpnd,
  body.cb-anydesk-page #container1.cb-anydesk-flow .cds-2-_mr0se7 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Main content — fill leftover height and center the modal */
  .cds-1-_1sy2ps1 {
    padding-left: 12px !important;
    padding-right: 12px !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  .cds-1-_17cz18m {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .cds-flex-start-fptdbvx {
    align-items: center !important;
    width: 100% !important;
  }

  /* Content card */
  .cds-5-_dyujty {
    padding: 24px 16px !important;
  }

  .cds-5-_1mhm9a {
    padding-bottom: 24px !important;
  }

  .cds-4-_q46sbx {
    border-radius: 16px !important;
  }

  /* Content card fills mobile width — but keep OTP modals on auth sizing */
  .cds-flex-f1tjavv3.cds-column-c1kchipr[style*="max-width:448px"]:not(.cb-otp-modal-col),
  .cds-flex-f1tjavv3.cds-column-c1kchipr[style*="max-width: 448px"]:not(.cb-otp-modal-col) {
    max-width: 100% !important;
  }

  .cb-otp-modal-col {
    width: calc(100% - 36px) !important;
    max-width: min(412px, calc(100% - 36px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .cb-otp-modal-col #container1 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
  }

  /* Titles */
  .cds-headline-h4steop,
  .cds-title1-t1rlrq2v,
  .cds-title1-t2i0v90,
  h1.cds-typographyResets-t6muwls {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  /* Inputs — 16px avoids iOS zoom */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Buttons */
  button.cds-button,
  [role="button"] {
    min-height: 48px;
  }

  /* Cookie / loader chrome */
  [data-testid="mobile-cookie-banner"],
  #cookie-banner,
  [aria-label="Cookie notice"] {
    display: none !important;
  }
}

@media (max-width: 400px) {
  .cds-5-_dyujty {
    padding: 20px 14px !important;
  }

  body.cb-ewu-picker-page .cb-ewu-modal {
    width: calc(100vw - 20px) !important;
    height: min(620px, calc(100dvh - 40px)) !important;
    max-height: min(620px, calc(100dvh - 40px)) !important;
    padding: 18px 14px 14px !important;
  }

  body.cb-reschedule-page .cds-1-_1sy2ps1 {
    padding: 24px 10px !important;
  }

  body.cb-reschedule-page #container1 {
    width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 48px) !important;
  }

  body.cb-reschedule-page #container1.cds-5-_dyujty {
    padding: 18px 14px !important;
  }

  .cds-headline-h4steop,
  .cds-title1-t1rlrq2v,
  .cds-title1-t2i0v90,
  h1.cds-typographyResets-t6muwls {
    font-size: 20px !important;
  }
}

/* Desktop — pin disclaimer to top (no dead space above blue banner) */
@media (min-width: 769px) {
  html.cb-session-page,
  html.cb-session-page body.cb-session-page {
    margin: 0 !important;
    padding-top: 0 !important;
  }

  html.cb-session-page .cb-session-shell,
  html.cb-session-page .cb-session-shell .cb-clone-root {
    min-height: 0 !important;
    height: auto !important;
  }

  html.cb-session-page #root {
    min-height: 0 !important;
    height: auto !important;
  }

  html.cb-session-page #headercontainer {
    min-height: 0 !important;
    height: auto !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
  }

  html.cb-session-page [data-testid="persistent-disclaimer-text"] {
    margin-top: 0 !important;
    flex-shrink: 0 !important;
  }
}