/* ─────────────────────────────────────────────
   responsive.css — Mobile / tablet breakpoints
   ───────────────────────────────────────────── */

/* ── Tablet ── */
@media (max-width: 900px) {
  .markets-layout {
    grid-template-columns: 1fr;
  }
  .create-market-box {
    position: static;
  }
  .profile-layout {
    grid-template-columns: 1fr;
  }
  .profile-card {
    position: static;
  }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  /* Navbar: hide desktop links, keep logo + actions */
  .navbar {
    padding: 0 0.75rem;
    height: 52px;
  }
  .nav-links { display: none; }
  
  /* Mobile: Smaller logo */
  .nav-logo-img {
    width: 28px;
    height: 28px;
  }
  .nav-logo-text {
    font-size: 1rem;
  }
  .nav-logo {
    gap: 6px;
  }
  
  /* Mobile: Smaller buttons */
  .nav-actions {
    gap: 0.5rem;
  }
  .nav-actions .btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.7rem;
  }

  /* Token wallet & streak counter */
  .token-wallet {
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
  }
  .token-wallet-icon {
    width: 16px;
    height: 16px;
  }
  .streak-counter {
    padding: 0.25rem 0.6rem;
    font-size: 0.7rem;
  }
  .streak-counter .streak-icon {
    font-size: 0.85rem;
  }

  /* Hero */
  .hero {
    padding: 2rem 1.25rem 2.5rem;
    min-height: auto;
  }
  .hero h1 { font-size: 2rem; }
  .hero p  { font-size: 0.9rem; }
  .hero-logo { width: 90px; height: 90px; }
  .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-badge { font-size: 0.65rem; }

  /* Stats strip - Mobile: Horizontal scroll */
  .stats-strip { 
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
    padding: 0.75rem 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .stats-strip::-webkit-scrollbar { display: none; }
  .stat-item {
    min-width: 100px;
    flex: 0 0 auto;
    padding: 0.75rem 0.5rem;
    border-right: none;
    border-bottom: none;
    text-align: center;
  }
  .stat-item:not(:last-child) {
    border-right: 1px solid var(--border);
  }
  .stat-num {
    font-size: 1.1rem;
    display: block;
    margin-bottom: 0.2rem;
  }
  .stat-label {
    font-size: 0.6rem;
    line-height: 1.3;
    display: block;
  }



  /* Market cards */
  .market-cards { grid-template-columns: 1fr; }
  .market-card, .market-card-full {
    padding: 1.1rem;
  }
  .market-card h3, .market-card-full h3 {
    font-size: 0.95rem;
  }

  /* Vote buttons on market cards: bigger touch targets */
  .market-card-full button[onclick*="openVote"] {
    padding: 1rem !important;
    font-size: 1rem !important;
  }

  /* Rewards */
  .rewards-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

  /* Section padding - More compact on mobile */
  .section { padding: 1.5rem 1rem; }
  .section h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
  .page-header { padding: 1.25rem 1rem 1rem; }
  .page-header h1 { font-size: 1.5rem; }

  /* Markets layout */
  .markets-layout,
  .profile-layout { padding: 1rem; }

  /* Modal full-screen on mobile */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal {
    max-width: 100% !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    padding: 1.5rem !important;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Vote modal: bottom sheet with scrollable content */
  #polymarket-vote-modal .modal {
    border-radius: 16px 16px 0 0 !important;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  #polymarket-vote-modal .modal > div:first-child {
    flex-shrink: 0;
  }
  
  #polymarket-vote-modal .modal > div:nth-child(2) {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
  }
  
  #polymarket-vote-modal .modal > div:last-child {
    flex-shrink: 0;
    padding: 1rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--off-black);
    border-top: 1px solid var(--border);
  }

  /* Profile layout */
  .profile-layout { gap: 1rem; }
  .profile-card { padding: 1.25rem; }
  .token-display .amount { font-size: 1.75rem; }

  /* Footer */
  .footer { padding: 1.5rem 1.25rem; }
  .footer-top { flex-direction: column; gap: 1.25rem; }

  /* Steps grid - 2x2 on mobile */
  .steps-grid { 
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .step-card { 
    padding: 1rem;
    text-align: center;
  }
  .step-card .step-num {
    font-size: 0.65rem;
    margin-bottom: 0.5rem;
  }
  .step-card .step-icon {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
  }
  .step-card h3 {
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
  }
  .step-card p {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--white2);
  }

  /* Admin panel mobile */
  .admin-markets-filters { gap: 0.35rem; }
  .admin-filter-btn { padding: 0.45rem 0.7rem; font-size: 0.78rem; }

  /* Category filter buttons on markets page */
  #market-filters { gap: 0.35rem; }
  .mkt-filter-btn { padding: 0.4rem 0.65rem; font-size: 0.7rem; }

  /* Toast: centered, wider */
  .toast-dynamic {
    left: 1rem !important;
    right: 1rem !important;
    width: auto !important;
    bottom: 100px !important; /* above mobile nav and safe area */
    transform: translateX(0) translateY(100px) !important;
  }
  
  /* Vote modal button always visible */
  #confirm-vote-btn {
    min-height: 52px;
    font-size: 1.05rem;
  }
  
  /* Smooth scroll for modal content */
  #polymarket-vote-modal {
    -webkit-overflow-scrolling: touch;
  }

  /* Page content: no top padding overlap */
  .page { padding-top: 56px; }

  /* ═════════════════════════════════════════════════════════════════════════════
     CROWDVERSE REDESIGN - Mobile Responsive Styles
     ═════════════════════════════════════════════════════════════════════════════ */

  /* Enhanced Market Cards */
  .market-card-v2 {
    padding: 1rem;
  }
  
  .market-question-v2 {
    font-size: 0.95rem;
    line-height: 1.35;
  }
  
  .outcome-bar-wrapper {
    height: 32px;
  }
  
  .outcome-bar-yes, .outcome-bar-no {
    font-size: 0.7rem;
  }
  
  .outcome-bar-label span:last-child {
    display: none; /* Hide option labels on mobile, show only % */
  }
  
  .market-card-stats {
    padding: 0.6rem;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  
  .stat-item-v2 {
    font-size: 0.7rem;
  }
  
  .stat-item-v2 .stat-icon {
    font-size: 0.8rem;
  }
  
  .countdown-timer {
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
  }
  
  .market-vote-buttons {
    gap: 0.5rem;
  }
  
  .vote-btn-v2 {
    padding: 0.7rem;
    font-size: 0.85rem;
  }
  
  .vote-btn-v2 .btn-label {
    font-size: 0.7rem;
  }

  /* Wizard */
  .wizard-card {
    padding: 1.5rem;
  }
  
  .wizard-illustration {
    width: 100px;
    height: 100px;
    font-size: 2.5rem;
  }
  
  .wizard-title {
    font-size: 1.2rem;
  }
  
  .wizard-desc {
    font-size: 0.85rem;
  }

  /* Badges */
  .badges-container {
    gap: 0.5rem;
  }
  
  .badge {
    min-width: 70px;
    padding: 0.6rem 0.4rem;
  }
  
  .badge-icon {
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
  }
  
  .badge-name {
    font-size: 0.65rem;
  }

  /* Challenges */
  .challenge-card {
    padding: 0.875rem;
  }
  
  .challenge-title {
    font-size: 0.85rem;
  }
  
  .challenge-icon {
    font-size: 1rem;
  }
  
  .challenge-reward {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
  }
  
  .challenge-desc {
    font-size: 0.75rem;
  }

  /* Empty States */
  .empty-state {
    padding: 2rem 1.5rem;
  }
  
  .empty-state-illustration {
    font-size: 3rem;
  }
  
  .empty-state-title {
    font-size: 1.1rem;
  }

  /* Collapsible Sections */
  .collapsible-header {
    padding: 0.875rem 1rem;
  }
  
  .collapsible-header-title {
    font-size: 0.85rem;
  }
  
  .collapsible-inner {
    padding: 0 1rem 1rem;
    font-size: 0.8rem;
  }

  /* Safety Popup */
  .safety-popup-content {
    padding: 1.5rem;
    margin: 1rem;
  }
  
  .safety-popup-icon {
    font-size: 2.5rem;
  }
  
  .safety-popup h3 {
    font-size: 1.1rem;
  }

  /* Referral Box */
  .referral-box {
    padding: 1rem;
  }
  
  .referral-icon {
    font-size: 1.25rem;
  }
  
  .referral-title {
    font-size: 0.9rem;
  }
  
  .referral-desc {
    font-size: 0.8rem;
  }
  
  .referral-code-box {
    flex-direction: column;
  }
  
  .referral-code-input {
    font-size: 0.75rem;
    padding: 0.6rem;
  }
}

/* ── Very small screens ── */
@media (max-width: 380px) {
  .hero h1 { font-size: 1.75rem; }
  .hero-logo { width: 80px; height: 80px; }
  .stat-item { min-width: 100%; }
  .modal { padding: 1.25rem !important; }
  
  /* Extra small market cards */
  .market-card-v2 {
    padding: 0.875rem;
  }
  
  .market-category-badge {
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
  }
  
  .market-question-v2 {
    font-size: 0.9rem;
  }
  
  .market-card-stats {
    gap: 0.5rem;
  }
  
  .stat-item-v2 {
    font-size: 0.65rem;
  }
}

/* ── Touch improvements (all mobile) ── */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; }
  .nav-link, .modal-tab, .vote-btn, .mkt-filter-btn {
    min-height: 40px;
  }
  .market-card { cursor: pointer; }
  /* Prevent double-tap zoom */
  button, a { touch-action: manipulation; }
  /* Bigger close buttons */
  .modal-close { width: 40px; height: 40px; font-size: 1.4rem; }
  /* Form inputs: bigger for touch */
  .form-input, .form-select { font-size: 16px; /* prevents iOS zoom */ padding: 0.75rem 1rem; }

  /* Outcomes in vote modal: bigger tap targets */
  .outcome-btn { min-height: 60px; }
  
  /* Touch improvements for new components */
  .vote-btn-v2 { min-height: 52px; }
  .badge { min-height: 80px; }
  .challenge-card { min-height: 90px; }
  .collapsible-header { min-height: 48px; }
}

/* ── Safe area insets (iPhone notch/home indicator) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #mobile-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(64px + env(safe-area-inset-bottom));
  }
  @media (max-width: 640px) {
    .page, body {
      padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
  }
}