/* =============================================================
   SAYJOBCITY — All Calculators MOBILE RESPONSIVE
   ============================================================= */

.page-all-calcs { overflow-x: hidden; width: 100%; box-sizing: border-box; }
.page-all-calcs * { box-sizing: border-box; }
.page-all-calcs .container { padding: 0 16px; overflow-x: hidden; }

/* =============================================================
   TABLET (max-width: 860px)
   Search + sort stack vertically; 2-col grid
   ============================================================= */
@media (max-width: 860px) {

  /* Search bar: full width on mobile/tablet */
  .calcs-top-row {
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  .calcs-search-row {
    width: 100% !important;
    flex: none !important;
  }
  .calcs-sort-inline {
    width: 100% !important;
  }
  .sort-select {
    width: 100% !important;
    font-size: 14px !important;
    padding: 9px 12px !important;
  }

  /* Layout stack */
  .calcs-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .calcs-sidebar {
    position: static !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  /* Category pills horizontal scroll */
  .calcs-cat-list {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    border-radius: 10px !important;
    margin-bottom: 14px !important;
  }
  .calcs-cat-list::-webkit-scrollbar { display: none !important; }
  .calcs-cat-item {
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 8px 12px !important;
    border-bottom: none !important;
    border-right: 1px solid var(--border-light) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: 64px !important;
    text-align: center !important;
    font-size: 11px !important;
  }
  .calcs-cat-item:last-child { border-right: none !important; }
  .cci-icon  { font-size: 16px !important; }
  .cci-count { display: none !important; }

  /* 2-column grid */
  .calcs-grid-3 {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* =============================================================
   MOBILE (max-width: 600px)
   ============================================================= */
@media (max-width: 600px) {

  .page-all-calcs { padding: 12px 0 40px !important; }
  .page-all-calcs .container { padding: 0 14px !important; }
  .page-all-calcs-header h1 { font-size: 20px !important; }

  /* Search bar — full width, good size */
  .calcs-search-row {
    width: 100% !important;
    padding: 9px 12px !important;
    gap: 8px !important;
  }
  .calcs-search-row svg { width: 14px !important; height: 14px !important; }
  .calcs-search-row input[type="search"] {
    font-size: 16px !important; /* prevents iOS zoom */
    width: 100% !important;
  }
  .calcs-search-row .btn-sm {
    padding: 7px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Sort full width */
  .sort-select {
    width: 100% !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
  }

  /* Category pills */
  .calcs-cat-item {
    padding: 8px 10px !important;
    min-width: 56px !important;
    font-size: 10.5px !important;
  }
  .cci-icon  { font-size: 15px !important; }

  /* Grid header */
  .calcs-main-header h2 { font-size: 15px !important; }

  /* Tool cards: 2 columns */
  .calcs-grid-3 {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .tool-card { padding: 11px !important; gap: 8px !important; }
  .tool-card-icon { width: 34px !important; height: 34px !important; font-size: 17px !important; }
  .tool-card-name { font-size: 12px !important; font-weight: 700 !important; }
  .tool-card-desc { font-size: 11px !important; }
  .tool-card-link { font-size: 11px !important; }

  /* Pagination */
  .page-num { min-width: 32px !important; height: 32px !important; font-size: 12px !important; }
}

/* =============================================================
   SMALL PHONES (max-width: 380px) — single column
   ============================================================= */
@media (max-width: 380px) {
  .page-all-calcs .container { padding: 0 12px !important; }
  .page-all-calcs-header h1 { font-size: 18px !important; }

  .calcs-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .tool-card {
    flex-direction: row !important;
    align-items: center !important;
    padding: 10px !important;
  }
  .tool-card-footer {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
  }
}

/* =============================================================
   MODAL — responsive bottom sheet on mobile
   ============================================================= */
@media (max-width: 600px) {
  .request-calc-modal-overlay { padding: 12px !important; align-items: flex-end !important; }
  .req-modal-box {
    padding: 20px 16px !important;
    border-radius: 14px 14px 0 0 !important;
    max-width: 100% !important;
    max-height: 85vh !important;
  }
}