@media (max-width: 780px) {
  /* Fullscreen modal – no scroll vertical */
  .subscription-modal { padding: 0; align-items: center; }
  .subscription-modal-content {
    width: 100%; max-width: 100%; height: 100vh; max-height: 100vh; border-radius: 0;
    padding: 12px 6px 8px; display:flex; flex-direction:column; overflow:hidden;
  }
  .subscription-modal-header { margin:0 0 6px; padding:0 0 8px; }
  .header-content h2 { font-size: 1.15rem; margin-bottom:2px; }
  .header-subtitle { font-size:0.55rem; line-height:1.2; }
  .close-modal-btn { width:34px; height:34px; font-size:1rem; }

  /* Hide heavy desktop glows */
  .subscription-modal-content { box-shadow:none; }

  /* Status info collapse to a slim pill if present */
  .subscription-status-content.active { padding:10px 12px; border-radius:14px; }
  .subscription-status-content.active h3 { font-size:0.85rem; margin-bottom:4px; }
  .subscription-status-content.active .subscription-time { font-size:0.6rem; margin:4px 0; }
  .subscription-status-content.active .subscription-message { font-size:0.55rem; line-height:1.3; margin-top:6px; padding-top:6px; }

  /* Plan cards: horizontally swipeable, very short */
  .subscription-plan-section { margin:4px 0 8px; }
  .subscription-plan-section h3 { font-size:0.75rem; margin:0 0 4px; }
  .subscription-plan-section h3::after { display:none !important; }
  .plan-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; margin:2px 0 4px; padding:0; overflow:visible; width:100%; }
  .plan-card { min-width:0; max-width:100%; min-height:140px; padding:8px 6px 6px; border-radius:10px; gap:5px; }
  /* Shorter cards */
  .plan-card { min-height:120px; padding:6px 5px 6px; gap:4px; }
  /* Prevent upward shift of selected card */
  .plan-card.selected { transform:none !important; }
  .plan-icon { width:32px; height:32px; font-size:15px; margin:0; }
  .plan-card h4 { font-size:0.6rem; }
  .plan-price { font-size:0.6rem; }
  .plan-duration { font-size:0.45rem; }
  .plan-price-container { gap:1px; margin:0 0 2px; }
  .plan-features { min-height:0; font-size:0.38rem; line-height:1.1; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .plan-divider { margin:2px 0; }
  .plan-savings { font-size:0.4rem; }
  /* Hide savings percent labels on mobile */
  .plan-savings { display:none !important; }
  .plan-select-btn { padding:4px 6px; font-size:0.45rem; border-radius:6px; width:100%; display:flex; justify-content:center; white-space:nowrap; }

  /* Price summary shrunk */
  .price-summary { margin:4px 0 6px; padding:10px 10px 8px; border-radius:10px; }
  .price-row { padding:4px 0; font-size:0.55rem; }
  .price-row.total span:last-child { padding:2px 6px; font-size:0.6rem; }
  /* Hide Original Price row on mobile */
  .price-summary .price-row:first-child { display:none !important; }
  /* Remove separator line above Final Price */
  .price-row.total { border-top:none !important; margin-top:2px; padding-top:2px; }

  /* Transaction info compact */
  .transaction-info { padding:10px 10px; gap:10px; font-size:0.55rem; border-radius:14px; margin-bottom:8px; }
  .transaction-info i { width:34px; height:34px; font-size:14px; }
  .transaction-info p { line-height:1.3; font-size:0.55rem; }
  /* Remove dark outer layer / extra frame */
  .transaction-info { background:rgba(25, 163, 173, 0.15) !important; box-shadow:none !important; border:1px solid rgba(255,255,255,0.05) !important; backdrop-filter:none !important; }
  .transaction-info::before, .transaction-info::after { display:none !important; }

  /* Code input / coupon area */
  .code-input-container { margin-top:6px; padding:10px 10px 8px; }
  .code-input-wrapper { gap:6px; }
  .code-input { padding:8px 8px; font-size:0.6rem; border-radius:8px; }
  /* Half-size apply button */
  .code-apply-btn { padding:0 6px; font-size:0.45rem; border-radius:6px; min-height:22px; line-height:1; }
  .code-status { margin-top:6px; font-size:0.55rem; padding:6px 8px; }

  /* Subscribe button fixed bottom bar */
  .modal-actions { margin-top:auto; padding-top:6px; }
  .subscribe-btn { width:100%; padding:10px 12px; font-size:0.7rem; border-radius:12px; gap:6px; }
  .btn-icon { width:18px; height:18px; font-size:0.65rem; }
  .btn-text { font-size:0.65rem; letter-spacing:0.3px; }

  /* Remove complex animations to save space/perf */
  .transaction-info::after, .subscription-modal-content::-webkit-scrollbar, .subscription-plan-section h3::after { display:none !important; }

  /* Ensure no vertical scroll: shrink overflow sections further if needed */
  .subscription-modal-content > * { flex-shrink:0; }
  /* Provide internal scroll only to plans row if overflow height occurs */
  .plan-cards { overflow-x:auto; overflow-y:hidden; }
  
  /* Tabs / code & referral area shrink */
  .tab-item { padding:6px 8px; font-size:0.55rem; }
  .code-input-container { border-radius:10px; }
  .code-input-wrapper { align-items:center; }
  .code-input { font-size:0.55rem; }
  .code-apply-btn { font-size:0.5rem; }
  .code-status { font-size:0.5rem; }
  
  /* Status toggle & bar compact */
  .subscription-status-toggle { padding:8px 10px; font-size:0.55rem; border-radius:10px; }
  .subscription-status-toggle .toggle-icon { font-size:0.8rem; }
  .subscription-status-toggle .chevron-icon { font-size:0.75rem; }
  .status-badge-mini { padding:2px 8px; font-size:0.45rem; }
  
  /* Active status pill inside toggle */
  .subscription-status-toggle .status-badge-mini.active { box-shadow:none; }

  /* EXTRA compact subscription status details */
  .subscription-status-content.active { padding:6px 8px; }
  .subscription-status-content .time-remaining span,
  .subscription-status-content .expiry-date span { font-size:0.55rem; font-weight:500; }
  .subscription-status-content .time-remaining i,
  .subscription-status-content .expiry-date i { font-size:0.55rem; }
  .subscription-status-content .time-remaining { gap:4px; margin:4px 0 2px; }
  .subscription-status-content .expiry-date { gap:4px; margin:2px 0 4px; font-size:0.5rem; padding:4px 6px; border-radius:6px; }
  .subscription-status-content .extension-notice { font-size:0.5rem; line-height:1.25; margin:6px 0 2px; padding:6px 6px 5px; border-radius:8px; background:rgba(255,255,255,0.04); }
  .subscription-status-content .extension-notice i { font-size:0.55rem; }
  /* Hide large decorative elements (if any) */
  .subscription-status-content.active::before { display:none !important; }
  /* Place time remaining & expiry date on one row */
  .subscription-status-content .status-info { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
  /* Force inline layout & remove min-width from desktop */
  .subscription-status-content .status-info .time-remaining,
  .subscription-status-content .status-info .expiry-date { display:flex; flex-direction:row !important; align-items:center; gap:4px; margin:0; min-width:auto !important; }
  .subscription-status-content .status-info .time-remaining i,
  .subscription-status-content .status-info .expiry-date i { width:20px; height:20px; font-size:0.55rem; margin:0; border-radius:6px; }
  .subscription-status-content .status-info .time-remaining span,
  .subscription-status-content .status-info .expiry-date span { font-size:0.55rem; }

  /* WHY THEY STILL STACKED:
    Base stylesheet adds in mobile media query: .status-badge, .time-remaining, .expiry-date { width:100%; }
    That makes each child full-width; with flex-wrap enabled they wrap to separate lines.
    Fix by removing width:100%, disabling wrapping, and forcing flex items to auto width. */
  .subscription-status-content .status-info { flex-wrap:nowrap !important; gap:8px !important; }
  .subscription-status-content .status-info .time-remaining,
  .subscription-status-content .status-info .expiry-date { width:auto !important; flex:0 0 auto !important; }
  .subscription-status-content .status-info .time-remaining span,
  .subscription-status-content .status-info .expiry-date span { white-space:nowrap; }
  
  /* Subscribe / Extend button slim (already reduced earlier) */
  .subscribe-btn { min-height:38px; }
  .subscribe-btn .btn-text { font-size:0.6rem; }
  .subscribe-btn .btn-icon { width:16px; height:16px; font-size:0.6rem; }
  
  /* Hide footer toggle & support button when modal open */
  body.modal-open-subscription .footer-toggle-button,
  body.modal-open-subscription #analyzer-chat-launcher,
  body.modal-open-refdrop .footer-toggle-button,
  body.modal-open-refdrop #analyzer-chat-launcher { display:none !important; }
  body.modal-open-subscription, body.modal-open-refdrop { overflow:hidden !important; }
}

@media (max-width: 360px) {
  .plan-card { min-width:75%; max-width:75%; }
  .plan-card h4 { font-size:0.8rem; }
  .plan-price { font-size:0.8rem; }
}