/* Fotor Photo Editor 1.0.172 — safe mobile special previews + hair color positioning. */

@media (max-width: 768px) {
  /* Requested: lift the tool control row without changing its structure. */
  #fotor-root .editor-shell.is-mobile .mtool-top-controls {
    transform: translateY(-10px) !important;
  }

  /* Special non-photo tiles: replace tiny placeholder icons with real visual previews. */
  #fotor-root .editor-shell.is-mobile .mobile-preset-card.sg-special-preview {
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #11151b !important;
  }

  #fotor-root .editor-shell.is-mobile .mobile-preset-card.sg-special-preview .mobile-preset-thumb {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 9px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  #fotor-root .editor-shell.is-mobile .mobile-preset-card.sg-special-preview .mobile-preset-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5,7,10,.02), rgba(5,7,10,.12) 55%, rgba(5,7,10,.42));
  }

  #fotor-root .editor-shell.is-mobile .mobile-preset-card.sg-special-preview .mobile-preset-thumb > img,
  #fotor-root .editor-shell.is-mobile .mobile-preset-card.sg-special-preview .mobile-preset-thumb > video {
    opacity: 0 !important;
  }

  #fotor-root .editor-shell.is-mobile .mobile-preset-card.sg-special-preview--pose .mobile-preset-thumb {
    background-image: url('previews/pose-mobile.jpg') !important;
  }

  #fotor-root .editor-shell.is-mobile .mobile-preset-card.sg-special-preview--outfit .mobile-preset-thumb {
    background-image: url('previews/outfit-mobile.jpg') !important;
  }

  #fotor-root .editor-shell.is-mobile .mobile-preset-card.sg-special-preview--hair-color .mobile-preset-thumb,
  #fotor-root .editor-shell.is-mobile .mobile-preset-card.sg-special-preview--hair-reference .mobile-preset-thumb {
    background-image: url('previews/hair-mobile.jpg') !important;
  }

  #fotor-root .editor-shell.is-mobile .mobile-preset-card.sg-special-preview--add-person .mobile-preset-thumb {
    background-image: url('previews/add-person-mobile.jpg') !important;
  }

  /* Hair color modal: force it completely inside the phone viewport. */
  body > .hair-color-modal-backdrop,
  body .hair-color-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 10px 10px max(10px, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body > .hair-color-modal-backdrop > .hair-color-modal,
  body .hair-color-modal-backdrop .hair-color-modal {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: min(400px, calc(100vw - 20px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 20px) !important;
    max-height: min(78dvh, 620px) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body .hair-color-modal__grid,
  body .hair-color-modal__rgb,
  body .hair-color-modal__header,
  body .hair-color-modal__apply {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 370px) {
  body > .hair-color-modal-backdrop > .hair-color-modal,
  body .hair-color-modal-backdrop .hair-color-modal {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
  }
}