/* =====================================================================================================================
   Customer (client banking) portal on phones and small tablets.
   The sidebar is a drawer below 980px (opened with the button in the top bar). Desktop is untouched.
   ===================================================================================================================== */

@media (max-width: 980px) {
  /* ── Top bar: menu button, where you are, quick controls; the language button floats at the right edge ── */
  /* (the portal already forces some of these with !important at small widths, so these do too) */
  .portal-topbar { height: var(--gb-bar-h); padding: 0 10px !important; padding-right: 126px !important; gap: 8px !important; }
  .topbar-left { gap: 10px; flex: 1 1 auto; min-width: 0; }
  .topbar-right { gap: 4px; }
  .btn-sidebar-hamburger { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; gap: 4px; background: #eef2ea; border: 1px solid #9caf88; border-radius: 10px; }
  .btn-sidebar-hamburger .hamburger-bar { width: 18px; background: #4b5120; }
  .topbar-breadcrumb { min-width: 0; }
  .topbar-step-pill, .topbar-sep { display: none; }
  .topbar-title { display: inline !important; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
  .portal-theme-toggle .ptt-label { display: none; }
  .portal-theme-toggle, .btn-hdr-action { min-width: 40px; min-height: 40px; }

  /* ── Drawer ── */
  .portal-sidebar { width: min(86vw, 320px); max-width: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .sidebar-backdrop { background: rgba(28, 31, 17, 0.55); }
  .cp-nav-item { min-height: 46px; display: flex; align-items: center; }
  body.drawer-is-open { overflow: hidden; }
  .sidebar-brand-header { position: relative; }
  .sidebar-drawer-close { margin-left: auto; flex: 0 0 40px; }
  /* inside the drawer the three bars become a cross: bars are 2px high with a 4px gap, so they sit 6px apart */
  .sidebar-drawer-close .hamburger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .sidebar-drawer-close .hamburger-bar:nth-child(2) { opacity: 0; }
  .sidebar-drawer-close .hamburger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* ── The menus that fly out beside a sidebar item become a sheet at the bottom of the screen ── */
  .cp-fly { left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; max-height: 78dvh; overflow-y: auto; border-radius: 16px; transform: translateY(16px); }
  .cp-fly.open { transform: none; }
  .cp-fly::before, .cp-fly::after { display: none; }
  .cp-fly-opt { min-height: 64px; }

  .portal-content-body { padding: 14px 14px 48px; }
}

/* fingertip-sized hit areas for the small controls (copy icons, toggles, inline links) */
@media (max-width: 980px) and (pointer: coarse) {
  .cp-copy-detail { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .cp-balance-privacy, .cp-ft-change, .cp-text-action, .cp-account-nav-btn { min-height: 40px; }
  .cp-link { display: inline-block; padding: 8px 0; }
  .cp-bal-card .cp-copy-detail { margin: -8px -8px -8px 0; }
}

@media (max-width: 768px) {
  .portal-main-column { min-height: 100dvh; }
}

/* the drawer button inside the drawer only matters where the drawer exists */
.sidebar-drawer-close { display: none; }
@media (max-width: 980px) { .sidebar-drawer-close { display: flex; } }

/* "Choose an option": a real button where the instruction used to be "move the mouse over the menu" */
.cp-open-menu-btn { display: none; }
@media (max-width: 980px), (hover: none) {
  .cp-ft-empty p, .cp-bn-empty p { display: none; }
  .cp-open-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 320px; min-height: 48px; margin-top: 18px; padding: 0 20px; border: 0; border-radius: 12px; background: #363b21; color: #fff; font: 700 15px/1 inherit; font-family: inherit; cursor: pointer; }
}