/* 1.0.339 — compact mobile layout for Remove BG and Upscale. CSS only. */

@media (max-width: 768px) {
  #fotor-root .editor-shell.is-mobile
  :is(.left-panel.left-panel--tool-upscale, .left-panel.left-panel--tool-remove-bg) {
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
  }

  #fotor-root .editor-shell.is-mobile
  :is(.left-panel--tool-upscale, .left-panel--tool-remove-bg) .m-native-panel {
    grid-template-columns: minmax(0, 1fr) clamp(112px, 34vw, 128px) !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 6px 8px !important;
  }

  #fotor-root .editor-shell.is-mobile
  :is(.left-panel--tool-upscale, .left-panel--tool-remove-bg) .m-native-primary {
    align-self: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 9px !important;
    border-radius: 10px !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
  }

  #fotor-root .editor-shell.is-mobile
  :is(.left-panel--tool-upscale, .left-panel--tool-remove-bg) .m-native-primary::before {
    display: none !important;
    content: none !important;
  }

  #fotor-root .editor-shell.is-mobile
  .left-panel--tool-remove-bg .m-native-panel::before {
    content: "AI удалит фон у людей, предметов и товаров." !important;
    font-size: 9.5px !important;
    line-height: 1.3 !important;
  }

  html[lang^="en"] #fotor-root .editor-shell.is-mobile
  .left-panel--tool-remove-bg .m-native-panel::before {
    content: "AI removes backgrounds from people, objects and products." !important;
  }

  html[lang^="uk"] #fotor-root .editor-shell.is-mobile
  .left-panel--tool-remove-bg .m-native-panel::before {
    content: "AI видалить фон у людей, предметів і товарів." !important;
  }

  #fotor-root .editor-shell.is-mobile
  .left-panel--tool-upscale .m-native-block {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    height: 100% !important;
  }

  #fotor-root .editor-shell.is-mobile
  .left-panel--tool-upscale .m-native-block::before {
    margin: 0 2px !important;
    font-size: 8.5px !important;
    line-height: 10px !important;
  }

  #fotor-root .editor-shell.is-mobile
  .left-panel--tool-upscale .m-native-seg {
    height: 34px !important;
    min-height: 34px !important;
    padding: 3px !important;
  }

  #fotor-root .editor-shell.is-mobile
  .left-panel--tool-upscale .m-native-seg-btn {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 4px !important;
    font-size: 9.5px !important;
  }

  /* The title observer can concatenate the tool title with its category. */
  #fotor-root .editor-shell.is-mobile:has(.left-panel--tool-remove-bg)
  .mtool-top-controls[data-sg-tool-title]::before {
    content: "Удалить фон" !important;
  }

  #fotor-root .editor-shell.is-mobile:has(.left-panel--tool-upscale)
  .mtool-top-controls[data-sg-tool-title]::before {
    content: "Качество" !important;
  }

  html[lang^="en"] #fotor-root .editor-shell.is-mobile:has(.left-panel--tool-remove-bg)
  .mtool-top-controls[data-sg-tool-title]::before {
    content: "Remove background" !important;
  }

  html[lang^="en"] #fotor-root .editor-shell.is-mobile:has(.left-panel--tool-upscale)
  .mtool-top-controls[data-sg-tool-title]::before {
    content: "Quality" !important;
  }

  html[lang^="uk"] #fotor-root .editor-shell.is-mobile:has(.left-panel--tool-remove-bg)
  .mtool-top-controls[data-sg-tool-title]::before {
    content: "Видалити фон" !important;
  }

  html[lang^="uk"] #fotor-root .editor-shell.is-mobile:has(.left-panel--tool-upscale)
  .mtool-top-controls[data-sg-tool-title]::before {
    content: "Якість" !important;
  }
}

@media (max-width: 370px) {
  #fotor-root .editor-shell.is-mobile
  :is(.left-panel--tool-upscale, .left-panel--tool-remove-bg) .m-native-panel {
    grid-template-columns: minmax(0, 1fr) 108px !important;
    gap: 6px !important;
  }

  #fotor-root .editor-shell.is-mobile
  :is(.left-panel--tool-upscale, .left-panel--tool-remove-bg) .m-native-primary {
    padding-right: 6px !important;
    padding-left: 6px !important;
    font-size: 10px !important;
  }
}