/* ============================================================
   KUPR Mobile-First Responsive CSS
   Shared utilities + page-specific mobile overrides
   Breakpoints: 768px (tablet), 480px (small phone)
   ============================================================ */

/* --- Global: Touch Target Minimums --- */
@media (max-width: 768px) {
  .kupr-touch-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  .kupr-touch-link {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 8px;
  }
}

/* --- Global: Font Size Floor (11px minimum on mobile) --- */
@media (max-width: 768px) {
  .kupr-fs-floor {
    font-size: 11px !important;
  }
  .kupr-fs-floor-12 {
    font-size: 12px !important;
  }
}

/* --- Global: iOS Auto-Zoom Prevention --- */
@media (max-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  input[type="search"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* --- Global: Form Elements Touch-Friendly --- */
@media (max-width: 768px) {
  .kupr-form-input {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
  }
  .kupr-form-select {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 8px 12px !important;
  }
  .kupr-form-btn {
    min-height: 48px !important;
    font-size: 15px !important;
    padding: 12px 20px !important;
    width: 100% !important;
  }
}

/* --- Global: Grid Collapse --- */
@media (max-width: 480px) {
  .kupr-grid-collapse {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}
@media (max-width: 768px) {
  .kupr-grid-2col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --- Global: Table Responsive Wrapper --- */
@media (max-width: 768px) {
  .kupr-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -8px;
    padding: 0 8px;
  }
  .kupr-table-wrap table {
    min-width: 600px;
  }
}

/* --- Global: Flex Column Collapse --- */
@media (max-width: 480px) {
  .kupr-flex-col {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .kupr-flex-col > * {
    width: 100% !important;
  }
}
@media (max-width: 768px) {
  .kupr-flex-wrap {
    flex-wrap: wrap !important;
  }
}

/* --- Global: Spacing Reductions on Mobile --- */
@media (max-width: 480px) {
  .kupr-pad-sm {
    padding: 12px !important;
  }
  .kupr-pad-xs {
    padding: 8px !important;
  }
  .kupr-gap-sm {
    gap: 8px !important;
  }
}

/* --- Global: Full-Width Buttons on Mobile --- */
@media (max-width: 480px) {
  .kupr-btn-full {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
  }
}

/* --- Global: Text Truncation --- */
.kupr-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Global: Card Padding Reduction --- */
@media (max-width: 480px) {
  .kupr-card-mobile {
    padding: 12px !important;
    border-radius: 8px !important;
  }
}

/* --- Global: Stat Numbers Scale Down --- */
@media (max-width: 480px) {
  .kupr-stat-num {
    font-size: 20px !important;
  }
  .kupr-stat-label {
    font-size: 11px !important;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  .kupr-stat-num {
    font-size: 24px !important;
  }
}

/* --- Global: Hide on Mobile / Show on Mobile --- */
@media (max-width: 480px) {
  .kupr-hide-xs {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .kupr-hide-sm {
    display: none !important;
  }
}
@media (min-width: 769px) {
  .kupr-show-sm-only {
    display: none !important;
  }
}

/* --- Price Ticker Mobile --- */
@media (max-width: 480px) {
  #price-ticker-wrap {
    height: 28px !important;
  }
  #price-ticker-wrap .ptk-item {
    font-size: 11px !important;
    padding: 0 10px !important;
  }
  #price-ticker-wrap .ptk-dn,
  #price-ticker-wrap .ptk-up {
    font-size: 11px !important;
  }
}

/* --- Leaderboard Mobile --- */
@media (max-width: 480px) {
  .kupr-lb-avatar {
    width: 32px !important;
    height: 32px !important;
  }
  .kupr-lb-payout {
    font-size: 14px !important;
  }
  .kupr-lb-name {
    font-size: 12px !important;
  }
}

/* --- Scrollbar Thin for Mobile Tables --- */
@media (max-width: 768px) {
  .kupr-table-wrap::-webkit-scrollbar {
    height: 4px;
  }
  .kupr-table-wrap::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
  }
  .kupr-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
  }
}