/* V48 - visible bank settings + catalog one-screen */

.payBank48{
  border:1px solid #f0cfd8;border-radius:12px;padding:7px;background:#fffafb;
  display:flex;flex-direction:column;gap:6px;
}
.payBankHead48{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:9px;background:#fff0f4}
.payBankHead48 i{font-style:normal;font-size:18px}.payBankHead48 b{font-size:10px;color:#c52d54}
.payQr48{min-height:38px!important;padding:7px 9px!important}.payQr48 input{width:21px!important;height:21px!important;min-height:21px!important}

@media(max-width:600px){
  /* Store modal fits one screen including payment account */
  #modal .sheet:has(.payShop48){
    width:calc(100vw - 10px)!important;max-width:calc(100vw - 10px)!important;
    max-height:calc(100dvh - 10px)!important;margin:5px auto!important;padding:7px!important;
    overflow:hidden!important;
  }
  #modal .sheet:has(.payShop48) #modalBody{max-height:calc(100dvh - 48px)!important;overflow:hidden!important}
  .payShop48{
    display:grid!important;grid-template-rows:auto repeat(5,auto) auto auto!important;
    gap:4px!important;max-height:calc(100dvh - 55px)!important;overflow:hidden!important;
  }
  .payShop48 .hero41{min-height:35px!important;padding:4px 7px!important}
  .payShop48 .hero41>i{width:28px!important;height:28px!important;font-size:16px!important}
  .payShop48 .field41{
    grid-template-columns:28px 78px minmax(0,1fr)!important;min-height:35px!important;
    padding:4px 5px!important;gap:5px!important;
  }
  .payShop48 .field41 i{width:26px!important;height:26px!important;font-size:13px!important}
  .payShop48 .field41 b{font-size:8.5px!important}
  .payShop48 .field41 input,.payShop48 .field41 select{
    min-height:28px!important;height:28px!important;padding:3px 6px!important;
    font-size:8.5px!important;margin:0!important;
  }
  .payBank48{padding:5px!important;gap:4px!important;border-radius:9px!important}
  .payBankHead48{padding:4px 6px!important}.payBankHead48 i{font-size:14px!important}.payBankHead48 b{font-size:8.5px!important}
  .payQr48{min-height:30px!important;height:30px!important;padding:4px 6px!important}
  .payQr48 span b{font-size:8px!important}.payQr48 input{width:18px!important;height:18px!important;min-height:18px!important}
  .payShop48 .hint41{display:none!important}
  .payShop48 .footer41{
    position:static!important;display:grid!important;grid-template-columns:1fr 1.35fr!important;
    gap:4px!important;padding-top:3px!important;
  }
  .payShop48 .footer41 button{min-height:34px!important;height:34px!important;padding:4px!important;font-size:8px!important}

  /* Catalog: no scroll for current 6-item list */
  #catalog main{
    height:calc(100dvh - 72px)!important;
    min-height:0!important;
    overflow:hidden!important;
    padding:7px!important;
  }
  #catalog .bar{
    height:44px!important;min-height:44px!important;margin:0 0 5px!important;
    display:flex!important;align-items:center!important;gap:7px!important;
  }
  #catalog .bar h2{font-size:18px!important;margin:0!important}
  #catalog .bar .back{height:36px!important;min-height:36px!important;padding:5px 9px!important;font-size:11px!important}
  #catalog .card.actions{
    min-height:42px!important;
    height:42px!important;
    padding:4px!important;
    margin:0 0 5px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 82px!important;
    gap:5px!important;
    border-radius:10px!important;
  }
  #catalog .card.actions input{
    min-height:32px!important;height:32px!important;
    padding:4px 8px!important;font-size:10px!important;margin:0!important;
  }
  #catalog .card.actions button{
    min-height:32px!important;height:32px!important;padding:4px 6px!important;font-size:9px!important;
  }

  #catalog #catalogList{
    height:calc(100dvh - 168px)!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-auto-rows:minmax(0,1fr)!important;
    gap:5px!important;
    overflow:hidden!important;
    align-content:stretch!important;
  }

  #catalog .serviceCard41,
  #catalog .svc41,
  #catalog .catalogCard{
    min-height:0!important;
    height:auto!important;
    padding:6px!important;
    margin:0!important;
    border-radius:10px!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
  }

  #catalog .serviceTop41,
  #catalog .svc41>div,
  #catalog .catalogCard .listHead{
    min-height:0!important;
  }
  #catalog .serviceTop41 i,
  #catalog .svc41 i,
  #catalog .svcIcon39{
    width:28px!important;height:28px!important;min-width:28px!important;
    font-size:15px!important;border-radius:8px!important;
  }
  #catalog .serviceTop41 span b,
  #catalog .svc41 span b,
  #catalog .catalogCard b{
    font-size:9px!important;line-height:1.05!important;
  }
  #catalog .serviceTop41 strong,
  #catalog .svc41 strong,
  #catalog .catalogCard .price{
    font-size:12px!important;line-height:1!important;
  }
  #catalog .serviceActions41,
  #catalog .svc41 section,
  #catalog .catalogCard .actions{
    margin-top:4px!important;
    display:grid!important;
    grid-template-columns:1fr 30px 30px!important;
    gap:3px!important;
  }
  #catalog .serviceActions41 button,
  #catalog .svc41 section button,
  #catalog .catalogCard .actions button{
    min-height:26px!important;height:26px!important;padding:2px 4px!important;
    font-size:8px!important;border-radius:7px!important;
  }

  /* Only when there are enough rows to exceed the grid capacity, allow scrolling */
  #catalog #catalogList.catalogOverflow48{
    overflow-y:auto!important;
    padding-right:2px!important;
  }
}