/* =========================================================
   FINPAY COMPLETE MOBILE UI
   Responsive-only presentation layer.
   No PHP, database, form action, or business logic changes.
   ========================================================= */

html{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{width:100%;max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
iframe{max-width:100%}
input,select,textarea,button{max-width:100%;font-size:16px}
textarea{resize:vertical}

/* Desktop content offsets used throughout the existing project */
@media(max-width:767px){
  [style*="margin-left:260px"],
  [style*="margin-left: 260px"],
  [style*="margin-left:235px"],
  [style*="margin-left: 235px"]{
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
  }

  .container,.container-fluid{
    width:100%!important;
    max-width:100%!important;
  }

  .container-fluid{
    padding-left:14px!important;
    padding-right:14px!important;
  }

  .row{
    --bs-gutter-x:.85rem;
    --bs-gutter-y:.85rem;
  }

  .card{
    max-width:100%;
    border-radius:18px!important;
  }

  .card-body{max-width:100%;}

  .table-responsive{
    width:100%;
    max-width:100%;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  .table-responsive>.table{min-width:650px}

  .form-control,.form-select,
  input:not([type=checkbox]):not([type=radio]),
  select,textarea{
    width:100%;
    max-width:100%;
  }

  .form-control,.form-select,
  input:not([type=checkbox]):not([type=radio]),select{
    min-height:46px;
  }

  textarea{min-height:100px}

  .btn{min-height:44px}
  .btn-group{max-width:100%;flex-wrap:wrap}

  .d-flex.justify-content-between,
  .d-flex.justify-content-end{
    flex-wrap:wrap;
    gap:10px;
  }

  h1{font-size:clamp(25px,7vw,34px);line-height:1.15}
  h2{font-size:clamp(22px,6vw,30px);line-height:1.2}
  h3{font-size:clamp(19px,5vw,25px)}
  h4{font-size:18px}
  h5{font-size:16px}

  /* Customer sidebar */
  .fp-sidebar{
    width:min(286px,86vw)!important;
    transform:translateX(-105%)!important;
    transition:transform .25s ease!important;
    z-index:11050!important;
  }
  .fp-sidebar.fp-mobile-visible{
    transform:translateX(0)!important;
  }

  .fp-mobile-overlay-global{
    position:fixed;
    inset:0;
    background:rgba(2,8,23,.52);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    z-index:11040;
    opacity:0;
    visibility:hidden;
    transition:.2s ease;
  }
  .fp-mobile-overlay-global.show{
    opacity:1;
    visibility:visible;
  }

  .fp-mobile-menu-global{
    position:fixed;
    left:13px;
    top:13px;
    width:44px;
    height:44px;
    border:0;
    border-radius:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:linear-gradient(135deg,#155EEF,#0B3FAF);
    box-shadow:0 10px 25px rgba(15,23,42,.18);
    z-index:11000;
  }

  /* Give page headers enough room for the mobile menu button */
  .fp-page-header,
  .fp-topbar,
  body>.bg-white.shadow-sm,
  body>.navbar{
    padding-left:70px!important;
  }

  /* Use the universal menu control consistently on every customer page. */
  .fp-mobile-menu-btn{display:none!important}

  /* Common page top bars */
  .navbar{
    min-height:62px;
    flex-wrap:wrap;
    gap:8px;
  }

  .navbar h4{font-size:18px}

  /* Wide inline elements */
  pre,code,.wallet-address,.transaction-hash,.address{
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }

  /* Authentication cards */
  .main-card{
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    flex-direction:column!important;
  }
  .left-panel,.right-panel{
    width:100%!important;
    max-width:100%!important;
  }

  /* Legal */
  .fp-legal-hero{padding:38px 18px!important}
  .fp-legal-wrap{
    width:calc(100% - 20px)!important;
    margin:-18px auto 35px!important;
  }
  .fp-legal-card{
    padding:22px!important;
    border-radius:18px!important;
  }

  /* KYC */
  .kyc-page{padding:14px!important}
  .kyc-hero{padding:22px!important;border-radius:20px!important}
  .kyc-status{position:static!important;display:inline-flex;margin-top:15px}
  .kyc-card-header{flex-wrap:wrap;gap:10px}
  .kyc-card-body{padding:17px!important}

  /* Receipt */
  .receipt-wrapper{width:100%!important;max-width:100%!important}
  .receipt-section{padding:15px!important}
  .receipt-row{padding:11px 0!important}

  /* Crypto */
  .fp-crypto-page,.fp-withdraw-page{width:100%!important;max-width:100%!important}

  /* Generic grids from the legacy stylesheet */
  .summary,.actions,.analytics,.stats-row,.chart-grid,.cards-wrapper{
    grid-template-columns:1fr!important;
  }
  .content-grid{grid-template-columns:1fr!important}
  .payment-item{align-items:flex-start!important;gap:10px}
  .payment-item>div{min-width:0}
  .credit-card{min-height:205px!important;padding:22px!important}
}

@media(max-width:576px){
  body{padding-left:0!important;padding-right:0!important}
  .container-fluid{padding-left:12px!important;padding-right:12px!important}
  .card-body{padding:15px!important}
  .p-4{padding:14px!important}
  .px-4{padding-left:14px!important;padding-right:14px!important}
  .py-4{padding-top:14px!important;padding-bottom:14px!important}

  .fp-sidebar{width:min(278px,88vw)!important}

  .fp-page-header,.fp-topbar,
  body>.bg-white.shadow-sm,
  body>.navbar{
    padding-left:64px!important;
  }

  .main-card{border-radius:20px!important}
  .left-panel{padding:27px 19px!important}
  .right-panel{padding:23px 16px!important}

  .banner{padding:20px!important}
  .banner h2{font-size:20px!important;line-height:1.4!important}
  .quick-actions,.activity,.transactions{padding:16px!important}
}

@media(max-width:390px){
  .fp-mobile-menu-global{left:9px;top:9px;width:42px;height:42px}
  .fp-page-header,.fp-topbar,
  body>.bg-white.shadow-sm,
  body>.navbar{padding-left:59px!important}

  .card-body{padding:13px!important}
  .left-panel{padding:23px 16px!important}
  .right-panel{padding:20px 14px!important}
  .btn{width:100%}
}