/* Mobile-first overrides for Kapa theme — served directly at /stylesheets/kapa_mobile.css */

:root { --mobile-header-h: 56px; }

@media (max-width: 767px) {
  .mobile-header { position: relative; z-index: 60; background: #ffffff; }
  .mobile-header .flex { min-height: var(--mobile-header-h); align-items: center; }
  #mobile-nav-menu {
    display: none !important;
    max-height: 60vh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    background: #fff !important;
  }
  .mobile-header #mobile-nav-toggle:checked ~ #mobile-nav-menu { display: block !important; }

  main, .max-w-7xl, .max-w-4xl, .container { display:block !important; visibility:visible !important; opacity:1 !important; }
  main { padding-top: 0.5rem !important; box-sizing: border-box !important; }
}

/* Mobile nav branding */
.mobile-nav .brand { font-weight: 600; color: #0e4b43; }

/* Small utility fixes */
.hidden { display:none !important; }
.flex { display:flex !important; }
.block { display:block !important; }

/* Persistent CTA mobile */
.persistent-cta .cta-btn.bg-emerald-600 { background-color: #1E5F3B; color:#fff; }
.persistent-cta .cta-btn.bg-amber-500 { background-color: #F59E0B; color:#fff; }

/* Modal/backdrop visibility & safety rules (mobile fallback) */
#withdrawalModal.hidden,
#papayaConvertModal.hidden,
#papayaTransferModal.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

#withdrawalModal:not(.hidden),
#papayaConvertModal:not(.hidden),
#papayaTransferModal:not(.hidden) {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  background: rgba(2, 6, 23, 0.60);
}

/* Modal content animation helpers (mobile) */
#withdrawalModal .scale-95, #papayaConvertModal .scale-95, #papayaTransferModal .scale-95 {
  transform: scale(.98);
  opacity: 0;
}
#withdrawalModal .scale-100, #papayaConvertModal .scale-100, #papayaTransferModal .scale-100 {
  transform: scale(1);
  opacity: 1;
  transition: transform 220ms ease, opacity 220ms ease;
}

/* End of kapa_mobile.css */