/* ════════════════════════════════════════════════════════
   IMAGEYANTRA — RESPONSIVE.CSS
   Mobile/tablet layout fixes. Loaded after main.css.
   Breakpoints: 1040 → 880 → 768 → 640 → 480 → 380px
════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL OVERFLOW PREVENTION ───────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
*, *::before, *::after {
  box-sizing: border-box;
}
img, canvas, svg, video {
  max-width: 100%;
  height: auto;
}

/* ── 2. NAV — ALWAYS ON TOP ───────────────────────────── */
.nav              { z-index: 1000 !important; }
.nav-dropdown-menu{ z-index: 1100 !important; }
.nav-drawer       { z-index: 990  !important; }
.nav-backdrop     { z-index: 980  !important; }

/* ── 3. AD BOXES — NO LAYOUT CONTAIN ────────────────── */
/* contain:layout creates a stacking context that traps
   the nav dropdown behind the ad box. Use style only. */
.ad-banner-top,
.ad-sidebar {
  contain: style !important;
}

/* ── 4. DROP ZONE — CENTERED, COMPACT ─────────────────── */
/* Force centering on every drop zone (label or div) */
.drop-zone,
label.drop-zone {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.drop-hint {
  justify-content: center !important;
}
/* Prevent icons inside drop-zone SVGs from being oversized */
.drop-icon svg {
  width: 32px;
  height: 32px;
}

/* ── 5. TOOL LAYOUT — SIDEBAR STACKING ────────────────── */
@media (max-width: 1040px) {
  .tool-body-inner {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
  }
  .tool-main {
    order: 1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .tool-sidebar{ order: 3; min-width: 0; }
}

/* ── 6. TOOL GRID — STACK ON TABLET/MOBILE ────────────── */
@media (max-width: 880px) {
  .tool-grid {
    grid-template-columns: 1fr !important;
    width: 100%;
    box-sizing: border-box;
  }
  .tool-controls {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .tool-preview-area {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .tool-preview-area .card {
    min-height: 260px;
  }
}

/* ── 6b. CARD FULL-WIDTH ON MOBILE ───────────────────── */
@media (max-width: 540px) {
  .tool-main .card,
  .tool-controls .card,
  .tool-preview-area .card {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ── 7. DROP ZONE — MOBILE SIZING ────────────────────── */
@media (max-width: 768px) {
  .drop-zone {
    min-height: 150px !important;
    max-height: 210px !important;
    padding: 20px 16px !important;
  }
  .drop-icon {
    width: 44px !important;
    height: 44px !important;
  }
}
@media (max-width: 480px) {
  .drop-zone {
    min-height: 140px !important;
    max-height: 190px !important;
    padding: 16px 14px !important;
  }
  .drop-icon {
    width: 40px !important;
    height: 40px !important;
  }
  .drop-title { font-size: 15px; }
  .drop-sub   { font-size: 12px; }
}

/* ── 8. CARDS & FLEX CHILDREN MIN-WIDTH ──────────────── */
.card, .tool-card, .blog-card, .feature-card,
.img-thumb, .stat-badge, .level-btn {
  min-width: 0;
}

/* ── 9. REMOVE-BG: CONFIGSTEP FIXES ─────────────────── */
.img-info-pill {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.iip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-note {
  overflow: hidden;
  word-break: break-word;
}
.model-note span, .model-note p {
  flex: 1;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
}
.swatch-row {
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}
@media (max-width: 480px) {
  .remove-cta    { width: 100%; }
  .ai-badge, .free-badge { font-size: 9px; padding: 4px 8px; }
  #resultActions .btn,
  #resultActions button  { width: 100%; justify-content: center; }
}

/* ── 10. COMPARE SLIDER ──────────────────────────────── */
.compare-wrap {
  width: 100%;
  max-width: 100%;
}
.compare-after-img {
  max-width: 100%;
}
@media (max-width: 640px) {
  .compare-knob { width: 28px !important; height: 28px !important; }
  .compare-after-img { max-height: 340px !important; object-fit: contain; }
}

/* ── 11. ROTATE & FLIP ───────────────────────────────── */
@media (max-width: 640px) {
  .rf-btn-grid, .rf-flip-grid { width: 100%; }
  #rotDownloadBtn { width: 100%; }
}

/* ── 12. CROP TOOL ───────────────────────────────────── */
@media (max-width: 768px) {
  .crop-stage      { min-height: 240px; }
  .crop-stage-inner{ max-height: 380px; }
  #cropImage       { max-height: 380px; }
  .ratio-scroll-wrap{ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 480px) {
  .crop-stage      { min-height: 200px; }
  .crop-stage-inner{ max-height: 300px; }
}

/* ── 13. COMPRESS TOOL ───────────────────────────────── */
@media (max-width: 640px) {
  .result-stats { grid-template-columns: 1fr 1fr !important; }
  .result-stat-arrow { display: none; }
  .target-row { flex-wrap: wrap; }
  .target-row select { width: 100%; }
}

/* ── 14. PDF TOOLS ───────────────────────────────────── */
@media (max-width: 768px) {
  .file-list-name  { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-grid       { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }
  .arrange-toolbar, .manage-toolbar { flex-direction: column; align-items: flex-start; width: 100%; }
  .arrange-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .download-arranged-btn, .change-file-btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .page-grid   { grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); gap: 8px; }
  .merge-btn   { font-size: 14px; padding: 13px 16px; }
}

/* ── 15. IMAGE-TO-PDF ────────────────────────────────── */
@media (max-width: 640px) {
  .pdf-img-grid  { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
  .generate-btn  { font-size: 14px; padding: 13px 16px; }
}

/* ── 16. FORMS & INPUT ROWS ──────────────────────────── */
@media (max-width: 640px) {
  .dim-row         { flex-wrap: wrap; }
  .dim-row input   { flex: 1 1 40%; min-width: 0; }
  .target-size-row { flex-wrap: wrap; }
  .angle-row       { flex-wrap: wrap; }
  .contact-grid    { grid-template-columns: 1fr !important; gap: 20px; }
}

/* ── 17. HOMEPAGE ────────────────────────────────────── */
@media (max-width: 540px) {
  .hero-actions            { flex-direction: column; align-items: stretch; }
  .hero-actions .btn       { width: 100%; justify-content: center; }
  .coming-soon             { flex-direction: column; text-align: center; padding: 20px 16px; }
  .coming-soon-icon        { margin: 0 auto; }
  .cta-btn                 { width: 100%; justify-content: center; display: flex; }
}

/* ── 18. STATS ROW ───────────────────────────────────── */
@media (max-width: 480px) {
  .stats-row  { flex-wrap: wrap; gap: 8px; }
  .stat-badge { min-width: 60px; flex: 1; }
}

/* ── 19. ACTION BAR ──────────────────────────────────── */
@media (max-width: 480px) {
  .action-bar      { flex-direction: column; }
  .action-bar .btn { width: 100%; min-width: 0; justify-content: center; }
}

/* ── 20. TOAST ───────────────────────────────────────── */
@media (max-width: 480px) {
  #toast {
    left: 16px; right: 16px;
    transform: translateY(20px);
    max-width: calc(100vw - 32px);
    white-space: normal;
    text-align: center;
  }
  #toast.show { transform: translateY(0); }
}

/* ── 21. PRESET & LEVEL BUTTONS ─────────────────────── */
@media (max-width: 480px) {
  .level-btns { flex-wrap: wrap; gap: 6px; }
  .level-btn  { flex: 1 1 calc(33% - 6px); min-width: 52px; font-size: 12px; }
  .preset-btns{ flex-wrap: wrap; gap: 6px; }
  .preset-btns .preset-btn { flex: 1 1 calc(50% - 6px); }
}

/* ── 22. MODAL ───────────────────────────────────────── */
@media (max-width: 640px) {
  .modal-overlay { padding: 12px; align-items: flex-end; }
  .modal-box     { max-height: 85vh; border-radius: var(--r-lg) var(--r-lg) 0 0; width: 100%; }
  .modal-body iframe { height: 320px; }
  .modal-header, .modal-footer { padding: 14px 16px; }
  .modal-body    { padding: 16px; }
}

/* ── 23. CONTENT & BLOG PAGES ────────────────────────── */
@media (max-width: 640px) {
  .content-body table,
  .article-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .content-body, .article-body { padding-left: var(--page-px); padding-right: var(--page-px); }
  .feature-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .blog-grid { grid-template-columns: 1fr; }
  .section-heading { font-size: 22px; }
}

/* ── 24. FOOTER ──────────────────────────────────────── */
@media (max-width: 480px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-bottom-links { flex-wrap: wrap; gap: 12px; }
}

/* ── 25. NAVBAR SMALL SCREENS ────────────────────────── */
@media (max-width: 380px) {
  .nav-logo-text { font-size: 17px; }
  .nav-logo-img  { width: 30px; height: 30px; }
}

/* ══ v8 MOBILE NAVBAR FIXES ════════════════════════════
   Root cause of transparent mobile drawer:
   - backdrop-filter: blur() on .nav-drawer can fail on some
     Android Chrome versions, making background appear transparent
   - Fix: force solid opaque background, remove backdrop-filter
     fallback, ensure body scroll lock works correctly
════════════════════════════════════════════════════════ */

/* Force solid background on mobile drawer — no backdrop-filter */
.nav-drawer {
  background: #ffffff !important;
  /* Remove backdrop-filter which causes transparency on some Android browsers */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Ensure it covers content fully */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Guarantee it's always on top of everything */
  z-index: 990 !important;
}

/* Backdrop overlay — solid semi-transparent, no blur on mobile */
@media (max-width: 899px) {
  .nav-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(13, 11, 26, 0.55) !important;
  }
}

/* Ensure nav bar itself stays solid and on top */
.nav {
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ── Prevent body scroll when nav drawer is open ── */
/* CRITICAL FIX: Do NOT use position:fixed here.
   position:fixed on body causes the entire page to repaint on Android Chrome,
   creating ghost/duplicate renders of elements like configStep badges.
   overflow:hidden alone blocks scroll-through on Android Chrome.
   iOS scroll-through is handled via JS touch-lock in nav.js instead. */
body.nav-open {
  overflow: hidden !important;
}

/* ── Prevent duplicate preview rendering ── */
/* Any container that re-renders content should clear itself first.
   This forces a layout recalculation before new content is painted. */
[data-preview-container] {
  contain: layout style;
}

/* ── Fix: remove-bg configStep mobile overflow ── */
@media (max-width: 540px) {
  #configStep,
  .rb-config-step {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .tool-grid.remove-bg-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Compress PDF result stats — stack on very small screens ── */
@media (max-width: 400px) {
  .result-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px;
  }
  .result-stat-arrow { display: none; }
  .result-stat .rs-val { font-size: 14px; }
}