/* ==========================================================================
   EarnBean — Device Comfort Layer
   Sob device (phone/tablet/desktop) e consistent, readable, tap-friendly.
   Loaded LAST in the layout so it can safely normalize the edges.
   ========================================================================== */

/* 1. Horizontal scroll killer — content clips instead of breaking layout */
html, body { overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; }

/* 2. iOS zoom-on-focus fix: inputs must be ≥16px on touch devices (all widths,
   iPads zoom too). Desktop hover devices are exempt. */
input, select, textarea { font-size: 16px; }
@media (hover: hover) and (pointer: fine) {
  input, select, textarea { font-size: inherit; }
}
@media (max-width: 575.98px) {
  body { font-size: 15px; }
  input, select, textarea { font-size: 16px !important; }
}

/* 3. Tap-target comfort: actionable chips/links/badges get a bigger touch box */
.btn { min-height: 42px; }
.form-control, .form-select { min-height: 44px; }
.quick-pct-btn,
.fc-wall-tag,
.fc-bonus-pill,
.cashout-cat-btn,
.mobile-bottom-item {
  min-height: 42px;
}

/* 4. Tables on narrow screens: tighter padding, no forced nowrap overflow */
@media (max-width: 575.98px) {
  .table th, .table td { padding: 8px 10px; font-size: 13.5px; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
  /* leaderboard inline column widths stop fighting the phone */
  .table th[style*="width"], .table td[style*="width"] { width: auto !important; }
}

/* 5. Referral/leaderboard tables compress to essentials on very small screens */
@media (max-width: 575.98px) {
  .table .d-none-mobile { display: none; }
}

/* 6. Modals: full-bleed on phones instead of floating cards */
@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 0.4rem;
    max-width: calc(100vw - 0.8rem) !important;
  }
  .modal-content { border-radius: 14px; }
  /* wall iframe keeps usable height with mobile browser chrome */
  #offerwallModal .fc-wall-frame-wrap { height: calc(100dvh - 130px) !important; min-height: 0 !important; }
  /* cashout modal sits comfortably */
  #withdrawModal .modal-dialog { margin: 0.4rem; }
}

/* 7. Headings scale down gently on small screens (no awkward wraps) */
@media (max-width: 575.98px) {
  h1 { font-size: 1.45rem; }
  h2 { font-size: 1.25rem; }
  .heading h1 { font-size: 1.35rem; }
}

/* 8. Desktop ≥1600px: cap content width so big monitors get centered app feel */
@media (min-width: 1600px) {
  .overall-container { max-width: 1560px; margin-left: auto; margin-right: auto; }
}

/* 9. Tablet sweet spot (768–991px): 2-col grids breathe */
@media (min-width: 768px) and (max-width: 991.98px) {
  .container { padding-left: 20px; padding-right: 20px; }
}

/* 10. Kill double-tap zoom delay artifacts on action rows */
.offer-card, .cashout-card, .fc-partner-card, .wd-card, .mission-card {
  touch-action: manipulation;
}

/* 11. Text wrap safety: long offer titles never blow out cards.
   Chips/pills are excluded — breaking a label mid-word (GEMIAD → GEM IAD)
   looks like a bug; they shrink/hide instead. */
.offer-card .cashout-name,
.fc-partner-card,
.wd-card,
.table td {
  overflow-wrap: anywhere;
}
.fc-cat-chip,
.fc-offer-hpayout {
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Payout + chip share one row: the chip never breaks mid-word — it wraps
   whole words to a second line and can hide on small phones where space
   is tight. The payout (money info) always stays visible. */
.fc-offer-hrow { min-width: 0; }
.fc-offer-hrow .fc-cat-chip {
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: normal;
  line-height: 1.4;
  text-align: left;
  max-width: 88px;
}
@media (max-width: 480px) {
  .fc-offer-hrow .fc-cat-chip { display: none; }
}

/* 12. Guest (home) hero section on small phones */
@media (max-width: 575.98px) {
  .guest-layout .overall-container { padding-left: 14px; padding-right: 14px; }
}

/* 13. Audit fixes @360: navbar right-section overflowed (right=438 on 360px screen).
   Hide the nice-to-have header buttons on very small phones — balance + bell stay. */
@media (max-width: 439.98px) {
  .navbar .right-section { gap: 4px; }
  .navbar .right-section #theme-toggle-btn,
  .navbar .right-section #chat-toggle,
  .navbar .right-section .lang-switcher { display: none; }
  .navbar .right-section .my-rounded-btn { width: 32px; height: 32px; font-size: 12.5px; }
  .wallet-dropdown-btn { padding: 6px 9px !important; font-size: 11.5px !important; }
}

/* 14. Bottom-nav labels: readable size + comfortable tap target on phones. */
@media (max-width: 575.98px) {
  .mobile-bottom-item { font-size: 11.5px !important; padding: 9px 4px !important; }
  .mobile-bottom-item i { font-size: 19px !important; }
}

/* 15. .cashout-info badge is 26px visual — expand the invisible hit area to 44px.
   (parent is position:absolute already, so an ::after inset works) */
.cashout-info::after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
}

/* 16. Empty-src imgs (JS-filled later) must not request the site root / flash a
   broken box. Placeholder-marked ones stay hidden until JS sets a real src. */
img[data-placeholder] { opacity: 0; transition: opacity .15s ease; }
img[data-placeholder]:not([src=""]) { opacity: 1; }