/* Mobile/responsive overrides for profile.php */
.form-card{padding:16px;margin:12px 14px;border-radius:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.utils-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.referral-row{display:flex;align-items:center;gap:8px}
.referral-code{background:#f5f5f5;padding:6px 12px;border-radius:6px;font-size:14px;font-weight:600}
.affiliate-input{flex:1;min-width:0;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px}
.qr-card{margin:0 0 16px;padding:16px;border:1px solid #e5e7eb;border-radius:12px;background:#fafafa;text-align:center}
.qr-box{display:inline-flex;align-items:center;justify-content:center;width:180px;height:180px;background:white;border-radius:12px;padding:12px;border:1px solid #e5e7eb}

/* Small screens adjustments */
@media (max-width: 768px){
  .app-shell{padding:0 12px}
  /* ensure bottom navigation doesn't cover page content on small screens */
  .app-shell{padding-bottom:260px}
  /* add extra space under main container so fixed bottom-nav doesn't overlap content */
  .container{margin-bottom:140px}
  /* spacer card shown at the end of the page to keep content above bottom-nav */
  .footer-spacer{background:transparent;border:none;box-shadow:none;height:300px;padding:0;margin:12px 14px;border-radius:12px}
  .grid-2{grid-template-columns:1fr;gap:12px}
  .stats-grid{grid-template-columns:1fr;gap:12px}
  .utils-grid{grid-template-columns:1fr;gap:12px}
  .referral-row{flex-direction:column;align-items:stretch}
  .referral-row .btn{width:100%}
  .affiliate-input{width:100%}
  .qr-box{width:140px;height:140px;margin:0 auto}
  .btn{padding:10px 12px;border-radius:10px}
}

/* Raise the last form-card (utilities) so logout isn't hidden by fixed bottom nav */
@media (max-width: 768px){
  .form-card:last-of-type{position:relative;transform:translateY(-30px);z-index:5}
}

@media (max-width:420px){
  /* extra space for very small screens */
  .app-shell{padding-bottom:220px}
  .container{margin-bottom:120px}
  .footer-spacer{height:240px;margin:10px 12px}
  .qr-box{width:120px;height:120px}
  .referral-code{font-size:13px;padding:6px 10px}
}