/* Toolinium - Global Mobile Responsive Fix
   Loaded last on tool pages so it safely overrides tool-specific desktop layouts.
   It also targets touch devices whose browser may report a desktop/tablet viewport.
*/

*, *::before, *::after { box-sizing: border-box !important; }

html, body {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

body {
  margin: 0 !important;
}

.tool-container,
.container,
.main-card,
.main,
.wrapper,
.page,
.app,
.app-container {
  width: min(100%, 1200px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

img, video, canvas, iframe, svg {
  max-width: 100% !important;
}

input, select, textarea, button {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Prevent long labels/URLs/code from creating a horizontal layout. */
h1, h2, h3, h4, h5, h6, p, label, span, a, button, th, td {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

pre, code {
  max-width: 100% !important;
  overflow-x: auto !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

/* Phones and narrow tablets. */
@media (max-width: 1100px) {
  .tool-container { padding: 24px 18px !important; }

  .tool-layout,
  .main-grid,
  .grid,
  .editor-grid,
  .builder-grid,
  .compare-grid,
  .results-grid,
  .res-grid,
  .info-grid,
  .controls,
  .layout,
  .workspace,
  .content-grid,
  .analysis-grid,
  .ocr-grid,
  .ocr-advanced,
  .hd-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .features,
  .steps,
  .popular-grid,
  .modes-grid,
  .mode-grid,
  .type-grid,
  .style-grid,
  .tone-grid,
  .font-options,
  .presets-grid,
  .level-cards,
  .const-grid,
  .all-grid,
  .color-grid,
  .tpl-grid,
  .niche-grid,
  .ocr-grid,
  .stats-grid,
  .stats-row,
  .stat-grid,
  .stats,
  .history-grid,
  .bulk-grid,
  .form-row,
  .form-row3,
  .thumb-grid,
  .btn-grid-3,
  .btn-grid-4,
  .btn-grid-5 {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .tool-title, .title {
    max-width: 100% !important;
    width: 100% !important;
  }

  .topbar, .header {
    width: 100% !important;
    min-width: 0 !important;
  }

  .card, .panel, .sec-card, .feature, .preview-section,
  .settings-panel, .live-preview-container, .preview-box {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .actions, .btns, .download-actions, .setting-controls, .color-picker-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
}

/* Real touch phones: works even when the browser is using a desktop-style
   layout viewport, which is the common cause of the two-column mobile bug. */
@media (hover: none) and (pointer: coarse) {
  .tool-container,
  .container,
  .main-card,
  .main,
  .wrapper,
  .page,
  .app,
  .app-container {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .tool-layout,
  .main-grid,
  .grid,
  .editor-grid,
  .builder-grid,
  .compare-grid,
  .results-grid,
  .res-grid,
  .info-grid,
  .controls,
  .layout,
  .workspace,
  .content-grid,
  .analysis-grid,
  .ocr-grid,
  .ocr-advanced,
  .hd-grid,
  .features,
  .steps,
  .popular-grid,
  .modes-grid,
  .mode-grid,
  .type-grid,
  .style-grid,
  .tone-grid,
  .font-options,
  .presets-grid,
  .level-cards,
  .const-grid,
  .all-grid,
  .color-grid,
  .tpl-grid,
  .niche-grid,
  .stats-grid,
  .stats-row,
  .stat-grid,
  .stats,
  .history-grid,
  .bulk-grid,
  .form-row,
  .form-row3,
  .thumb-grid,
  .btn-grid-3,
  .btn-grid-4,
  .btn-grid-5 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .topbar, .header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .logo, .brand {
    min-width: 0 !important;
  }

  .home-btn, .btn, .button, button {
    min-height: 44px !important;
  }

  .btns, .actions, .download-actions {
    flex-direction: column !important;
    width: 100% !important;
  }

  .btns > *, .actions > *, .download-actions > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .position-grid, .hd-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .format-selector, .type-tabs {
    flex-wrap: wrap !important;
  }

  .format-btn, .tab-btn {
    min-width: 0 !important;
    flex: 1 1 45% !important;
  }

  .tool-title, .title {
    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 1.2 !important;
    width: 100% !important;
  }

  .tool-subtitle, .desc, .subtitle {
    width: 100% !important;
    max-width: 100% !important;
  }

  .upload, .upload-box, .t7-dropzone, .b8drop {
    padding: 24px 14px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 600px) {
  body { padding: 14px 8px !important; }
  .tool-container { padding: 18px 14px !important; border-radius: 18px !important; }
  .container, .main-card, .main { padding: 16px !important; }

  .features, .steps { gap: 10px !important; }
  .card, .panel, .feature, .sec-card { padding: 16px !important; }

  .position-grid, .hd-options, .history-grid, .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 380px) {
  .tool-container { padding: 14px 11px !important; }
  .container, .main-card, .main { padding: 13px !important; }
  .position-grid, .hd-options, .history-grid, .stats-grid {
    grid-template-columns: 1fr !important;
  }
}